/* ==========================================================================
   КОМПОНЕНТЫ
   ==========================================================================
   Повторяющиеся элементы: заголовки секций, кнопки, карточки, формы,
   рейтинг, плашки, аккордеон. Каждый описан один раз и используется везде.
   ========================================================================== */


/* ==========================================================================
   ЗАГОЛОВОК СЕКЦИИ
   ========================================================================== */

.head { margin-bottom: var(--gap-head); }

/* Вариант с кнопкой справа */
.head--row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.head__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.head__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(25px, 3.2vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 8px 0 6px;
}

.head__sub {
  margin: 0;
  font-size: clamp(13.5px, 1.1vw, 15px);
  color: var(--text-muted-2);
}

/* На тёмном фоне */
.section--dark .head__eyebrow,
.strip .head__eyebrow,
.head__eyebrow--dark { color: var(--on-dark-dim); }

.section--dark .head__title,
.strip .head__title { color: var(--on-dark); }

.section--dark .head__sub,
.strip .head__sub { color: var(--on-dark-body); }


/* ==========================================================================
   КНОПКИ
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: var(--r);
  font-family: var(--font-head);
  font-weight: 600;
  text-align: center;
}

/* Светлая с рамкой — «Все услуги и цены», «Все отзывы» */
.btn--ghost {
  min-height: 46px;
  padding: 0 18px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  font-size: 14.5px;
  color: var(--text);
}
.btn--ghost:hover { border-color: var(--navy); color: var(--text); }

/* Та же кнопка на тёмной секции */
.btn--ghost-dark {
  min-height: 46px;
  padding: 0 18px;
  background: var(--glass-2);
  border: 1px solid var(--glass-line-2);
  font-size: 14.5px;
  color: var(--on-dark);
}
.btn--ghost-dark:hover { background: var(--glass-hover-2); color: var(--on-dark); }

/* Основная синяя */
.btn--primary {
  min-height: 50px;
  padding: 0 22px;
  background: var(--navy);
  color: var(--on-dark);
  font-size: 15px;
}
.btn--primary:hover { background: var(--blue-hover); color: var(--on-dark); }

/* Белая на тёмном — главная кнопка в шапке страницы */
.btn--white {
  min-height: 54px;
  padding: 0 24px;
  gap: 10px;
  background: var(--on-dark);
  color: var(--navy);
  font-size: 15.5px;
}
.btn--white:hover { background: var(--on-dark-bright); color: var(--navy); }

/* Стеклянная на тёмном — вторая кнопка в шапке страницы */
.btn--glass {
  min-height: 54px;
  padding: 0 24px;
  gap: 10px;
  background: var(--glass-2);
  border: 1px solid var(--glass-line-2);
  color: var(--on-dark);
  font-size: 15.5px;
}
.btn--glass:hover { background: var(--glass-hover-2); color: var(--on-dark); }

/* Ссылка со стрелкой */
.btn--link {
  min-height: var(--tap);
  font-size: 15px;
  color: var(--blue-hover);
}
.btn--link:hover { color: var(--navy); }

.btn__icon { display: flex; flex: 0 0 auto; }
.btn__icon--dim { opacity: 0.85; }


/* ==========================================================================
   РЕЙТИНГ И ЛОГОТИПЫ ПЛОЩАДОК
   ========================================================================== */

.rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  height: 28px;
}

.rating__score { display: flex; align-items: baseline; gap: 7px; }

.rating__value {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--on-dark);
}

.rating__of {
  display: block;
  font-size: 12.5px;
  line-height: 1;
  color: var(--on-dark-dim);
}

.rating__divider {
  width: 1px;
  height: 18px;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.16);
}

.rating__logos {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 14px;
  height: 28px;
}

.rating__logo {
  width: 22px;
  height: 28px;
  flex: 0 0 auto;
  opacity: 0.9;
  background-size: 19px 19px;
  background-repeat: no-repeat;
  background-position: center;
}

/* Уменьшённый вариант для футера */
.rating--footer { margin-top: 18px; }
.rating--footer .rating__value { font-size: 22px; }
.rating--footer .rating__of { font-size: 12px; color: var(--on-dark-dim-2); }
.rating--footer .rating__divider { background: var(--glass-line); }


/* ==========================================================================
   КАРТОЧКИ
   ========================================================================== */

/* --- Сетки ------------------------------------------------------------------ */

.grid { display: grid; gap: var(--gap-grid); }
.grid--services { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--gap-grid-s); }
.grid--cards    { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.grid--kpi      { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.grid--steps    { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.grid--3        { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }

/* --- Карточка услуги --------------------------------------------------------- */

.card-service {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(16px, 1.7vw, 22px);
  color: var(--text);
  transition: box-shadow var(--ease), border-color var(--ease);
}
.card-service:hover {
  border-color: var(--line-card);
  box-shadow: var(--shadow-card);
  color: var(--text);
}

.card-service__icon {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: var(--r-11);
  background: var(--bg-icon);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-service__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.card-service__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.25;
  color: var(--text);
}

.card-service__price { font-size: 13.5px; color: var(--green); font-weight: 500; }

.card-service__arrow {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: var(--r-pill);
  background: var(--bg-icon);
  color: var(--blue-hover);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Показатель (цифра) ------------------------------------------------------- */

.kpi {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--glass-card);
  border: 1px solid var(--glass-line-3);
  border-radius: var(--r-lg);
  padding: clamp(18px, 2vw, 28px);
}

.kpi__value {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--on-dark);
}

.kpi__label { font-size: 14px; line-height: 1.5; color: var(--on-dark-body); }

/* Тот же блок, но с иконкой и словесным заголовком вместо цифры —
   используется для этапов расчёта сметы и зон выезда. */
.kpi--step .step__icon {
  background: var(--glass-2);
  color: var(--accent-soft);
}
.kpi--step .kpi__value {
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* --- Карточка с фотографией (объект, статья) ---------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  color: var(--text);
}

a.card { transition: box-shadow var(--ease), border-color var(--ease); }
a.card:hover {
  border-color: var(--line-card);
  box-shadow: var(--shadow-post);
  color: var(--text);
}

/* Место под фотографию. Пока фотографий нет — серая плашка с подписью,
   ровно как в макете. Когда появятся, сюда встанет <img>. */
.card__photo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  background: var(--bg-icon);
  border-bottom: 1px solid var(--line);
}

.card__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__slot {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-slot);
  text-align: center;
  padding: 0 12px;
}

.card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--glass-badge);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--on-dark);
}

.card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--pad-card);
}

.card__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.25;
  color: var(--text);
}

/* Уменьшённый заголовок — для карточек писем и мелких плиток */
.card__title--sm { font-size: clamp(15px, 1.2vw, 17px); }

/* Вертикальная пропорция — для сканов документов */
.card__photo--tall { aspect-ratio: 3 / 4; }

.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 13.5px;
  color: var(--text-muted-2);
}

/* Карточка статьи — заголовок крупнее, низ прижат */
.card--post .card__body { gap: 0; }

.card--post .card__title {
  font-size: clamp(17px, 1.5vw, 21px);
  letter-spacing: -0.015em;
}

.card__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  margin-top: auto;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
  color: var(--text-dim);
}

.card__dot {
  width: 3px;
  height: 3px;
  border-radius: var(--r-pill);
  background: #C3D0E0;
}

.card__arrow {
  margin-left: auto;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: var(--r-pill);
  background: var(--bg-icon);
  color: var(--blue-hover);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Карточка этапа ------------------------------------------------------------ */

.step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(18px, 1.9vw, 26px);
}

.step__icon {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: var(--r-11);
  background: var(--bg-icon-blue);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.step__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.2;
  color: var(--text);
}

.step__text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* --- Карточка отзыва ------------------------------------------------------------ */

.review {
  /* Внутри карточки есть подпись для программ чтения с экрана
     («Источник: Яндекс.Карты»). Она позиционирована абсолютно, и без
     этой строки отсчитывалась бы от всей страницы. Подробнее — base.css. */
  position: relative;

  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(20px, 2.2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.review__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.review__stars,
.review__source {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 0 12px;
}

/* Только иконка, без подписи — значок становится круглым.
   Ширина равна высоте, отступы и промежуток не нужны. */
.review__source {
  width: 30px;
  padding: 0;
  gap: 0;
  justify-content: center;
}

.review__rating {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1;
  color: var(--text);
}

.review__logo {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Источник без логотипа — буква вместо значка.
   Раньше здесь подставлялся логотип Яндекс.Карт, и карточка врала
   об источнике отзыва. */
.review__logo--mark {
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: #EDF2F9;
  font-size: 10px;
  font-weight: 800;
  color: #6B8199;
}

.review__text {
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.6;
  color: var(--text-body);
  text-wrap: pretty;
}

.review__person {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #E6EDF6;
  display: flex;
  align-items: center;
  gap: 12px;
}

.review__avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--bg-avatar);
  border: 1px solid var(--line-avatar);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-body);
}

.review__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.review__name {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--text);
}

.review__company { font-size: 12.5px; color: var(--text-muted-2); }


/* ==========================================================================
   ПЛАШКИ И ФИЛЬТРЫ
   ========================================================================== */

/* Плашка-преимущество на тёмном фоне */
.perk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-pill);
  padding: 8px 14px 8px 11px;
}

.perk__icon { flex: 0 0 auto; color: var(--accent-light); display: flex; align-items: center; }

.perk__title {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1;
  color: var(--on-dark);
  white-space: nowrap;
}

/* Город */
.city-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  background: var(--bg);
  border: 1px solid var(--line);
  font-size: 14px;
  color: var(--text-muted-5);
}

.city-chip__icon { display: flex; color: var(--accent); }
.city-chip__name { font-weight: 500; }
.city-chip__dist { font-size: 12.5px; color: var(--text-slot); }

/* Фильтр-переключатель */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 14px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  color: var(--text-muted-4);
  transition: background-color var(--ease), border-color var(--ease), color var(--ease);
}
.chip:hover { border-color: var(--navy); color: var(--navy); }

.chip.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--on-dark);
  font-weight: 600;
}

.chip__count {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 12px;
  color: var(--text-slot);
}
.chip.is-active .chip__count { color: rgba(255, 255, 255, 0.6); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }


/* ==========================================================================
   ФОРМЫ
   ========================================================================== */

/* --- Форма в шапке страницы ------------------------------------------------- */

/*
 |  РАЗМЕРЫ КАРТОЧКИ
 |  ---------------------------------------------------------------------
 |  Значения в clamp() подобраны под три ширины, по которым мерили макет:
 |
 |      свойство            390 px    834 px    1440 px
 |      ------------------  --------  --------  --------
 |      padding             20        24        28
 |      заголовок           19        21        23
 |      отступ под текстом  18        21        24
 |      промежуток полей    15        18        18
 |
 |  Средняя колонка получается сама: коэффициент vw подобран так, чтобы
 |  на 834 px значение попадало точно в нужное. Между этими ширинами
 |  размеры меняются плавно, без скачков на границах.
 */
.form-card {
  /* Отступ вынесен в переменную: его же берёт нижний край формы
     в модальном окне на телефоне — там к нему добавляется запас
     под домашнюю полоску iPhone. Чтобы значения не разъезжались,
     оно должно быть записано в одном месте. */
  --form-pad: clamp(20px, 2.88vw, 28px);

  flex: 1 1 340px;
  max-width: 400px;
  min-width: 0;
  background: var(--bg);
  border-radius: var(--r-xl);
  padding: var(--form-pad);
  box-shadow: var(--shadow-form);
}

.form-card__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(19px, 2.52vw, 23px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0 0 7px;
}

.form-card__sub {
  font-size: clamp(13px, 1.7vw, 14px);
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0 0 clamp(18px, 2.52vw, 24px);
}

.form-card__fields {
  display: flex;
  flex-direction: column;
  gap: clamp(15px, 1.5vw, 18px);
}

/* Поле с подчёркиванием */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-bottom: 1px solid var(--line-field);
  padding-bottom: 7px;
  transition: border-color var(--ease);
}
.field:focus-within { border-color: var(--navy); }

.field__label { font-size: 12px; color: var(--text-label); }

.field__input {
  border: none;
  padding: 0;
  font-family: var(--font-head);
  font-size: 15.5px;
  font-weight: 500;
  color: var(--text);
  background: transparent;
  outline: none;
  width: 100%;
}

/*
 |  НА СЕНСОРНЫХ ЭКРАНАХ ПОЛЕ ОСТАЁТСЯ 16 px.
 |
 |  Safari на iPhone приближает страницу, как только палец попадает
 |  в поле со шрифтом меньше 16 px, и обратно сама она не отъезжает —
 |  человек дозаполняет заявку на «увеличенном» сайте вслепую.
 |  Полпикселя разницы глазом не видно, а заявку это сохраняет.
 |
 |  Мышь и трекпад под это правило не попадают: там 15.5 px, как в макете.
 */
@media (hover: none) and (pointer: coarse) {
  .field__input { font-size: 16px; }
}

.form-card__submit {
  grid-column: 1 / -1;
  min-height: 52px;
  margin-top: 2px;
  border: none;
  border-radius: var(--r);
  background: var(--navy);
  color: var(--on-dark);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  box-shadow: var(--shadow-btn);
  transition: background-color var(--ease);
}
.form-card__submit:hover { background: var(--blue-hover); }
.form-card__submit[disabled] { opacity: 0.6; cursor: default; }

.form-card__note {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.form-card__hint {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-label);
  text-align: center;
}

.form-card__secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #566885;
  font-size: 11.5px;
}
.form-card__secure-icon { flex: 0 0 auto; color: var(--green-shield); display: flex; }

/* На планшете поля становятся в две колонки — как в макете на 834 px */
@media (min-width: 768px) and (max-width: 1079px) {
  .form-card__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
  }
}

@media (max-width: 1079px) {
  .form-card { flex: 1 1 100%; max-width: none; }
}

/* --- Короткая форма в блоке призыва ------------------------------------------ */

.form-inline {
  flex: 0 1 460px;
  min-width: 0;
  margin-right: 78px;
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.form-inline__input {
  flex: 1;
  min-width: 0;
  min-height: 54px;
  padding: 0 16px;
  border-radius: var(--r);
  border: 1px solid var(--line-input);
  background: var(--bg);

  /* Ровно 16, ни на волос меньше: при 15,5 iPhone приближал страницу,
     как только человек касался поля, и обратно уже не отдалял.
     Разница в полпикселя незаметна, а поведение меняется полностью. */
  font-size: 16px;

  color: var(--text);
  outline: none;
  transition: border-color var(--ease);
}
.form-inline__input:focus { border-color: var(--navy); }

.form-inline__btn {
  flex: 0 0 auto;
  min-height: 54px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: none;
  border-radius: var(--r);
  background: var(--navy);
  color: var(--on-dark);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15.5px;
  transition: background-color var(--ease);
}
.form-inline__btn:hover { background: var(--blue-hover); }
.form-inline__btn[disabled] { opacity: 0.6; cursor: default; }

@media (max-width: 640px) {
  .form-inline {
    flex: 1 1 100%;
    margin-right: 0;
    flex-direction: column;
  }
  .form-inline__btn { flex: 1 1 auto; }
}

/* --- Служебное поле-ловушка для роботов --------------------------------------- */
.trap {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* --- Сообщения формы ----------------------------------------------------------- */

.form-msg {
  border-radius: var(--r);
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  display: none;
}
.form-msg.is-visible { display: block; }
.form-msg--ok   { background: var(--bg-green); color: var(--green-shield); }
.form-msg--err  { background: #FCEBEB; color: #A32626; }

/* В короткой форме сообщение занимает всю ширину под полем */
.form-inline { flex-wrap: wrap; }
.form-inline .form-msg { flex: 1 1 100%; }

.field.has-error { border-color: #D46A6A; }
/* ==========================================================================
   ВОПРОСЫ И ОТВЕТЫ
   ==========================================================================
   Как в макете, два разных вида одного блока:

     телефон и планшет — карточки: вопрос и ответ в общей рамке;
     компьютер         — вкладки: слева список, справа один большой ответ.

   Разметка одна. Карточка .faq__item на широком экране растворяется
   (display: contents), и вопрос с ответом встают в колонки сетки.
   ========================================================================== */

/* --- Телефон и планшет: карточки -------------------------------------------- */

.faq {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq__item {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

.faq__tab {
  width: 100%;
  min-height: 62px;
  padding: 12px 14px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
}

.faq__label {
  flex: 1;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 15.5px;
  line-height: 1.3;
  color: var(--text);
}

/* Номер и стрелка нужны только в режиме вкладок */
.faq__num,
.faq__arrow { display: none; }

/* Плюс-минус — только на узком экране */
.faq__sign {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--r);
  background: var(--bg-icon-blue);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 18px;
  line-height: 20px;
  transition: background-color var(--ease), color var(--ease);
}

.faq__tab.is-active .faq__sign {
  background: var(--accent);
  color: var(--on-dark);
}

.faq__panel { display: none; }
.faq__panel.is-open { display: block; }

.faq__answer {
  margin: 0;
  padding: 0 14px 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted-2);
  text-wrap: pretty;
}

/* Заголовок и подвал ответа нужны только в режиме вкладок */
.faq__panel-head,
.faq__panel-foot { display: none; }


/* --- Компьютер: вкладки ------------------------------------------------------ */

@media (min-width: 1080px) {

  /* Слева столбец вопросов, справа один ответ во всю высоту.
     --faq-rows приходит из шаблона: это количество вопросов, без него
     ответ не смог бы растянуться на весь столбец. */
  .faq {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: repeat(var(--faq-rows, 6), auto);
    column-gap: 12px;
    row-gap: 6px;
    align-content: start;
  }

  /* Карточка растворяется: вопрос и ответ становятся ячейками сетки */
  .faq__item { display: contents; }

  .faq__tab {
    grid-column: 1;
    min-height: 56px;
    padding: 12px 16px;
    gap: 14px;
    justify-content: flex-start;
    border: 1px solid var(--line);
    background: var(--bg);
    border-radius: var(--r);
    color: var(--text);
    cursor: pointer;
    transition: background-color var(--ease), border-color var(--ease), color var(--ease);
  }
  .faq__tab:hover { border-color: var(--navy); }

  .faq__label {
    font-size: clamp(14.5px, 1.15vw, 16px);
    color: inherit;
  }

  .faq__num {
    display: block;
    flex: 0 0 auto;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: 0.06em;
    min-width: 20px;
    color: #7C93B4;
  }

  .faq__arrow { display: flex; flex: 0 0 auto; color: #7C93B4; }
  .faq__sign  { display: none; }

  .faq__tab.is-active {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--on-dark);
  }
  .faq__tab.is-active .faq__num,
  .faq__tab.is-active .faq__arrow { color: var(--on-dark); }

  .faq__panel {
    grid-column: 2;
    grid-row: 1 / -1;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: clamp(22px, 2.4vw, 32px);
    flex-direction: column;
    gap: 14px;
  }
  .faq__panel.is-open { display: flex; }

  .faq__panel-head {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .faq__panel-mark {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: var(--r);
    background: var(--bg-icon-blue);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
  }

  .faq__panel-q {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: clamp(17px, 1.5vw, 21px);
    line-height: 1.25;
    color: var(--text);
  }

  .faq__answer {
    padding: 0;
    font-size: clamp(14px, 1.15vw, 16px);
    line-height: 1.65;
  }

  .faq__panel-foot {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
  }

  .faq__panel-note { font-size: 13px; color: var(--text-label); }

  .faq__panel-phone {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 14.5px;
    color: var(--navy);
  }
}


/* ==========================================================================
   ХЛЕБНЫЕ КРОШКИ
   ========================================================================== */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--on-dark-dim);
  margin-bottom: clamp(18px, 2vw, 28px);
}
.crumbs a { color: var(--on-dark-dim); }
.crumbs a:hover { color: var(--on-dark); }
.crumbs__sep { color: #4E5D75; }
.crumbs [aria-current] { color: var(--on-dark-nav); }


/* Третья строка под именем — объект и объём работ (страница услуги) */
.review__meta { font-size: 12px; color: var(--text-placeholder); }


/* ==========================================================================
   МОДАЛЬНОЕ ОКНО
   --------------------------------------------------------------------------
   Настоящий тег <dialog>, а не div с классом. Всё, что касается поведения —
   верхний слой, ловушка фокуса, Esc, недоступность фона — делает браузер
   сам; здесь только внешний вид. Подробнее — в assets/js/modules/modal.js.
   ========================================================================== */

.modal {
  /* Окно растягиваем на весь экран, а карточку внутри центрируем.
     Так нажатие по затемнённому фону попадает в само окно, и его
     можно поймать, чтобы закрыть. */
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;

  margin: 0;
  padding: clamp(16px, 4vw, 40px);
  border: none;
  background: transparent;
  overflow: auto;
  overscroll-behavior: contain;

  /* Плавная прокрутка пальцем внутри окна на iPhone */
  -webkit-overflow-scrolling: touch;
}

/* Высота по видимой части экрана. Обычные 100% на телефоне считаются
   без учёта адресной строки браузера, из-за чего низ окна уезжает
   под неё. Единица dvh считает по тому, что видно на самом деле. */
@supports (height: 100dvh) {
  .modal { height: 100dvh; max-height: 100dvh; }
}

.modal:not([open]) { display: none; }

/*
   Центрируем не через align-items, а автоматическими отступами у карточки.

   Разница видна, когда содержимое выше экрана — например, когда на телефоне
   вылезла клавиатура и от окна осталась половина. При align-items: center
   верх карточки в такой ситуации обрезается и до него нельзя доскроллить:
   известная ловушка флексбокса. Отступ auto такого не делает — прокрутка
   достаёт до любого края.
*/
.modal[open] {
  display: flex;
  justify-content: center;
}

/* --- Затемнение с размытием ------------------------------------------------
   ::backdrop — слой, который браузер сам подкладывает под окно.
   Размытие ставим с запасной строкой -webkit-: Safari до сих пор
   понимает только её. Если браузер не умеет размывать вовсе — останется
   просто затемнение, и это нормально. */

.modal::backdrop {
  background: rgba(6, 20, 40, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* --- Карточка -------------------------------------------------------------- */

.modal__box {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: auto;
}

/* Форма внутри окна занимает его целиком: на странице она стоит в ряд
   с текстом и делит место, здесь делить не с кем. */
.modal__box .form-card {
  flex: 1 1 auto;
  max-width: none;
  box-shadow: var(--shadow-form-2);
}

/* --- Крестик --------------------------------------------------------------- */

.modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;

  /* --tap — принятый на сайте размер, в который уверенно попадает палец */
  width: var(--tap);
  height: var(--tap);
  display: flex;
  align-items: center;
  justify-content: center;

  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--ease), color var(--ease);
}

.modal__close:hover {
  background: var(--bg-soft);
  color: var(--navy);
}

.modal__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- Появление и закрытие ---------------------------------------------------
   Затемнение проявляется, карточка одновременно всплывает снизу.
   При закрытии — то же самое в обратную сторону; класс is-closing вешает
   скрипт и ждёт конца анимации, прежде чем убрать окно. */

@keyframes modal-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-fade-out { from { opacity: 1; } to { opacity: 0; } }

@keyframes modal-box-in {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

@keyframes modal-box-out {
  from { opacity: 1; transform: translateY(0)    scale(1); }
  to   { opacity: 0; transform: translateY(10px) scale(.99); }
}

/*
   У появления НЕТ режима заливки both — и это принципиально.

   both удерживает начальный кадр, пока анимация не проиграется. Если она
   почему-то не запустится, карточка так и застынет в начальном состоянии —
   а начальное состояние на телефоне это «уехала вниз за пределы экрана».
   Окно открыто, а на экране пусто.

   Без заливки обычное положение карточки — правильное. Анимация только
   проигрывает появление; не проиграется — просто появится сразу.
*/
.modal[open]::backdrop     { animation: modal-fade-in 220ms ease; }
.modal[open] .modal__box   { animation: modal-box-in 260ms cubic-bezier(.22, 1, .36, 1); }

.modal.is-closing::backdrop   { animation: modal-fade-out 180ms ease both; }
.modal.is-closing .modal__box { animation: modal-box-out 180ms ease both; }

/* Выключены анимации — окно просто появляется и просто исчезает.
   Скрипт это учитывает и в таком случае не ждёт конца анимации. */
@media (prefers-reduced-motion: reduce) {
  .modal[open]::backdrop,
  .modal[open] .modal__box,
  .modal.is-closing::backdrop,
  .modal.is-closing .modal__box {
    animation: none;
  }
}

/* --- Телефон ----------------------------------------------------------------
   Карточку прижимаем к низу экрана: там её достаёт большой палец.
   Выезжает тоже снизу — так понятнее, откуда она взялась. */

@media (max-width: 640px) {
  .modal {
    padding: 0;
  }

  /* Прижато к низу — верхний отступ auto, нижнего нет.
     Через align-items делать нельзя, см. пояснение выше. */
  .modal__box {
    max-width: none;
    margin-top: auto;
    margin-bottom: 0;
  }

  .modal__box .form-card {
    border-radius: var(--r-xl) var(--r-xl) 0 0;

    /* Отступ под домашнюю полоску iPhone: без него нижняя строка
       оказывается прямо под ней и читается плохо. На телефонах
       без полоски значение равно нулю. */
    padding-bottom: calc(var(--form-pad) + env(safe-area-inset-bottom));
  }

  @keyframes modal-box-in {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes modal-box-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(100%); }
  }
}


/* ==========================================================================
   КАРТОЧКИ НА ПРОТИВОПОЛОЖНОМ ФОНЕ
   --------------------------------------------------------------------------
   Обычно .kpi живёт на тёмных секциях, а .card — на светлых, и оба
   написаны под свой фон. На странице «О компании» макет ставит их
   наоборот: цифры на светлом, парк техники на тёмном.

   Поэтому здесь не новые классы, а поправка по окружению — точно так же,
   как это уже сделано для заголовков секций (.section--dark .head__title).
   Сама карточка не знает, где стоит; знает секция.
   ========================================================================== */

/* --- Цифры на светлом ------------------------------------------------------- */

.section--soft .kpi,
.section--white .kpi {
  background: var(--bg);
  border-color: var(--line);
}

.section--soft .kpi__value,
.section--white .kpi__value { color: var(--navy); }

.section--soft .kpi__label,
.section--white .kpi__label { color: var(--text-muted); }

/* --- Карточка на тёмном ------------------------------------------------------ */

.section--dark .card {
  background: var(--glass-card);
  border-color: var(--glass-line-3);
  border-radius: var(--r-lg);
  color: var(--on-dark);
}

.section--dark .card__photo { background: var(--glass-photo); }

.section--dark .card__slot  { color: var(--on-dark-slot); }
.section--dark .card__title { color: var(--on-dark); }
.section--dark .card__meta  { color: var(--on-dark-body); }


/* --- Реквизиты на тёмной секции ---------------------------------------------
   На странице контактов макет ставит реквизиты на синий фон.
   Сами строки написаны под светлый, поэтому здесь поправка по окружению.

   ГЛАВНОЕ ЗДЕСЬ — ПЕРВОЕ ПРАВИЛО. Карточка .requisites по умолчанию белая.
   Если её оставить белой на синей секции, а текст сделать светлым, строки
   становятся белыми по белому и исчезают совсем. В макете на тёмном фоне
   карточка стеклянная — сквозь неё виден синий, и текст читается. */

.section--dark .requisites {
  background: var(--glass-card);
  border-color: var(--glass-line-3);
}

.section--dark .requisites__title { color: var(--accent-soft); }
.section--dark .rows__item        { border-color: var(--glass-line-3); }
.section--dark .rows__value       { color: var(--on-dark); }

/* Подпись строки здесь не переопределяется: --text-dim одинаково читается
   и на светлом, и на тёмном — в макете там ровно этот же цвет. */

/* --- Блок заявки на светлом фоне ---------------------------------------------
   Заголовок, лид и список обещаний написаны под тёмную шапку страницы.
   На контактах тот же блок стоит на светлом — возвращаем тёмный текст. */

.section--cta .hero__title    { color: var(--navy); }
.section--cta .hero__lead     { color: var(--text-muted-3); }
.section--cta .promises__item { color: var(--text-body); }


/* ==========================================================================
   СНИМКИ В КАРТОЧКАХ
   --------------------------------------------------------------------------
   Правило одно на весь сайт: РАЗМЕР ЗАДАЁТ БЛОК, а снимок под него
   подстраивается. Не наоборот.

   Почему это важно. Фотографии приходят разные: одна 1200×900, другая
   3456×2304, третья вообще вертикальная. Если пустить их «как есть»,
   каждая карточка вытянется под свой снимок, и ряд карточек развалится
   по высоте — что и произошло, когда появились первые фотографии.

   Теперь у каждого места фиксированные пропорции (16:10 у карточек,
   4:3 у техники, 16:9 у статей), снимок заполняет их целиком, а лишнее
   аккуратно обрезается по краям. Поэтому в записках к папкам и указаны
   пропорции: снимая в них, вы точно знаете, что не обрежется.
   ========================================================================== */

/* Блоки, внутри которых может оказаться снимок.
   position + overflow обязательны: без них картинка вылезает наружу. */
.card__photo,
.srv-card__photo,
.story__photo,
.post__photo,
.work__compare {
  position: relative;
  overflow: hidden;
}

.photo-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* заполнить блок, лишнее обрезать */
  object-position: center;
  display: block;
}

/* ============================================================================
   СНИМКИ ОБЪЕКТА КРУПНО — ОДНА ФОТОГРАФИЯ СО ШТОРКОЙ
   ============================================================================
   Открывается нажатием на фотографию объекта.

   БЫЛО И ПОЧЕМУ ПЕРЕДЕЛАНО. Раньше здесь показывались два снимка рядом,
   в белом окне с шапкой. Получалось громоздко и, главное, мелко: ширина
   делилась надвое, и каждая фотография выходила вдвое меньше, чем могла.
   На телефоне снимки вставали друг под друга, и окно превращалось
   в длинную простыню, которую надо прокручивать.

   Стало: ОДНА фотография во весь доступный размер, со шторкой посередине —
   та же, что на карточке. Сравнение так и читается: одно место, одна
   точка съёмки, тянешь — видишь разницу. Места это занимает вдвое меньше,
   а работает одинаково и на мониторе, и на телефоне: фотография просто
   занимает всё, что есть.

   Белого окна больше нет вовсе. Фон тёмный, подписи светлые — ничто
   не спорит с фотографией.

   Разметку собирает assets/js/modules/lightbox.js, шторку двигает
   assets/js/modules/compare.js — тот же модуль, что и на карточке.
   ========================================================================= */

.lb {
  /* Во весь экран: и подложка, и содержимое. Нажатие по пустому месту
     попадает в сам <dialog> — его и ловим, чтобы закрыть. */
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}

.lb:not([open]) { display: none; }

.lb[open] {
  display: flex;
  flex-direction: column;
}

.lb::backdrop { background: rgba(6, 20, 40, 0.92); }

/* --- Сама фотография ------------------------------------------------------ */

.lb__stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 16px 12px;
}

.lb__compare {
  --pct: 50%;

  position: relative;

  /*
     Размер подбирается САМ, по тому, чего меньше — ширины или высоты.

     Снимки на сайте в пропорции 4:3. Берём наименьшее из двух: всю
     доступную ширину и ту ширину, при которой высота ещё помещается
     в экран. Никаких точек излома, никаких отдельных правил для
     телефона — одна строка работает везде.

     dvh, а не vh: на телефоне полоса браузера то появляется, то уходит,
     и vh про это не знает — нижний край фотографии уезжал бы под неё.
  */
  width: min(100%, calc((100dvh - 190px) * 4 / 3));
  max-width: 1200px;
  aspect-ratio: 4 / 3;

  overflow: hidden;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7);
  touch-action: pan-y;
}

.lb__side {
  position: absolute;
  inset: 0;
}

/* Левая половина обрезается по шторке — ровно как на карточке */
.lb__side--before { clip-path: inset(0 calc(100% - var(--pct)) 0 0); }

.lb__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lb__empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.04);
}

/* Линия — она же ручка. Тянуть можно за неё на любой высоте, а не только
   за кружок: в кружок надо попасть, а в линию во всю высоту — нет. */
.lb__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pct);
  width: 3px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
  z-index: 2;
  cursor: ew-resize;
  touch-action: none;
}

/* Невидимое поле захвата вокруг линии — сорок четыре точки */
.lb__line::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 44px;
  transform: translateX(-50%);
}

.lb__handle {
  position: absolute;
  top: 50%;
  left: var(--pct);
  transform: translate(-50%, -50%);
  z-index: 3;

  /* Сорок четыре точки — размер, в который уверенно попадает палец.
     На карточке кружок меньше, и это была главная жалоба на шторку
     там: в неё не попадали. Здесь места хватает, экономить незачем. */
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  font-size: 14px;
  line-height: 1;
  cursor: ew-resize;
  touch-action: none;
  box-shadow: 0 6px 20px -6px rgba(0, 0, 0, 0.6);
}

.lb__handle:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

.lb__tag {
  position: absolute;
  top: 12px;
  z-index: 1;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(6, 20, 40, 0.6);
  backdrop-filter: blur(6px);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  pointer-events: none;
}

.lb__tag--before { left: 12px; }
.lb__tag--after  { right: 12px; }

/* --- Крестик -------------------------------------------------------------- */

.lb__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.lb__close:hover { background: rgba(255, 255, 255, 0.22); }
.lb__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* --- Подписи и переход между объектами ------------------------------------ */

.lb__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px 18px;
  color: #fff;
}

.lb__titles {
  flex: 1;
  min-width: 0;          /* иначе длинное название распирает строку */
  text-align: center;
}

.lb__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
}

.lb__meta {
  margin-top: 3px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.66);
}

.lb__arrow {
  flex: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

.lb__arrow:hover { background: rgba(255, 255, 255, 0.14); }
.lb__arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.lb__count {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.66);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  /* На телефоне оставляем фотографии почти всё: подписи мельче,
     отступы у́же. Стрелки остаются по краям — до них дотягивается
     большой палец. */
  .lb__stage { padding: 52px 8px 10px; }
  .lb__compare { width: min(100%, calc((100dvh - 165px) * 4 / 3)); }
  .lb__bar { gap: 8px; padding: 0 10px 14px; }
  .lb__title { font-size: 14.5px; }
  .lb__meta  { font-size: 12px; }
}

/* --- Появление ------------------------------------------------------------ */

.lb[open]::backdrop { animation: modal-fade-in 200ms ease; }
.lb[open] .lb__stage { animation: modal-box-in 240ms cubic-bezier(.22, 1, .36, 1); }

.lb.is-closing::backdrop { animation: modal-fade-out 160ms ease both; }
.lb.is-closing .lb__stage { animation: modal-box-out 160ms ease both; }

@media (prefers-reduced-motion: reduce) {
  .lb[open]::backdrop,
  .lb[open] .lb__stage,
  .lb.is-closing::backdrop,
  .lb.is-closing .lb__stage { animation: none; }
}