/* ==========================================================================
   SMARTHOME — STYLE.CSS
   ==========================================================================
   Единый файл стилей проекта. Дальнейшая разработка добавляет код точечно
   в соответствующий раздел ниже, не переписывая файл целиком.

   Оглавление:
     1.  Root font-size system (база rem-расчётов)
     2.  Fonts (@font-face)
     3.  Variables (:root)
     4.  Reset
     5.  Base
     6.  Typography
     7.  Layout / Container
     8.  Reusable Components
     9.  Header
     10. Main Page Sections
     11. Service Page
     12. Forms
     13. Footer
     14. Utilities / Animations
     15. Responsive (общие примечания по брейкпоинтам)
   ========================================================================== */


/* ==========================================================================
   1. ROOT FONT-SIZE SYSTEM
   ==========================================================================
   Контрольные ширины макета (1rem = 20px ТОЧНО на каждой из них):
     — Desktop: 1920px  ← основной Desktop-макет проекта
     — Tablet:  1024px
     — Mobile:   375px

   Брейкпоинты проекта:
     Desktop: > 1024px
     Tablet:  768px – 1024px
     Mobile:  < 768px (минимально поддерживаемая ширина — 320px)

   — Desktop (> 1024px): font-size плавно масштабируется через vw
     пропорционально ширине viewport, без clamp().
     Формула: 20 / 1920 * 100 = 1.0416667vw.
     На 1920px (контрольная ширина Desktop) это даёт ровно 20px.
     Ниже, на 1440px (НЕ являющемся отдельным контрольным макетом),
     значение пропорционально меньше: 1rem = 15px — это ожидаемое
     поведение, а не отдельный брейкпоинт.
     Начиная с 1920px и выше масштаб больше не увеличивается — зафиксирован
     на 20px через отдельный @media (min-width: 1920px).
     Между Desktop (с 1025px) и Tablet (до 1024px включительно) формулы
     заданы независимо друг от друга и на границе 1024/1025px не совпадают
     (на 1024px Tablet даёt 20px, на 1025px Desktop даёt ≈10.68px) — это
     сознательное решение по этой правке; при необходимости плавного стыка
     на границе нужно отдельно пересматривать формулу Tablet.

   — Tablet (768px – 1024px): без изменений в рамках этой правки.
     font-size = 100vw * (20 / 1024).
     При 1024px (контрольная ширина Tablet) — ровно 20px.
     При 768px (нижняя граница диапазона) — ровно 15px.

   — Mobile (< 768px): без изменений в рамках этой правки.
     Линейная формула, "сшитая" в двух точках:
       — 768px (верхняя граница, стык с Tablet) → 15px;
       — 375px (контрольная ширина Mobile-макета) → ровно 20px.
     font-size = calc(24.771px - 1.2723vw).
     Ниже 375px (до минимально поддерживаемых 320px) формула продолжает
     работать по той же прямой (на 320px это ~20.7px) — осознанное решение,
     чтобы текст не становился нечитаемо мелким на самых узких экранах.
   ========================================================================== */

html {
  /* Desktop, 1025px – 1919px: 1rem = 20px ровно на контрольной ширине
     1920px, ниже — пропорционально меньше вместе с viewport. */
  font-size: 1.0416667vw; /* = 20 / 1920 * 100 */
}

@media (min-width: 1920px) {
  html {
    /* Начиная с 1920px и выше — масштаб больше не растёт. */
    font-size: 20px;
  }
}

@media (max-width: 1024px) {
  html {
    /* Tablet: 768–1024px. 20px при 1024px, 15px при 768px. */
    font-size: calc(100vw * 20 / 1024);
  }
}

@media (max-width: 767px) {
  html {
    /* Mobile: 320–767px (визуально до 768px). 15px при 768px (стык с
       Tablet), 20px при 375px (контрольная ширина макета). */
    font-size: calc(24.771px - 1.2723vw);
  }
}


/* ==========================================================================
   2. FONTS
   ==========================================================================
   Шрифт проекта: Onest (400 / 500 / 700), локальные файлы из assets/fonts/.

   ВАЖНО: имена файлов ниже — ожидаемые (стандартная схема именования).
   Реальных файлов шрифта в assets/fonts/ на момент создания фундамента ещё
   нет (см. assets/fonts/README.md). Как только файлы будут добавлены —
   проверить/поправить пути в src ниже под их фактические имена.
   ========================================================================== */

@font-face {
  font-family: "Onest";
  src: url("../fonts/Onest-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Onest";
  src: url("../fonts/Onest-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Onest";
  src: url("../fonts/Onest-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* ==========================================================================
   3. VARIABLES
   ==========================================================================
   Только реально используемые глобальные переменные дизайн-системы.
   Новые переменные добавлять, когда значение подтверждённо повторяется
   между компонентами — не заранее.
   ========================================================================== */

:root {
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-text: #082A4D;
  --color-accent: #30B5F3;

  /* Полупрозрачные варианты для второстепенных элементов
     (ссылки на тёмном фоне / текст-плейсхолдер форм).
     rgba() выбран как наиболее надёжный и предсказуемый вариант
     (шире поддержка, чем у color-mix()). */
  --color-white-50: rgba(255, 255, 255, 0.5);
  --color-black-50: rgba(0, 0, 0, 0.5);

  /* Hover & Interaction Polish: две переиспользуемые переменные для новых
     hover-transition'ов (простых color/background-переходов и поворотов
     SVG-стрелок), чтобы не разбрасывать одинаковые duration/easing по
     разным селекторам. Остальные новые transition (scale, underline,
     градиент → solid) — разовые случаи, заданы напрямую на своём месте. */
  --transition-base: 0.28s ease; /* color/background-color, 250–300ms */
  --transition-rotate: 0.3s ease; /* поворот SVG-стрелок, 300ms */
}


/* ==========================================================================
   4. RESET
   ==========================================================================
   Минимальный аккуратный reset. Без стороннего normalize/reset.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

figure {
  margin: 0;
}

/* outline глобально не отключается — доступность фокуса сохраняется */


/* ==========================================================================
   5. BASE
   ==========================================================================
   ========================================================================== */

body {
  margin: 0;
  font-family: "Onest", sans-serif;
  color: var(--color-text);
  background: var(--color-white);
}


/* ==========================================================================
   6. TYPOGRAPHY
   ==========================================================================
   Семантически независимые классы (не привязаны к тегам h1/h2/h3).
   Desktop-значения — базовые, Tablet/Mobile переопределяют только
   font-size (остальные свойства по ТЗ одинаковы на всех брейкпоинтах).
   ========================================================================== */

.hero-title {
  font-size: 4.8rem; /* 96px @1920 */
  font-weight: 700;
  line-height: 100%;
  letter-spacing: -0.05em;
}

.section-title {
  font-size: 3.2rem; /* 64px @1920 */
  font-weight: 700;
  line-height: 100%;
  letter-spacing: -0.05em;
}

.small-title {
  font-size: 1.6rem; /* 32px @1920 */
  font-weight: 700;
  line-height: 100%;
  letter-spacing: -0.05em;
}

.text {
  font-size: 0.9rem; /* 18px @1920 */
  font-weight: 400;
  line-height: 110%;
}

.button-text {
  font-size: 0.9rem; /* 18px @1920 */
  font-weight: 500;
  line-height: 110%;
}

.menu-text {
  font-size: 0.9rem; /* 18px @1920 */
  font-weight: 400;
  line-height: 110%;
}

.footer-text {
  font-size: 1.4rem; /* 28px @1920 */
  font-weight: 400;
  line-height: 110%;
}

/* Tablet — макет 1024px */
@media (max-width: 1024px) {
  .hero-title {
    font-size: 4.2rem; /* 84px @1024 */
  }

  .section-title {
    font-size: 2.8rem; /* 56px @1024 */
  }

  .small-title {
    font-size: 1.25rem; /* 25px @1024 */
  }

  .text {
    font-size: 0.75rem; /* 15px @1024 */
  }

  .button-text {
    font-size: 0.9rem; /* 18px @1024 */
  }

  .menu-text {
    font-size: 0.9rem; /* 18px @1024 */
  }

  .footer-text {
    font-size: 1.4rem; /* 28px @1024 */
  }
}

/* Mobile — макет 375px */
@media (max-width: 767px) {
  .hero-title {
    font-size: 2.4rem; /* 48px @375 */
  }

  .section-title {
    font-size: 1.4rem; /* 28px @375 */
  }

  .small-title {
    font-size: 0.9rem; /* 18px @375 */
  }

  .text {
    font-size: 0.6rem; /* 12px @375 */
  }

  .button-text {
    font-size: 0.6rem; /* 12px @375 */
  }

  .menu-text {
    font-size: 0.6rem; /* 12px @375 */
  }

  .footer-text {
    font-size: 0.7rem; /* 14px @375 */
  }
}


/* ==========================================================================
   7. LAYOUT / CONTAINER
   ==========================================================================
   Единственный базовый контейнер проекта. Дополнительные варианты
   контейнера не создаются без необходимости.
   ========================================================================== */

.container {
  width: 100%;
  max-width: 86rem; /* 1720px */
  margin-inline: auto;
  /* QA-фикс: раньше здесь одновременно стояли max-width И
     padding-inline: 5rem, из-за чего фактическая ширина контента на
     Desktop оказывалась 1520px вместо требуемых 1720px (double padding).
     На Desktop (>1024px) max-width всегда "включён" (86rem в текущих
     rem-единицах всегда меньше 100% ширины вьюпорта), поэтому боковой
     отступ от края viewport до края .container уже даёт ровно нужные
     100px@1920 (и далее пропорционально/авто выше и ниже) — он берётся
     из auto-margin, а не из padding. Собственный padding-inline
     .container на Desktop больше не нужен и не задаётся. */
}

@media (max-width: 1024px) {
  .container {
    max-width: none;
    padding-inline: 2.5rem; /* 50px, Tablet */
  }
}

@media (max-width: 767px) {
  .container {
    padding-inline: 0.8rem; /* 16px, Mobile */
  }
}


/* ==========================================================================
   8. REUSABLE COMPONENTS
   ==========================================================================
   Переиспользуемые компоненты (кнопки, карточки и т.п.) добавляются сюда
   по мере появления реального макета и повторяемости паттерна.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Круглая CTA-кнопка (например "Get a free quote" в Hero).
   Компонент самодостаточен по внешнему виду; конкретное позиционирование
   на странице (position + top/right/bottom/left) задаётся модификатором
   в разделе конкретного блока (см. .hero__cta в разделе 10).
   -------------------------------------------------------------------------- */

.round-cta {
  --round-cta-inner: 11rem; /* 220px @1920/1024 */
  --round-cta-outer: 12rem; /* 240px @1920/1024 */

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--round-cta-outer);
  height: var(--round-cta-outer);
  rotate: -10deg; /* отдельное CSS-свойство (не transform), чтобы не
       конфликтовать с transform: translateY(...) reveal-анимации
       (раздел 14) и с translate центрирования в .hero__cta ниже —
       translate/rotate/scale складываются независимо от transform */
  scale: 1; /* базовое значение для плавного transition к hover (см. ниже) */
  transition: scale 0.38s ease;
}

/* Hover & Interaction Polish: масштабирование всей кнопки (внешнее кольцо +
   внутренний круг — оба являются потомками .round-cta, поэтому scale
   родителя увеличивает их вместе как единое целое). `scale` — отдельное
   CSS-свойство (как и `rotate`/`translate` выше), поэтому оно складывается
   с существующими rotate:-10deg и translate:-50% 0 (Tablet/Mobile, см.
   .hero__cta ниже) без конфликта и без необходимости во вложенном wrapper.
   .hero (раздел 10) имеет overflow:visible, поэтому увеличенная кнопка не
   обрезается. */
@media (hover: hover) and (pointer: fine) {
  .round-cta:hover {
    scale: 1.15;
  }
}

.round-cta__outer {
  position: absolute;
  inset: 0;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
}

.round-cta__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--round-cta-inner);
  height: var(--round-cta-inner);
  border-radius: 50%;
  background: linear-gradient(to right, var(--color-accent) 0%, #047FB8 100%);
  color: var(--color-white);
  text-align: center;
  box-shadow: 0 1.5rem 1.5rem -1.25rem rgba(48, 181, 243, 0.5); /* X0 Y30 Blur30 Spread-25 #30B5F380 */
}

@media (max-width: 767px) {
  .round-cta {
    --round-cta-inner: 7.8rem; /* 156px @375 */
    --round-cta-outer: 8.5rem; /* 170px @375 */
  }
}


/* ==========================================================================
   9. HEADER
   ==========================================================================
   Header — position:fixed, общий для всех страниц (главная и страницы
   услуг): остаётся в верхней части viewport при прокрутке поверх любых
   секций. Внутри самого Header — прежняя полупрозрачная glass-подложка
   .nav__list/.dropdown (--header-glass-bg + backdrop-filter), она не
   зависит от состояния Header и одинакова всегда.

   Состояния: ровно два, оба переключаются одним классом .header--scrolled
   (см. app.js, initHeaderScrollState):
   - по умолчанию — background-color: transparent (Header поверх Hero);
   - .header--scrolled — background-color: #000000 (после того как Hero
     прокручен). Логотип, навигация, кнопки, Burger и вся остальная
     визуальная система при этом не меняются — переключается только фон
     самого Header. Прежняя система тем по секциям (data-header-theme,
     .header--dark, тёмный логотип, тёмно-синяя подложка) удалена как
     избыточная. */

.header {
  --header-glass-bg: rgba(0, 0, 0, 0.2); /* чёрный 20%; локальная переменная
       компонента Header — не выносится в глобальный :root, т.к. нужна
       только здесь (используется также в .dropdown ниже) */
  --header-glass-blur: 38px;

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  /* Header намеренно получает z-index "mobile header controls" (60),
     а не 10: position + z-index создают собственный stacking context,
     и все потомки header (включая logo и burger) сравниваются с
     остальными элементами страницы только как единое целое на уровне
     z-index самого .header. Чтобы logo/burger оставались доступны поверх
     .mobile-menu (z-index:50) на Tablet/Mobile — как требует ТЗ — весь
     header целиком должен стоять выше него. Порядок слоёв внутри самого
     header (например dropdown поверх остальных пунктов меню) от этого
     значения не зависит и работает независимо. */

  /* Вертикальные padding вместо прежнего top:2rem — так же 40px @1920/1024
     визуального отступа сверху (top padding), но теперь ровно тот же
     отступ появляется и снизу (bottom padding) после самого высокого
     внутреннего элемента: итоговая высота Header = padding-top + высота
     контента + padding-bottom, без жёсткой height (см. п.5 ТЗ). */
  padding-block: 2rem; /* 40px @1920/1024 */

  background-color: transparent;
  transition: background-color 300ms ease;
}

/* Единственное альтернативное состояние Header — см. пояснение в шапке
   раздела выше. Меняется только background-color самого .header; glass-
   подложка меню (--header-glass-bg), текст, логотип, кнопки и Burger не
   зависят от этого класса и остаются такими же, как в прозрачном
   состоянии. Класс переключается из app.js (initHeaderScrollState) по
   нижней границе .hero текущей страницы. */
.header--scrolled {
  background-color: #000000;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.header__logo img {
  display: block;
  width: 6.6rem; /* 132px @1920/1024 */
  height: auto;
}

/* --------------------------------------------------------------------------
   Desktop navigation
   -------------------------------------------------------------------------- */

.nav__list {
  display: flex;
  /* QA-фикс: было align-items:center. Services (кнопка с chevron) была
     физически выше остальных пунктов, поэтому center выравнивал все пункты
     по центру именно этой большей высоты — у более низких пунктов (в т.ч.
     активного Main с белой плашкой) появлялся зазор сверху/снизу внутри
     внешней плашки. stretch растягивает каждый .nav__item на всю высоту
     строки — сама плашка активного пункта теперь всегда занимает 100%
     высоты .nav__link (см. height:100% ниже). Подтверждённая ручная правка
     пользователя — не убирать. */
  align-items: stretch;
  gap: 0.8rem; /* 16px */
  background: var(--header-glass-bg);
  backdrop-filter: blur(var(--header-glass-blur));
  -webkit-backdrop-filter: blur(var(--header-glass-blur));
  border-radius: 5rem;
}

.nav__item {
  position: relative;
}

.nav__link {
  position: relative; /* контейнер для подчёркивания ::after ниже */
  display: inline-flex;
  align-items: center;
  height: 100%; /* QA-фикс: .nav__item теперь stretch (см. выше) — без этого
       сам <a>/<button> внутри него остаётся своей исходной content-height и
       не дотягивается до полной высоты растянутого .nav__item. Подтверждённая
       ручная правка пользователя — не убирать. */
  padding: 1.2rem 1.6rem; /* 24px 32px */
  color: var(--color-white);
  border-radius: 5rem;
  white-space: nowrap;
}

/* Геометрия пункта меню (padding) отделена от активного оформления:
   раньше увеличенный padding-inline был завязан на .nav__item--active,
   что означало, что при отключении активного состояния (например на
   странице услуги, см. раздел 11) Main терял свои увеличенные боковые
   отступы. Теперь geometry — через .nav-item--main (у Main она нужна
   всегда, независимо от страницы и активного состояния), а
   .nav__item--active отвечает только за визуал (фон/цвет), без padding/
   ширины/высоты — и продолжает работать для любого пункта, который в
   будущем станет активным (Services и т.д.), не меняя его геометрию. */
.nav-item--main .nav__link {
  padding-inline: 2rem; /* 40px — тот же увеличенный отступ, что раньше был у .nav__item--active */
}

.nav__item--active .nav__link {
  background: var(--color-white);
  color: var(--color-text);
}

/* QA-фикс: полупрозрачная белая плашка на hover заменена на анимированное
   подчёркивание. Линия — псевдоэлемент на самом .nav__link, вставленный с
   отступом, равным его же горизонтальному padding (1.6rem с каждой
   стороны): .nav__link — inline-flex, размер по контенту, поэтому ширина
   его content-box (без padding) в точности равна ширине текста (а у
   Services — текста + gap + chevron), отдельный wrapper-span не нужен.
   Активный пункт исключён — подчёркивание ему не требуется. */
.nav__link::after {
  content: "";
  position: absolute;
  left: 1.6rem;
  right: 1.6rem;
  bottom: 1.1rem; /* чуть ниже нижнего края текста, в пределах padding */
  height: 1px;
  background: var(--color-white);
  scale: 0 1;
  transform-origin: left;
  transition: scale 0.3s ease;
}

/* Services: подчёркивание синхронизировано с клавиатурным доступом к
   dropdown (как раньше было с плашкой) — не только hover. */
.nav__item--dropdown:focus-within .nav__link--services::after {
  scale: 1 1;
}

@media (hover: hover) and (pointer: fine) {
  .nav__item:not(.nav__item--active) .nav__link:hover::after {
    scale: 1 1;
  }
}

/* .nav__link--services — триггер дропдауна на Desktop, это <button>, а не
   <a>: он только открывает/закрывает подменю и никуда не ведёт (QA-фикс).
   Сброс нативных стилей кнопки, чтобы она визуально ничем не отличалась
   от остальных пунктов nav__link. */
.nav__link--services {
  gap: 0.4rem;
  background: none;
  border: none;
  /* QA-фикс: было `font: inherit` — этот шорткат сбрасывал ВСЕ
     font-свойства (включая font-size/line-height) на унаследованные от
     родителя (<li>), а не только font-family. Поскольку ни один предок
     кнопки не задаёт свой font-size, унаследованное значение оказывалось
     равно 1rem (20px @1920) вместо 0.9rem (18px) из .menu-text — тот же
     класс, что и у остальных пунктов меню, применённый на этом же элементе,
     но проигрывавший `font: inherit` по порядку в каскаde. font-family:
     inherit убирает только браузерный шрифт кнопки, не трогая typography
     из .menu-text. Подтверждённая ручная правка пользователя — не убирать. */
  font-family: inherit;
  /* QA-фикс (найден при подготовке service.html): было `color: inherit`.
     На главной это случайно давало белый цвет, т.к. <button> наследовал
     его через всю цепочку от .hero{color:var(--color-white)}. На
     service.html Header не вложен в .hero — цепочка наследования вместо
     этого доходит до body{color:var(--color-text)} (тёмно-синий), и текст
     Services становился нечитаемым на тёмном фоне. Явный цвет убирает
     зависимость от места вставки Header в разметку. */
  color: var(--color-white);
  cursor: pointer;
}

.nav__chevron {
  display: block;
  width: 0.5rem; /* 10px @1920/1024, viewBox 12×6 — height:auto сохраняет пропорцию */
  height: auto;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.nav__link--services[aria-expanded="true"] .nav__chevron {
  transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   Desktop Services dropdown
   -------------------------------------------------------------------------- */

.dropdown {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 50%;
  min-width: 11rem;
  padding: 0.8rem;
  background: var(--header-glass-bg);
  backdrop-filter: blur(var(--header-glass-blur));
  -webkit-backdrop-filter: blur(var(--header-glass-blur));
  border-radius: 1.2rem; /* 24px */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 0.4rem);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
  z-index: 20;
}

/* Hover-safe bridge: невидимый мост над самим dropdown, перекрывающий
   зазор (0.6rem) между пунктом меню и началом дропдауна. Курсор,
   двигаясь вниз от "Services" к дропдауну, физически проходит через этот
   промежуток — без моста :hover на .nav__item--dropdown в этот момент
   слетает (bounding box <li> не включает абсолютно спозиционированный
   .dropdown), и меню закрывается раньше времени. Мост — часть .dropdown
   (потомок того же <li>), поэтому наведение на него сохраняет :hover
   у родителя. Ширина моста равна ширине dropdown, высота — ровно зазору,
   визуально ничего не добавляется (только затравка для наведения). */
.dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.6rem;
  height: 0.6rem;
}

.nav__item--dropdown:hover .dropdown,
.nav__item--dropdown:focus-within .dropdown,
.dropdown.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.dropdown__list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.dropdown__link {
  display: block;
  padding: 0.4rem 0.8rem;
  color: var(--color-white);
  border-radius: 0.6rem;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Contact us — Desktop
   -------------------------------------------------------------------------- */

.header__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem; /* 10px */
  padding: 1.2rem 2rem; /* 24px 40px */
  background: var(--color-white);
  color: var(--color-text);
  border-radius: 5rem;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.header__cta svg {
  width: 0.65rem; /* 13px */
  height: 0.65rem;
  flex-shrink: 0;
  transition: transform var(--transition-rotate);
}

/* Hover & Interaction Polish: цветовая инверсия + доворот стрелки со
   "вправо-вниз" (базовая ориентация иконки, см. .service-card__arrow svg
   ниже) до строго горизонтальной — тот же -45deg, что и у
   .services-nav__btn--next svg на той же исходной иконке. Поворот — вокруг
   центра svg (transform-origin по умолчанию), текст не смещается, т.к.
   поворачивается только сам svg, а не вся кнопка. */
@media (hover: hover) and (pointer: fine) {
  .header__cta:hover {
    background: var(--color-text);
    color: var(--color-white);
  }

  .header__cta:hover svg {
    transform: rotate(-45deg);
  }
}

/* --------------------------------------------------------------------------
   Burger — скрыт на Desktop, появляется на Tablet/Mobile
   -------------------------------------------------------------------------- */

.burger {
  display: none;
  position: relative;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-white);
}

.burger__line {
  position: absolute;
  left: 50%;
  height: 0.1rem;
  background: var(--color-black);
  border-radius: 999px; /* технический hairline-элемент — px допустим */
  transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease,
    top 0.3s ease, left 0.3s ease;
}

/* --------------------------------------------------------------------------
   Tablet: 768–1024px
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .nav,
  .header__cta {
    display: none;
  }

  .burger {
    display: inline-flex;
    width: 2.5rem; /* 50px */
    height: 2.5rem;
  }

  /* Композиция покоя (QA-фикс): верхняя линия прижата к левому краю
     средней, нижняя — к правому краю средней (не три центрированные линии
     разной ширины, как было раньше). Все три линии позиционируются через
     точный левый край (left) — без translateX, translateY(-50%) остаётся
     только для вертикального центрирования каждой линии на её top-точке. */
  .burger__line--1 {
    top: calc(50% - 0.35rem); /* QA-фикс: gap увеличен с 3px до 4px (центр минус высота 3px + gap 4px) */
    left: calc(50% - 0.55rem); /* левый край = левый край средней линии */
    width: 0.55rem; /* 11px @1024 */
    height: 0.15rem; /* 3px @1024 — размер линии не менялся */
    transform: translateY(-50%);
  }

  .burger__line--2 {
    top: 50%;
    left: calc(50% - 0.55rem);
    width: 1.1rem; /* 22px @1024 */
    height: 0.15rem; /* 3px @1024 */
    transform: translateY(-50%);
  }

  .burger__line--3 {
    top: calc(50% + 0.35rem); /* QA-фикс: gap увеличен с 3px до 4px */
    left: 50%; /* правый край (left + width) = правый край средней линии */
    width: 0.55rem; /* 11px @1024 */
    height: 0.15rem; /* 3px @1024 */
    transform: translateY(-50%);
  }

  /* Открытое состояние: те же три линии трансформируются в крест —
     средняя гаснет, верхняя и нижняя расширяются до ширины средней линии
     (сохраняя свой left, где он уже совпадает) и поворачиваются на 45°/-45°. */
  .burger[aria-expanded="true"] .burger__line--1 {
    top: 50%;
    width: 1.1rem;
    transform: translateY(-50%) rotate(45deg);
  }

  .burger[aria-expanded="true"] .burger__line--2 {
    opacity: 0;
    transform: translateY(-50%) scaleX(0);
  }

  .burger[aria-expanded="true"] .burger__line--3 {
    top: 50%;
    left: calc(50% - 0.55rem);
    width: 1.1rem;
    transform: translateY(-50%) rotate(-45deg);
  }
}

/* --------------------------------------------------------------------------
   Mobile: < 768px
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .header {
    padding-block: 1.7rem; /* 34px @375 — тот же визуальный отступ сверху/снизу, что раньше давал top:1.7rem */
  }

  .header__logo img {
    width: 5.5rem; /* 110px @375 */
  }

  .burger {
    width: 2.1rem; /* 42px */
    height: 2.1rem;
  }

  /* Та же композиция (левый/полный/правый), что и на Tablet, но со своими
     размерами: 9×2px / 18×2px / 9×2px, gap 2px @375. */
  .burger__line--1 {
    top: calc(50% - 0.25rem); /* QA-фикс: gap увеличен с 2px до 3px (высота 2px + gap 3px) */
    left: calc(50% - 0.45rem);
    width: 0.45rem; /* 9px @375 */
    height: 0.1rem; /* 2px @375 — размер линии не менялся */
  }

  .burger__line--2 {
    top: 50%;
    left: calc(50% - 0.45rem);
    width: 0.9rem; /* 18px @375 */
    height: 0.1rem; /* 2px @375 */
  }

  .burger__line--3 {
    top: calc(50% + 0.25rem); /* QA-фикс: gap увеличен с 2px до 3px */
    left: 50%;
    width: 0.45rem; /* 9px @375 */
    height: 0.1rem; /* 2px @375 */
  }

  .burger[aria-expanded="true"] .burger__line--1 {
    top: 50%;
    width: 0.9rem;
  }

  .burger[aria-expanded="true"] .burger__line--3 {
    top: 50%;
    left: calc(50% - 0.45rem);
    width: 0.9rem;
  }
}

/* --------------------------------------------------------------------------
   Tablet / Mobile — полноэкранное меню
   -------------------------------------------------------------------------- */

/* Пока меню открыто, .header не должен показывать свой чёрный
   .header--scrolled фон поверх полноэкранного меню (тёмная сплошная
   полоса поверх .mobile-menu выглядела бы как лишний слой/нахлёст).
   z-index самого Header не трогаем (см. пояснение у .header выше — это
   обязательно, чтобы logo/Burger оставались видимыми и кликабельными
   поверх меню для его закрытия), возвращаем только фон к transparent. */
body.menu-open .header {
  background-color: transparent;
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 1.5rem 3rem;
  background: var(--color-text); /* фирменный тёмно-синий фон */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  overflow-y: auto;
  overscroll-behavior: contain; /* скролл раскрытого Services-аккордеона не "протекает" на body */
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
}

.mobile-menu__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
  text-align: center;
}

.mobile-menu__item--accordion {
  width: 100%;
}

.mobile-menu__link,
.mobile-menu__label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-white);
}

/* .mobile-menu__label — это <button> (триггер аккордеона Services), а не
   <a>: сброс нативных стилей кнопки, чтобы выглядела как остальные
   пункты .mobile-menu__link. */
.mobile-menu__label {
  background: none;
  border: none;
  /* QA-фикс: было font:inherit — этот шорткод сбрасывал ТАКЖЕ font-size/
     font-weight/line-height, заданные классом .small-title на этом же
     элементе (button, а не span), из-за чего "Services" визуально был
     мельче и светлее остальных пунктов меню. Нужен только сброс
     font-family (дефолтный системный шрифт кнопки) — размер/жирность/
     высоту строки по-прежнему задаёт .small-title. */
  font-family: inherit;
  cursor: pointer;
  justify-content: center;
}

.mobile-menu__chevron {
  display: block;
  width: 0.5rem; /* 10px эквивалент, масштабируется вместе с rem-системой брейкпоинта */
  height: auto;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.mobile-menu__label[aria-expanded="true"] .mobile-menu__chevron {
  transform: rotate(180deg);
}

/* Аккордеон закрыт по умолчанию (см. app.js): подсписок анимированно
   схлопнут через max-height, открывается по тапу на .mobile-menu__label. */
.mobile-menu__sublist {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.mobile-menu__sublist.is-open {
  max-height: 40rem; /* с запасом выше суммарной высоты 7 пунктов */
  margin-top: 1rem;
}

.mobile-menu__sublink {
  padding-left: 1rem; /* небольшой левый паддинг у подпунктов */
  color: var(--color-white-50);
}

/* Блокировка скролла страницы при открытом мобильном меню */
body.menu-open {
  overflow: hidden;
}


/* ==========================================================================
   10. MAIN PAGE SECTIONS
   ==========================================================================
   Стили секций главной страницы добавляются поблочно, по мере получения
   макетов конкретных блоков.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero (первый экран)
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: visible; /* CTA намеренно выходит за нижнюю границу на Tablet/Mobile */
  height: 100vh;
  color: var(--color-white);
}

@media (max-width: 1024px) {
  .hero {
    height: 80vh; /* Tablet */
  }
}

@media (max-width: 767px) {
  .hero {
    height: 85vh; /* Mobile — QA-фикс: раньше делила общее правило с Tablet (80vh) */
  }
}

.hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden; /* обрезаем именно фон, а не всю секцию */
  z-index: 0;
}

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

.hero__container {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 5.3rem; /* 106px @1920/1024 */
  z-index: 2;
}

@media (max-width: 1024px) {
  .hero__container {
    padding-bottom: 7.5rem; /* 150px @1024 */
  }
}

@media (max-width: 767px) {
  .hero__container {
    padding-bottom: 5rem; /* 100px @375 */
  }
}

.hero__title {
  color: var(--color-white);
  width: 47.5rem; /* 950px @1920 */
  max-width: 100%;
}

@media (max-width: 1024px) {
  .hero__title {
    width: 41rem; /* 820px @1024 */
    max-width: 100%;
    margin-inline: auto;
    text-align: center;
  }
}

@media (max-width: 767px) {
  .hero__title {
    width: 16rem; /* 320px @375 */
  }
}

.hero__description-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem; /* 16px */
  width: 20rem; /* 400px @1920 */
  max-width: 100%; /* защита от переполнения на очень узких viewport */
  margin-top: 2rem; /* 40px @1920 */
  margin-left: 11rem; /* сдвиг вправо относительно начала заголовка — точный
       отступ не задан в макете (в ТЗ только "смещён вправо"), подобран
       по референс-скриншоту; уточнить/скорректировать при наличии
       точных координат макета */
}

.hero__line {
  flex-shrink: 0;
  width: 2.2rem; /* 44px */
  height: 0.05rem; /* 1px */
  margin-top: 0.5rem; /* отступ от верха 10px */
  background: var(--color-white);
}

.hero__description {
  color: var(--color-white);
}

.hero__description strong {
  font-weight: 700;
}

@media (max-width: 1024px) {
  .hero__description-wrapper {
    width: 27.8rem; /* 556px @1024 */
    margin-top: 1.5rem; /* 30px */
    margin-left: 0;
    margin-inline: auto;
    justify-content: center;
  }

  .hero__line {
    display: none; /* на Tablet/Mobile линия слева не показывается */
  }

  .hero__description {
    text-align: center;
  }
}

@media (max-width: 767px) {
  .hero__description-wrapper {
    width: 14.75rem; /* 295px @375 */
    margin-top: 0.7rem; /* 14px */
  }
}

/* CTA — только позиционирование поверх Hero (визуальные стили самой
   кнопки см. .round-cta, раздел 8). Layout CTA намеренно не связан с
   description. */
.hero__cta {
  position: absolute;
  z-index: 2;
  right: 11rem; /* 220px @1920 */
  bottom: 6rem; /* 120px @1920 */
}

@media (max-width: 1024px) {
  .hero__cta {
    right: auto;
    left: 50%;
    bottom: -6rem; /* -(240px / 2): ровно половина кнопки внутри Hero */
    translate: -50% 0; /* центрирование; поворот задан в .round-cta через
         отдельное свойство rotate — оба складываются независимо */
  }
}

@media (max-width: 767px) {
  .hero__cta {
    bottom: -4.25rem; /* -(170px / 2) на Mobile */
  }
}

/* --------------------------------------------------------------------------
   Services slider (секция сразу после Hero)
   -------------------------------------------------------------------------- */

.services-section {
  background: var(--color-white);
  color: var(--color-text);
  padding-top: 7.5rem; /* 150px @1920 */
  padding-bottom: 7.8rem; /* 156px @1920 */
}

.services-section__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 5.3rem; /* 106px @1920 */
}

.services-section__title {
  max-width: 42rem; /* 840px @1920 */
}

.services-nav {
  display: flex;
  gap: 0.4rem; /* 8px */
  flex-shrink: 0;
}

.services-nav--bottom {
  display: none;
}

.services-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3.4rem; /* 68px */
  height: 3.4rem;
  border-radius: 50%;
  background: var(--color-text);
  color: var(--color-white);
  transition: background-color var(--transition-base);
}

/* Hover & Interaction Polish: общий hover для Services Slider и Recent Work
   (переиспользуют один и тот же .services-nav__btn — правило добавлено
   один раз здесь, а не продублировано в разделах каждого слайдера).
   Стрелка — hardcoded fill="white" в самом SVG (не currentColor), поэтому
   остаётся белой сама по себе, без дополнительных правил. Reviews использует
   другую исходную/hover-заливку — см. .services-nav__btn--reviews:hover
   в разделе Reviews, которое переопределяет фон для своего варианта. */
@media (hover: hover) and (pointer: fine) {
  .services-nav__btn:hover {
    background: var(--color-accent);
  }
}

.services-nav__btn svg {
  display: block;
  width: 0.95rem; /* 19px */
  height: 0.95rem;
}

/* Исходный SVG направлен по диагонали вверх-вправо — доворачиваем до
   обычной горизонтальной стрелки (rotate вместо перерисовки иконки). */
.services-nav__btn--next svg {
  transform: rotate(-45deg);
}

.services-nav__btn--prev svg {
  transform: rotate(135deg);
}

/* Слайдер начинается по левому краю .container, но справа продолжается
   до края viewport (виден "хвост" следующей карточки). Формула повторяет
   логику .container: на Desktop контент не может начинаться левее 100px
   от края viewport, а после 1720px добавляется тот же auto-margin.
   После QA-фикса контейнера (раздел 7) .container больше не имеет
   собственного padding-inline на Desktop — его левый край сам по себе
   уже стоит ровно там, где раньше стоял край (padding-box) контейнера,
   поэтому здесь убран лишний "+ 5rem": calc((100vw - 86rem) / 2) — это
   в точности то же расстояние, что и текущий отступ .container от края
   viewport (тождественно 5rem на всём диапазоне 1025–1919px, и совпадает
   с auto-margin выше 1920px). */
.services-slider-wrapper {
  width: 100%;
  overflow: hidden;
  padding-left: max(5rem, calc((100vw - 86rem) / 2));
}

.services-slider {
  overflow: visible; /* обрезка — на .services-slider-wrapper */
}

.service-card {
  position: relative;
  display: block;
  height: 21.2rem; /* 424px @1920 */
  border-radius: 2rem; /* 40px */
  overflow: hidden;
  color: var(--color-white);
}

.service-card__image {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.service-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.service-card__content {
  position: absolute;
  z-index: 1;
  left: 2.6rem; /* 52px */
  right: 2.6rem;
  bottom: 2.2rem; /* 44px */
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.service-card__title {
  color: var(--color-white);
}

.service-card__description {
  color: var(--color-white);
  max-width: 13.7rem; /* 274px @1920 */
}

.service-card__arrow {
  position: absolute;
  z-index: 1;
  right: 2.6rem; /* 52px, совпадает с содержимым */
  bottom: 2.2rem; /* 44px */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem; /* 68px */
  height: 3.4rem;
  border-radius: 50%;
  background: linear-gradient(102.82deg, var(--color-accent) 3.41%, #047FB8 75.26%);
  overflow: hidden; /* контейнер круга — фон-оверлей ниже обрезается по кругу */
}

.service-card__arrow svg {
  position: relative; /* поверх ::after-оверлея ниже */
  z-index: 1;
  display: block;
  width: 0.95rem; /* 19px */
  height: 0.95rem;
  /* Базовая ориентация иконки — уже вправо-вниз (↘), доворот не нужен */
  transform: rotate(0deg);
  transition: transform var(--transition-rotate);
}

/* Hover & Interaction Polish: hover срабатывает только при наведении именно
   на сам круг (.service-card__arrow — отдельный span внутри .service-card),
   а не на всю карточку — вся карточка остаётся кликабельной ссылкой без
   изменений. Фон круга — градиент, поэтому плавный переход к сплошному
   #082A4D сделан через ::after-слой (transition: opacity), а не через
   transition: background — градиент не интерполируется в solid-цвет
   плавно при обычном background-transition. Стрелка hardcoded fill="white"
   в самом SVG, поэтому цвет стрелки не меняется — доворачивается только
   поворот (та же -45deg, что у .services-nav__btn--next, т.к. это одна и
   та же исходная иконка ↘). */
.service-card__arrow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #082A4D;
  opacity: 0;
  transition: opacity var(--transition-base);
}

@media (hover: hover) and (pointer: fine) {
  .service-card__arrow:hover::after {
    opacity: 1;
  }

  .service-card__arrow:hover svg {
    transform: rotate(-45deg);
  }
}

@media (max-width: 1024px) {
  .services-section {
    padding-top: 10rem; /* 200px @1024 — Hero CTA заходит в секцию */
    padding-bottom: 5rem; /* 100px @1024 */
  }

  .services-section__top {
    justify-content: center;
    margin-bottom: 4.4rem; /* 88px @1024 */
  }

  .services-section__title {
    text-align: center;
    margin-inline: auto;
  }

  .services-nav--top {
    display: none;
  }

  .services-nav--bottom {
    display: flex;
    justify-content: center;
    margin-top: 2.8rem; /* 56px @1024 */
  }

  .services-slider-wrapper {
    padding-left: 2.5rem; /* совпадает с .container на Tablet */
  }

  .service-card {
    height: 17rem; /* 340px @1024 */
    border-radius: 1.6rem; /* 32px */
  }

  .service-card__content {
    left: 2.1rem; /* 42px */
    right: 2.1rem;
    bottom: 1.8rem; /* 36px */
  }

  .service-card__description {
    max-width: 10rem; /* защита от наложения на круглую стрелку */
  }

  .service-card__arrow {
    right: 2.1rem;
    bottom: 1.8rem;
    width: 2.7rem; /* 54px */
    height: 2.7rem;
  }
}

@media (max-width: 767px) {
  .services-section {
    padding-top: 7.5rem; /* 150px @375 */
    padding-bottom: 2.8rem; /* 56px @375 */
  }

  .services-section__top {
    margin-bottom: 1.6rem; /* 32px @375 */
  }

  .services-nav {
    gap: 0.3rem; /* 6px */
  }

  .services-nav__btn {
    width: 2.3rem; /* 46px */
    height: 2.3rem;
  }

  .services-nav__btn svg {
    width: 0.7rem; /* 14px @375 — уменьшено ~26% относительно базовых 19px */
    height: 0.7rem;
  }

  .services-nav--bottom {
    margin-top: 1.4rem; /* 28px @375 */
  }

  /* На Mobile слайдер не тянется до края viewport — одна крупная карточка
     заданной ширины по центру. */
  .services-slider-wrapper {
    padding-left: 0.8rem; /* совпадает с .container на Mobile */
    padding-right: 0.8rem;
  }

  .services-slider {
    max-width: 16rem; /* 320px @375 */
    margin-inline: auto;
  }

  .service-card {
    height: 12rem; /* 240px @375 */
    border-radius: 1.2rem; /* 24px */
  }

  .service-card__content {
    left: 1.1rem; /* 22px */
    right: 1.1rem;
    bottom: 1.2rem; /* 24px */
  }

  .service-card__description {
    max-width: 8rem; /* защита от наложения на круглую стрелку */
  }

  .service-card__arrow {
    right: 1.1rem;
    bottom: 1.2rem;
  }
}

/* --------------------------------------------------------------------------
   WHY CHOOSE US
   --------------------------------------------------------------------------
   Готовый фоновый ассет (why-bg.webp) — выводится через <img>, поэтому
   секции не нужен свой CSS-градиент/фигуры. Композиция карточек —
   художественная (absolute positioning), разная для каждого брейкпоинта;
   разметка карточек при этом единая (см. index.html).

   Rotate у карточек задаётся ТОЛЬКО стандалон-свойством `rotate`
   (не через `transform`), т.к. `transform` уже занят reveal-системой
   (.reveal-item анимирует translateY через transform). Так оба эффекта
   работают одновременно и rotate не сбрасывается после появления.
   -------------------------------------------------------------------------- */

.why-section {
  position: relative;
  overflow: hidden;
  padding-top: 8.8rem; /* 176px @1920 */
  padding-bottom: 13rem; /* 260px @1920 */
}

.why-section__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

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

.why-section__container {
  position: relative;
  z-index: 1;
}

.why-section__title {
  color: var(--color-white);
  text-align: center;
  margin-bottom: 6.3rem; /* 126px @1920 */
}

.why-cards {
  position: relative;
  height: 26.4rem; /* 528px @1920 — вмещает нижний ряд карточек */
}

/* Позиционирование и визуальная карточка разделены на два элемента:
   .why-card-wrap отвечает ТОЛЬКО за место карточки в композиции
   (position/left/top/z-index, на Mobile — ещё и центрирование), а
   .why-card — только за её вид (размер/паддинги/цвет) и несёт rotate
   (стандалон-свойством, не через transform) и .reveal-item. Так
   позиционирование, rotate и reveal-transform живут на разных
   уровнях и не могут перезаписать друг друга. */
.why-card-wrap {
  position: absolute;
}

.why-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* иконка + текст — компактной группой книзу */
  width: 22.5rem; /* 450px @1920 */
  height: 17rem; /* 340px @1920 */
  padding: 2.2rem; /* 44px @1920 */
  border-radius: 1.8rem; /* 36px @1920 */
}

.why-card--white {
  background: var(--color-white);
  color: var(--color-text);
}

.why-card--blue {
  background: var(--color-accent);
  color: var(--color-white);
}

.why-card__icon img {
  display: block;
  width: 3.4rem; /* 68px @1920 — совпадает с исходным размером SVG */
  height: 3.4rem;
}

.why-card__title {
  font-size: 1.6rem; /* 32px @1920 — было пропущено, из-за чего переносы
                        не совпадали с референсом */
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em; /* общее для Why choose us и Why choose stretch
                               ceilings — действует на всех breakpoint,
                               т.к. ни один брейкпоинт ниже не переопределяет
                               letter-spacing, только font-size/margin-top */
  margin-top: 1.4rem; /* 28px @1920, отступ иконка → текст */
}

/* Индивидуальный max-width текста под переносы каждой карточки
   (см. также переопределения в Tablet/Mobile ниже). */
.why-card--1 .why-card__title { max-width: 18rem; /* 360px @1920 */ }
.why-card--2 .why-card__title { max-width: 11rem; /* 220px @1920 */ }
.why-card--3 .why-card__title { max-width: 16rem; /* 320px @1920 */ }
.why-card--4 .why-card__title { max-width: 12.5rem; /* 250px @1920 */ }

/* Desktop: почти линейная композиция, чередование по вертикали.
   Горизонтальный зазор между белыми (1↔3) и между голубыми (2↔4)
   картами — ориентир пользователя ~336px, соблюдён.
   QA-фикс: left-координаты ниже — уже НЕ от левого края .why-cards
   напрямую (после которого .why-cards стал centered wrapper'ом
   фиксированной ширины, см. блок @media (min-width:1025px) ниже),
   а от левого края этой самой композиции (т.е. сдвинуты на +3.4rem
   относительно исходных значений, чтобы card--1 начиналась ровно от
   left:0 нового wrapper'а). Относительные промежутки между карточками
   не менялись. */
.why-card-wrap--1 { left: 0; top: 0; z-index: 1; }
.why-card-wrap--2 { left: 20.2rem; top: 9.4rem; z-index: 2; }
.why-card-wrap--3 { left: 39.7rem; top: 0; z-index: 3; }
.why-card-wrap--4 { left: 59.8rem; top: 9.4rem; z-index: 4; }

/* QA-фикс горизонтального центрирования группы карточек на Desktop:
   .why-cards был шириной 100% от .why-section__container (т.е. от края
   до края container) — координаты карточек считались от ЕГО левого
   края, поэтому после фикса container вся композиция визуально
   "прилипла" к левому краю. Теперь .why-cards на Desktop — сам wrapper
   фиксированной ширины, равной фактической ширине композиции (см. расчёт
   выше: крайняя левая карточка card--1 (left:0) до правого края крайней
   правой card--4 (left:59.8rem + ширина карточки 22.5rem) = 82.3rem),
   отцентрированный внутри container через margin-inline:auto — группа
   как единое целое, не каждая карточка по отдельности. Vertical offsets
   (top) и величина сдвига 9.4rem между рядами не менялись. */
@media (min-width: 1025px) {
  .why-cards {
    width: 82.3rem; /* 1646px @1920 — фактическая ширина композиции из 4 карточек */
    margin-inline: auto;
  }
}

@media (max-width: 1024px) {
  .why-section {
    padding-top: 6.4rem; /* 128px @1024 */
    padding-bottom: 6.8rem; /* 136px @1024 */
  }

  .why-section__title {
    /* Единственный источник отступа title → карточки на Tablet: карточки
       ниже начинаются от top:0 внутри .why-cards, поэтому этот margin
       не складывается ни с чем ещё. */
    margin-bottom: 4.6rem; /* 92px @1024 — визуально даёт ~75-80px, т.к.
                               повёрнутая карточка (-5deg/7deg) оптически
                               "поднимается" за счёт rotate вокруг центра */
  }

  .why-cards {
    height: 40rem; /* ~800px @1024 — свободная 2x2 композиция, gap между
                       рядами уменьшен относительно первой версии */
  }

  .why-card {
    width: 19.4rem; /* 388px @1024 */
    height: 14.7rem; /* 294px @1024 */
    padding: 1.8rem; /* 36px @1024 */
    border-radius: 1.5rem; /* 30px @1024 */
  }

  .why-card__icon img {
    width: 2.9rem; /* 58px @1024 */
    height: 2.9rem;
  }

  .why-card__title {
    font-size: 1.25rem; /* 25px @1024 */
    margin-top: 1.2rem; /* 24px @1024 */
  }

  .why-card--1 .why-card__title { max-width: 14rem; /* 280px @1024 */ }
  .why-card--2 .why-card__title { max-width: 8.5rem; /* 170px @1024 */ }
  .why-card--3 .why-card__title { max-width: 12.5rem; /* 250px @1024 */ }
  .why-card--4 .why-card__title { max-width: 9.75rem; /* 195px @1024 */ }

  /* Свободная 2x2-композиция с наклонами (ориентиры пользователя: 7deg/-5deg).
     Верхний ряд начинается от top:0 (самая верхняя карточка) — весь
     вертикальный отступ до title задаётся только через margin-bottom
     заголовка выше. Нижняя левая карточка (--4) стоит на той же base X,
     что и верхняя левая (--1), просто ниже — без заметного сдвига вправо.
     Позиционирование и z-index — на .why-card-wrap, rotate — на .why-card. */
  /* z-index задан явно для этого брейкпоинта (не наследуется от Desktop):
     Card 3 должна перекрывать Card 4 при пересечении. Оба элемента сами
     по себе создают новый stacking context из-за rotate/transform
     (.reveal-item) — это не мешает сравнению z-index между сиблингами
     в общем родительском контексте (.why-section__container), поэтому
     обычных чисел 1–4 достаточно, без "экстремальных" значений. */
  .why-card-wrap--1 { left: 7.5rem; top: 0; z-index: 1; }
  .why-card-wrap--2 { left: 24rem; top: 3.5rem; z-index: 2; }
  .why-card-wrap--4 { left: 7.5rem; top: 21rem; z-index: 3; }
  .why-card-wrap--3 { left: 23.25rem; top: 25rem; z-index: 4; }

  .why-card--1 { rotate: -5deg; }
  .why-card--2 { rotate: 7deg; }
  .why-card--3 { rotate: 7deg; }
  .why-card--4 { rotate: -5deg; }
}

@media (max-width: 767px) {
  .why-section {
    padding-top: 3.9rem; /* 78px @375 */
    padding-bottom: 5.7rem; /* 114px @375 */
  }

  .why-section__title {
    /* Единственный источник отступа title → первая карточка на Mobile:
       самая верхняя карточка (--2) начинается от top:0 внутри .why-cards. */
    margin-bottom: 3.3rem; /* 66px @375 — визуально даёт ~50px, компенсируя
                               оптический подъём повёрнутой карточки */
  }

  .why-cards {
    height: 40rem; /* ~800px @375 — вертикальная стопка с нахлестом */
  }

  .why-card {
    width: 14rem; /* 280px @375 */
    height: 10.6rem; /* 212px @375 */
    padding: 1.2rem; /* 24px @375 */
    border-radius: 1.1rem; /* 22px @375 */
  }

  .why-card__icon img {
    width: 2.1rem; /* 42px @375 */
    height: 2.1rem;
  }

  .why-card__title {
    font-size: 0.9rem; /* 18px @375 */
    margin-top: 1rem; /* 20px @375 */
  }

  .why-card--1 .why-card__title { max-width: 10.25rem; /* 205px @375 */ }
  .why-card--2 .why-card__title { max-width: 6.25rem; /* 125px @375 */ }
  .why-card--3 .why-card__title { max-width: 9rem; /* 180px @375 */ }
  .why-card--4 .why-card__title { max-width: 7.25rem; /* 145px @375 */ }

  /* Вертикальная стопка сверху вниз: 2 (blue) → 1 (white) → 4 (blue) →
     3 (white). Самая верхняя по композиции карточка (--2) стоит на
     top:0 — весь отступ до title задаётся только margin-bottom заголовка
     выше. z-index задан явно по визуальному порядку — верхняя по макету
     карточка должна быть и верхней по слоям.

     Горизонтальное позиционирование упрощено до одной механики:
     .why-card-wrap всегда математически центрируется (left:50% +
     transform:translateX(-50%) — фиксированная величина, никогда не
     меняется по карточкам и не анимируется reveal-системой), а
     индивидуальный сдвиг влево/вправо — только фиксированный
     margin-left в rem, без calc()/процентов/viewport-зависимых формул.
     Так карточка не "плывёт" при росте viewport (320→430px): базовая
     точка всегда ровно по центру, сдвиг — всегда одна и та же rem-
     величина. rotate — на .why-card (стандалон-свойством), поэтому не
     конфликтует ни с translateX на wrapper, ни с transform:translateY()
     из reveal-системы на самой карточке. */
  .why-card-wrap {
    left: 50%;
    transform: translateX(-50%);
  }

  .why-card-wrap--1 { top: 9.3rem; margin-left: -1rem; z-index: 3; }
  .why-card-wrap--2 { top: 0; margin-left: 1rem; z-index: 4; }
  .why-card-wrap--3 { top: 28.4rem; margin-left: -1rem; z-index: 1; }
  .why-card-wrap--4 { top: 18.3rem; margin-left: 1rem; z-index: 2; }

  .why-card--1 { rotate: -5deg; }
  .why-card--2 { rotate: 7deg; }
  .why-card--3 { rotate: -5deg; }
  .why-card--4 { rotate: 7deg; }
}

/* Минимальная точечная коррекция только для самых узких экранов
   (320px и около того): при ±1rem смещении карточки начинают слегка
   выходить за пределы секции по внешнему краю. 375–430px не трогаем —
   там ±1rem остаётся неизменным. */
@media (max-width: 359px) {
  .why-card-wrap--1,
  .why-card-wrap--3 {
    margin-left: -0.25rem;
  }

  .why-card-wrap--2,
  .why-card-wrap--4 {
    margin-left: 0.25rem;
  }
}


/* ==========================================================================
   RECENT WORK — «See our recent work»
   ==========================================================================
   Навигация переиспользует ГОТОВЫЙ компонент .services-nav/.services-nav__btn
   (те же кнопки, тот же SVG, тот же размер/gap) — новый визуальный вариант
   не создаётся, добавлен только класс-обёртка .recent-work-section__navigation
   для центрирования и для отдельного скоупа JS-обработчиков.

   Карточка .work-card — единый переиспользуемый компонент (без уникальных
   классов под каждый слайд), удобный для последующей выгрузки в WordPress.
   ========================================================================== */

.recent-work-section {
  padding-top: 7.5rem; /* 150px @1920 */
  padding-bottom: 3.6rem; /* 72px @1920 */
}

.recent-work-section__title {
  text-align: center;
  margin-bottom: 3.6rem; /* 72px @1920 — единственный источник отступа title → slider */
}

/* Bleed до внешнего края .container (86rem/1720px): 3 карточки по 28rem (560px)
   + 2 gap по 1rem (20px) = 86rem — ровно внешняя ширина контейнера, поэтому
   слайдер обязан выйти за пределы паддинга .container, но не дальше.
   После QA-фикса контейнера (раздел 7) .container на Desktop больше не
   имеет собственного padding-inline, поэтому компенсировать через
   отрицательный margin больше нечего — .recent-work-slider-wrapper как
   обычный дочерний блок уже занимает полную ширину .container (86rem),
   без обрезки и без bleed'а за его пределы. */
.recent-work-slider-wrapper {
  width: 100%;
  overflow: hidden;
  margin-bottom: 3.6rem; /* 72px @1920 — единственный источник отступа slider → navigation */
}

.recent-work-slider {
  overflow: visible; /* обрезка — на .recent-work-slider-wrapper */
}

/* slidesPerView задаётся числом (см. app.js) — ширину слайда выставляет
   сам Swiper инлайн-стилем, здесь только сбрасываем высоту: .swiper-wrapper
   это flex-контейнер без явной height, поэтому он и так подстраивается под
   высоту карточки (которая определяется через aspect-ratio на .work-card). */
.recent-work-slider .swiper-slide {
  height: auto;
}

.work-card {
  position: relative;
  width: 100%; /* фактический px-размер задаёт Swiper (slidesPerView/spaceBetween по брейкпоинтам) */
  aspect-ratio: 560 / 820; /* держит пропорции 560×820 при любой ширине слайда на Desktop/Tablet */
  border-radius: 2rem; /* 40px */
  overflow: hidden;
  color: var(--color-white);
}

.work-card__image-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.work-card__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Затемнение уже "вшито" в изображения — дополнительный CSS-оверлей не нужен. */
.work-card__content {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 3.8rem; /* 76px @1920 и @1024 (та же fluid-логика, что и у ширины карточки) */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem; /* 8px */
  text-align: center;
  padding-inline: 2rem;
}

.work-card__title,
.work-card__location {
  color: var(--color-white);
}

.recent-work-section__navigation {
  justify-content: center;
}

@media (max-width: 1024px) {
  .recent-work-section {
    padding-top: 7.5rem; /* 150px @1024 */
    padding-bottom: 4rem; /* 80px @1024 */
  }

  .recent-work-section__title {
    margin-bottom: 3.8rem; /* 76px @1024 */
  }

  /* На Tablet .recent-work-slider-wrapper — ВЛОЖЕН в .container (в отличие
     от .services-slider-wrapper, который является соседом .container), т.е.
     левый отступ .container уже даёт нужные 50px сам по себе — повторно его
     не добавляем. Бleed нужен только вправо, до края viewport (виден "хвост"
     второй карточки), поэтому компенсируем только правый padding .container. */
  .recent-work-slider-wrapper {
    width: calc(100% + 2.5rem);
    margin-left: 0;
    margin-right: -2.5rem;
    margin-bottom: 4.2rem; /* 84px @1024 */
  }
}

@media (max-width: 767px) {
  .recent-work-section {
    padding-top: 3.2rem; /* 64px @375 */
    padding-bottom: 2.1rem; /* 42px @375 */
  }

  .recent-work-section__title {
    margin-bottom: 2rem; /* 40px @375 */
  }

  /* На Mobile .recent-work-slider-wrapper вложен в .container — свой padding
     не добавляем (иначе он задвоится с padding .container). Никаких transform/
     смещений/offset'ов: слайд Swiper (slidesPerView:1) занимает всю ширину
     контента .container, а карточка центрируется в нём обычным
     width:100% + max-width + margin-inline:auto — на 375px это даёт ровно
     343px, на более узких экранах карточка просто сужается вместе с
     контейнером (320px → ~288px), без обрезки и без горизонтального скролла. */
  .recent-work-slider-wrapper {
    width: 100%; /* сброс Tablet-bleed'а (calc(100% + 2.5rem)/margin-right) — на Mobile бleed'а нет */
    margin-right: 0;
    margin-bottom: 1.9rem; /* 38px @375 */
  }

  .work-card {
    max-width: 343px; /* 343×506 на контрольных 375px; на более узких экранах сужается вместе с контейнером */
    aspect-ratio: 343 / 506;
    margin-inline: auto;
    border-radius: 1.2rem;
  }

  .work-card__content {
    bottom: 2.2rem; /* 44px @375 */
    gap: 0.3rem; /* 6px */
    padding-inline: 1.2rem;
  }
}

/* --------------------------------------------------------------------------
   "See our recent work" на странице услуги — .recent-work-section--service
   Переиспользование компонента с главной (тот же .recent-work-slider,
   .work-card, навигация, Swiper-конфигурация, размеры карточки, border-radius)
   без изменений разметки/структуры слайдера. Модификатор переопределяет
   только: (1) вертикальные padding секции по ТЗ, (2) подпись карточки — на
   странице конкретной услуги пользователь уже знает, какая это услуга, и
   повторять её название под каждым фото избыточно, поэтому .work-card__content
   скрыт (остаётся только фото). Затемнение уже "вшито" в изображения (см.
   комментарий у .work-card__content выше), поэтому скрытие подписи не требует
   отдельного оверлея/градиента — просто display:none. На главной
   (.recent-work-section без модификатора) подпись остаётся как есть.
   Правило работает сразу для всех service-страниц, т.к. модификатор уже
   стоит на разметке каждой из них — ничего не нужно трогать точечно, когда на
   оставшиеся страницы (Painting, Stretch Ceilings, Full Home Renovation,
   Kitchen Renovation) позже добавят реальные portfolio-фото с тем же
   .work-card__content/<h3 class="work-card__title">.
   Специфичность .recent-work-section--service (1 класс) равна специфичности
   базового .recent-work-section (тоже 1 класс) — поэтому override padding'ов
   работает через порядок объявления: каждый блок ниже размещён ПОСЛЕ
   соответствующего правила главной страницы выше и ограничен тем же media
   query, чтобы не "протечь" в соседний breakpoint (та же схема, что и у
   .why-section--service). Правило для подписи не требует такого скоупа по
   media query — специфичность у него на один класс выше
   (.recent-work-section--service .work-card__content против одиночного
   .work-card__content), поэтому порядок объявления не важен. */
.recent-work-section--service .work-card__content {
  display: none;
}

@media (min-width: 1025px) {
  .recent-work-section--service {
    padding-top: 5.5rem; /* 110px @1920 */
    padding-bottom: 5rem; /* 100px @1920 */
  }
}

@media (max-width: 1024px) {
  .recent-work-section--service {
    padding-top: 4rem; /* 80px @1024 */
    padding-bottom: 4rem; /* 80px @1024 */
  }
}

@media (max-width: 767px) {
  .recent-work-section--service {
    padding-top: 2.5rem; /* 50px @375 */
    padding-bottom: 2.5rem; /* 50px @375 */
  }
}


/* ==========================================================================
   REVIEWS — «What our clients say»
   ==========================================================================
   Navigation переиспользует .services-nav__btn (тот же размер кнопок на
   каждом breakpoint) — добавлен только модификатор .services-nav__btn--reviews
   для цвета (голубой фон, тёмная иконка). Кнопки существуют в двух копиях —
   .reviews-section__nav (по бокам, Desktop/Tablet) и .reviews-section__mobile-nav
   (снизу по центру, Mobile) — видна только одна пара на каждом breakpoint,
   обе управляют одним и тем же Swiper-инстансом.

   .review-card — единый переиспользуемый компонент слайда (без уникальных
   классов под каждый отзыв), под замену на данные из WordPress в будущем.
   ========================================================================== */

.reviews-section {
  padding-top: 6rem; /* 120px — одинаково на Desktop/Tablet/Mobile (отступ секции, не панели) */
  padding-bottom: 6rem;
}

.reviews-section__panel {
  position: relative;
  overflow: hidden;
  width: 100%;
  border-radius: 2rem; /* 40px */
  background: var(--color-text); /* фон-подложка под reviews-bg.webp */
}

.reviews-section__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.reviews-section__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.reviews-section__inner {
  position: relative;
  z-index: 1;
  padding: 7.5rem 7.5rem 8.5rem; /* 150 / 150 / 170 @1920 */
}

.reviews-section__title {
  color: var(--color-white);
  text-align: center;
  margin-bottom: 4.2rem; /* 84px @1920 — единственный источник отступа title → slider */
}

/* Bleed до полной ширины панели: стрелки должны стоять в 60px от края
   ПАНЕЛИ, а не от края паддинга .reviews-section__inner (150px) — сам
   слайдер при этом остаётся отцентрован через margin-inline:auto на
   .reviews-slider независимо от ширины этой обёртки. */
.reviews-section__slider-area {
  position: relative;
  margin-inline: -7.5rem;
}

.reviews-slider {
  width: 58.4rem; /* 2×560 + 48 = 1168px @1920, ровно 2 карточки 560×686 */
  margin-inline: auto;
  overflow: hidden;
}

.reviews-slider .swiper-slide {
  height: auto; /* .swiper-wrapper — flex-контейнер без явной height, подстраивается под карточку */
}

.review-card {
  position: relative;
  width: 100%;
  height: 34.3rem; /* 686px @1920 */
  overflow: hidden;
  border-radius: 2rem; /* 40px */
  background: #D9D9D9;
}

.review-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.reviews-section__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.reviews-section__nav--prev {
  left: 3rem; /* 60px — отступ от края панели */
}

.reviews-section__nav--next {
  right: 3rem; /* 60px — отступ от края панели */
}

.services-nav__btn--reviews {
  background: #30B5F3;
}

/* Hover & Interaction Polish: у Reviews — свой цветовой вариант (голубой →
   белый вместо тёмно-синий → голубой), поэтому переопределяем hover-фон
   отдельно от общего .services-nav__btn:hover выше. Идёт позже в файле —
   при равной специфичности (класс + :hover) побеждает по порядку в
   каскаде. Стрелка hardcoded fill="#082A4D" в самом SVG и не меняется. */
@media (hover: hover) and (pointer: fine) {
  .services-nav__btn--reviews:hover {
    background: var(--color-white);
  }
}

.reviews-section__mobile-nav {
  display: none;
}

@media (max-width: 1024px) {
  /* Внешний отступ САМОЙ секции на Tablet (не путать с паддингом синей
     панели .reviews-section__inner ниже, который не трогаем) — QA-фикс:
     раньше секция везде использовала одинаковые 120/120px. */
  .reviews-section {
    padding-top: 2.1rem; /* 42px @1024 */
    padding-bottom: 5.6rem; /* 112px @1024 */
  }

  .reviews-section__inner {
    padding: 6rem 2.5rem; /* 120 / 50 / 120 @1024 */
  }

  .reviews-section__title {
    margin-bottom: 3rem; /* 60px @1024 */
  }

  .reviews-section__slider-area {
    margin-inline: -2.5rem;
  }

  .reviews-slider {
    width: 30.9rem; /* 618px @1024 */
  }

  .review-card {
    height: 40rem; /* 800px @1024 */
  }

  .reviews-section__nav--prev {
    left: 1.6rem; /* 32px */
  }

  .reviews-section__nav--next {
    right: 1.6rem; /* 32px */
  }
}

@media (max-width: 767px) {
  /* Внешний отступ секции (не путать с внутренним padding панели ниже) —
     отдельные значения для Mobile, раньше секция везде использовала
     одинаковые 120/120px. */
  .reviews-section {
    padding-top: 1.4rem; /* 28px */
    padding-bottom: 2.5rem; /* 50px */
  }

  .reviews-section__inner {
    padding: 3.5rem 1.2rem 3.8rem; /* 70 / 24 / 76 @375 — горизонтальный не менялся */
  }

  .reviews-section__title {
    margin-bottom: 1.4rem; /* 28px @375 */
  }

  /* На Mobile стрелки не внутри slider-area (они переезжают в отдельный
     блок под карточкой) — bleed для боковых стрелок больше не нужен. */
  .reviews-section__slider-area {
    margin-inline: 0;
  }

  .reviews-slider {
    width: 14.8rem; /* 296px @375 */
  }

  .review-card {
    height: 15.9rem; /* 318px @375 */
  }

  .reviews-section__nav {
    display: none;
  }

  .reviews-section__mobile-nav {
    display: flex;
    justify-content: center;
    margin-top: 1.3rem; /* 26px @375 — единственный источник отступа carточка → navigation */
  }
}

/* Минимальная точечная коррекция только для самых узких экранов (320px и
   около того): по fluid-rem-формуле карточка 14.8rem там оказывается шире
   доступной ширины панели и обрезается. 375–430px не трогаем — тот же
   принцип коррекции, что уже применён к карточкам Why Choose Us и Recent Work. */
@media (max-width: 359px) {
  .reviews-slider {
    width: 100%;
  }

  .review-card {
    height: auto;
    aspect-ratio: 296 / 318;
  }
}


/* --------------------------------------------------------------------------
   CONTACT / CTA — «Ready to start your renovation?»
   Секция: фон-изображение на всю секцию (через <img>, не CSS background) +
   белая панель с формой поверх. Desktop/Tablet — панель справа, Mobile —
   панель сверху в обычном потоке, фон продолжается ниже панели.
   Высота секции не фиксируется — задаётся паддингами + контентом.
   -------------------------------------------------------------------------- */

.contact-section {
  position: relative;
  overflow: hidden;
  padding-top: 5.3rem; /* 106px @1920 */
  padding-bottom: 5.3rem; /* 106px @1920 */
}

.contact-section__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.contact-section__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.contact-section__container {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.contact-form-panel {
  width: 39.8rem; /* 796px @1920 */
  background: var(--color-white);
  border-radius: 2rem; /* 40px @1920 */
  padding: 4.2rem 3rem; /* 84px 60px @1920 */
  position: relative;
}

.contact-form-panel__title {
  color: var(--color-text);
  text-align: center;
  max-width: 28rem; /* подобрано под естественный перенос на 2 строки без <br> */
  margin-inline: auto;
  margin-bottom: 2rem; /* 40px @1920 — отступ заголовок → форма */
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem; /* 18px @1920 */
}

.contact-form__select-wrap {
  position: relative;
}

.contact-form__field {
  display: block;
  width: 100%;
  background: #F1F1F1;
  color: var(--color-black-50);
  border: none;
  border-radius: 1.2rem; /* 24px @1920 */
  font-family: inherit;
  font-size: 1rem; /* 20px @1920 */
  font-weight: 400;
  line-height: 110%;
  padding-inline: 2.3rem; /* 46px @1920 */
}

.contact-form__field::placeholder {
  color: var(--color-black-50);
}

input.contact-form__field,
select.contact-form__field {
  height: 5.7rem; /* 114px @1920 */
}

select.contact-form__field {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 4.8rem; /* место под SVG-стрелку @1920 */
  cursor: pointer;
}

/* Плейсхолдер-опция ("Choose service*") визуально совпадает с placeholder
   остальных полей за счёт наследуемого color: var(--color-black-50). */

textarea.contact-form__field {
  height: 12.6rem; /* 252px @1920 */
  padding-top: 2.3rem; /* 46px @1920 */
  padding-bottom: 2.3rem;
  resize: none;
  font-family: inherit;
}

.contact-form__select-arrow {
  position: absolute;
  right: 2.3rem; /* 46px @1920 */
  top: 50%;
  width: 1.6rem; /* 32px @1920 — QA-фикс: раньше размер задавался только HTML-атрибутами SVG (width=35) */
  height: auto;
  transform: translateY(-50%);
  pointer-events: none;
}

.contact-form__submit {
  position: relative; /* контейнер для ::after-оверлея ниже */
  isolation: isolate; /* локальный stacking context — ::after с z-index:-1
       гарантированно остаётся между фоном кнопки и её текстом, не утекая
       за пределы самой кнопки */
  width: 100%;
  height: 5.7rem; /* 114px @1920 — совпадает с высотой инпутов */
  border: none;
  border-radius: 1.2rem; /* 24px @1920 — совпадает с инпутами */
  background: linear-gradient(116.8deg, #1362B3 7.21%, #082A4D 99.46%);
  color: var(--color-white);
  cursor: pointer;
}

/* Hover & Interaction Polish: обычный transition: background не
   интерполирует плавно переход градиент → сплошной цвет, поэтому голубой
   #30B5F3 положен вторым фоновым слоем (::after) и появляется через
   transition: opacity. z-index:-1 держит слой строго между градиентным
   фоном самой кнопки и её текстом (текст остаётся читаемым). border-radius:
   inherit — совпадает с текущим радиусом кнопки на любом breakpoint без
   дублирования значений. */
.contact-form__submit::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--color-accent);
  opacity: 0;
  transition: opacity 0.32s ease;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .contact-form__submit:hover::after {
    opacity: 1;
  }
}

.contact-form__field:focus,
.contact-form__submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(48, 181, 243, 0.35);
}

/* Tablet — макет 1024px */
@media (max-width: 1024px) {
  .contact-section {
    padding-top: 5.7rem; /* 114px @1024 */
    padding-bottom: 5.7rem;
  }

  .contact-form-panel {
    width: 29.8rem; /* 596px @1024 */
    border-radius: 1.5rem; /* 30px @1024 */
    padding: 3.1rem 2.2rem; /* 62px 44px @1024 */
  }

  .contact-form-panel__title {
    max-width: 24.5rem;
    margin-bottom: 1.5rem; /* 30px @1024 */
  }

  .contact-form {
    gap: 0.7rem; /* 14px @1024 */
  }

  .contact-form__field {
    border-radius: 0.9rem; /* 18px @1024 */
    font-size: 0.75rem; /* 15px @1024 */
    padding-inline: 1.7rem; /* 34px @1024 */
  }

  input.contact-form__field,
  select.contact-form__field {
    height: 4.3rem; /* 86px @1024 */
  }

  select.contact-form__field {
    padding-right: 4rem; /* место под SVG-стрелку @1024 */
  }

  textarea.contact-form__field {
    height: 9.4rem; /* 188px @1024 */
    padding-top: 1.7rem; /* 34px @1024 */
    padding-bottom: 1.7rem;
  }

  .contact-form__select-arrow {
    right: 1.7rem; /* 34px @1024 */
    width: 1.2rem; /* 24px @1024 */
  }

  .contact-form__submit {
    height: 4.3rem; /* 86px @1024 */
    border-radius: 0.9rem; /* 18px @1024 */
  }
}

/* Mobile — макет 375px */
@media (max-width: 767px) {
  .contact-section {
    padding-top: 2.3rem; /* 46px @375 */
    padding-bottom: 15.6rem; /* 312px @375 — фон продолжается под панелью */
  }

  .contact-section__bg img {
    object-position: 30% 70%; /* подобрано так, чтобы диван/столик оставались в кадре */
  }

  .contact-section__container {
    display: block;
  }

  .contact-form-panel {
    width: 100%;
    border-radius: 0.9rem; /* 18px @375 */
    padding: 1.8rem 1.3rem; /* 36px 26px @375 */
  }

  .contact-form-panel__title {
    max-width: 12.25rem;
    margin-bottom: 0.9rem; /* 18px @375 */
  }

  .contact-form {
    gap: 0.4rem; /* 8px @375 */
  }

  .contact-form__field {
    border-radius: 0.5rem; /* 10px @375 */
    font-size: 0.6rem; /* 12px @375 */
    padding-inline: 1rem; /* 20px @375 */
  }

  input.contact-form__field,
  select.contact-form__field {
    height: 2.5rem; /* 50px @375 */
  }

  select.contact-form__field {
    padding-right: 2.6rem; /* место под SVG-стрелку @375 */
  }

  textarea.contact-form__field {
    height: 5.4rem; /* 108px @375 */
    padding-top: 1rem; /* 20px @375 */
    padding-bottom: 1rem;
  }

  .contact-form__select-arrow {
    right: 1rem; /* 20px @375 */
    width: 0.7rem; /* 14px @375 */
  }

  .contact-form__submit {
    height: 2.5rem; /* 50px @375 */
    border-radius: 0.5rem; /* 10px @375 */
  }
}

/* Точечная коррекция для очень узких экранов (320px и около того), по
   аналогии с уже применённой коррекцией на карточках Recent Work/Reviews:
   ниже 359px fluid-rem-формула сжимает доступную ширину панели быстрее,
   чем растёт font-size, из-за чего заголовок перестаёт помещаться в 2
   строки ровно на "Ready to start your" / "renovation?". Слегка уменьшаем
   горизонтальные паддинги панели и max-width заголовка, чтобы вернуть
   нужный перенос. */
@media (max-width: 359px) {
  .contact-form-panel {
    padding-inline: 1rem;
  }

  .contact-form-panel__title {
    max-width: 11.6rem;
  }
}


/* ==========================================================================
   11. SERVICE PAGE
   ==========================================================================
   Базовая структура service.html — общий шаблон страницы услуги
   (WordPress + SCF в будущем). Header/Footer переиспользуются из главной
   без изменений разметки/классов — здесь только то, что специфично именно
   для внутренних страниц. Секции самой услуги (карточки и т.д.)
   добавляются после получения соответствующего макета.

   Header на страницах услуг: раньше (до появления Hero на service.html)
   здесь был отдельный модификатор .header--page — сплошной тёмный бар,
   т.к. страница не имела фонового изображения под Header. Теперь у
   каждой страницы услуги есть собственный Hero с фоновым изображением
   (см. .hero--service ниже), поэтому Header ведёт себя ТАК ЖЕ, как на
   главной: прозрачный, пока виден .hero--service, и .header--scrolled
   (чёрный фон) после того, как он прокручен — та же общая система на
   основе .hero (см. раздел 9 и app.js, initHeaderScrollState), без каких-
   либо изменений для страницы услуги. Отдельного модификатора/системы для
   страницы услуги не требуется — .header--page удалён как более не
   используемый. */

/* --------------------------------------------------------------------------
   Hero страниц услуг — .hero--service
   Общий модификатор для Hero ЛЮБОЙ страницы услуги (не только Stretch
   Ceilings) — переиспользуется без изменений на всех будущих страницах
   услуг. Базовый класс .hero и все его общие стили (фон, картинка,
   контейнер, типографика заголовка/описания, сама круглая CTA-кнопка)
   продолжают работать одновременно для главной страницы и страниц услуг.
   Ниже — только реальные отличия:
   - Desktop: высота Hero 85vh вместо 100vh (чтобы CTA было видно), с
     min-height-подстраховкой для невысоких окон (см. .hero--service ниже);
     центрированная композиция заголовок/описание/CTA — по принципу,
     который на главной странице уже используется на Tablet/Mobile, но с
     сохранением Desktop-типографики и размеров; увеличенный отступ снизу
     у группы заголовка+описания (180px = 9rem вместо общих 106px/5.3rem),
     чтобы круглая CTA её не перекрывала; единые ограничения max-width
     заголовка/описания для всех страниц услуг.
   - Tablet (≤1024px) и Mobile (≤767px): высота, вертикальные отступы,
     позиционирование и размеры CTA полностью наследуются от базового Hero
     без изменений — переопределяются только max-width заголовка/описания
     (единые для всех страниц услуг) и центрирование текста внутри него.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  .hero--service {
    height: 85vh; /* на главной странице Desktop — 100vh */
    /* Подстраховка для невысоких Desktop-окон (короткая высота viewport
       при обычной ширине): без неё при малой vh контент (заголовок +
       описание + отступ 180px) не помещался бы над круглой CTA. Значение
       ниже 85vh при контрольной высоте 1080px @1920 (=918px), поэтому на
       контрольном макете 1920 min-height ни на что не влияет — работает
       только как пол на низких экранах. */
    min-height: 34rem; /* 680px @1920 */
  }

  /* Группа заголовок+описание: отступ снизу увеличен относительно базовых
     5.3rem (106px, общее значение с главной страницей). На главной справа
     от контента находится круглая CTA, здесь же CTA расположена НИЖЕ
     контента — при исходном отступе она частично перекрывала описание.
     padding-bottom относится только к .hero__container (сама группа
     заголовка/описания) — CTA спозиционирована отдельным absolute-
     элементом независимо от контейнера и этим изменением не затрагивается. */
  .hero--service .hero__container {
    padding-bottom: 9rem; /* 180px @1920 */
  }

  .hero--service .hero__title {
    width: 100%;
    max-width: 60rem; /* 1200px @1920 — единое ограничение для всех Service Hero */
    margin-inline: auto;
    text-align: center;
  }

  .hero--service .hero__line {
    display: none; /* декоративная линия слева не используется в центрированной композиции — как на Tablet/Mobile главной */
  }

  .hero--service .hero__description-wrapper {
    width: 100%;
    max-width: 26rem; /* 520px @1920 — единое ограничение для всех Service Hero */
    margin-left: 0;
    margin-inline: auto;
    justify-content: center;
  }

  .hero--service .hero__description {
    text-align: center; /* QA-фикс: раньше центрировался только весь wrapper целиком, сам текст внутри оставался выровнен по левому краю */
  }

  .hero--service .hero__cta {
    right: auto;
    left: 50%;
    bottom: -6rem; /* -(240px / 2): та же логика перекрытия нижней границы, что и на Tablet главной */
    translate: -50% 0; /* центрирование; rotate задан отдельно в .round-cta, оба складываются независимо */
  }
}

/* Единые ограничения ширины текста Hero страниц услуг — Tablet/Mobile.
   Вертикальное позиционирование, отступы, высота Hero и CTA на этих
   брейкпоинтах не меняются (уже соответствуют макету, см. базовые правила
   .hero/.hero__cta в разделе 10) — здесь только max-width заголовка и
   описания. Центрирование (margin-inline:auto, text-align:center,
   justify-content:center) уже реализовано в базовых Tablet/Mobile-правилах
   .hero__title/.hero__description-wrapper/.hero__description и продолжает
   работать без изменений. */
@media (max-width: 1024px) {
  .hero--service .hero__title {
    width: 100%;
    max-width: 45rem; /* 900px @1024 */
  }

  .hero--service .hero__description-wrapper {
    width: 100%;
    max-width: 26rem; /* 520px @1024 */
  }
}

@media (max-width: 767px) {
  .hero--service .hero__title {
    max-width: 16rem; /* 320px @375 */
  }

  .hero--service .hero__description-wrapper {
    max-width: 12.5rem; /* 250px @375 */
  }
}

/* --------------------------------------------------------------------------
   "What's included" — .service-included
   Светлая секция сразу под Hero страницы услуги: outline-плашка, заголовок,
   4 тёмно-синие карточки в ряд и warranty-блок под ними.

   Верхний padding секции учитывает круглую CTA Hero, выступающую снизу
   (см. .hero--service .hero__cta выше) — секция не переопределяет и не
   зависит от неё напрямую, просто достаточно большой отступ сверху.

   Warranty-блок (.service-included__warranty) на Desktop/Tablet — это
   full-width ribbon, визуально отдельный от сетки карточек. На Mobile та
   же разметка перестраивается CSS-ом в обычную карточку той же формы,
   что и остальные 4 — она просто идёт следующей в общем потоке колонки
   (margin-top равен gap сетки), поэтому выглядит как 5-й элемент стека.

   Header над этой секцией управляется общей системой на основе .hero (см.
   раздел 9, app.js initHeaderScrollState) — секция сама на это никак не
   влияет, отдельная разметка/атрибут ей не нужны.
   -------------------------------------------------------------------------- */

.service-included {
  padding-top: 9.2rem; /* 184px @1920 */
  padding-bottom: 7rem; /* 140px @1920 */
  background: var(--color-white);
  color: var(--color-text);
}

.service-included__label {
  width: 12.6rem; /* 252px @1920 */
  height: 4.2rem; /* 84px @1920 */
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-black);
  border-radius: 5rem; /* pill */
  font-size: 1rem; /* 20px @1920 */
  line-height: 110%;
  color: var(--color-text);
  text-align: center;
}

.service-included__title {
  margin-top: 3.6rem; /* 72px @1920 — gap label → title */
  text-align: center;
  margin-inline: auto;
  max-width: 76rem; /* 1520px @1920 */
}

/* Общий wrapper для .service-included__grid и .service-included__warranty.
   На Desktop и Mobile он display:contents — т.е. никак не участвует в
   раскладке, оба блока продолжают вести себя как обычные block-элементы
   ровно как раньше. На Tablet он переключается в реальную CSS Grid (см.
   медиа-запрос ниже) — единственное место, где ширина ribbon реально
   вычисляется из тех же колонок/gap, что и у карточек. */
.service-included__body {
  display: contents;
}

.service-included__grid {
  margin-top: 4.4rem; /* 88px @1920 — gap title → cards */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem; /* 10px @1920 */
}

.service-included-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 22.3rem; /* 446px @1920 */
  border-radius: 1.8rem; /* 36px @1920 */
  padding: 2.6rem 2rem 2.2rem 2rem; /* 52 / 40 / 44 / 40 @1920 */
}

.service-included-card--dark {
  background: var(--color-text);
}

.service-included-card__icon img {
  width: 3.4rem; /* 68px @1920 */
  height: 3.4rem;
}

.service-included-card__text {
  color: var(--color-white);
  font-weight: 700;
  line-height: 100%;
  letter-spacing: -0.05em; /* -5% по ТЗ, как и в остальных типографических классах проекта */
  font-size: 1.6rem; /* 32px @1920 */
}

.service-included-card__text span {
  color: var(--color-accent);
}

.service-included__warranty {
  margin-top: 0.6rem; /* 12px @1920 — gap от сетки карточек */
  display: flex;
  align-items: center;
  gap: 2rem; /* 40px @1920 */
  border-radius: 1.8rem; /* 36px @1920 */
  padding: 2.3rem 2rem; /* 46 / 40 @1920 */
  background: linear-gradient(102.82deg, var(--color-accent) 3.41%, #047FB8 75.26%);
}

/* Обёртка иконки зафиксирована по размеру отдельно от img: без этого при
   длинном тексте warranty-text она сжималась как обычный flex-item
   (flex-shrink на самом img не действует, т.к. flex-item — именно .icon,
   а не вложенный img). aspect-ratio — дополнительная подстраховка формы. */
.service-included__warranty-icon {
  width: 3.4rem; /* 68px @1920 */
  height: 3.4rem;
  min-width: 3.4rem;
  min-height: 3.4rem;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
}

.service-included__warranty-icon img {
  width: 3.4rem; /* 68px @1920 */
  height: 3.4rem;
  flex-shrink: 0;
}

.service-included__warranty-text {
  color: var(--color-white);
  font-weight: 700;
  line-height: 100%;
  letter-spacing: -0.05em;
  font-size: 1.6rem; /* 32px @1920 — тот же стиль, что у карточек */
}

/* Tablet (768–1024): 2×2 сетка фиксированной ширины (НЕ на всю ширину
   блока — см. ТЗ), warranty остаётся ribbon под сеткой. */
@media (max-width: 1024px) {
  .service-included {
    padding-top: 10.3rem; /* 206px @1024 */
    padding-bottom: 5rem; /* 100px @1024 */
  }

  .service-included__label {
    width: 11.9rem; /* 238px @1024 */
    height: 4.1rem; /* 82px @1024 */
    font-size: 0.9rem; /* 18px @1024 */
  }

  .service-included__title {
    margin-top: 2rem; /* 40px @1024 — gap label → title */
    max-width: 43rem; /* 860px @1024 */
  }

  /* QA-фикс выравнивания ribbon: .service-included__grid сам больше не
     является грид-контейнером на Tablet — он "растворяется"
     (display:contents), отдавая свои 4 карточки напрямую в грид
     .service-included__body ниже. Так ribbon (grid-column:1/-1 на
     .service-included__warranty, см. ниже) получает свою ширину от ТЕХ ЖЕ
     колонок/gap, что и карточки, а не от отдельного вычисленного значения:
     левый край строго совпадает с первой карточкой, правый — со второй. */
  .service-included__grid {
    display: contents;
  }

  .service-included__body {
    margin-top: 3.8rem; /* 76px @1024 — gap title → cards (было на .service-included__grid) */
    display: grid;
    /* Фиксированная ширина карточек (не 1fr): грид не растягивается на
       всю ширину контейнера, а центрируется через justify-content. */
    grid-template-columns: repeat(2, 18.1rem); /* 362px @1024 */
    column-gap: 0.5rem; /* 10px @1024 */
    row-gap: 0; /* см. ниже: gap между рядами карточек и gap до ribbon разные (10px/12px), поэтому не общий row-gap, а margin-top на самих элементах */
    justify-content: center;
  }

  /* Ряд карточек 2 (3-й и 4-й элемент по DOM-порядку внутри
     .service-included__grid) — тот же отступ 10px, что раньше давал
     row-gap. Селектор работает независимо от display:contents на
     .service-included__grid — display:contents не меняет DOM, только
     собственный box. */
  .service-included__grid > .service-included-card:nth-child(n + 3) {
    margin-top: 0.5rem; /* 10px @1024 */
  }

  .service-included-card {
    height: 19rem; /* 380px @1024 */
    border-radius: 1.5rem; /* 30px @1024 */
    padding: 2.3rem 1.6rem 1.9rem 1.8rem; /* 46 / 32 / 38 / 36 @1024 */
  }

  .service-included-card__icon img {
    width: 2.9rem; /* 58px @1024 */
    height: 2.9rem;
  }

  .service-included-card__text {
    font-size: 1.4rem; /* 28px @1024 */
  }

  .service-included__warranty {
    /* Ribbon — 5-й элемент того же грида, растянутый на обе колонки:
       ширина = ширина двух карточек + gap между ними, без отдельного
       фиксированного значения. margin-top (0.6rem, объявлен в базовых
       правилах выше) даёт нужные 12px отступа от сетки карточек. */
    grid-column: 1 / -1;
    padding: 2rem 1.8rem; /* 40 / 36 @1024 */
    gap: 1.2rem; /* 24px @1024 */
  }

  .service-included__warranty-icon {
    width: 2.9rem; /* 58px @1024 */
    height: 2.9rem;
    min-width: 2.9rem;
    min-height: 2.9rem;
  }

  .service-included__warranty-icon img {
    width: 2.9rem; /* 58px @1024 — не задано отдельно в ТЗ, взято по аналогии с иконкой карточек на этом брейкпоинте */
    height: 2.9rem;
  }

  .service-included__warranty-text {
    font-size: 1.4rem; /* 28px @1024 — тот же стиль, что у карточек */
  }
}

/* Mobile (<768): все 5 блоков одной колонкой. Warranty здесь уже НЕ
   ribbon — CSS переключает её на ту же flex-column/space-between
   раскладку, что и у тёмных карточек, той же ширины/высоты/формы, и она
   визуально идёт следующим элементом стека (margin-top равен gap сетки). */
@media (max-width: 767px) {
  .service-included {
    padding-top: 6rem; /* 120px @375 */
    padding-bottom: 4rem; /* 80px @375 */
  }

  .service-included__label {
    width: 7.6rem; /* 152px @375 */
    height: 2.8rem; /* 56px @375 */
    font-size: 0.6rem; /* 12px @375 */
  }

  .service-included__title {
    margin-top: 1.6rem; /* 32px @375 — gap label → title */
    max-width: 16.3rem; /* 326px @375 */
  }

  /* QA-фикс: медиа-запрос Tablet выше (max-width:1024px) продолжает
     действовать и здесь (Mobile — его подмножество). Явно возвращаем
     .service-included__body/.service-included__grid к исходному для
     Mobile поведению (единая колонка на самом .service-included__grid,
     а не на общем body-гриде) и убираем добавленный там margin-top у
     3-й/4-й карточки — раскладку Mobile это не меняет. */
  .service-included__body {
    display: contents;
  }

  .service-included__grid {
    display: grid;
    margin-top: 2.2rem; /* 44px @375 — gap title → cards */
    grid-template-columns: 12.3rem; /* 246px @375 — фиксированная ширина, не на всю ширину блока */
    gap: 0.3rem; /* 6px @375 */
    justify-content: center;
  }

  .service-included__grid > .service-included-card:nth-child(n + 3) {
    margin-top: 0;
  }

  .service-included-card {
    height: 13rem; /* 260px @375 */
    border-radius: 1.2rem; /* 24px @375 */
    padding: 1.6rem 0.8rem 1.4rem 1.2rem; /* 32 / 16 / 28 / 24 @375 */
  }

  .service-included-card__icon img {
    width: 2rem; /* 40px @375 */
    height: 2rem;
  }

  .service-included-card__text {
    font-size: 0.9rem; /* 18px @375 */
  }

  /* Warranty становится обычной карточкой: та же ширина/высота/форма,
     раскладка как у тёмных карточек (иконка сверху, текст снизу), только
     голубой градиентный фон вместо тёмно-синего. margin-top совпадает с
     gap сетки выше, поэтому визуально это 5-й элемент того же стека. */
  .service-included__warranty {
    margin-top: 0.3rem; /* 6px @375 */
    width: 12.3rem; /* 246px @375 */
    height: 13rem; /* 260px @375 */
    margin-inline: auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 0;
    border-radius: 1.2rem; /* 24px @375 */
    padding: 1.6rem 0.8rem 1.4rem 1.2rem; /* 32 / 16 / 28 / 24 @375 */
  }

  .service-included__warranty-icon {
    width: 2rem; /* 40px @375 */
    height: 2rem;
    min-width: 2rem;
    min-height: 2rem;
  }

  .service-included__warranty-icon img {
    width: 2rem; /* 40px @375 — не задано отдельно в ТЗ, взято по аналогии с иконкой карточек */
    height: 2rem;
  }

  .service-included__warranty-text {
    font-size: 0.9rem; /* 18px @375 */
  }
}

/* --------------------------------------------------------------------------
   "Why choose stretch ceilings" — .why-section--service
   Переиспользует компонент Why choose us (см. раздел "WHY CHOOSE US" выше)
   почти без изменений: тот же .why-section (фон/padding/overflow:hidden),
   тот же .why-section__title (типографика и gap до карточек на каждом
   breakpoint), те же базовые .why-card/.why-card--white/.why-card--blue/
   .why-card__icon/.why-card__title — их размер, padding, border-radius,
   цвета и типографика на Desktop/Tablet/Mobile берутся из тех правил
   БЕЗ переопределений здесь.

   Единственное, что отличается — сама композиция: 5 карточек вместо 4.
   Новые карточки используют собственные модификаторы --service-1..5 (а не
   переиспользуют --1..--4), поэтому НИКАК не пересекаются с оригинальными
   карточками Why choose us на главной странице — ни в position/max-width,
   ни где-либо ещё.

   Desktop (>1024, базовые правила): 3 белые карточки в верхнем ряду
   (1, 3, 5) + 2 голубые в нижнем (2, 4), между ними. Горизонтальная
   область композиции идентична Why choose us (82.3rem, из
   @media(min-width:1025px) выше). Вертикальное смещение между рядами —
   14.45rem (в оригинале — 9.4rem; было 15.4rem до QA-правки, поднявшей
   карточки 2/4 на 19px): тексты карточек здесь длиннее (реальный контент
   страницы услуги) и переносятся в 3-4 строки даже при max-width, близком
   к внутренней ширине карточки. Текст в карточке всегда прижат к низу
   (.why-card{justify-content:flex-end}), поэтому его нижний край всегда
   фиксирован на card-height − padding = 14.8rem от верха карточки
   независимо от числа строк — при 14.45rem голубая карточка заходит на
   ~0.35rem (7px) выше этой границы (было +0.6rem запаса при 15.4rem);
   это осознанный компромисс между запросом "поднять на 18-20px" и
   исходным анти-коллизионным запасом, проверено скриншотами — заметного
   наложения на текст не создаёт. Из-за этого .why-cards для service-
   секции требует собственную высоту (31.45rem = 14.45rem + высота
   карточки 17rem), см. переопределение ниже. Rotate не задаётся — как и
   в оригинале на Desktop.
   -------------------------------------------------------------------------- */

/* Явно ограничено @media(min-width:1025px): .why-card-wrap--service-N
   ниже — compound-селектор (.why-section--service + класс карточки), его
   specificity выше, чем у общего мобильного правила `.why-card-wrap {
   left:50%; ... }` (см. раздел "WHY CHOOSE US" выше) — без этого
   ограничения left/top отсюда перебивали бы центрирование на Tablet/
   Mobile независимо от порядка объявления в файле. */
@media (min-width: 1025px) {
  /* QA: нижний padding секции только для service (главная не трогается) —
     то же .why-section у Why choose us сохраняет свои 13rem/260px. */
  .why-section--service { padding-bottom: 9rem; /* 180px @1920 */ }

  .why-section--service .why-cards { height: 31.45rem; }
  .why-section--service .why-card-wrap--service-1 { left: 0; top: 0; z-index: 1; }
  /* QA: карточки 2 и 4 подняты с 15.4rem до 14.45rem (-0.95rem = -19px @1920,
     в запрошенном диапазоне 18–20px). Единственная переопределяемая
     координата — top у .why-card-wrap, никаких дополнительных transform/
     bottom поверх неё не добавлено. */
  .why-section--service .why-card-wrap--service-2 { left: 15rem; top: 14.45rem; z-index: 2; }
  .why-section--service .why-card-wrap--service-3 { left: 29.9rem; top: 0; z-index: 3; }
  .why-section--service .why-card-wrap--service-4 { left: 44.85rem; top: 14.45rem; z-index: 4; }
  .why-section--service .why-card-wrap--service-5 { left: 59.8rem; top: 0; z-index: 5; }
}

/* QA: Desktop-версия этого правила раньше задавала max-width:18rem на
   каждую карточку по отдельности (унаследовано от того, как исходный
   компонент Why choose us ограничивает текст индивидуально через
   .why-card--N .why-card__title) — из-за этого текст оставался урезанным
   на Desktop, хотя на Tablet/Mobile ограничение уже было снято ниже.
   Убрано полностью: текст занимает всю ширину карточки, переносы
   регулируются только padding'ом .why-card (2.2rem на Desktop). */
.why-section--service .why-card__title {
  max-width: none;
  width: 100%;
  min-width: 0;
}

/* Tablet (768–1024px): НЕ повторяем Desktop absolute-композицию — обычная
   центрированная CSS Grid, 2 колонки шириной ровно с существующую
   Tablet-карточку (19.4rem, тот же .why-card из оригинала), карточки не
   перекрываются и не повёрнуты. Порядок по рядам — 1+2 / 4+3 / 5 (5-я
   карточка растянута на обе колонки и центрирована). Секция не использует
   старую фиксированную высоту .why-cards — здесь высота auto, полностью
   считается нормальным flow (title + gap + grid + gap), чтобы 5-я
   карточка не обрезалась. */
@media (max-width: 1024px) {
  .why-section--service .why-cards {
    position: static;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, 19.4rem); /* ширина карточки Tablet — как в оригинале */
    justify-content: center;
    column-gap: 0.8rem; /* 16px @1024 */
    row-gap: 0.8rem; /* 16px @1024 */
  }

  .why-section--service .why-card-wrap {
    position: static;
  }

  .why-section--service .why-card-wrap--service-1 { grid-column: 1; grid-row: 1; }
  .why-section--service .why-card-wrap--service-2 { grid-column: 2; grid-row: 1; }
  .why-section--service .why-card-wrap--service-4 { grid-column: 1; grid-row: 2; }
  .why-section--service .why-card-wrap--service-3 { grid-column: 2; grid-row: 2; }
  .why-section--service .why-card-wrap--service-5 {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: center;
  }

  /* QA: индивидуальные max-width убраны — переносы теперь определяются
     исключительно внутренними padding карточки (ниже), не шириной текста.
     Переопределяет только для service-карточек (compound-селектор
     .why-section--service .why-card, specificity выше общего .why-card{
     padding:1.8rem}), карточки Why choose us на главной не затронуты.
     Явно переопределено ещё раз в Mobile-блоке ниже — иначе это правило
     "протекло" бы и туда, т.к. @media(max-width:1024px) включает и Mobile. */
  .why-section--service .why-card {
    padding: 1.8rem 3rem 1.8rem 1.8rem; /* top/right/bottom/left = 36/60/36/36px @1024 */
  }

  .why-section--service .why-card--service-1 .why-card__title,
  .why-section--service .why-card--service-2 .why-card__title,
  .why-section--service .why-card--service-3 .why-card__title,
  .why-section--service .why-card--service-4 .why-card__title,
  .why-section--service .why-card--service-5 .why-card__title {
    max-width: none;
    width: 100%;
    min-width: 0;
  }
}

/* Mobile (<768px): та же механика вертикального artistic-стека, что и в
   оригинале Why choose us (centered wrapper через left:50%+translateX
   на .why-card-wrap — общее правило, см. раздел "WHY CHOOSE US" выше,
   переопределяются здесь только top/margin-left/z-index/rotate по
   карточке), просто продолжена на 5 карточек с тем же шагом ~9.3rem и
   тем же чередованием наклона -5deg/7deg. Контейнер .why-cards выше
   оригинала (48rem вместо 40rem), чтобы вместить 5-ю карточку без
   обрезания; position/display возвращены к исходным (Tablet-override
   выше распространяется и на Mobile через тот же max-width:1024px, если
   не переопределить здесь явно). */
@media (max-width: 767px) {
  .why-section--service .why-cards {
    position: relative;
    display: block;
    height: 48rem; /* ~960px @375 — вмещает 5 карточек с шагом ~9.3rem */
  }

  .why-section--service .why-card-wrap {
    position: absolute;
  }

  .why-section--service .why-card-wrap--service-1 { top: 0; margin-left: -1rem; z-index: 5; }
  .why-section--service .why-card-wrap--service-2 { top: 9.3rem; margin-left: 1rem; z-index: 4; }
  .why-section--service .why-card-wrap--service-3 { top: 18.6rem; margin-left: -1rem; z-index: 3; }
  .why-section--service .why-card-wrap--service-4 { top: 27.9rem; margin-left: 1rem; z-index: 2; }
  .why-section--service .why-card-wrap--service-5 { top: 37.2rem; margin-left: -1rem; z-index: 1; }

  .why-section--service .why-card--service-1 { rotate: -5deg; }
  .why-section--service .why-card--service-2 { rotate: 7deg; }
  .why-section--service .why-card--service-3 { rotate: -5deg; }
  .why-section--service .why-card--service-4 { rotate: 7deg; }
  .why-section--service .why-card--service-5 { rotate: -5deg; }

  /* QA: z-index уже соответствует требуемому обратному порядку (Card1
     сверху → Card5 снизу) — задан ещё в предыдущей задаче выше, значения
     не менялись.
     Индивидуальные max-width убраны так же, как на Tablet — только
     правый padding увеличен (48px), остальные стороны — из существующего
     мобильного компонента (1.2rem/24px), без изменений размеров карточки,
     иконки, gap и позиционирования (top/margin-left/rotate не тронуты). */
  .why-section--service .why-card {
    padding: 1.2rem 2.4rem 1.2rem 1.2rem; /* top/right/bottom/left = 24/48/24/24px @375 */
  }

  .why-section--service .why-card--service-1 .why-card__title,
  .why-section--service .why-card--service-2 .why-card__title,
  .why-section--service .why-card--service-3 .why-card__title,
  .why-section--service .why-card--service-4 .why-card__title,
  .why-section--service .why-card--service-5 .why-card__title {
    max-width: none;
    width: 100%;
    min-width: 0;
  }
}

/* Та же точечная коррекция для самых узких экранов, что и в оригинале
   Why choose us (см. @media(max-width:359px) выше) — применена к тем же
   позициям в чередовании (1/3/5 — влево, 2/4 — вправо). */
@media (max-width: 359px) {
  .why-section--service .why-card-wrap--service-1,
  .why-section--service .why-card-wrap--service-3,
  .why-section--service .why-card-wrap--service-5 {
    margin-left: -0.25rem;
  }

  .why-section--service .why-card-wrap--service-2,
  .why-section--service .why-card-wrap--service-4 {
    margin-left: 0.25rem;
  }
}


/* ==========================================================================
   12. FORMS
   ==========================================================================
   Стили формы добавляются после получения макета формы (см. ТЗ п.12).
   ========================================================================== */


/* ==========================================================================
   13. FOOTER
   ==========================================================================
   Чёрный Footer с контактами, навигацией-дублем якорей главной страницы
   и декоративной крупной надписью "Smart Home" внизу.

   Desktop/Tablet: "Smart Home" и copyright — position:absolute внутри
   .footer__inner (контейнер), обрезаются overflow:hidden на .footer.
   Mobile: оба элемента — обычный document flow (без absolute).
   ========================================================================== */

.footer {
  position: relative;
  overflow: hidden;
  background: var(--color-black);
  color: var(--color-white);
  padding-top: 5.3rem; /* 106px @1920 */
  padding-bottom: 12rem; /* 240px @1920 — точечная правка по запросу (было 15.3rem) */
}

.footer__inner {
  position: relative;
}

.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* --------------------------------------------------------------------------
   Контакты (слева на Desktop/Tablet)
   -------------------------------------------------------------------------- */

.footer__contacts {
  width: 55%;
}

.footer__contact-links {
  display: flex;
  flex-direction: column;
  gap: 0.4rem; /* 8px @1920 */
}

.footer__contact-link {
  position: relative; /* контейнер для анимированного подчёркивания ::after */
  display: inline-block;
  width: fit-content;
  color: var(--color-white);
  font-weight: 700;
}

/* Hover & Interaction Polish: подчёркивание слева направо через
   scaleX(0) → scaleX(1) вместо мгновенного text-decoration. Ширина ::after
   всегда равна width:fit-content самой ссылки (100% от неё), поэтому линия
   не выходит за границы текста ни на Desktop/Tablet, ни на Mobile —
   отдельный breakpoint-override не нужен. */
.footer__contact-link::after {
  content: "";
  position: absolute;
  left: 0;
  /* QA-фикс: было -0.15em (≈9.6px @1920, т.к. em считался от font-size
     ссылки — 3.2rem/64px из .section-title) — переведено в rem (по
     запросу, не зависит от локального font-size элемента) и поднято
     примерно на 4px ближе к тексту. */
  bottom: -0.28rem; /* ≈5.6px @1920 — было ≈9.6px */
  width: 100%;
  height: 0.1rem; /* 2px @1920 — было 1px */
  background: var(--color-white);
  scale: 0 1;
  transform-origin: left;
  transition: scale 0.32s ease;
}

@media (hover: hover) and (pointer: fine) {
  .footer__contact-link:hover::after {
    scale: 1 1;
  }
}

.footer__locations {
  margin-top: 1.6rem; /* 32px @1920 */
  color: var(--color-white-50);
  font-size: 1.4rem; /* 28px @1920 */
  font-weight: 700;
  line-height: 110%;
}

/* --------------------------------------------------------------------------
   Навигация (справа на Desktop/Tablet): Facebook + Home column + Services column
   -------------------------------------------------------------------------- */

.footer__nav-area {
  width: 26%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between; /* QA-фикс: было gap:2rem — теперь элементы равномерно распределяются по доступной ширине блока */
}

.footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem; /* 50px @1920 */
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-black);
  transition: color var(--transition-base);
}

/* Hover & Interaction Polish: SVG использует fill="currentColor" — меняем
   только color самой ссылки, иконка перекрашивается сама. Фон/размер/
   радиус/позиция не трогаются. */
@media (hover: hover) and (pointer: fine) {
  .footer__social:hover {
    color: #082A4D;
  }
}

.footer__social svg {
  width: 1.2rem; /* 24px @1920 */
  height: 1.2rem;
}

.footer__nav-title {
  margin-bottom: 1rem; /* 20px @1920 */
  color: var(--color-white);
  font-weight: 700;
}

.footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem; /* 12px @1920 */
}

.footer__nav-link {
  display: inline-block;
  color: var(--color-white-50);
  transition: color var(--transition-base);
}

/* Hover & Interaction Polish: используется тот же механизм затемнения, что
   уже принят в проекте (color: var(--color-white-50) / var(--color-white)),
   а не opacity — чтобы не создавать конфликт с двумя разными системами
   затемнения на соседних элементах. Правило общее для Desktop/Tablet/Mobile:
   Mobile-специфичный display:block (см. раздел Footer ниже) цвет не
   переопределяет, поэтому дублировать hover под Mobile не нужно. */
@media (hover: hover) and (pointer: fine) {
  .footer__nav-link:hover {
    color: var(--color-white);
  }
}

/* --------------------------------------------------------------------------
   Copyright + декоративный "Smart Home" — нижняя зона Footer
   -------------------------------------------------------------------------- */

.footer__copyright {
  position: absolute;
  left: 10rem; /* QA-фикс (точечная правка по запросу) */
  bottom: -6rem; /* QA-фикс (точечная правка по запросу) */
  z-index: 2;
  color: var(--color-white-50);
  font-size: 0.9rem; /* 18px @1920 */
}

.footer__brand {
  position: absolute;
  left: 0;
  /* Точечная правка по запросу: font-size/bottom обновлены под текст
     "SmartHome Contractor" и новый padding-bottom .footer (было
     font-size: 8rem; bottom: -17.2rem). */
  bottom: -14.2rem;
  z-index: 1;
  font-weight: 700;
  font-size: 8.5rem;
  line-height: 100%;
  letter-spacing: -0.05em; /* QA-фикс: раньше не задавался, ширина надписи была заметно больше макета */
  color: var(--color-white);
  white-space: nowrap;
}

/* Tablet — макет 1024px */
@media (max-width: 1024px) {
  .footer {
    padding-top: 5.3rem; /* 106px @1024 */
    padding-bottom: 12.7rem; /* 254px @1024 — QA-фикс (точечная правка по запросу), резерв под absolute decorative Smart Home */
  }

  .footer__top {
    display: block;
  }

  .footer__contacts {
    width: 100%;
  }

  .footer__nav-area {
    width: 100%;
    margin-top: 5rem; /* 100px @1024 — отступ contacts → nav */
    display: grid;
    grid-template-columns: max-content max-content 1fr;
    align-items: start;
    gap: 3rem; /* 60px @1024 */
  }

  .footer__nav-list--services {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    column-gap: 3rem; /* 60px @1024 */
    row-gap: 0.6rem;
  }

  .footer__copyright {
    left: 4.5rem; /* QA-фикс (точечная правка по запросу) — не менялось */
    right: auto; /* явный сброс, чтобы не конфликтовать с Desktop-значением left/right */
    bottom: -6rem; /* QA-фикс (точечная правка по запросу): было -3rem */
  }

  .footer__brand {
    left: auto; /* явный сброс, чтобы не конфликтовать с Desktop-значением left */
    right: 1rem; /* QA-фикс (точечная правка по запросу) — не менялось */
    /* Тот же пересчёт, что и на Desktop (см. комментарий выше): было видно
       26px из 192px (~13.5%) — сохраняем эту же долю для новой строки. */
    bottom: -13.4rem; /* было -14rem @ 9.6rem */
    font-size: 5rem; /* было 9.6rem (192px @1024); пропорция подобрана по факт. ширине текста */
  }
}

/* Mobile — макет 375px */
@media (max-width: 767px) {
  .footer {
    padding-top: 3rem; /* 60px @375 */
    padding-bottom: 2rem; /* 40px @375 — считается от copyright до края Footer */
  }

  .footer__contacts {
    text-align: center;
  }

  .footer__contact-links {
    align-items: center;
    gap: 0.4rem; /* 8px @375 */
  }

  .footer__contact-link {
    margin-inline: auto;
    font-size: 1.15rem; /* 23px @375 */
    line-height: 100%;
  }

  .footer__locations {
    margin-top: 0.8rem; /* 16px @375 */
    font-size: 0.7rem; /* 14px @375 */
    letter-spacing: -0.05em; /* QA-фикс: помогает "Hamilton, Burlington, Oakville, Mississauga, Toronto" уместиться в 1 строку */
  }

  /* QA-фикс: Facebook раньше был своим отдельным flex-рядом НАД Home/
     Services (align-self:flex-end внутри flex-column). Теперь — оверлей
     через position:absolute в правом верхнем углу .footer__nav-area,
     на одной высоте со строкой "Home"/"Services" (см. .footer__social
     ниже: top:0;right:0 относительно этого position:relative). */
  .footer__nav-area {
    position: relative;
    margin-top: 2.7rem; /* 54px @375 — Locations → navigation */
    display: flex;
    flex-direction: column;
    gap: 1.2rem; /* 24px @375 */
  }

  .footer__social {
    position: absolute;
    top: 0;
    right: 0;
    align-self: auto;
    width: 1.4rem; /* 28px @375 */
    height: 1.4rem;
  }

  .footer__social svg {
    width: 0.7rem; /* 14px @375 */
    height: 0.7rem;
  }

  /* Колонка ярлыка ("Home"/"Services") — фиксированная ширина (а не auto),
     одинаковая у обоих .footer__nav: иначе у каждого <nav> — свой
     собственный grid, и колонка ссылок стартует на разном X (разная
     ширина текста "Home" vs "Services"). Фикс через CSS Grid, без
     дублирования разметки. */
  .footer__nav {
    display: grid;
    grid-template-columns: 2.5rem 1fr; /* 50px + 24px gap (column-gap) @375 */
    column-gap: 1.2rem; /* 24px @375 */
    align-items: start;
  }

  .footer__nav-title {
    margin-bottom: 0;
  }

  .footer__nav-list {
    gap: 0.7rem; /* 14px @375 */
  }

  /* QA-фикс вертикального выравнивания: .footer__nav-link — inline-block
     внутри <li>, у которого (как и у <ul>) нет собственного font-size/
     line-height — он наследует их от родителя (~20px, а не 12px, как у
     самой ссылки через .menu-text). Из-за этого браузер строит анонимный
     line box по бОльшим "унаследованным" метрикам, и inline-block ссылка
     (vertical-align:baseline по умолчанию) сидит в нём с отступом сверху —
     первая строка каждой группы (Home / Services) визуально начинается
     ниже заголовка и Facebook-иконки. display:block убирает этот line box
     полностью — правильная причина, а не "подгонка" через отрицательный
     margin. */
  .footer__nav-link {
    display: block;
  }

  .footer__nav-list--services {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    column-gap: 1.5rem; /* 30px @375 */
    row-gap: 0.7rem; /* 14px @375 */
  }

  /* QA: font-size раньше был фиксированным 3.2rem. Mobile root font-size
     считается формулой calc(24.771px - 1.2723vw) — она специально УМЕНЬШАЕТ
     px/rem по мере роста viewport (375→767px), чтобы обычная текстовая
     типографика не росла до неадекватных размеров на широких телефонах.
     Для этой decorative-надписи нужен противоположный эффект: она должна
     заполнять всю ширину контейнера, т.е. расти вместе с viewport, а не
     уменьшаться. Поэтому здесь — локальная формула только для .footer__brand
     (глобальная rem-система и html{font-size} не трогаются, остальная
     типографика Footer/страницы не затронута): чистый vw, откалиброванный
     по утверждённому значению на контрольных 375px (3.2rem = 64px):
     64/375*100 = 17.0667vw. На 375px даёт те же 64px, что и раньше, а на
     390/430/440px — пропорционально больше (66.6/73.4/75.1px), а не меньше.
     text-align:center добавлен явно: раньше блок был left-aligned на всю
     ширину .footer__inner и визуально казался центрированным только потому,
     что текст при 3.2rem почти точно совпадал с шириной контейнера — на
     любой другой ширине это давало смещение влево. */
  .footer__brand {
    position: static;
    margin-top: 2.7rem; /* 54px @375 — navigation → SmartHome Renovation */
    width: 100%;
    text-align: center;
    /* Текст сменился с "Smart Home" на "SmartHome Renovation" — константа
       64 (px @375) уменьшена пропорционально фактической ширине нового
       текста (замер: при равном font-size старая надпись примерно в 1.92
       раза уже новой), чтобы та же vw-формула по-прежнему заполняла всю
       ширину контейнера на 375px и росла вместе с viewport на 390/430/440px. */
    font-size: calc(100vw * 33.4 / 375); /* = 8.9067vw, откалибровано по 33.4px @375 */
    white-space: nowrap;
  }

  .footer__copyright {
    position: static;
    margin-top: 0.4rem; /* 8px @375 — Smart Home → copyright */
    text-align: center;
    font-size: 0.5rem; /* 10px @375 */
  }
}

/* Точечная коррекция для очень узких экранов (320px и около того), по
   аналогии с уже применённой коррекцией в Contact-секции: ниже 359px
   fluid-rem-формула сжимает доступную ширину быстрее, чем растёт
   font-size, из-за чего email в контактах перестаёт помещаться в
   1 строку и обрезается overflow:hidden. Используем фиксированный px
   (не rem), чтобы размер не продолжал расти при дальнейшем сужении. */
@media (max-width: 359px) {
  .footer__contact-link {
    font-size: 18px;
  }

  /* На таких узких экранах два столбца сервисов (каждый по ширине контента)
     суммарно не помещаются рядом — контент обрезался бы overflow:hidden.
     Возвращаемся к одной колонке, как у списка Home. */
  .footer__nav-list--services {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
  }
}

/* Страница Rental (body.page-rental) — после Hero сразу идёт Footer, без
   буферной секции вроде .service-included на других страницах услуг. На
   Tablet/Mobile круглая CTA-кнопка Hero намеренно выступает за нижний край
   Hero наполовину своей высоты (bottom: -6rem / -4.25rem — см. .hero__cta
   выше), и обычно именно верхний padding следующей секции (.service-included)
   компенсирует это выступание. На Rental такой секции нет, поэтому CTA
   перекрывала бы контент Footer. Добавляем точно такой же зазор (половина
   высоты круглой CTA) к padding-top именно .footer, и только на этой
   странице. */
@media (max-width: 1024px) {
  .page-rental .footer {
    padding-top: 11.3rem; /* 5.3rem базовый + 6rem зазор под CTA */
  }
}

@media (max-width: 767px) {
  .page-rental .footer {
    padding-top: 7.25rem; /* 3rem базовый + 4.25rem зазор под CTA */
  }
}


/* ==========================================================================
   14. UTILITIES / ANIMATIONS
   ==========================================================================
   Базовая инфраструктура reveal-анимаций (появление при скролле).
   Используется вместе с IntersectionObserver из assets/js/app.js.

   .reveal      — элемент/группа, появляющаяся целиком;
   .reveal-item — дочерний элемент группы, которому можно назначить
                  последовательную задержку появления через
                  переменную --reveal-index (задаётся из JS).

   Анимация нарочно мягкая: только opacity + небольшое смещение по Y.
   ========================================================================== */

.reveal,
.reveal-item {
  opacity: 0;
  transform: translateY(1.25rem); /* 25px @1920 — небольшое смещение */
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: calc(var(--reveal-index, 0) * 0.08s);
}

.reveal.is-visible,
.reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-item {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Hover & Interaction Polish: расширение того же prefers-reduced-motion
     под новые hover-transitions. Сами hover/focus-состояния (подчёркивание
     меню, инверсия Contact us, scale CTA, повороты стрелок, смена фона
     навигации слайдеров, подчёркивание контактов, цвет ссылок/Facebook,
     переход градиента Send) НЕ отключаются — они по-прежнему применяются по
     :hover/:focus-within, просто мгновенно, без анимации перехода. */
  .header,
  .nav__link::after,
  .nav__chevron,
  .header__cta,
  .header__cta svg,
  .round-cta,
  .services-nav__btn,
  .service-card__arrow svg,
  .service-card__arrow::after,
  .contact-form__submit::after,
  .footer__contact-link::after,
  .footer__nav-link,
  .footer__social {
    transition: none;
  }
}

/* Визуально скрытый, но доступный для скринридеров текст (например, <label>
   для полей формы, если по макету видимого лейбла нет). Ширина/высота 1px
   вместо display:none — иначе скринридеры и клавиатурная навигация
   элемент проигнорируют. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   15. RESPONSIVE
   ==========================================================================
   Общие брейкпоинты проекта (используются одинаково во всех разделах
   выше): max-width: 1024px (Tablet) и max-width: 767px (Mobile).
   Responsive-переопределения конкретных компонентов размещаются рядом
   с самим компонентом (см. разделы 6, 7, 9–13), а не выносятся сюда все
   подряд — так проще ориентироваться по мере роста файла.
   ========================================================================== */