/* ==========================================================================
   АЛЬПИН НН — таблица стилей
   --------------------------------------------------------------------------
   СОДЕРЖАНИЕ
     1.  Дизайн-система: цвета, типографика, сетка, радиусы, тени, движение
     2.  Базовые сбросы и утилиты
     3.  Кнопки
     4.  Шапка и навигация
     5.  Hero главной страницы
     6.  Блок фактов
     7.  Мобильная панель связи
     8.  Каркас секций, заголовки, ссылки, плейсхолдеры фотографий
     9.  Секции главной: услуга, сравнение, доступ, объекты, доверие, FAQ, контакты
     10. Предварительный расчёт
     11. Внутренние страницы: крошки, hero, карточки, документ
     12. Адаптив — все контрольные точки собраны в конце файла

   ПРАВИЛО: базовое состояние описывается в разделах 1–11,
   все переопределения по ширине экрана — в разделе 12.
   ========================================================================== */

/* ==========================================================================
   ДИЗАЙН-СИСТЕМА
   Утепление фасадов · промышленный альпинизм · Нижний Новгород
   Этап 1: токены + Header + Hero + блок фактов
   ========================================================================== */
:root{
  /* --- Цвет --------------------------------------------------------- */
  --accent:        #E2622C;   /* основной акцент: CTA, иконки, активные */
  --accent-hover:  #C9511F;
  --accent-press:  #AE4417;
  --accent-soft:   rgba(226,98,44,0.14);

  --ink:           #1A1E22;   /* основной тёмный текст */
  --ink-2:         #4C545C;   /* вторичный текст */
  --ink-3:         #808891;   /* подписи */

  --dark:          #14181C;   /* тёмная подложка / шапка при скролле */
  --light:         #FFFFFF;
  --cream:         #F4F2ED;   /* фон блока фактов */
  --line:          #DFDBD2;   /* разделители на светлом */
  --line-dark:     rgba(255,255,255,0.16); /* разделители на фото */

  /* --- Типографика --------------------------------------------------- */
  --font-display: 'Roboto Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  --fs-h1:      clamp(2.75rem, 1.4rem + 6vw, 5.5rem);
  --fs-h2:      clamp(1.875rem, 1.3rem + 2.4vw, 3rem);
  --fs-fact:    clamp(2rem, 1.4rem + 2.4vw, 3rem);
  --fs-lead:    clamp(1rem, 0.94rem + 0.4vw, 1.1875rem);
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.75rem;

  /* --- Сетка / отступы ------------------------------------------------ */
  --container:  1440px;
  --gutter:     clamp(20px, 3.5vw, 64px);
  --header-h:   clamp(68px, 7vw, 96px);

  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 48px; --s-6: 64px; --s-7: 96px;

  /* --- Радиусы --------------------------------------------------------- */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;

  /* --- Тени ------------------------------------------------------------ */
  --sh-sm: 0 1px 2px rgba(20,24,28,0.08);
  --sh-md: 0 10px 30px rgba(20,24,28,0.12);
  --sh-header: 0 2px 20px rgba(20,24,28,0.28);

  /* --- Движение --------------------------------------------------------- */
  --ease: cubic-bezier(.4,0,.2,1);
  --dur: 200ms;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
  /* плавную прокрутку по якорям тоже отключаем.
     !important нужен потому, что базовое правило объявлено ниже по файлу */
  html{ scroll-behavior:auto !important; }
}
/* --- Базовые сбросы ---------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
/* фиксированная шапка не должна перекрывать секцию при переходе по якорю */
section[id]{ scroll-margin-top:calc(var(--header-h) + 12px); }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--ink);
  background:var(--light);
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }

/* Атрибут hidden должен работать всегда: без !important его перебивает
   любое авторское display:flex/grid у того же элемента. */
[hidden]{ display:none !important; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p{ margin:0; }
button{ font:inherit; }
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.skip-link{
  position:absolute; left:16px; top:-60px; z-index:300;
  background:var(--ink); color:#fff; padding:12px 18px;
  border-radius:var(--r-md); transition:top var(--dur) var(--ease);
}
.skip-link:focus{ top:16px; }
:focus{ outline:none; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-sm); }
.hero :focus-visible,
.site-header :focus-visible{ outline-color:#fff; }
/* ==========================================================================
   КНОПКИ
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  padding:18px 30px;
  font-weight:600; font-size:0.9375rem; line-height:1;
  border:1.5px solid transparent;
  border-radius:var(--r-md);
  cursor:pointer; white-space:nowrap;
  transition:background-color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             color var(--dur) var(--ease),
             transform var(--dur) var(--ease);
}
.btn svg{ width:20px; height:20px; flex-shrink:0; transition:transform var(--dur) var(--ease); }
.btn:hover svg{ transform:translateX(3px); }
.btn:active{ transform:translateY(1px); }
.btn-accent{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-accent:hover{ background:var(--accent-hover); border-color:var(--accent-hover); }
.btn-accent:active{ background:var(--accent-press); }
.btn-outline-accent{ background:transparent; border-color:var(--accent); color:#fff; }
.btn-outline-accent svg{ color:var(--accent); }
.btn-outline-accent:hover{ background:var(--accent-soft); }
.btn-outline{ background:transparent; border-color:var(--accent); color:#fff; }
.btn-outline:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-outline:hover svg{ transform:none; }
.btn-sm{ padding:13px 22px; font-size:var(--fs-sm); gap:8px; }
.btn-sm svg{ width:18px; height:18px; color:var(--accent); }
.btn-outline:hover svg{ color:#fff; }
/* ==========================================================================
   HEADER — прозрачный поверх фото, тёмный при скролле
   ========================================================================== */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:transparent;
  transition:background-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-stuck{
  background:rgba(20,24,28,0.94);
  backdrop-filter:saturate(140%) blur(10px);
  box-shadow:var(--sh-header);
  border-bottom-color:var(--line-dark);
}
.header-inner{
  min-height:var(--header-h);
  display:flex; align-items:center; gap:clamp(16px,2.5vw,44px);
  color:#fff;
}
/* Логотип */
.logo{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.logo-mark{ display:inline-flex; width:34px; height:34px; color:var(--accent); }
.logo-mark svg{ width:100%; height:100%; }
.logo-copy{ display:flex; flex-direction:column; line-height:1.15; }
.logo-copy strong{
  font-family:var(--font-display);
  font-weight:700; font-size:1.375rem;
  letter-spacing:0.02em; text-transform:uppercase;
}
.logo-copy small{
  font-size:0.75rem; color:rgba(255,255,255,0.72);
  letter-spacing:0.01em;
}
/* Навигация */
.main-nav{ display:flex; align-items:center; gap:clamp(12px,1.5vw,26px); margin-left:auto; }
.main-nav a{
  font-size:0.875rem; font-weight:500; white-space:nowrap;
  color:rgba(255,255,255,0.9);
  padding:8px 0; position:relative;
  transition:color var(--dur) var(--ease);
}
.main-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur) var(--ease);
}
.main-nav a:hover{ color:#fff; }
.main-nav a:hover::after,
.main-nav a:focus-visible::after{ transform:scaleX(1); }
/* Правый блок */
.header-actions{ display:flex; align-items:center; gap:clamp(12px,1.6vw,28px); margin-left:auto; }
.header-phone{ display:flex; align-items:center; gap:10px; }
.header-phone .phone-icon{ width:20px; height:20px; color:var(--accent); flex-shrink:0; }
.phone-copy{ display:flex; flex-direction:column; line-height:1.2; text-align:right; }
.phone-copy strong{ font-size:1rem; font-weight:600; letter-spacing:0.01em; white-space:nowrap; }
.phone-copy small{ font-size:0.75rem; color:rgba(255,255,255,0.7); }
.header-phone:hover strong{ color:var(--accent); }
/* Бургер */
.menu-button{
  display:none; width:44px; height:44px;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  background:transparent; border:1px solid rgba(255,255,255,0.35);
  border-radius:var(--r-md); cursor:pointer;
}
.menu-button span{
  display:block; width:18px; height:2px; background:#fff;
  transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.menu-button[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-button[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-button[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  min-height:min(820px, 100svh);
  display:flex; align-items:center;
  padding-top:calc(var(--header-h) + clamp(24px,4vw,56px));
  padding-bottom:clamp(40px,6vw,80px);
  overflow:hidden;
  background:var(--dark);
}
.hero-media{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-media img{
  width:100%; height:100%;
  object-fit:cover; object-position:72% 42%;
}
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(20,24,28,0.75) 0%, rgba(20,24,28,0) 22%),
    linear-gradient(96deg,
      rgba(20,24,28,0.94) 0%,
      rgba(20,24,28,0.88) 26%,
      rgba(20,24,28,0.62) 46%,
      rgba(20,24,28,0.24) 66%,
      rgba(20,24,28,0.10) 100%);
}
.hero-inner{ position:relative; z-index:1; color:#fff; }
/* Эйбрау с чертой */
.eyebrow{
  display:flex; align-items:center; gap:14px;
  font-size:var(--fs-xs); font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--accent);
  margin-bottom:var(--s-3);
}
.eyebrow::before{
  content:""; width:44px; height:2px; background:var(--accent); flex-shrink:0;
}
.hero h1{
  font-family:var(--font-display);
  font-weight:900;
  font-size:var(--fs-h1);
  line-height:0.94;
  letter-spacing:0.005em;
  text-transform:uppercase;
  text-wrap:balance;
  text-shadow:0 2px 24px rgba(20,24,28,0.35);
}
.hero-lead{
  margin-top:var(--s-4);
  max-width:34rem;
  font-size:var(--fs-lead);
  line-height:1.55;
  color:rgba(255,255,255,0.9);
}
/* Четыре преимущества */

.hero-actions{
  display:flex; flex-wrap:wrap; gap:var(--s-2);
  margin-top:clamp(28px,3.5vw,48px);
}
/* ==========================================================================
   ФАКТЫ
   ========================================================================== */

/* Визуальная пометка «сюда подставить реальные данные» */
.is-placeholder{
  color:var(--ink-3);
  border-bottom:2px dashed var(--line);
  padding-bottom:2px;
}
/* ==========================================================================
   МОБИЛЬНАЯ ПАНЕЛЬ СВЯЗИ
   ========================================================================== */
.mobile-bar{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  gap:10px; padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:#fff; border-top:1px solid var(--line);
  box-shadow:0 -4px 20px rgba(20,24,28,0.10);
}
.mobile-bar a{
  flex:1; text-align:center;
  padding:14px 8px; border-radius:var(--r-md);
  font-weight:600; font-size:0.9375rem;
}
.mobile-call{ border:1.5px solid var(--ink); color:var(--ink); }
.mobile-wa{ background:var(--accent); color:#fff; }
/* ==========================================================================
   АДАПТИВ
   ========================================================================== */
/* Планшет / узкий десктоп: прячем меню в бургер */
/* ==========================================================================
   ЭТАП 2 — СЕКЦИИ ГЛАВНОЙ СТРАНИЦЫ
   Используются токены из блока :root выше. Новых цветов не добавляем,
   кроме --steel — приглушённый холодный тон для маркировки «проблемы».
   ========================================================================== */
:root{
  --steel: #5C6A72;

  /* тона трёх исходов проверки: приглушённые, в тон основной палитре */
  --verdict-ok:   #4E7A55;
  --verdict-warn: #B07A22;
  --verdict-info: #4F6B75;
}
/* --- Каркас секции --------------------------------------------------- */
.section{ padding-block:clamp(44px,5vw,84px); }
.section-compact{ padding-block:clamp(36px,4vw,64px); }
.section-light{ background:var(--light); }
.section-cream{ background:var(--cream); }
.section-dark{ background:var(--dark); color:#fff; }
.section-dark .section-lead,
.section-dark .section-note{ color:rgba(255,255,255,0.72); }
/* --- Шапка секции ------------------------------------------------------ */
.section-head{ margin-bottom:clamp(24px,3vw,40px); max-width:52rem; }
.section-head-row{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s-4); max-width:none; flex-wrap:wrap;
}
.kicker{
  font-size:var(--fs-xs); font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ink-3);
  display:flex; align-items:center; gap:12px;
  margin-bottom:var(--s-2);
}
.kicker::before{ content:""; width:28px; height:2px; background:var(--accent); flex-shrink:0; }
.kicker-accent{ color:var(--accent); }
.section h2,
.band h2{
  font-family:var(--font-display);
  font-weight:900; font-size:var(--fs-h2);
  line-height:1.02; letter-spacing:0.005em;
  text-transform:uppercase;
}
.h2-small{ font-size:clamp(1.5rem,1.2rem + 1.2vw,2.125rem) !important; }
.section-lead{
  margin-top:var(--s-2);
  font-size:var(--fs-lead); line-height:1.55;
  color:var(--ink-2); max-width:46rem;
}
.section-note{
  margin-top:clamp(24px,3vw,40px);
  padding-top:var(--s-3);
  border-top:1px solid var(--line);
  font-size:var(--fs-sm); color:var(--ink-3);
  max-width:52rem;
}
.section-dark .section-note{ border-top-color:var(--line-dark); }
/* Пометка «данных пока нет» */
.ph-inline{
  color:var(--ink-3);
  border-bottom:1px dashed var(--line);
  white-space:nowrap;
}
.section-dark .ph-inline{ color:rgba(255,255,255,0.55); border-bottom-color:var(--line-dark); }
/* --- Текстовая ссылка со стрелкой -------------------------------------- */
.text-link{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:600; font-size:0.9375rem;
  color:var(--accent);
  padding-block:6px;
}
.text-link svg{ width:20px; height:20px; transition:transform var(--dur) var(--ease); }
.text-link:hover svg{ transform:translateX(4px); }
.text-link:hover{ color:var(--accent-hover); }
.btn-row{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin-top:var(--s-4); }
.btn-dark{ background:var(--ink); border-color:var(--ink); color:#fff; }
.btn-dark:hover{ background:#000; border-color:#000; }
.btn-ghost{ background:transparent; border-color:var(--line-strong,#C9C4B8); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--ink); }
/* --- Плейсхолдеры фотографий -------------------------------------------- */
/* Все реальные изображения в фото-блоках заполняют контейнер полностью. */
.photo-ph > img{
  position:absolute; inset:0;
  width:100%; height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center center;
  display:block;
}
.photo-ph{
  margin:0; position:relative;
  display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(135deg,
      rgba(120,120,120,0.05) 0 12px, transparent 12px 24px),
    var(--cream);
  border:1.5px dashed #C9C4B8;
  border-radius:var(--r-lg);
  overflow:hidden;
}
.section-dark .photo-ph{
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,0.045) 0 12px, transparent 12px 24px),
    rgba(255,255,255,0.04);
  border-color:rgba(255,255,255,0.22);
}
.photo-ph-inner{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  text-align:center; padding:var(--s-3);
  color:var(--ink-3);
  font-size:var(--fs-xs); letter-spacing:0.06em; text-transform:uppercase;
}
.section-dark .photo-ph-inner{ color:rgba(255,255,255,0.6); }
.photo-ph-inner svg{ width:26px; height:26px; margin-bottom:2px; }
.photo-ph-inner b{ font-weight:700; letter-spacing:0.08em; }
.photo-ph-inner span{ letter-spacing:0.02em; text-transform:none; font-size:0.75rem; }
.photo-ph-wide{ aspect-ratio:4/3; }
.photo-ph-tall{ aspect-ratio:4/5; }
.photo-ph-object{ aspect-ratio:4/3; border-radius:var(--r-lg) var(--r-lg) 0 0; border-bottom:0; }

/* ==========================================================================
   2. ОСНОВНАЯ УСЛУГА
   ========================================================================== */
.service-main .section-head h2{ font-size:clamp(2.25rem,1.5rem + 3vw,4rem); }
.service-main-grid{
  display:grid; grid-template-columns:1.05fr 1fr;
  gap:clamp(28px,4vw,64px); align-items:center;
}

.spec-list{ margin-top:var(--s-4); display:grid; gap:14px; }
.spec-list li{
  display:grid; grid-template-columns:auto 1fr; gap:14px;
  align-items:baseline;
  padding-bottom:14px; border-bottom:1px solid var(--line-dark);
  font-size:0.9375rem; color:rgba(255,255,255,0.86);
}
.spec-list li:last-child{ border-bottom:0; padding-bottom:0; }
.spec-list span{
  font-family:var(--font-display); font-weight:900; font-size:0.9375rem;
  color:var(--accent); letter-spacing:0.06em;
}

/* ==========================================================================
   3. СРАВНЕНИЕ
   ========================================================================== */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,28px); }
.compare-col{
  background:var(--light); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(22px,2.6vw,36px);
}
.compare-col-accent{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.compare-tag{
  font-family:var(--font-display); font-weight:900;
  font-size:1.375rem; text-transform:uppercase; letter-spacing:0.02em;
  color:var(--accent); margin-bottom:var(--s-3);
}
.compare-tag-muted{ color:var(--ink-3); }
.compare-list{ display:grid; gap:12px; }
.compare-list li{
  position:relative; padding-left:26px;
  font-size:0.9375rem; color:var(--ink-2); line-height:1.5;
}
.compare-list li::before{
  content:""; position:absolute; left:0; top:9px;
  width:12px; height:2px; background:var(--ink-3);
}
.compare-col-accent .compare-list li{ color:var(--ink); }
.compare-col-accent .compare-list li::before{ background:var(--accent); }
/* ==========================================================================
   4 / 7. ДВУХКОЛОНОЧНЫЙ БЛОК С ФОТО
   ========================================================================== */
.split{
  display:grid; grid-template-columns:1fr 0.82fr;
  gap:clamp(28px,4.5vw,72px); align-items:center;
}
.split-reverse{ grid-template-columns:0.9fr 1.1fr; }
.split-copy .section-lead{ max-width:38rem; }
.check-list{ display:grid; gap:12px; margin-block:var(--s-4) var(--s-3); }
.check-list li{
  position:relative; padding-left:32px;
  font-size:0.9375rem; color:var(--ink-2);
}
.check-list li::before{
  content:""; position:absolute; left:0; top:2px;
  width:20px; height:20px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%23E2622C' stroke-width='1.5'/%3E%3Cpath d='m6 10.2 2.7 2.7L14.2 7.4' stroke='%23E2622C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ==========================================================================
   6. ОБЪЕКТЫ
   ========================================================================== */
.object-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,28px); }
.object-card{
  border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; background:var(--light);
  transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.object-card:hover{ box-shadow:var(--sh-md); transform:translateY(-2px); }
.object-body{ padding:clamp(18px,2vw,26px); }
.object-body h3{
  font-family:var(--font-display); font-weight:700; font-size:1.1875rem;
  text-transform:uppercase; letter-spacing:0.01em; margin-bottom:var(--s-2);
}
.object-meta{ display:grid; gap:8px; margin:0; }
.object-meta > div{ display:flex; justify-content:space-between; gap:12px; font-size:var(--fs-sm); }
.object-meta dt{ color:var(--ink-3); }
.object-meta dd{ margin:0; color:var(--ink-2); }
/* ==========================================================================
   8. ДОВЕРИЕ
   ========================================================================== */
.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,28px); }
.trust-card{
  background:var(--light); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(20px,2.2vw,30px);
  border-top:3px solid var(--accent);
}
.trust-card h3{
  font-family:var(--font-display); font-weight:700; font-size:1.0625rem;
  text-transform:uppercase; letter-spacing:0.01em; line-height:1.2; margin-bottom:10px;
}
.trust-card p{ font-size:var(--fs-sm); color:var(--ink-2); }
/* ==========================================================================
   9. КОМПАКТНЫЕ УСЛУГИ
   ========================================================================== */
.mini-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.6vw,20px); }
.mini-card{
  display:block; position:relative; height:100%;
  padding:clamp(18px,2vw,26px) clamp(18px,2vw,26px) clamp(40px,4vw,48px);
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--light);
  transition:border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.mini-card:hover{ border-color:var(--accent); background:var(--cream); }
.mini-card h3{
  font-family:var(--font-display); font-weight:700; font-size:1.0625rem;
  text-transform:uppercase; letter-spacing:0.01em; margin-bottom:6px;
}
.mini-card p{ font-size:var(--fs-sm); color:var(--ink-2); }
.mini-arrow{
  position:absolute; left:clamp(18px,2vw,26px); bottom:clamp(16px,1.8vw,22px);
  color:var(--accent); font-size:1.125rem;
  transition:transform var(--dur) var(--ease);
}
.mini-card:hover .mini-arrow{ transform:translateX(5px); }
/* ==========================================================================
   10. ПОЛОСА «ПРОМАЛЬП»
   ========================================================================== */
.band{ background:var(--dark); color:#fff; padding-block:clamp(36px,4.5vw,64px); }
.band-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-4); flex-wrap:wrap;
}
.band-inner p{ margin-top:10px; color:rgba(255,255,255,0.72); font-size:0.9375rem; }
.band .btn-outline-accent{ flex-shrink:0; }
/* ==========================================================================
   11. FAQ
   ========================================================================== */
.faq-layout{ display:grid; grid-template-columns:0.7fr 1.3fr; gap:clamp(24px,4vw,72px); align-items:start; }
.faq-layout .section-head{ margin-bottom:0; }
.faq-list{ border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-3);
  padding-block:18px;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(0.9375rem,0.9rem + 0.3vw,1.0625rem);
  text-transform:uppercase; letter-spacing:0.01em; line-height:1.25;
  transition:color var(--dur) var(--ease);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:""; flex-shrink:0;
  width:16px; height:16px; margin-top:3px;
  background:
    linear-gradient(var(--accent),var(--accent)) center/100% 1.5px no-repeat,
    linear-gradient(var(--accent),var(--accent)) center/1.5px 100% no-repeat;
  transition:transform var(--dur) var(--ease);
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item summary:hover{ color:var(--accent); }
.faq-body{ padding-bottom:18px; max-width:52rem; }
.faq-body p{ font-size:0.9375rem; color:var(--ink-2); line-height:1.55; }
/* ==========================================================================
   12. КОНТАКТЫ
   ========================================================================== */
.contacts-layout{ display:grid; grid-template-columns:1fr 0.85fr; gap:clamp(28px,4vw,72px); align-items:center; }
.contacts-panel{
  background:var(--light); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(24px,3vw,40px);
}
.contact-primary{ display:block; padding-bottom:var(--s-3); border-bottom:1px solid var(--line); }
.contact-label{
  display:block; font-size:var(--fs-xs); font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px;
}
.contact-value{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(1.5rem,1.15rem + 1.6vw,2.5rem); line-height:1;
  letter-spacing:0.01em; white-space:nowrap;
}
.contact-primary:hover .contact-value{ color:var(--accent); }
.contact-messengers{ display:grid; gap:12px; margin-block:var(--s-3); }
.contact-meta{ display:grid; gap:10px; margin:0; padding-top:var(--s-3); border-top:1px solid var(--line); }
.contact-meta > div{ display:flex; justify-content:space-between; gap:12px; font-size:var(--fs-sm); }
.contact-meta dt{ color:var(--ink-3); }
.contact-meta dd{ margin:0; }
/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.site-footer{ background:#0F1316; color:rgba(255,255,255,0.72); padding-top:clamp(40px,5vw,72px); }
.footer-inner{
  display:grid; grid-template-columns:1.4fr repeat(3,1fr);
  gap:clamp(24px,3vw,48px);
  padding-bottom:clamp(32px,4vw,56px);
}
.footer-brand .logo-mark{ color:var(--accent); margin-bottom:12px; }
.footer-brand strong{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:1.25rem; text-transform:uppercase; letter-spacing:0.02em; color:#fff;
  margin-bottom:10px;
}
.footer-brand p{ font-size:var(--fs-sm); max-width:22rem; }
.footer-col{ display:flex; flex-direction:column; gap:10px; }
.footer-col h3{
  font-size:var(--fs-xs); font-weight:700; letter-spacing:0.12em;
  text-transform:uppercase; color:#fff; margin-bottom:4px;
}
.footer-col a{ font-size:var(--fs-sm); transition:color var(--dur) var(--ease); }
.footer-col a:hover{ color:var(--accent); }
.footer-phone{
  font-family:var(--font-display); font-weight:700;
  font-size:1.25rem !important; color:#fff; letter-spacing:0.01em;
}
.footer-city{ font-size:var(--fs-sm); margin-top:4px; }
.footer-bottom{
  display:flex; justify-content:space-between; gap:var(--s-3); flex-wrap:wrap;
  padding-block:var(--s-3);
  border-top:1px solid rgba(255,255,255,0.1);
  font-size:var(--fs-xs); color:rgba(255,255,255,0.5);
}
.footer-bottom a:hover{ color:var(--accent); }
/* ==========================================================================
   АДАПТИВ ЭТАПА 2
   ========================================================================== */
/* --- Защита от горизонтального переполнения на узких экранах ---------- */
.service-main-grid > *,
.split > *,
.compare > *,
.faq-layout > *,
.contacts-layout > *,
.footer-inner > *{ min-width:0; }
h1,h2,h3{ overflow-wrap:break-word; }
/* ==========================================================================
   ЭТАП 3 — ВИЗУАЛЬНАЯ ПОЛИРОВКА
   Дизайн-система и Hero не менялись. Здесь только новые композиции
   секций: цепочка проблемы, разрезы стены, фотополоса, таймлайн,
   редакционная сетка объектов.
   ========================================================================== */
/* --------------------------------------------------------------------------
   1. ПРОБЛЕМЫ — текст слева, инженерная цепочка справа, симптомы полосой
   -------------------------------------------------------------------------- */

/* соединительная линия со стрелкой между шагами */

.symptoms{ display:flex; flex-wrap:wrap; gap:10px; }
.symptoms li{
  padding:9px 16px;
  border:1px solid var(--line); border-radius:999px;
  font-size:0.9375rem; color:var(--ink-2);
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.symptoms li:hover{ border-color:var(--steel); color:var(--ink); }
/* --------------------------------------------------------------------------
   3. РАЗРЕЗ СТЕНЫ
   -------------------------------------------------------------------------- */
.wall-scheme{ margin:0 0 var(--s-3); }
.wall-scheme svg{ width:100%; height:auto; }
.ws-street{ fill:#DDD9D0; }
.ws-wall{ fill:#B9B3A6; }
.ws-wall-cold{ fill:#8FA0A8; }
.ws-ins{ fill:var(--accent); }
.ws-room{ fill:#FBFAF7; stroke:var(--line); stroke-width:1; }
.ws-edge{
  font-family:var(--font-body); font-size:10px; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase; fill:var(--ink-3);
}
.ws-label{
  font-family:var(--font-body); font-size:9.5px; font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase; fill:var(--ink-2);
}
.ws-label-accent{ fill:var(--accent); }
.ws-note{ font-family:var(--font-body); font-size:10px; fill:var(--ink-3); }
.ws-note-cold{ fill:#3E5560; font-weight:600; }
.ws-note-warm{ fill:#7A6A56; font-weight:600; }
.ws-cold-arrow{ stroke:#4F6B75; stroke-width:1.6; fill:none; stroke-linecap:round; }
.ws-stop{ stroke:var(--accent); stroke-width:2.5; }
.ws-ticks path{ stroke:var(--line-strong,#B9B4A6); stroke-width:1; }
.ws-dim{ stroke:var(--ink-3); stroke-width:1; }
.ws-dim-accent{ stroke:var(--accent); }
/* карточки сравнения: правая — акцентная и чуть выше */
.compare-col-accent{ background:var(--light); }
/* --------------------------------------------------------------------------
   4. ФОТОПОЛОСА НА ВСЮ ШИРИНУ
   -------------------------------------------------------------------------- */
.section-photo{ background:var(--light); padding-bottom:clamp(40px,4.5vw,72px); }
.photo-band{
  position:relative;
  min-height:clamp(260px,30vw,400px);
  display:flex; align-items:flex-end;
  padding-block:clamp(32px,4vw,64px);
  overflow:hidden;
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,0.05) 0 14px, transparent 14px 28px),
    var(--dark);
  color:#fff;
}
/* Реальное фото вставляется сюда без изменения вёрстки */
.photo-band-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:68% center; z-index:0;
  display:block;
}
.photo-band::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg,
    rgba(16,20,23,0.88) 0%,
    rgba(16,20,23,0.68) 34%,
    rgba(16,20,23,0.20) 68%,
    rgba(16,20,23,0.08) 100%);
  pointer-events:none;
}
.photo-band-inner{ position:relative; z-index:3; }
.photo-band-inner h2{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(2rem,1.3rem + 3.4vw,4rem);
  line-height:0.98; text-transform:uppercase; letter-spacing:0.005em;
}
.photo-band-tag{
  position:absolute; right:clamp(16px,3vw,40px); bottom:clamp(16px,3vw,32px);
  z-index:3; max-width:min(46vw,340px);
  padding:8px 12px; border:1px dashed rgba(255,255,255,0.35);
  border-radius:var(--r-md);
  font-size:0.625rem; letter-spacing:0.06em; text-transform:uppercase;
  color:rgba(255,255,255,0.6); line-height:1.5;
}
.access-foot{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:var(--s-3);
  padding-top:clamp(24px,2.8vw,40px);
}
.access-points{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3vw,56px); width:100%;
}
.access-points li{ padding-top:var(--s-2); border-top:2px solid var(--line); }
.access-points li:first-child{ border-top-color:var(--accent); }
.access-num{
  display:block; font-family:var(--font-display); font-weight:900;
  font-size:0.9375rem; letter-spacing:0.08em; color:var(--accent);
  margin-bottom:10px;
}
.access-points h3{
  font-family:var(--font-display); font-weight:700; font-size:1.125rem;
  text-transform:uppercase; letter-spacing:0.01em; margin-bottom:6px;
}
.access-points p{ font-size:var(--fs-sm); color:var(--ink-2); }
/* --------------------------------------------------------------------------
   5. ТАЙМЛАЙН
   -------------------------------------------------------------------------- */
.timeline{
  position:relative;
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:clamp(14px,1.8vw,28px);
  padding-top:42px;
}
.timeline::before{
  content:""; position:absolute; top:13px;
  left:0; right:0; height:1px;
  background:linear-gradient(90deg, var(--accent), var(--line-strong,#B9B4A6) 72%, transparent);
}
.tl-step{ position:relative; text-align:left; }
.tl-step::before{
  content:""; position:absolute; top:-42px; left:0;
  width:14px; height:14px; border-radius:50%;
  background:var(--cream); border:2px solid var(--line-strong,#B9B4A6);
}
.tl-step:first-child::before{ border-color:var(--accent); background:var(--accent); }
.tl-num{
  display:block; font-family:var(--font-display); font-weight:900;
  font-size:clamp(1.5rem,1.2rem + 1.2vw,2.125rem); line-height:1;
  color:var(--accent); margin-bottom:10px;
}
.tl-step h3{
  font-family:var(--font-display); font-weight:700; font-size:1.0625rem;
  text-transform:uppercase; letter-spacing:0.01em; margin-bottom:6px;
}
.tl-step p{ font-size:var(--fs-sm); color:var(--ink-2); }
/* --------------------------------------------------------------------------
   6. РЕДАКЦИОННАЯ СЕТКА ОБЪЕКТОВ
   -------------------------------------------------------------------------- */
.object-editorial{
  display:grid; grid-template-columns:1.35fr 1fr;
  gap:clamp(16px,2.2vw,32px); align-items:stretch;
}
.object-feature{
  border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; background:var(--light);
}
.ba-frame{
  margin:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  aspect-ratio:16/10; gap:2px; background:var(--line);
  width:100%; min-width:0; overflow:hidden;
}
.ba-pane{
  position:relative; overflow:hidden; min-width:0; min-height:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; text-align:center; padding:var(--s-3);
  background:
    repeating-linear-gradient(135deg,
      rgba(120,120,120,0.05) 0 12px, transparent 12px 24px),
    var(--cream);
  color:var(--ink-3);
  font-size:var(--fs-xs); letter-spacing:0.06em; text-transform:uppercase;
}
/* Фотография занимает панель целиком, подпись ложится поверх снимка.
   Панель без фотографии продолжает работать как заготовка. */
.ba-pane > img{
  position:absolute; inset:0;
  display:block; width:100%; height:100%; max-width:none;
  object-fit:cover; object-position:center center;
}
.ba-pane > img + span{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:10px 14px;
  background:linear-gradient(180deg, rgba(20,24,28,0) 0%, rgba(20,24,28,0.72) 100%);
  color:rgba(255,255,255,0.92);
  text-align:left;
}
.ba-pane b{ font-weight:700; letter-spacing:0.08em; }
.ba-pane span{ text-transform:none; letter-spacing:0.01em; font-size:0.6875rem; }
.ba-pane:first-child > img{ object-position:center center; }
.ba-pane-after > img{ object-position:center center; }
.ba-pane-after{ box-shadow:inset 3px 0 0 var(--accent); }
/* акцентная граница между «до» и «после» должна оставаться поверх фото */
.ba-pane-after::after{
  content:""; position:absolute; left:0; top:0; bottom:0; z-index:3;
  width:3px; background:var(--accent);
}
.object-type{
  font-size:var(--fs-xs); font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--accent); margin-bottom:8px;
}
.object-feature .object-body h3{ font-size:clamp(1.25rem,1.1rem + 0.6vw,1.625rem); }

.object-side{ display:grid; grid-template-rows:1fr 1fr; gap:clamp(16px,2.2vw,32px); }
.object-card-row{ display:grid; grid-template-columns:40% 1fr; align-items:stretch; }
.object-card-row .photo-ph{ border:0; border-right:1px solid var(--line); border-radius:0; }
.photo-ph-square{ height:100%; min-height:150px; }
.object-card-row .object-body{ padding:clamp(16px,1.8vw,22px); }
.object-card-row h3{ font-size:1.0625rem; }
/* ==========================================================================
   АДАПТИВ ЭТАПА 3
   ========================================================================== */
/* Контент боковых карточек объектов — по центру высоты */
.object-card-row .object-body{
  display:flex; flex-direction:column; justify-content:center;
}
/* --------------------------------------------------------------------------
   8. ДОВЕРИЕ — не карточки, а спокойный список в две колонки.
   Нужно, чтобы блок не повторял ряд карточек соседней секции.
   -------------------------------------------------------------------------- */
.trust-grid{
  grid-template-columns:repeat(2,1fr);
  gap:clamp(28px,3.4vw,48px) clamp(32px,5vw,88px);
  max-width:76rem;
}
.trust-card{
  background:transparent; border:0;
  border-left:2px solid var(--accent);
  border-radius:0;
  padding:2px 0 2px clamp(18px,2vw,26px);
}
.trust-card h3{ font-size:1.125rem; margin-bottom:8px; }
.trust-card p{ max-width:34rem; }
/* ==========================================================================
   ПРЕДВАРИТЕЛЬНЫЙ РАСЧЁТ
   Тёмная секция со светлой панелью. Формы нет: только выбор параметров.
   ========================================================================== */
.calc-panel{
  display:grid; grid-template-columns:1.25fr 0.75fr;
  background:var(--light); color:var(--ink);
  border-radius:var(--r-lg); overflow:hidden;
}
.calc-steps{
  padding:clamp(22px,2.6vw,36px);
  display:grid; gap:clamp(24px,2.8vw,36px);
  align-content:start;
}
.calc-step{ transition:opacity var(--dur) var(--ease); }
.calc-step.is-locked{ opacity:0.4; pointer-events:none; }
.calc-label{
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-display); font-weight:700;
  font-size:1.0625rem; text-transform:uppercase; letter-spacing:0.01em;
  margin-bottom:var(--s-2);
}
.calc-num{
  font-size:0.75rem; font-weight:900; letter-spacing:0.06em;
  color:var(--accent);
}
/* --- Варианты выбора ---------------------------------------------------- */
.opt-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.opt-grid-row{ grid-template-columns:repeat(4,1fr); }
.opt{ display:block; cursor:pointer; }
.opt input{
  position:absolute; width:1px; height:1px; opacity:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
.opt-box{
  display:flex; flex-direction:column; gap:3px;
  min-height:100%;
  padding:14px 16px;
  border:1.5px solid var(--line); border-radius:var(--r-md);
  background:var(--light);
  transition:border-color var(--dur) var(--ease),
             background-color var(--dur) var(--ease);
}
.opt:hover .opt-box{ border-color:var(--ink-3); }
.opt input:checked + .opt-box{
  border-color:var(--accent);
  background:var(--accent-soft);
}
.opt input:focus-visible + .opt-box{
  outline:2px solid var(--accent); outline-offset:2px;
}
.opt-title{ font-weight:600; font-size:0.9375rem; line-height:1.25; }
.opt-note{ font-size:0.75rem; color:var(--ink-3); }
.opt-compact .opt-box{ align-items:center; text-align:center; padding:13px 8px; }
/* --- Площадь: редактируемое поле + ползунок ----------------------------- */
.area-field{
  display:inline-flex; align-items:baseline; gap:8px;
  padding:10px 16px; margin-bottom:var(--s-2);
  border:1.5px solid var(--line); border-radius:var(--r-md);
  background:var(--light);
  transition:border-color var(--dur) var(--ease);
}
.area-field:focus-within{ border-color:var(--accent); }
.area-input{
  width:4ch; min-width:4ch;
  border:0; padding:0; background:transparent;
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(1.875rem,1.5rem + 1.4vw,2.5rem); line-height:1.1;
  letter-spacing:0.01em; color:var(--ink);
  text-align:center;
}
.area-input:focus{ outline:none; }
.area-input::placeholder{ color:var(--line-strong,#B9B4A6); }
.area-input:disabled{ color:var(--ink-3); }
.area-unit{ font-size:1rem; font-weight:600; color:var(--ink-3); }
input[type="range"][data-calc="area-range"]{
  --range-progress:0%;
  display:block; width:100%; height:32px;
  -webkit-appearance:none; appearance:none;
  background:transparent; cursor:pointer;
}
input[type="range"][data-calc="area-range"]::-webkit-slider-runnable-track{
  height:6px; border-radius:99px;
  background:linear-gradient(90deg,
    var(--accent) 0 var(--range-progress), var(--line) var(--range-progress) 100%);
}
input[type="range"][data-calc="area-range"]::-moz-range-track{
  height:6px; border-radius:99px; background:var(--line);
}
input[type="range"][data-calc="area-range"]::-moz-range-progress{
  height:6px; border-radius:99px; background:var(--accent);
}
input[type="range"][data-calc="area-range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:26px; height:26px; margin-top:-10px;
  border-radius:50%; background:var(--light);
  border:3px solid var(--accent);
  box-shadow:var(--sh-sm);
  transition:transform var(--dur) var(--ease);
}
input[type="range"][data-calc="area-range"]::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%;
  background:var(--light); border:3px solid var(--accent);
}
input[type="range"][data-calc="area-range"]:active::-webkit-slider-thumb{ transform:scale(1.1); }
input[type="range"][data-calc="area-range"]:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }
.area-hint{ margin-top:10px; font-size:var(--fs-sm); color:var(--ink-3); }
/* --- Результат ---------------------------------------------------------- */
.calc-result{
  position:relative;
  background:var(--cream);
  border-left:1px solid var(--line);
  padding:clamp(22px,2.6vw,36px);
  display:flex; flex-direction:column; justify-content:center;
}
.calc-empty{
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  color:var(--ink-3); font-size:0.9375rem; max-width:26rem;
}
.calc-empty-icon{ width:36px; height:36px; color:var(--line-strong,#B9B4A6); }
.calc-empty-icon svg{ width:100%; height:100%; }
.calc-output{ display:none; }
#calc.has-result .calc-empty{ display:none; }
#calc.has-result .calc-output{ display:block; }
.calc-result-label{
  font-size:var(--fs-xs); font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:10px;
}
.calc-value{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(1.5rem,1.05rem + 1.4vw,2rem);
  line-height:1.05; letter-spacing:0.01em;
  color:var(--ink);
}
.calc-summary{
  margin-top:10px; padding-bottom:var(--s-3);
  border-bottom:1px solid var(--line);
  font-size:var(--fs-sm); color:var(--ink-2);
}
.calc-feature{
  display:flex; align-items:center; gap:10px;
  margin-top:var(--s-3);
  font-size:var(--fs-sm); font-weight:600; color:var(--ink);
}
.calc-feature svg{ width:20px; height:20px; color:var(--accent); flex-shrink:0; }
.calc-warning{
  margin-top:var(--s-3);
  padding:12px 14px;
  border-left:2px solid var(--accent);
  background:var(--accent-soft);
  font-size:var(--fs-xs); line-height:1.6; color:var(--ink-2);
}
.calc-warning .ph-inline{
  display:inline-block; margin-top:4px; white-space:normal;
}
.calc-disclaimer{
  margin-top:var(--s-3);
  font-size:var(--fs-sm); line-height:1.5; color:var(--ink-3);
}
.calc-cta{
  margin-top:var(--s-3);
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
}
.calc-cta .btn{ width:100%; }
.calc-reset{
  margin-top:var(--s-3);
  align-self:flex-start;
  background:none; border:0; padding:4px 0;
  font-size:var(--fs-sm); color:var(--ink-3);
  border-bottom:1px dashed var(--line-strong,#B9B4A6);
  cursor:pointer;
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.calc-reset:hover{ color:var(--accent); border-color:var(--accent); }
/* --- Адаптив ------------------------------------------------------------ */
/* ==========================================================================
   ВНУТРЕННИЕ СТРАНИЦЫ
   Компоненты общие с главной. Здесь только то, чего на главной не было:
   хлебные крошки, hero внутренней страницы, сетка карточек, меню услуг.
   ========================================================================== */
/* --- Выпадающее меню услуг в шапке ------------------------------------- */
.nav-drop{ position:relative; }
.nav-drop-btn{
  display:flex; align-items:center; gap:6px;
  background:none; border:0; padding:8px 0;
  font-family:var(--font-body); font-size:0.875rem; font-weight:500;
  white-space:nowrap; color:rgba(255,255,255,0.9); cursor:pointer;
  transition:color var(--dur) var(--ease);
}
.nav-drop-btn svg{ width:16px; height:16px; transition:transform var(--dur) var(--ease); }
.nav-drop-btn:hover{ color:#fff; }
.nav-drop-btn[aria-expanded="true"]{ color:var(--accent); }
.nav-drop-btn[aria-expanded="true"] svg{ transform:rotate(180deg); }
.nav-drop-menu{
  position:absolute; top:calc(100% + 14px); left:-16px; z-index:40;
  min-width:250px; padding:8px;
  background:rgba(20,24,28,0.98);
  backdrop-filter:blur(10px);
  border:1px solid var(--line-dark);
  border-radius:var(--r-md);
  box-shadow:var(--sh-header);
  display:flex; flex-direction:column;
}
.nav-drop-menu a{
  padding:11px 14px; border-radius:var(--r-sm);
  font-size:0.9375rem; color:rgba(255,255,255,0.85);
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-drop-menu a:hover{ background:rgba(255,255,255,0.07); color:#fff; }
.nav-drop-menu a::after{ display:none; }
/* --- Хлебные крошки ------------------------------------------------------ */
.breadcrumbs{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-bottom:var(--s-3);
  font-size:var(--fs-xs); color:rgba(255,255,255,0.5);
}
.breadcrumbs a{ color:rgba(255,255,255,0.7); border-bottom:1px solid transparent; }
.breadcrumbs a:hover{ color:#fff; border-bottom-color:var(--accent); }
.breadcrumbs span[aria-current]{ color:var(--accent); }
/* --- Hero внутренней страницы -------------------------------------------- */
.page-hero{
  background:var(--dark); color:#fff;
  padding-block:calc(var(--header-h) + clamp(28px,4vw,56px)) clamp(48px,6vw,88px);
}
.page-hero h1{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(2.25rem,1.5rem + 3.4vw,4.25rem);
  line-height:0.98; letter-spacing:0.005em; text-transform:uppercase;
  margin-bottom:var(--s-3);
}
.page-hero .section-lead{ color:rgba(255,255,255,0.78); max-width:38rem; }
.page-hero .btn-outline-accent{ color:#fff; }
/* --- Сетка карточек ------------------------------------------------------ */
.card-grid{ display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.card-grid-3{ grid-template-columns:repeat(3,1fr); }
.card-grid-4{ grid-template-columns:repeat(4,1fr); }
.info-card{
  background:var(--light); padding:clamp(20px,2.2vw,30px);
  transition:background-color var(--dur) var(--ease);
}
.info-card:hover{ background:var(--cream); }
.info-card h3{
  font-family:var(--font-display); font-weight:700; font-size:1.125rem;
  text-transform:uppercase; letter-spacing:0.01em; line-height:1.15;
  margin-bottom:8px;
}
.info-card p{ font-size:var(--fs-sm); color:var(--ink-2); }
.section-cream .info-card{ background:var(--surface,#FBFAF7); }
/* --- Варианты числа колонок для повторно используемых блоков ------------- */
.timeline-4{ grid-template-columns:repeat(4,1fr); }
.timeline-6{ grid-template-columns:repeat(6,1fr); }
.timeline-4::before,
.timeline-6::before{ left:0; right:0; }
.access-points-4{ grid-template-columns:repeat(4,1fr); }
.mini-grid-3{ grid-template-columns:repeat(3,1fr); }
/* фото объектов на внутренних страницах — одинаковой высоты */
.photo-ph-object-page{ aspect-ratio:4/3; border-radius:var(--r-lg); }
/* тёмные секции внутренних страниц: подписи в списках светлее */
.section-dark .access-points li{ border-top-color:var(--line-dark); }
.section-dark .access-points li:first-child{ border-top-color:var(--accent); }
.section-dark .access-points p{ color:rgba(255,255,255,0.7); }
.section-dark .check-list li{ color:rgba(255,255,255,0.8); }
/* --- Адаптив внутренних страниц ------------------------------------------ */
/* --- Страница документа -------------------------------------------------- */
.legal{ max-width:52rem; }
.legal h2{ margin-top:var(--s-5); margin-bottom:var(--s-2); }
.legal p{ color:var(--ink-2); }
.legal-warning{
  padding:clamp(18px,2vw,26px);
  border-left:3px solid var(--accent);
  background:var(--accent-soft);
  border-radius:0 var(--r-md) var(--r-md) 0;
}
.legal-warning b{
  display:block; margin-bottom:8px;
  font-family:var(--font-display); font-weight:700;
  text-transform:uppercase; letter-spacing:0.02em;
}
.legal-warning p{ font-size:var(--fs-sm); color:var(--ink-2); }
.text-link-inline{ color:var(--accent); border-bottom:1px solid currentColor; }
.text-link-inline:hover{ color:var(--accent-hover); }
/* --- Блок узнавания ситуации (страница утепления квартир) --------------- */
.recognize-title{
  font-size:clamp(2rem,1.4rem + 2.6vw,3.5rem) !important;
  margin-bottom:var(--s-4);
}
.symptoms.symptoms-lg{ gap:12px; }
.symptoms.symptoms-lg li{
  padding:12px 20px;
  font-size:1rem; font-weight:500;
  border-color:var(--line-strong,#B9B4A6);
  color:var(--ink);
}
.symptoms.symptoms-lg li:hover{ border-color:var(--accent); color:var(--ink); }
.recognize-answer{
  margin-top:var(--s-4); padding-top:var(--s-3);
  border-top:2px solid var(--accent);
  font-size:var(--fs-lead); color:var(--ink-2); max-width:34rem;
}
.recognize-answer b{
  display:block; color:var(--ink);
  font-family:var(--font-display); font-weight:900;
  font-size:1.5rem; text-transform:uppercase; letter-spacing:0.01em;
  margin-bottom:6px;
}
/* два столбца для списка работ на «визуальных» страницах */
.checks-two .check-list{
  grid-template-columns:1fr 1fr;
  column-gap:clamp(24px,4vw,64px);
}

/* --- Реквизиты ----------------------------------------------------------- */
.requisites{
  display:grid; gap:0; margin:0;
  max-width:62rem;
  border-top:1px solid var(--line);
}
.requisites > div{
  display:grid; grid-template-columns:16rem 1fr;
  gap:var(--s-3);
  padding-block:16px;
  border-bottom:1px solid var(--line);
}
.requisites dt{ font-size:var(--fs-sm); color:var(--ink-3); }
.requisites dd{ margin:0; font-size:0.9375rem; color:var(--ink); }

/* --- Короткие компоненты сокращённой главной ----------------------------- */

/* три метки под подзаголовком hero вместо прежнего ряда с иконками */
.hero-tags{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:10px clamp(14px,2vw,22px);
  margin-top:clamp(24px,3vw,36px);
}
.hero-tags li{
  display:flex; align-items:center; gap:clamp(14px,2vw,22px);
  font-size:0.9375rem; font-weight:600; letter-spacing:0.01em;
  color:rgba(255,255,255,0.92);
}
.hero-tags li + li::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--accent); flex-shrink:0;
}

/* сжатая цепочка: холодная стена → конденсат → сырость */
.chain-line{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:10px clamp(12px,1.6vw,20px);
  margin-top:clamp(28px,3.2vw,40px);
}
.chain-line li{
  display:flex; align-items:center; gap:clamp(12px,1.6vw,20px);
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1rem,0.9rem + 0.5vw,1.25rem);
  text-transform:uppercase; letter-spacing:0.02em;
  color:var(--ink-2);
}
.chain-line li:last-child{ color:var(--accent); }
.chain-line li + li::before{
  content:"→"; color:var(--accent);
  font-family:var(--font-body); font-weight:600; font-size:1.125rem;
}

/* строка с решением под симптомами */
.solution-line{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-3) var(--s-4); flex-wrap:wrap;
  margin-top:clamp(28px,3.2vw,40px);
  padding-top:var(--s-3);
  border-top:2px solid var(--accent);
}
.solution-line p{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.125rem,1rem + 0.7vw,1.5rem);
  text-transform:uppercase; letter-spacing:0.01em;
  color:var(--ink); max-width:30ch;
}

/* три коротких утверждения в блоке основной услуги */
.claim-list{ display:grid; gap:12px; }
.claim-list li{
  position:relative; padding-left:26px;
  font-size:var(--fs-lead); line-height:1.45;
  color:rgba(255,255,255,0.92);
}
.claim-list li::before{
  content:""; position:absolute; left:0; top:0.62em;
  width:12px; height:2px; background:var(--accent);
}
.service-main-copy .spec-list{ margin-top:clamp(24px,3vw,36px); }

/* подпись под фотополосой */
.photo-band-lead{
  margin-top:var(--s-3);
  font-size:var(--fs-lead); color:rgba(255,255,255,0.82);
  max-width:34rem;
}

/* строка о команде под объектами */
.team-line{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-3) var(--s-4); flex-wrap:wrap;
  margin-top:clamp(28px,3.2vw,40px);
  padding-top:var(--s-3);
  border-top:1px solid var(--line);
}
.team-line p{ font-size:var(--fs-lead); color:var(--ink-2); max-width:44rem; }

/* --- Доверие: горизонтальная строка без карточек ------------------------- */
.trust-row{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(20px,3vw,56px);
}
.trust-num{
  display:block;
  font-family:var(--font-display); font-weight:900;
  font-size:0.875rem; letter-spacing:0.08em;
  color:var(--accent); margin-bottom:12px;
}
.trust-row h3{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.125rem,1rem + 0.5vw,1.375rem);
  line-height:1.1; text-transform:uppercase; letter-spacing:0.01em;
  margin-bottom:10px;
}
.trust-row p{ font-size:var(--fs-sm); color:var(--ink-2); }

/* --- Проверка ситуации: пошаговый тест ----------------------------------- */
.check-head{ margin-bottom:clamp(20px,2.4vw,32px); max-width:52rem; }
.check-head h2{
  font-family:var(--font-display); font-weight:900; font-size:var(--fs-h2);
  line-height:1.02; text-transform:uppercase; letter-spacing:0.005em;
}

/* закрытое состояние — одна строка, страницу почти не удлиняет */
.check-invite{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-3) var(--s-4); flex-wrap:wrap;
  padding-top:var(--s-3);
  border-top:2px solid var(--accent);
}
.check-invite p{ font-size:var(--fs-lead); color:var(--ink-2); max-width:34rem; }

/* раскрытое состояние */
.check-quiz{
  padding-top:var(--s-3);
  border-top:2px solid var(--accent);
}

.check-progress{
  display:flex; align-items:center; gap:var(--s-3);
  margin-bottom:clamp(20px,2.4vw,28px);
}
.check-count{
  font-family:var(--font-display); font-weight:900;
  font-size:0.8125rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--accent); white-space:nowrap;
}
.check-bar{
  flex:1; height:2px; background:var(--line); position:relative; overflow:hidden;
}
.check-bar span{
  display:block; height:100%; width:25%;
  background:var(--accent);
  transition:width var(--dur) var(--ease);
}
.check-close{
  background:none; border:0; padding:4px 0; cursor:pointer;
  font-size:var(--fs-sm); color:var(--ink-3);
  border-bottom:1px dashed var(--line-strong,#B9B4A6);
  white-space:nowrap;
}
.check-close:hover{ color:var(--accent); border-color:var(--accent); }

.check-step{
  border:0; padding:0; margin:0; min-inline-size:0;
  /* высота под самый высокий из вопросов: при переходе между шагами
     кнопки «Назад» и «Далее» остаются на месте */
  min-height:265px;
}
.check-result-step{ min-height:0; }

/* мягкое появление шага и раскрытия теста */
.check-quiz:not([hidden]),
.check-step:not([hidden]){ animation:check-in 220ms var(--ease) both; }
@keyframes check-in{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:none; }
}
.check-question{
  display:block; padding:0;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.25rem,1.1rem + 0.8vw,1.75rem);
  line-height:1.15; text-transform:uppercase; letter-spacing:0.01em;
  margin-bottom:6px;
}
.check-tip{ font-size:var(--fs-sm); color:var(--ink-3); margin-bottom:var(--s-2); }
.check-grid{ margin-top:var(--s-2); }
.check-grid.opt-grid{ grid-template-columns:repeat(3,1fr); }
.check-grid.opt-grid-row{ grid-template-columns:repeat(3,minmax(0,220px)); }

/* поле свободного описания */
.check-note-field{ display:block; margin-top:var(--s-3); }
.check-note-field > span{
  display:block; margin-bottom:8px;
  font-size:var(--fs-sm); color:var(--ink-3);
}
.check-note-field textarea{
  width:100%; padding:14px 16px;
  font-family:var(--font-body); font-size:0.9375rem; line-height:1.5;
  color:var(--ink); background:var(--light);
  border:1.5px solid var(--line); border-radius:var(--r-md);
  resize:vertical;
  transition:border-color var(--dur) var(--ease);
}
.check-note-field textarea:focus{ border-color:var(--accent); }
/* обводку убираем только для мыши: с клавиатуры она обязана быть видна */
.check-note-field textarea:focus:not(:focus-visible){ outline:none; }
.check-note-field textarea:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* результат проверки */
.check-verdict-label{
  font-size:var(--fs-xs); font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:10px;
}
.check-verdict{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(1.25rem,1.05rem + 1vw,1.875rem);
  line-height:1.1; text-transform:uppercase; letter-spacing:0.01em;
  padding-left:16px; border-left:4px solid var(--ink-3);
}
.check-verdict[data-level="green"]{ border-left-color:var(--verdict-ok);   color:var(--verdict-ok); }
.check-verdict[data-level="yellow"]{ border-left-color:var(--verdict-warn); color:var(--verdict-warn); }
.check-verdict[data-level="blue"]{ border-left-color:var(--verdict-info); color:var(--verdict-info); }

.check-verdict-text{
  margin-top:var(--s-2);
  font-size:0.9375rem; line-height:1.6; color:var(--ink-2);
  max-width:52rem;
}

.check-situation{
  margin-top:var(--s-3); padding-top:var(--s-3);
  border-top:1px solid var(--line);
}
.check-situation-label{
  font-size:var(--fs-xs); font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:8px;
}
.check-situation-line{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1rem,0.95rem + 0.4vw,1.1875rem);
  line-height:1.35; text-transform:uppercase; letter-spacing:0.01em;
  color:var(--ink);
}
.check-situation-note{
  margin-top:10px; font-size:var(--fs-sm); font-style:italic;
  color:var(--ink-3); max-width:52rem;
  /* своё описание пользователь и так помнит: показываем три строки,
     чтобы длинный текст не оттеснял сам вывод */
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  overflow:hidden;
}

/* пояснение от ИИ: надстройка над результатом, тот же язык форм */
.check-ai{
  margin-top:var(--s-3); padding-top:var(--s-3);
  border-top:1px solid var(--line);
}
.check-ai-subtitle{
  margin-top:var(--s-3);
  font-size:var(--fs-sm); font-weight:600; color:var(--ink);
}
.check-ai-list{ display:grid; gap:8px; margin-top:10px; }
.check-ai-list li{
  position:relative; padding-left:22px;
  font-size:var(--fs-sm); line-height:1.5; color:var(--ink-2);
}
.check-ai-list li::before{
  content:""; position:absolute; left:0; top:0.62em;
  width:10px; height:2px; background:var(--accent);
}
.check-ai-next{
  margin-top:var(--s-3);
  font-size:0.9375rem; line-height:1.5; color:var(--ink);
}

.check-cta{
  display:flex; align-items:center; gap:var(--s-3) var(--s-4);
  flex-wrap:wrap; margin-top:var(--s-3);
}
.check-disclaimer{ font-size:var(--fs-xs); color:var(--ink-3); max-width:30rem; }

.check-nav{
  display:flex; align-items:center; gap:var(--s-2);
  margin-top:clamp(20px,2.4vw,28px);
}
.check-restart{
  background:none; border:0; padding:4px 0; cursor:pointer;
  font-size:var(--fs-sm); color:var(--ink-3);
  border-bottom:1px dashed var(--line-strong,#B9B4A6);
}
.check-restart:hover{ color:var(--accent); border-color:var(--accent); }

/* --- Широкий кадр вместо сетки из трёх фотографий ------------------------ */
.wide-photo{
  margin:0; position:relative;
  border-radius:var(--r-lg); overflow:hidden;
  background:var(--bg-alt);
}
.wide-photo img{
  width:100%; height:100%;
  aspect-ratio:21/9; object-fit:cover;
  display:block;
  transition:transform 400ms var(--ease);
}
.wide-photo figcaption{
  margin-top:12px;
  font-size:var(--fs-xs); color:var(--ink-3);
}
.wide-photo:hover img{ transform:scale(1.02); }

/* --- Лёгкая реакция фотографий на наведение ------------------------------ */
.photo-ph,
.object-card figure,
.ba-frame{ position:relative; overflow:hidden; }

.photo-ph img,
.object-card img,
.ba-pane > img{ transition:transform 400ms var(--ease); }

.object-card:hover img,
.object-feature:hover .ba-pane > img{ transform:scale(1.03); }

/* тонкая оранжевая линия появляется по наведению на карточку */
.object-card::after,
.object-feature::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform 300ms var(--ease);
  z-index:2;
}
.object-card,
.object-feature{ position:relative; }
.object-card:hover::after,
.object-feature:hover::after{ transform:scaleX(1); }

/* --- Вертикальный мотив у нумерованных этапов ---------------------------- */
/* тонкая линия вдоль номеров — визуальная отсылка к спуску по верёвке */
.spec-list{ position:relative; }
.spec-list::before{
  content:""; position:absolute;
  left:9px; top:10px; bottom:10px; width:1px;
  background:linear-gradient(180deg,
    var(--accent) 0 18px,
    rgba(255,255,255,0.3) 18px 100%);
}
.spec-list li{ position:relative; }
.spec-list span{ position:relative; z-index:1; }
.section-dark .spec-list span{ background:var(--dark); padding-right:4px; }

/* ==========================================================================
   АДАПТИВ — все контрольные точки собраны здесь, от широких к узким.
   Правила выше по файлу задают базовое состояние, эти блоки его переопределяют.
   ========================================================================== */

@media (max-width:1280px){
  .main-nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(20,24,28,0.97);
    backdrop-filter:blur(10px);
    border-top:1px solid var(--line-dark);
    padding:var(--s-2) var(--gutter) var(--s-3);
    margin-left:0;
    display:none;
  }
  .main-nav.is-open{ display:flex; }
  .main-nav a{ padding:15px 0; border-bottom:1px solid var(--line-dark); font-size:1.0625rem; }
  .main-nav a::after{ display:none; }
  .menu-button{ display:flex; }

  .nav-drop-menu{
    position:static; min-width:0; margin:4px 0 8px;
    background:rgba(255,255,255,0.05); box-shadow:none;
  }
  .nav-drop{ width:100%; }
  .nav-drop-btn{
    width:100%; justify-content:space-between;
    padding:15px 0; font-size:1.0625rem;
    border-bottom:1px solid var(--line-dark);
  }
  .nav-drop-menu a{ padding:12px 14px; }
}

@media (max-width:1100px){
  
  
  .trust-grid{ grid-template-columns:repeat(2,1fr); }
  .mini-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-inner{ grid-template-columns:1fr 1fr; }

  .timeline{ grid-template-columns:repeat(3,1fr); row-gap:var(--s-5); }
  .timeline::before{ display:none; }
  .tl-step{ padding-top:var(--s-2); border-top:2px solid var(--line); }
  .tl-step:first-child{ border-top-color:var(--accent); }
  .tl-step::before{ display:none; }
  .timeline{ padding-top:0; }

  .card-grid-4{ grid-template-columns:repeat(2,1fr); }
  .timeline-4,
  .timeline-6{ grid-template-columns:repeat(3,1fr); row-gap:var(--s-5); }
  .access-points-4{ grid-template-columns:repeat(2,1fr); }
  .mini-grid-3{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:980px){
  .calc-panel{ grid-template-columns:1fr; }
  .calc-result{
    border-left:0; border-top:1px solid var(--line);
  }
  .calc-cta{ flex-direction:row; align-items:center; flex-wrap:wrap; }
  .calc-cta .btn{ width:auto; }
}

@media (max-width:900px){
  .check-step{ min-height:320px; }

  .check-grid.opt-grid{ grid-template-columns:repeat(2,1fr); }
  

  .trust-row{ grid-template-columns:repeat(2,1fr); row-gap:var(--s-4); }

  .phone-copy small{ display:none; }
  .phone-copy strong{ font-size:0.9375rem; }
  
  

  .service-main-grid,
  .split,
  .split-reverse,
  .compare,
  .faq-layout,
  .contacts-layout{ grid-template-columns:1fr; }
  .photo-ph-tall{ aspect-ratio:4/3; }
  .object-grid{ grid-template-columns:1fr 1fr; }
  .object-grid .object-card:last-child{ grid-column:1 / -1; }
  .object-grid .object-card:last-child .photo-ph-object{ aspect-ratio:16/7; }

  
  
  .object-editorial{ grid-template-columns:1fr; }
  .access-points{ grid-template-columns:1fr; gap:var(--s-3); }

  .card-grid-3{ grid-template-columns:repeat(2,1fr); }
  .page-hero .split{ gap:var(--s-4); }
}

@media (max-width:760px){
  .hero{
    min-height:auto;
    padding-top:calc(var(--header-h) + 28px);
    padding-bottom:36px;
    align-items:flex-start;
  }
  /* На мобильном фото уходит вглубь: смысл несёт текст */
  .hero-media img{ object-position:66% 38%; }
  .hero-scrim{
    background:linear-gradient(180deg,
      rgba(20,24,28,0.82) 0%,
      rgba(20,24,28,0.62) 42%,
      rgba(20,24,28,0.86) 100%);
  }
  .hero h1{ line-height:0.98; }
  .hero-lead{ margin-top:var(--s-3); }
  
  
  
  .hero-actions{ flex-direction:column; align-items:stretch; margin-top:26px; }
  .hero-actions .btn{ width:100%; padding-block:16px; }

  body{ padding-bottom:78px; }
  .mobile-bar{ display:flex; }
  .header-actions .btn-sm{ display:none; }
  .header-phone .phone-copy{ display:none; }
  .header-phone{
    width:44px; height:44px; justify-content:center;
    border:1px solid rgba(255,255,255,0.35); border-radius:var(--r-md);
  }

  .trust-grid{ grid-template-columns:1fr; gap:var(--s-4); }

  .checks-two .check-list{ grid-template-columns:1fr; }
}

@media (max-width:640px){
  .wide-photo img{ aspect-ratio:4/3; }
  /* на мобильном фотополоса кадрируется по центру: текст идёт ниже */
  .photo-band-img{ object-position:center center; }

  .solution-line,
  .team-line{ flex-direction:column; align-items:flex-start; }
  .chain-line li{ font-size:0.9375rem; }

  .requisites > div{ grid-template-columns:1fr; gap:4px; padding-block:14px; }

  
  
  .trust-grid,
  .mini-grid,
  .object-grid{ grid-template-columns:1fr; }
  .object-grid .object-card:last-child .photo-ph-object{ aspect-ratio:4/3; }
  
  
  .band-inner .btn{ width:100%; }
  .footer-inner{ grid-template-columns:1fr; gap:var(--s-4); }
  .btn-row .btn{ width:100%; }
  .contact-messengers .btn{ width:100%; }

  .timeline{ grid-template-columns:1fr; row-gap:var(--s-4); }
  
  .symptoms li{ padding:8px 14px; font-size:0.875rem; }
  .ba-frame{ grid-template-columns:1fr; aspect-ratio:4/5; width:100%; }
  .ba-pane{ min-width:0; min-height:0; }
  .ba-pane-after{ box-shadow:inset 0 3px 0 var(--accent); }
  /* на мобильном панели идут одна под другой — акцент сверху, а не слева */
  .ba-pane-after::after{ left:0; right:0; top:0; bottom:auto; width:auto; height:3px; }
  .object-card-row{ grid-template-columns:1fr; }
  .object-card-row .photo-ph{ border-right:0; border-bottom:1px solid var(--line); }
  .photo-ph-square{ aspect-ratio:16/9; height:auto; }
  .photo-band{ min-height:300px; align-items:flex-end; }
  .photo-band-tag{
    position:static; display:block;
    margin:var(--s-3) var(--gutter) 0;
    max-width:none;
  }
  .photo-band{ flex-direction:column; justify-content:flex-end; }
  .photo-band-inner{ width:100%; }

  .card-grid-3,
  .card-grid-4{ grid-template-columns:1fr; }
  .timeline-4,
  .timeline-6{ grid-template-columns:1fr; row-gap:var(--s-4); }
  .access-points-4{ grid-template-columns:1fr; }
  .mini-grid-3{ grid-template-columns:1fr; }
  .page-hero .btn-row .btn{ width:100%; }
}

@media (max-width:560px){
  .check-step{ min-height:475px; }

  .check-cta{ flex-direction:column; align-items:stretch; }
  .check-cta .btn{ width:100%; }
  .check-verdict{ padding-left:12px; border-left-width:3px; }

  .check-grid.opt-grid{ grid-template-columns:1fr; }
  .check-grid.opt-grid-row{ grid-template-columns:1fr; }
  .check-invite{ flex-direction:column; align-items:stretch; }
  .check-invite .btn{ width:100%; }
  .check-nav{ flex-wrap:wrap; }
  .check-nav .btn{ flex:1; min-width:0; }
  .trust-row{ grid-template-columns:1fr; gap:var(--s-3); }

  .opt-grid{ grid-template-columns:1fr; }
  .opt-grid-row{ grid-template-columns:1fr 1fr; }
  .calc-cta{ flex-direction:column; align-items:stretch; }
  .calc-cta .btn{ width:100%; }
  .calc-cta .text-link{ justify-content:center; }
  .area-field{ width:100%; justify-content:center; }
  /* увеличиваем зону касания ползунка на телефоне */
  input[type="range"][data-calc="area-range"]{ height:44px; }
}

@media (max-width:420px){
  .logo-copy strong{ font-size:1.125rem; }
  .logo-mark{ width:28px; height:28px; }
  
  
  
  
  

  
  .section-head-row{ align-items:flex-start; }
}

@media (max-width:400px){
  .service-main .section-head h2{ font-size:1.875rem; }
  .contact-value{ font-size:1.375rem; }
}