/* ═══════════════════════════════════════════════════════════════════════════
   Небольшая страховка поверх темы dimone5.

   Основная вёрстка теперь на РОДНЫХ классах темы: mod-stoimost, acc-serv__it,
   block-doveryat, block-kakrabotajem, akcii__item, ikons__item, clin-list,
   btn-clin-*. Их рисует template.css, и именно поэтому сайт снова похож
   на себя.

   Здесь остаётся только то, чего в теме нет, потому что в оригинале эти
   куски приходили готовым HTML из базы Joomla:
     — подписи внутри блока «Что входит»
     — карточки услуг в section-uslugi
     — сводка калькулятора

   Всё на переменных темы, ни одного своего цвета.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Карусели без JS ───────────────────────────────────────────────────────
   Тема раскладывала слайдер, оборудование и логотипы каруселью Fancyapps.
   В сборке лежит только её CSS: сам JS в оригинале подключался инлайном
   из PHP-шаблона модуля, а PHP у нас нет.

   Класс .f-carousel__slide уже описан библиотекой (flex: 0 0 auto,
   ширина из переменной --f-carousel-slide-width). Поэтому раскладку
   не переопределяем, а задаём ту же переменную теми же значениями,
   что стояли в inline-стилях модулей: слайдер по 3, оборудование по 4,
   логотипы по 6 в ряд.

   overflow у слайда сбрасываем: библиотека ставит overflow-y: auto для
   свайпа, и без неё внутри карточек появлялись собственные полосы прокрутки. */
.f-carousel { display: flex; flex-wrap: wrap; align-items: stretch; }
.f-carousel__slide { overflow: visible; }

@media (min-width: 768px) {
  .mod-home-slider   .f-carousel__slide { --f-carousel-slide-width: calc(100% / 3); padding-left: 20px; padding-right: 20px; }
  .mod-oborudovanije .f-carousel__slide { --f-carousel-slide-width: calc(100% / 4); padding-left: 20px; padding-right: 20px; }
  .mod-klienty       .f-carousel__slide { --f-carousel-slide-width: calc(100% / 6); padding-left: 25px; padding-right: 25px; }
}

/* Слайдер услуг намеренно шире колонки (в теме width: 112% и отрицательный
   margin) и уезжает вправо за край. В оригинале лишнее пряталось,
   у нас же появлялась горизонтальная прокрутка всей страницы. */
.item-page__pervyj-ekran { overflow-x: clip; }
html, body { overflow-x: clip; }

/* Список оборудования не должен залезать под зелёную плашку.
   В теме у него width: 112% и margin-left: -12% — он намеренно заходил
   на плашку слева, потому что был каруселью: карточки проматывались,
   и «уезжающая» под плашку карточка читалась как продолжение ленты.
   У нас лента статическая, поэтому первая карточка каждого ряда была
   бы наполовину закрыта навсегда. Возвращаем список в свою колонку. */
.mod-oborudovanije .ikons__list { width: 100%; margin-left: 0; }

/* Зелёная плашка с заголовком у оборудования и прайса: в оригинале
   отступы приходили из содержимого поля, здесь задаём их сами. */
.mod-oborudovanije .ikons__precontent { padding: 60px 40px; }
.mod-oborudovanije .ikons__precontent .mod-oborudovanije__title,
.mod-oborudovanije .ikons__precontent .mod-oborudovanije__subtitle { color: var(--global-white); }
.mod-klienty .ikons__precontent { color: var(--global-gray-text); font-size: .95rem; }

/* ── Шапка ─────────────────────────────────────────────────────────────────
   В теме высота шапки зашита числом: `.header + * { margin-top: 140px }`.
   Поэтому её нельзя менять в одиночку — уменьшишь шапку, останется белая
   полоса на 140px. Держим обе величины на одной переменной. */
:root { --header-height: 72px; }

.header-container { padding-top: 10px; padding-bottom: 10px; }
.header__logo img { height: 48px; width: auto; }
.header + * { margin-top: var(--header-height) !important; }

.mod-phone__tel {
  font-size: 1rem; font-weight: 500; white-space: nowrap;
  text-decoration: none; color: var(--global-black);
}
.mod-phone__tel:hover { color: var(--global-green); }
.mod-phone__sep { color: var(--global-gray-3); margin: 0 8px; }
.mod-phone__messager { margin-right: 10px; }
.mod-phone__messager a { margin-right: 6px; }
.mod-phone__hours {
  font-size: .78rem; line-height: 1; color: var(--global-gray-3); margin-top: 6px;
}

@media (max-width: 991px) {
  :root { --header-height: 68px; }
  .header__logo img { height: 38px; }
  .mod-phone__hours { display: none; }
}

/* Выпадающее меню под шапкой. В теме были только стили содержимого
   (.popup-menu, .popup-bottom-menu, .popup-footer-menu) — сама подложка
   рисовалась bootstrap-модалкой, которой у нас нет. */
.menu-popup {
  top: var(--header-height, 140px);
  max-height: calc(100vh - var(--header-height, 140px));
  overflow-y: auto;
  z-index: 1030;
  border-top: 1px solid var(--global-gray-border);
  box-shadow: 0 24px 48px -28px rgba(36, 36, 36, .35);
}
/* Закрытое состояние: ссылки остаются в разметке и доступны поисковику,
   но не мешают ни глазу, ни клавиатуре. */
.menu-popup:not(.is-open) {
  display: none;
}
.menu-popup .popup-menu li a { color: var(--global-black); }
.menu-popup .popup-footer-menu li a { font-weight: 500; }

/* «Что входит в уборку» — пункты */
.vkhodit__item { margin-bottom: 26px; }
.vkhodit__item-title {
  font-weight: 700; font-size: 1.05rem; color: var(--global-black); margin-bottom: 4px;
}
.vkhodit__item-text { color: var(--global-gray-text); font-size: .95rem; }

/* Карточки услуг */
.uslugi__item {
  display: block; height: 100%; padding: 26px 24px; margin-bottom: 20px;
  background: var(--global-white); border: 1px solid var(--global-gray-border);
  border-radius: 20px; text-decoration: none !important; color: inherit;
  transition: border-color .25s ease, box-shadow .25s ease;
}
a.uslugi__item:hover {
  border-color: var(--global-green);
  box-shadow: 0 18px 40px -26px rgba(36,36,36,.4);
}
.uslugi__item-number { font-size: .82rem; font-weight: 700; color: var(--global-green); }
.uslugi__item-title  { font-weight: 700; font-size: 1.1rem; color: var(--global-black); margin: 8px 0 6px; }
.uslugi__item-text   { color: var(--global-gray-text); font-size: .95rem; margin-bottom: 12px; }
.uslugi__item-price  { font-weight: 700; color: var(--global-green); }

.section-uslugi__bg, .section-dopuslugi__bg {
  position: absolute; right: 0; bottom: 0; max-width: 34%; height: auto;
  opacity: .5; pointer-events: none; z-index: -1;
}

/* Сводка калькулятора */
.calc-form__total {
  padding: 26px; border-radius: 20px; background: var(--global-gray-bg);
  border: 1px solid var(--global-gray-border);
}
.calc-form__total-label {
  display: block; font-size: .8rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--global-gray-text);
}
.calc-form__total-value {
  display: block; font-size: 2.2rem; font-weight: 700;
  color: var(--global-black); line-height: 1.1; margin: 6px 0 18px;
}

/* Форма заявки на фоновой картинке */
.mod-zajavka { border-radius: 20px; overflow: hidden; }
.mod-zajavka__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.mod-zajavka__content { position: relative; z-index: 1; padding: clamp(24px,4vw,44px); max-width: 640px; }
.mod-zajavka__title { font-weight: 700; margin-bottom: 12px; }
.mod-zajavka__or { font-size: .95rem; color: var(--global-gray-text); margin-top: 14px; }

/* Сравнительная таблица */
.section-sravnenie table th { font-weight: 700; color: var(--global-black); }
.section-sravnenie table thead th { background: var(--global-gray-bg); }

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

/* ── Блок вопросов и ответов ───────────────────────────────────────────────
   В теме FAQ не было: на старом сайте таких блоков нет вообще. Верстается
   на bootstrap-аккордеоне, оформление — переменными темы, чтобы не выбиваться
   из прайса, который выглядит так же. */
.section-faq { padding-top: 60px; padding-bottom: 40px; }
.section-faq__title { margin-bottom: 10px; }
.section-faq__subtitle { color: var(--global-gray-text); margin-bottom: 30px; }
.section-faq .accordion-item { border-bottom: 1px solid var(--global-gray-border) !important; }
.section-faq .accordion-button {
  background: transparent !important; box-shadow: none !important;
  font-size: 1.15rem; line-height: 1.3; color: var(--global-black);
  padding: 22px 0; text-align: left;
}
.section-faq .accordion-button::after { display: none; }
.section-faq .accordion-button:hover { color: var(--global-green); }
.section-faq .accordion-button-ikon {
  color: var(--global-green); transition: transform .25s ease-in-out; transform-origin: center;
}
.section-faq .accordion-button.collapsed .accordion-button-ikon {
  transform: rotate(-90deg); color: var(--global-gray-3);
}
.section-faq .accordion-body { padding: 0 60px 22px 0; color: var(--global-gray-text); }
@media (max-width: 767px) { .section-faq .accordion-body { padding-right: 0; } }

/* ── Блог ──────────────────────────────────────────────────────────────────
   Раздела блога на старом сайте не было, поэтому классов в теме нет.
   Держимся её же переменных, чтобы статья не выглядела чужой. */
.blog-lead { font-size: 1.15rem; line-height: 1.55; color: var(--global-black); margin-bottom: 26px; }
.blog-date { font-size: .85rem; color: var(--global-gray-3); }
.blog-body h2 { margin-top: 36px; margin-bottom: 14px; }
.blog-body p { margin-bottom: 16px; }
.blog-related { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--global-gray-border); }
.blog-cta { margin-top: 26px; padding: 22px; background: var(--global-gray-bg); border-radius: 16px; }
.blog-list-layout .uslugi__item-number { color: var(--global-gray-3); font-weight: 400; }
.section-blog-links { padding-top: 30px; padding-bottom: 10px; }

/* ── Короткий блок отзывов на страницах услуг ──────────────────────────────
   Раньше рейтинг и отзывы жили только на /otzyvy, а решение человек
   принимает на странице услуги. Оформление наследуем от раздела отзывов,
   чтобы блок читался как его кусок, а не как отдельный виджет. */
.section-reviews-teaser { padding-top: 50px; padding-bottom: 20px; }
.reviews-teaser__score strong { font-size: 1.6rem; line-height: 1; color: var(--global-black); }
.section-reviews-teaser .otzivs__list-item {
  height: 100%; padding-top: 22px; padding-bottom: 22px;
  border: 1px solid var(--global-gray-border); border-radius: 16px;
}
.section-reviews-teaser .otzivs__list-item:hover { border-color: var(--global-green); }

/* ═══════════════════════════════════════════════════════════════════════════
   Разбор страниц скриншотами: что человек видит первым и обо что спотыкается.
   Ниже — правки по итогам просмотра каждой страницы поблочно.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Плитки услуг на первом экране главной ─────────────────────────────────
   В теме этот блок был каруселью: ширина 112 %, отрицательный отступ справа,
   и четвёртая карточка нарочно наполовину выглядывала за край — намёк,
   что ленту можно листать. Листать у нас нечем (JS карусели в сборке нет),
   поэтому «намёк» превращался в обрезанную карточку «Генеральная уборка»,
   у которой не видно ни цены, ни половины текста.
   Возвращаем блок в границы контейнера: пять карточек ложатся 3 + 2. */
.mod-home-slider { width: 100%; margin-right: 0 !important; }
.mod-home-slider .f-carousel__slide { display: flex; padding-bottom: 20px; }
.mod-home-slider__item { width: 100%; height: 100%; transition: box-shadow .2s ease, transform .2s ease; }
.mod-home-slider__item:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(36, 36, 36, .10); }

/* ── Зелёное кольцо на первом экране услуги ────────────────────────────────
   Декор из темы (tor-green_447.png) стоит с z-index: 1 и ложится поверх
   всего, что попало под него. На широком экране под него попадал абзац
   вступления — читать «доверяют уборку квартиры, дома или офи███» нельзя.
   Кольцо оставляем на месте (это часть узнаваемого оформления),
   но опускаем под текст и лишаем перехвата кликов. */
.item-page__pervyj-ekran_usluga-bg-img::after { z-index: 0; pointer-events: none; }
.item-page__pervyj-ekran_usluga .container { position: relative; z-index: 2; }

/* ── Телефоны в подвале ────────────────────────────────────────────────────
   Отдавались браузерным синим с подчёркиванием — единственное место
   на сайте, где ссылка выглядела как ссылка из девяностых. */
.footer-phone {
  display: inline-block;
  color: var(--global-black);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
}
.footer-phone:hover { color: var(--global-green); }

/* ── Зелёная плашка блока «Профессиональное оборудование» ──────────────────
   Заголовок в две строки не помещался по ширине и вылезал за плашку
   прямо на белый фон: «Профессиональн▌ое оборудование». */
.mod-oborudovanije .ikons__precontent { padding: 48px 34px; overflow-wrap: anywhere; }
.mod-oborudovanije .ikons__precontent .mod-oborudovanije__title {
  font-size: clamp(1.5rem, 2.1vw, 2.1rem);
  line-height: 1.15;
}

/* ── Вкладки «Дом / Бизнес» и «Комната / Кухня / Ванная» ───────────────────
   Самая дорогая находка обхода: у Bootstrap правило .tab-pane.active
   ставит display: block, и оно перебивает .row (display: flex) —
   две колонки переставали быть колонками. Картинка уезжала наверх во всю
   ширину, текст падал под неё двумя узкими столбцами, а правая половина
   экрана оставалась пустой. Так выглядели ВСЕ блоки с вкладками на сайте.
   Возвращаем flex там, где на панели вкладки лежит сетка. */
.tab-pane.active.row { display: flex; }

/* ── Кнопка первого экрана ─────────────────────────────────────────────────
   Зелёная кнопка попадала ровно на зелёное кольцо-декор и переставала
   читаться как кнопка: сливались и фон, и цвет. Отделяем тенью. */
.item-page__kontent-pervogo-ekrana .btn-clin-green {
  position: relative;
  z-index: 2;
  box-shadow: 0 10px 26px rgba(6, 180, 113, .28);
}

/* ── Блок оборудования по вертикали ────────────────────────────────────────
   Между рядами фотографий оставалось около 250 пикселей пустоты:
   слайд рассчитан на карусель фиксированной высоты, а у нас их два ряда. */
.mod-oborudovanije .f-carousel__slide { padding-top: 10px; padding-bottom: 10px; }
.mod-oborudovanije .ikons__item { height: auto; padding: 10px 0; }

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

   Заголовок в колонке 550 пикселей рассыпался на пять строк
   («Уборка / квартир в / Ростове-на- / Дону от 50 / руб/м2»). Уменьшаем
   до размера, на котором он занимает три строки и остаётся крупным. */
@media (min-width: 992px) {
  .item-page__pervyj-ekran_usluga-bg-img::after { left: 60px; width: 380px; height: 299px; }
  .item-page__zagolovok-pervogo-ekrana_usluga h1 { font-size: clamp(2rem, 3.1vw, 3rem); line-height: 1.1; }
}

/* ── Первый экран страниц без вступления ───────────────────────────────────
   В теме у первого экрана min-height: 626px — под фоновую картинку и
   вступительный текст. На прайсе, калькуляторе, контактах, отзывах, акциях
   и в блоге ни картинки, ни вступления нет: остаются крошки и заголовок,
   а под ними полтысячи пикселей пустого белого. Человек, открыв прайс,
   видит пустую страницу и должен догадаться прокрутить.

   :has() поддерживают все актуальные браузеры; там, где его нет,
   останется прежнее поведение — это не ломает вёрстку. */
@media (min-width: 992px) {
  .item-page__pervyj-ekran:not(:has(.item-page__kontent-pervogo-ekrana)):not(:has(img)) {
    min-height: 0;
    padding-bottom: 20px;
  }
}

/* ── Видеоотзывы ───────────────────────────────────────────────────────────
   Ссылка-обёртка осталась строчной: тема делала её блочной только внутри
   карусели, а карусели у нас нет. Из-за этого картинка вылезала за пределы
   своей ссылки вверх и уезжала под рамку с рейтингом — превью выглядели
   обрезанными по нижнему краю. */
.mod-videootzivs__item { display: block; line-height: 0; border-radius: 12px; overflow: hidden; }
.mod-videootzivs__item img { border-radius: 12px; transition: transform .25s ease; }
.mod-videootzivs__item:hover img { transform: scale(1.03); }

/* ── Карточки акций ────────────────────────────────────────────────────────
   Тема затемняла карточку только у типа «Акция» — там белый текст лежит
   на тёмной подложке. У типа «Скидка» текст оставался тёмно-серым прямо
   поверх фотографии: на снимке «Скидка 10 % на уборку после ремонта»
   читалось поверх пылесоса, а «Акция для новосёлов» — поверх многоэтажки.
   Кладём под текст общую затемняющую подложку и делаем текст белым
   во всех карточках. Заодно выравниваем их по высоте: вторая была ниже
   остальных на сотню пикселей, и ряд выглядел развалившимся. */
.akcii__item { height: 350px; }
.akcii__item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(36, 36, 36, .74) 0%, rgba(36, 36, 36, .42) 60%, rgba(36, 36, 36, .62) 100%);
}
.akcii__item-content { z-index: 2; }
.akcii__item .akcii__item-title,
.akcii__item .akcii__item-introtext { color: var(--global-white); }
.akcii__item .readmore.readmore-link a { color: var(--global-white); }
.akcii__item .readmore.readmore-link a:hover { color: var(--global-green-light); }

/* ── Карточки блога ────────────────────────────────────────────────────────
   Карточка кликабельна целиком, но выглядела статичной: ни подчёркивания,
   ни изменения при наведении — непонятно, что по ней можно перейти. */
.blog-list-layout .uslugi__item { transition: box-shadow .2s ease, transform .2s ease; }
.blog-list-layout .uslugi__item:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(36, 36, 36, .10); }

/* ── Шапка на телефоне ─────────────────────────────────────────────────────
   На узком экране в шапку переносились все пять пунктов главного меню
   и оба телефона: она вырастала до полутора сотен пикселей, а компенсация
   отступа осталась прежней — и шапка наезжала на заголовок страницы.
   На главной от H1 было видно только «…Ростове-на-Дону».

   Пункты меню на телефоне убираем: тот же список открывается кнопкой
   с тремя полосами, и дублировать его в шапке незачем. Оставляем
   логотип, кнопку меню и телефон — то, ради чего в шапку и заходят. */
@media (max-width: 991px) {
  .navigation-column { display: none !important; }
  .header-row { flex-wrap: nowrap; align-items: center; }
  .header .col-3 { width: auto; }
  /* col-lg-1 на телефоне превращается в колонку во всю ширину и выталкивает
     телефон за правый край экрана — кнопке меню хватает своей ширины. */
  .popup-menu-button-column { flex: 0 0 auto; width: auto; }
  .mod-phone { flex: 1 1 auto; width: auto; align-items: flex-end; }
}
@media (max-width: 575px) {
  .mod-phone__messager { display: none; }
  .mod-phone__tel + .mod-phone__tel { display: none; }
  .mod-phone__tel { font-size: .95rem; }
}

/* ── Мелочи, которые видно только на снимках ───────────────────────────────
   1. Заголовок вопроса в FAQ лежит в <h3>, а у h3 остался нижний отступ
      темы: между вопросами набегало по 60 лишних пикселей, и список
      из восьми вопросов растягивался на два экрана.
   2. Кнопка «Все отзывы» на странице отзыва читалась бледно-серым. */
.section-faq .accordion-header { margin: 0; }
.btn-clin.btn-clin-outline { color: var(--global-black); border: 1px solid var(--global-green); }
.btn-clin.btn-clin-outline:hover { color: var(--global-white); background-color: var(--global-green); }
.single-otzyv .otzivs__list-item-title { font-size: 1.15rem; }

/* ── Форма заявки без фоновой картинки ─────────────────────────────────────
   На страницах услуг у блока заявки есть своя подложка-фотография, и он
   читается как отдельный экран. На главной картинки нет: заголовок, поле
   и кнопки висели в левой половине белого листа, справа — пустота,
   и блок не выглядел формой. Даём ему собственную подложку и собираем
   содержимое по центру. */
.mod-zajavka:not(:has(.mod-zajavka__bg)) {
  background: var(--global-gray-bg);
  border-radius: 24px;
  padding: 48px 24px;
}
.mod-zajavka:not(:has(.mod-zajavka__bg)) .mod-zajavka__content { max-width: 620px; margin: 0 auto; }
.mod-zajavka:not(:has(.mod-zajavka__bg)) .mod-zajavka__form { max-width: 460px; }

/* Кнопки формы заявки были разной высоты: «Отправить в WhatsApp» выше
   «В Telegram» на десяток пикселей, пара смотрелась склеенной наспех. */
.mod-zajavka__form .btn { min-height: 58px; display: inline-flex; align-items: center; justify-content: center; }
.mod-zajavka__content a[href^="tel:"] { color: var(--global-green); }

/* Подзаголовок страницы (имя автора отзыва) — спокойнее заголовка H1. */
.item-page__podzagolovok { color: var(--global-gray-text); margin-top: 6px; }

/* ── Фотография бригады в блоке доверия ────────────────────────────────────
   Поле mainImage было в данных с самого начала, но никуда не выводилось.
   Ставим кадр между заголовком блока и плиткой из четырёх причин: до него
   человек читает обещания, после — видит, кто их выполняет. */
.block-doveryat__foto { margin: 0 0 40px; }
.block-doveryat__foto img { width: 100%; height: auto; border-radius: 20px; display: block; }
.block-doveryat__foto figcaption {
  margin-top: 12px;
  color: var(--global-gray-text);
  font-size: .95rem;
  line-height: 1.5;
}

/* Фотография на странице контактов. */
.mod-kontakty__foto { margin: 0 0 40px; }
.mod-kontakty__foto img { width: 100%; height: auto; border-radius: 20px; display: block; }
.mod-kontakty__foto figcaption { margin-top: 12px; color: var(--global-gray-text); font-size: .95rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   Анимация. Правило простое: движение помогает читать, а не развлекает.
   Ограничения взяты из справочника UI/UX — не больше одного-двух движущихся
   элементов на экран, смещение 8–16 px, длительность 300–400 мс.

   Всё живёт под классом .js, который ставит инлайновый скрипт в <head>.
   Нет JS — нет и стилей появления: контент виден сразу, и робот поисковика
   получает страницу целиком, а не пустые блоки с opacity: 0.
   ═══════════════════════════════════════════════════════════════════════════ */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .45s cubic-bezier(.22,.61,.36,1), transform .45s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* Ховеры. Только там, где есть курсор: на телефоне ховера нет, а :hover
   там залипает после тапа и оставляет карточку «нажатой». */
@media (hover: hover) and (pointer: fine) {
  .btn-clin { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease; }
  .btn-clin:hover { transform: translateY(-2px); }
  .akcii__item { transition: transform .25s ease, box-shadow .25s ease; }
  .akcii__item:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(36,36,36,.16); }
  .otzivs__list-item { transition: transform .2s ease, border-color .2s ease; }
  .section-reviews-teaser .otzivs__list-item:hover { transform: translateY(-2px); }
  .mod-videootzivs__item img { transition: transform .25s ease; }
  .ikons__item img { transition: transform .25s ease; }
  .mod-oborudovanije .ikons__item:hover img { transform: scale(1.05); }
}

/* Кнопка меню: три состояния одной иконки, поворот вместо подмены картинки. */
.popup-menu-button-column .btn-link svg { transition: transform .25s ease, opacity .25s ease; }
.popup-menu-button-column .btn-link[aria-expanded="true"] svg { transform: rotate(90deg); opacity: .7; }

/* FAQ: ответ раскрывается высотой, а не появляется рывком.
   grid-template-rows 0fr → 1fr — единственный способ анимировать высоту
   содержимого, которое заранее не измерено. */
.js .section-faq .accordion-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.js .section-faq .accordion-collapse.show { grid-template-rows: 1fr; }
.js .section-faq .accordion-collapse > * { overflow: hidden; min-height: 0; }
.js .section-faq .accordion-collapse:not(.show) { visibility: hidden; }
.js .section-faq .accordion-collapse.show { visibility: visible; }

/* Полоса прогресса чтения статьи. */
.read-progress {
  position: fixed; left: 0; top: 0; z-index: 1040;
  width: 100%; height: 3px;
  background: var(--global-green);
  transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
}

/* Полное отключение движения по системной настройке — страховка поверх
   того, что делает сам скрипт. */
/* Режим «уменьшить движение»: убираем сдвиги, зумы и полосу прогресса,
   но оставляем спокойное проявление прозрачностью — оно не укачивает. */
.js.calm .reveal { transform: none !important; transition: opacity .25s linear !important; }
.js.calm .item-page__zagolovok-pervogo-ekrana h1,
.js.calm .item-page__podzagolovok,
.js.calm .item-page__kontent-pervogo-ekrana p,
.js.calm .item-page__kontent-pervogo-ekrana .btn-clin { animation: calm-in .25s linear both; }
.js.calm .item-page__pervyj-ekran_usluga-bg-img img { animation: calm-in .25s linear both; }
.js.calm .btn-clin:hover,
.js.calm .akcii__item:hover,
.js.calm .otzivs__list-item:hover { transform: none !important; }
.js.calm .read-progress { display: none; }
@keyframes calm-in { from { opacity: 0; } to { opacity: 1; } }

/* ── Длинные тексты под кнопку «Подробнее» ─────────────────────────────────
   На страницах услуг тело статьи местами уходит на два-три экрана сплошного
   текста. Человек до кнопки заявки просто не доезжает, а простыня отпугивает
   раньше, чем он начнёт читать.

   Сделано на <details>: работает без JS, открывается с клавиатуры, и весь
   текст остаётся в разметке — для поиска ничего не потеряно. */
.textwrap { margin-top: 6px; }
.textwrap > summary {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; list-style: none;
  color: var(--global-green);
  font-weight: 500;
  padding: 10px 0;
  transition: color .2s ease;
}
.textwrap > summary::-webkit-details-marker { display: none; }
.textwrap > summary::after {
  content: ""; width: 10px; height: 10px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .25s ease;
}
.textwrap[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.textwrap > summary:hover { color: var(--global-green-light); }
.textwrap .textwrap__less { display: none; }
.textwrap[open] .textwrap__more { display: none; }
.textwrap[open] .textwrap__less { display: inline; }
.textwrap__body { padding-top: 6px; }

/* Мягкое проявление раскрытого текста — чтобы он не выпрыгивал. */
.js .textwrap[open] .textwrap__body { animation: textwrap-in .3s ease both; }
@keyframes textwrap-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Над свёрнутым хвостом — лёгкая растушёвка последнего абзаца: видно,
   что текст продолжается, а не оборван. */
.textwrap:not([open])::before {
  content: "";
  display: block;
  height: 28px;
  margin-top: -28px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 90%);
  pointer-events: none;
}

/* ── Первый экран: появление при загрузке ──────────────────────────────────
   Появление по прокрутке заметно только тому, кто прокрутил. Первый экран
   человек видит сразу — поэтому здесь анимация не по наблюдателю, а по
   загрузке страницы, с небольшой лесенкой: заголовок, текст, кнопка.
   Фотография чуть отъезжает из масштаба — это добавляет глубины и не
   двигает вёрстку, потому что меняется только transform. */
@keyframes hero-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes hero-zoom { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }

.js .item-page__zagolovok-pervogo-ekrana h1 { animation: hero-in .5s cubic-bezier(.22,.61,.36,1) both; }
.js .item-page__podzagolovok { animation: hero-in .5s cubic-bezier(.22,.61,.36,1) .08s both; }
.js .item-page__kontent-pervogo-ekrana p { animation: hero-in .5s cubic-bezier(.22,.61,.36,1) .12s both; }
.js .item-page__kontent-pervogo-ekrana .btn-clin { animation: hero-in .5s cubic-bezier(.22,.61,.36,1) .22s both; }
.js .item-page__pervyj-ekran_usluga-bg-img img { animation: hero-zoom .7s cubic-bezier(.22,.61,.36,1) both; }
.js .mod-home-slider__item { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .js .item-page__zagolovok-pervogo-ekrana h1,
  .js .item-page__podzagolovok,
  .js .item-page__kontent-pervogo-ekrana p,
  .js .item-page__kontent-pervogo-ekrana .btn-clin,
  .js .item-page__pervyj-ekran_usluga-bg-img img { animation: none !important; }
}

/* ── Форма заявки поверх фотографии ────────────────────────────────────────
   Старый фон был крупным планом распылителя: пятна бликов приходились ровно
   на заголовок, поле и кнопки, и текст читался с трудом. Новый кадр снят
   с пустой светлой стеной слева — специально под текст.

   Но одной картинкой это не лечится: на узком экране кроп сдвигается,
   и под буквы может попасть что угодно. Поэтому под содержимым лежит
   белая подложка, к правому краю сходящая на нет. Фотография остаётся
   видна там, где её ничто не перекрывает, а текст читается всегда. */
.mod-zajavka:has(.mod-zajavka__bg)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,
    rgba(255,255,255,.94) 0%,
    rgba(255,255,255,.90) 38%,
    rgba(255,255,255,.55) 60%,
    rgba(255,255,255,0) 78%);
  pointer-events: none;
}
.mod-zajavka__content { z-index: 2; }

/* Кадр широкий: на телефоне показываем его левую часть — ту самую стену,
   на которой стоит текст. Иначе в узкое окно попадает середина картинки. */
@media (max-width: 767px) {
  .mod-zajavka__bg { object-position: 28% center; }
  .mod-zajavka:has(.mod-zajavka__bg)::before {
    background: linear-gradient(180deg,
      rgba(255,255,255,.95) 0%,
      rgba(255,255,255,.92) 65%,
      rgba(255,255,255,.75) 100%);
  }
}