/* ==========================================================================
   DOZOR Event Agency — dozor.kz
   Разработка: OG GROUP (Казахстан)

   Один файл на весь сайт: пять страниц пользуются общими компонентами,
   дробить на 15 запросов ради этого смысла нет — первый экран должен
   уложиться в 2 секунды.

   Порядок: токены → шрифты → сброс → типографика → компоненты →
   шапка/меню → главная → страницы услуг → подвал → виджет WhatsApp.
   ========================================================================== */

/* ==========================================================================
   1. ТОКЕНЫ
   Палитра, типографика и сетка сняты с брендбука DOZOR (референс-макет).
   Хардкод цветов и кеглей ниже по файлу не используется.
   ========================================================================== */

:root {
  /* --- Цвет ------------------------------------------------------------- */
  --yellow:        #F4E649;   /* единственный акцент */
  --yellow-hi:     #FBE116;   /* ховер акцентных плоскостей */
  --navy:          #28303D;   /* фон страниц */
  --navy-card:     #3C485A;   /* фон карточек */
  --deep:          #121212;   /* подвал */
  --white:         #FFFFFF;
  --white-50:      rgba(255, 255, 255, .5);
  --white-31:      rgba(255, 255, 255, .31);
  --white-20:      rgba(255, 255, 255, .2);
  --white-10:      rgba(255, 255, 255, .1);
  --gray-light:    #D0D0D0;   /* разделители счётчиков героя */
  --menu-num:      #8E9BAE;
  --menu-veil:     rgba(21, 27, 38, .975);
  --hairline:      rgba(255, 255, 255, .12);
  --plate-border:  #E5E7EB;   /* рамка белых плашек партнёров */
  --error:         #E2564D;

  /* Семантика */
  --bg:            var(--navy);
  --bg-card:       var(--navy-card);
  --text:          var(--white);
  --text-muted:    var(--white-50);
  --text-invert:   var(--navy);
  --border:        var(--white-10);

  /* --- Типографика ------------------------------------------------------
     Дисплейный слой — Murs Gothic Wide Dark 800, всегда капслок,
     интерлиньяж 95 %, трекинг −6 %. Файлов шрифта у нас нет (шрифт
     проприетарный), поэтому работает фолбэк Arial Black — ровно тот же,
     что на референсе. Как только клиент пришлёт woff2 — раскомментировать
     @font-face ниже, больше ничего менять не нужно.                       */
  --font-display: 'Murs Gothic', 'Arial Black', 'Segoe UI', Impact, sans-serif;
  --font-base:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fw-display: 800;
  --lh-display: .95;
  --ls-display: -.06em;
  --ls-button:  -.03em;

  --fs-display-xl: 177px;
  --fs-display-l:  137px;
  --fs-display-m:   96px;
  --fs-h1:          64px;
  --fs-h2:          40px;
  --fs-h3:          32px;
  --fs-subtitle:    24px;
  --fs-button:      20px;
  --fs-label:       16px;
  --fs-caption:     15px;
  --fs-small:       14px;

  /* Inter */
  --fs-body-l:  24px;  --lh-body-l: 1.2;  --ls-body-l: -.06em;
  --fs-body:    20px;  --lh-body:   1.3;  --ls-body:   -.07em;
  --fs-body-s:  18px;  --lh-body-s: 1.2;  --ls-body-s: -.06em;
  --fs-small-i: 16px;

  /* --- Сетка -------------------------------------------------------------
     Страница 1920, контентная колонка 1840, поля 40, шаг 20.
     Карточка-четверть 445: 4 × 445 + 3 × 20 = 1840.                       */
  --container:    1840px;
  --side:         40px;
  --gutter:       20px;
  --col-4:        445px;
  --header-h:     67px;
  --header-top:   24px;

  /* --- Отступы ----------------------------------------------------------- */
  --s-4: 4px;   --s-8: 8px;   --s-12: 12px; --s-16: 16px;
  --s-20: 20px; --s-24: 24px; --s-32: 32px; --s-48: 48px; --s-64: 64px;

  /* --- Радиусы (теней в брендбуке нет — глубина строится цветом) --------- */
  --r-sm: 6px;  --r-md: 12px; --r-lg: 16px;
  --r-xl: 24px; --r-2xl: 32px; --r-pill: 100px;

  /* --- Движение ---------------------------------------------------------- */
  --ease:      cubic-bezier(.16, 1, .3, 1);
  --dur:       300ms;
  --dur-slow:  700ms;

  --z-header: 100;
  --z-widget: 150;
  --z-overlay: 200;
}

/* Ноутбуки 1280–1919: колонка 1840 целиком не влезает, дисплейные кегли
   ужимаем заранее — иначе «ИНФРАСТРУКТУРА» рвётся посреди слова. */
@media (max-width: 1839px) {
  :root {
    --fs-display-xl: 120px;
    --fs-display-l:   96px;
    --fs-display-m:   72px;
    --fs-h1:          52px;
    --fs-h2:          34px;
    --fs-h3:          28px;
  }
}

@media (max-width: 1279px) {
  :root {
    --fs-display-xl: 96px;
    --fs-display-l:  72px;
    --fs-display-m:  56px;
    --fs-h1:         40px;
    --fs-h2:         32px;
    --fs-h3:         24px;
    --fs-subtitle:   20px;
    --fs-body-l:     20px;
    --side:          24px;
  }
}

@media (max-width: 767px) {
  :root {
    --fs-display-xl: 44px;
    --fs-display-l:  40px;
    --fs-display-m:  36px;
    --fs-h1:         28px;
    --fs-h2:         24px;
    --fs-h3:         20px;
    --fs-subtitle:   18px;
    --fs-button:     16px;
    --fs-body-l:     18px;
    --fs-body:       16px;
    --fs-body-s:     16px;
    --side:          16px;
  }
}

/* ==========================================================================
   2. ШРИФТЫ
   Только локальные woff2 из assets/fonts/. Внешние CDN не подключаем:
   лишний DNS + TLS к чужому домену на первом экране.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-cyrillic.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-cyrillic-ext.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Murs Gothic Wide Dark — ЖДЁМ ФАЙЛ ОТ КЛИЕНТА.
   Положить murs-gothic-wide-dark.woff2 в assets/fonts/ и снять комментарий.
   Кириллица обязательна: на этом шрифте набраны все заголовки.

@font-face {
  font-family: 'Murs Gothic';
  src: url('../fonts/murs-gothic-wide-dark.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
*/

/* ==========================================================================
   3. СБРОС И БАЗА
   ========================================================================== */

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

/* Атрибут hidden должен побеждать любой display компонента: иначе кнопка
   с display:inline-flex остаётся видимой, хотя разметка её скрыла. */
[hidden] { display: none !important; }

html {
  /* Полоса прокрутки не должна дёргать ширину контента между страницами. */
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Якоря не должны заезжать под абсолютную шапку. */
  scroll-padding-top: calc(var(--header-top) * 2 + var(--header-h));
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-base);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  /* clip, а не hidden: hidden на body ломает position:sticky у стека. */
  overflow-x: clip;
}

body.is-menu-open { overflow: hidden; }

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, figure, ul, ol, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

/* ==========================================================================
   4. ТИПОГРАФИКА
   ========================================================================== */

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  /* «ОТВЕТСТВЕННОСТЬ» дисплейным кеглем шире телефона. hyphens даёт
     красивый перенос, overflow-wrap — страховка: без него длинное слово
     задаёт min-content и раздвигает страницу. lang="ru" на <html> стоит. */
  overflow-wrap: break-word;
  hyphens: auto;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

.h-xl { font-size: var(--fs-display-xl); }
.h1   { font-size: var(--fs-h1); }
.accent { color: var(--yellow); }

.text-l { font-size: var(--fs-body-l); line-height: var(--lh-body-l); letter-spacing: var(--ls-body-l); }
.text-s { font-size: var(--fs-body-s); line-height: var(--lh-body-s); letter-spacing: var(--ls-body-s); }

/* Элементы грида и флекса по умолчанию не сжимаются меньше содержимого —
   именно это и разъезжает раскладку на длинных заголовках. */
.container > *,
[class$="__grid"] > *,
[class$="__top"] > * { min-width: 0; }

/* ==========================================================================
   5. КОНТЕЙНЕР
   ========================================================================== */

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--side) * 2);
  margin-inline: auto;
  padding-inline: var(--side);
}

/* Зазор между секциями: 200 в макете, ступенчато вниз на узких экранах. */
.section { padding-top: 200px; }
.section__title { margin-bottom: var(--s-64); }
.section__title--center { text-align: center; }

@media (max-width: 1279px) {
  .section { padding-top: var(--s-64); }
  .section__title { margin-bottom: var(--s-48); }
}

/* ==========================================================================
   6. КНОПКИ
   Дизайн-система: высота 67, радиус 12, дисплейный шрифт капсом,
   кружок со стрелкой 67×67 жёлтый. Теней нет.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  padding: var(--s-12) var(--s-24);
  min-height: var(--header-h);
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-button);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  border: 0;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.btn--primary { background: var(--yellow); color: var(--text-invert); }
.btn--primary:hover { background: var(--yellow-hi); }

/* Основной CTA секций: тёмная плашка, жёлтый кружок со стрелкой справа. */
.btn--cta {
  background: var(--navy);
  color: var(--text);
  justify-content: space-between;
  gap: var(--s-24);
  padding: var(--s-12) var(--s-12) var(--s-12) var(--s-24);
  width: var(--col-4);
  max-width: 100%;
  text-align: left;
}
.btn--cta:hover { background: var(--navy-card); }
.btn--block { width: 100%; }

.btn__arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--header-h);
  height: var(--header-h);
  border-radius: var(--r-md);
  background: var(--yellow);
  color: var(--navy);
}
.btn__arrow svg { width: 41px; height: 41px; transition: transform var(--dur) var(--ease); }

/* Ховер: стрелка ↗ «улетает» по диагонали. */
.btn--cta:hover .btn__arrow svg,
.btn--cta:focus-visible .btn__arrow svg { transform: translate(4px, -4px); }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--white-31);
  min-height: 0;
  padding: var(--s-16) var(--s-32);
}
.btn--ghost:hover { border-color: var(--yellow); color: var(--yellow); }

/* Кнопка-иконка: гамбургер, крестик, стрелки карусели. */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--header-h);
  height: var(--header-h);
  flex: 0 0 auto;
  border-radius: var(--r-md);
  background: var(--yellow);
  color: var(--text-invert);
  transition: background var(--dur) var(--ease);
}
.btn-icon:hover { background: var(--yellow-hi); }
.btn-icon svg { flex: 0 0 auto; }

/* Кружок 67 и стрелка 41 непропорционально крупные на 360 — ужимаем. */
@media (max-width: 767px) {
  .btn { min-height: 52px; }
  .btn--cta .btn__arrow,
  .btn-icon,
  .about__cta-arrow { width: 52px; height: 52px; }
  .btn__arrow svg,
  .about__cta-arrow svg { width: 30px; height: 30px; }
}

/* ==========================================================================
   7. ФОРМЫ
   Лейбл 16 дисплейным, зазор 8, поле 56 с рамкой 1px и радиусом 12.
   ========================================================================== */

.field { display: flex; flex-direction: column; gap: var(--s-8); }

.field__label {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-label);
  letter-spacing: 0;
  text-transform: uppercase;
}

.field__control {
  width: 100%;
  min-height: 56px;
  /* 15 + рамка 1 = те же 56, что и высота фрейма в макете. */
  padding: 15px var(--s-20);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--navy);
  color: var(--text);
  font-size: var(--fs-body);
  line-height: 24px;
  letter-spacing: 0;
  transition: border-color var(--dur) var(--ease);
}

.field__control::placeholder { color: var(--text-muted); }
.field__control:focus { outline: none; border-color: var(--yellow); }
.field__control:user-invalid { border-color: var(--error); }

.field__select { position: relative; }
.field__select .field__control { appearance: none; padding-right: 56px; cursor: pointer; }
/* Список раскрывается системным виджетом — красим, чтобы не мигал белым. */
.field__select option { background: var(--navy); color: var(--text); }

.field__chevron {
  position: absolute;
  right: var(--s-20);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  line-height: 0;
  color: var(--text-muted);
}
.field__chevron svg { width: 20px; height: 20px; }

.lead-form { display: flex; flex-direction: column; gap: var(--s-20); }

/* --- Чекбокс согласия: 32×32, рамка 2px белым 50 %, радиус 6 ------------- */

.consent {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  cursor: pointer;
  margin-top: var(--s-8);
}

.consent__box { position: absolute; opacity: 0; width: 0; height: 0; }

.consent__mark {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  position: relative;
  border: 2px solid var(--white-50);
  border-radius: var(--r-sm);
  background: var(--navy);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.consent__box:checked + .consent__mark { background: var(--yellow); border-color: var(--yellow); }

/* Галочка собрана из бордеров — тащить файл ради одной формы не стоит. */
.consent__box:checked + .consent__mark::after {
  content: '';
  position: absolute;
  left: 10px; top: 4px;
  width: 7px; height: 14px;
  border: solid var(--text-invert);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.consent__box:focus-visible + .consent__mark { outline: 2px solid var(--yellow); outline-offset: 2px; }

.consent__text { font-size: var(--fs-small-i); line-height: normal; }
.consent__link { color: var(--text-muted); text-decoration: underline; }
.consent__link:hover { color: var(--yellow); }

/* Ответ формы: показывается скриптом после отправки в WhatsApp. */
.form-note {
  font-size: var(--fs-small-i);
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--yellow);
}

/* ==========================================================================
   8. КАРТОЧКА
   ========================================================================== */

.card { background: var(--bg-card); border-radius: var(--r-2xl); padding: var(--s-32); }
.card--accent { background: var(--yellow); color: var(--text-invert); }

/* ==========================================================================
   9. ДОСТУПНОСТЬ
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--s-16); top: -100px;
  z-index: 500;
  padding: var(--s-12) var(--s-20);
  border-radius: var(--r-md);
  background: var(--yellow);
  color: var(--text-invert);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--s-16); }

:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

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

/* --- Появление секций при прокрутке --------------------------------------
   Прячем только при живом JS: класс .has-js ставит инлайн-строка в <head>.
   Иначе при заблокированном или упавшем скрипте полстраницы осталось бы
   прозрачным — а контент важнее эффекта. */
.has-js .reveal { opacity: 0; transform: translateY(28px); }
.has-js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .has-js .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   10. ШАПКА
   Лежит поверх героя: в макете она на top 24, а фон героя начинается с 0.
   ========================================================================== */

.site-header {
  position: absolute;
  inset: var(--header-top) 0 auto 0;
  z-index: var(--z-header);
}

.site-header__inner {
  width: 100%;
  max-width: calc(var(--container) + var(--side) * 2);
  margin-inline: auto;
  padding-inline: var(--side);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-24);
}

.site-header__actions { display: flex; align-items: center; gap: var(--s-12); }
.site-header__cta { white-space: nowrap; }

/* Макета для узких экранов нет: прячем подпись, оставляем гамбургер. */
@media (max-width: 1023px) { .site-header__cta { display: none; } }

/* --- Логотип-плашка ------------------------------------------------------
   Собран из знака и надписи брендбука на тёмной плашке 12px радиусом.
   Экспорт готового лого из макета весит 172 КБ (это растр, обведённый
   в 780 подпутей) — на первый экран такое не ставим.                      */

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--s-12);
  flex: 0 0 auto;
  padding: var(--s-16) var(--s-20);
  border-radius: var(--r-md);
  background: #151616;
}
/* Надпись DOZOR — вектор 1834 x 345, соотношение 5.32:1. Ширину задаём
   от высоты, иначе width:auto у <img> берёт исходные 1834 px. */
.logo__mark { height: 38px; width: auto; }
.logo__type { height: 24px; width: calc(24px * 5.32); }
.logo--lg { padding: var(--s-20) var(--s-24); }
.logo--lg .logo__mark { height: 48px; }
.logo--lg .logo__type { height: 30px; width: calc(30px * 5.32); }

@media (max-width: 767px) {
  .logo { padding: var(--s-12) var(--s-16); gap: var(--s-8); }
  .logo__mark { height: 28px; }
  .logo__type { height: 18px; width: calc(18px * 5.32); }
  .logo--lg .logo__mark { height: 34px; }
  .logo--lg .logo__type { height: 22px; width: calc(22px * 5.32); }
}

/* ==========================================================================
   11. МЕНЮ-ОВЕРЛЕЙ
   ========================================================================== */

.site-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  overflow: auto;
}

.site-menu__veil { position: absolute; inset: 0; background: var(--menu-veil); }

/* Свечение из макета: 600×600 в правом верхнем углу. */
.site-menu__glow {
  position: absolute;
  top: -164px;
  right: -60px;
  width: 600px;
  height: 600px;
  background: url('../img/decor/glow-effect.svg') center / contain no-repeat;
  pointer-events: none;
}

.site-menu__inner:focus { outline: none; }

.site-menu__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-48);
  width: 100%;
  padding: var(--s-24) var(--side);
  min-height: 100dvh;
}

.site-menu__top { display: flex; align-items: flex-start; gap: var(--s-64); }
.site-menu__nav { flex: 1 1 auto; min-width: 0; }
.site-menu__list { display: flex; flex-direction: column; gap: var(--s-8); }

.site-menu__link {
  display: flex;
  align-items: center;
  gap: var(--s-32);
  padding-block: var(--s-12);
  transition: color var(--dur) var(--ease);
}

.site-menu__num {
  flex: 0 0 36px;
  font-weight: 600;
  font-size: 20px;
  line-height: normal;
  letter-spacing: 0;
  color: var(--menu-num);
  transition: color var(--dur) var(--ease);
}

.site-menu__text {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

.site-menu__item--current .site-menu__num,
.site-menu__item--current .site-menu__text { color: var(--yellow); }
.site-menu__link:hover .site-menu__text,
.site-menu__link:hover .site-menu__num { color: var(--yellow); }

.site-menu__bottom {
  border-top: 1px solid var(--hairline);
  padding-top: var(--s-48);
}

@media (max-width: 1279px) {
  .site-menu__text { font-size: var(--fs-h2); }
  .site-menu__glow { display: none; }
  .site-menu__top { gap: var(--s-24); }
}

@media (max-width: 767px) {
  .site-menu__text { font-size: var(--fs-h3); }
  .site-menu__num { flex-basis: 26px; font-size: 15px; }
  .site-menu__link { gap: var(--s-16); }
}

/* ==========================================================================
   12. БЛОК КОНТАКТОВ (подвал, меню, секция контактов)
   Кружок 48×48 жёлтый, иконка 24, gap 16 до текста, 4 между строк.
   ========================================================================== */

.contacts { display: flex; flex-direction: column; gap: var(--s-24); }
.contacts__item { display: flex; align-items: flex-start; gap: var(--s-16); }

.contacts__icon {
  flex: 0 0 48px;
  width: 48px; height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--yellow);
  color: var(--text-invert);
}
.contacts__icon svg { width: 24px; height: 24px; }

.contacts__body { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }

.contacts__label {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-small);
  line-height: normal;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--yellow);
}

.contacts__value {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
  letter-spacing: var(--ls-body-l);
}

.contacts__link { transition: color var(--dur) var(--ease); white-space: nowrap; }
.contacts__link:hover { color: var(--yellow); }

/* В карточке контактов телефоны идут одной строкой через запятую —
   иначе карточка перерастает свои 910. */
.contacts__value--inline { flex-direction: row; flex-wrap: wrap; column-gap: var(--s-8); }

/* В меню-оверлее контакты стоят в ряд. */
.contacts--menu { flex-direction: row; gap: var(--s-64); }
.contacts--menu .contacts__item { flex: 1 1 0; min-width: 0; }
.contacts--section .contacts__item { align-items: center; }

@media (max-width: 1279px) {
  .contacts--menu { flex-wrap: wrap; gap: var(--s-24); }
  .contacts--menu .contacts__item { flex: 1 1 260px; }
}
@media (max-width: 767px) {
  .contacts__value { font-size: var(--fs-body-s); }
  .contacts__icon { flex-basis: 40px; width: 40px; height: 40px; }
  .contacts__icon svg { width: 20px; height: 20px; }
}

/* ==========================================================================
   13. ГЛАВНАЯ — ГЕРОЙ
   ========================================================================== */

.site-main { padding-top: calc(var(--header-top) * 2 + var(--header-h)); }
.site-main--hero { padding-top: 0; }

.hero {
  position: relative;
  min-height: 940px;
  display: flex;
  align-items: flex-end;
  padding-bottom: 61px;
  overflow: hidden;
}

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

/* Диагональный градиент из чёрного 45 % плюс вертикальный снизу. */
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(55.1deg, rgba(0,0,0,.45) 22.98%, rgba(0,0,0,0) 62.73%),
    linear-gradient(0deg, rgb(0,0,0) 0%, rgba(0,0,0,0) 100%);
}

.hero__inner {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-48);
}

.hero__main { display: flex; flex-direction: column; gap: var(--s-48); }
.hero__head { display: flex; flex-direction: column; gap: var(--s-32); }
.hero__title { max-width: 1050px; font-size: var(--fs-h1); }
.hero__lead  { max-width: 770px; font-size: var(--fs-body-l); line-height: var(--lh-body-l); letter-spacing: var(--ls-body-l); }

.hero__stats { display: flex; align-items: center; gap: var(--s-32); }
.hero__stat  { display: flex; flex-direction: column; gap: var(--s-12); min-width: 0; }

.hero__stat-value {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--yellow);
  border-bottom: 1px solid var(--yellow);
  padding-bottom: var(--s-4);
}
.hero__stat-label { font-size: var(--fs-body-l); line-height: var(--lh-body-l); letter-spacing: var(--ls-body-l); }

.hero__sep { width: 1px; height: 42px; background: var(--gray-light); flex: 0 0 auto; }

.hero__aside { display: flex; flex-direction: column; gap: var(--s-32); width: var(--col-4); flex: 0 0 auto; }
.hero__note  { max-width: 421px; }

/* Ряд счётчиков не влезает уже на ноутбуках: aside фикс 445, main гибкий. */
@media (max-width: 1439px) {
  .hero__stats { flex-wrap: wrap; gap: var(--s-24); }
  .hero__sep { display: none; }
}

@media (max-width: 1279px) {
  .hero { min-height: 0; padding-block: 160px var(--s-64); }
  .hero__inner { flex-direction: column; align-items: stretch; }
  .hero__aside { width: 100%; }
  .hero__note { max-width: none; }
}

@media (max-width: 767px) {
  .hero { padding-block: 130px var(--s-48); }
  .hero__main { gap: var(--s-32); }
  .hero__stats { gap: var(--s-20); }
}

/* ==========================================================================
   14. ГЛАВНАЯ — ЛИПКИЙ СТЕК НАПРАВЛЕНИЙ
   Строки прилипают к верху и наезжают друг на друга с шагом 40.
   ========================================================================== */

.stack { padding-top: 200px; }
.stack__title { max-width: 1065px; margin-bottom: 125px; }
.stack__list { display: flex; flex-direction: column; gap: 40px; }

.stack__row {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  height: 755px;
}

/* Две гибкие половины: на 1280–1919 два фикс-блока по 910 не влезают
   в контейнер и дают горизонтальный скролл. */
.stack__media, .stack__body { flex: 1 1 0; min-width: 0; height: 755px; }

.stack__media { border-radius: var(--r-2xl); overflow: hidden; }
.stack__media img { width: 100%; height: 100%; object-fit: cover; }

.stack__body {
  background: var(--bg-card);
  border-radius: var(--r-2xl);
  padding: var(--s-48);
  display: flex;
  flex-direction: column;
  gap: var(--s-64);
  overflow: hidden;
}

.stack__head { display: flex; flex-direction: column; gap: var(--s-20); }

/* Номер 137px жёлтым с линией 2.136 под цифрой. */
.num-big {
  display: inline-block;
  width: max-content;
  max-width: 100%;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(44px, 7vw, var(--fs-display-l));
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--yellow);
  border-bottom: 2.136px solid var(--yellow);
  padding-bottom: var(--s-4);
}

.stack__name { font-size: var(--fs-h2); }
.stack__items { display: flex; flex-direction: column; gap: var(--s-16); }
.stack__item  { display: flex; align-items: center; gap: var(--s-12); }
.stack__bullet { flex: 0 0 21px; line-height: 0; color: var(--yellow); }
.stack__bullet svg { width: 21px; height: 20px; }
.stack__item-text { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: var(--ls-display); }

@media (max-width: 1279px) {
  .stack { padding-top: var(--s-64); }
  .stack__title { margin-bottom: var(--s-48); }
  /* Липкость выключаем: карточка выше вьюпорта, прилипший блок перекрыл бы
     следующий контент. */
  .stack__row { position: static; flex-direction: column; height: auto; gap: var(--gutter); }
  .stack__media, .stack__body { width: 100%; height: auto; }
  .stack__media img { height: 340px; }
  .stack__body { padding: var(--s-32); gap: var(--s-32); }
  .stack__list { gap: var(--s-48); }
}

@media (max-width: 767px) {
  .stack__media img { height: 220px; }
  .stack__body { padding: var(--s-24); gap: var(--s-24); }
}

/* ==========================================================================
   15. ГЛАВНАЯ — О КОМПАНИИ И КАРТОЧКИ-ПЕРЕВЁРТЫШИ
   ========================================================================== */

.about { padding-top: 205px; }
.about__head { display: flex; flex-direction: column; gap: var(--s-32); margin-bottom: var(--s-64); }
.about__title { max-width: 925px; }
.about__text  { max-width: 720px; }

.about__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }

.flip { height: 480px; perspective: 1200px; cursor: pointer; }

.flip__inner {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 550ms var(--ease);
}
.flip:hover .flip__inner,
.flip:focus-visible .flip__inner { transform: rotateY(180deg); }

.flip__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-24);
  padding: var(--s-32);
  border-radius: var(--r-2xl);
  background: var(--bg-card);
  backface-visibility: hidden;
}
.flip__face--back { transform: rotateY(180deg); }

.flip__value {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-display-m);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

.flip__caption {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  text-align: center;
}

/* Тач наведения не знает: показываем сразу оборот, иначе подпись пропадает. */
@media (hover: none) {
  .flip { height: auto; perspective: none; cursor: default; }
  .flip__inner { transform: none !important; height: auto; }
  .flip__face { position: static; height: 480px; }
  .flip__face--front { display: none; }
  .flip__face--back { transform: none; }
}

.about__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-24);
  height: 480px;
  text-align: center;
  transition: background var(--dur) var(--ease);
}
.about__cta:hover { background: var(--yellow-hi); }

.about__cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--header-h); height: var(--header-h);
  border-radius: var(--r-md);
  background: var(--navy);
  color: var(--yellow);
}
.about__cta-arrow svg { transition: transform var(--dur) var(--ease); }
.about__cta:hover .about__cta-arrow svg,
.about__cta:focus-visible .about__cta-arrow svg { transform: translate(4px, -4px); }

.about__cta-text {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-button);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
}

@media (max-width: 1279px) {
  .about { padding-top: var(--s-64); }
  .about__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .about__cards { grid-template-columns: 1fr; }
  .flip, .flip__face, .about__cta { height: 320px; }
  .about__cta-arrow { width: 52px; height: 52px; }
  .about__cta-arrow svg { width: 30px; height: 30px; }
}

/* ==========================================================================
   16. ГЛАВНАЯ — НАПРАВЛЕНИЯ РАБОТЫ
   ========================================================================== */

.directions { padding-top: 222px; }

.directions__divider { display: block; width: 33.5px; margin: 0 auto 178px; color: var(--yellow); }
.directions__divider svg { width: 100%; height: auto; }

.directions__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }

.direction {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-24);
  min-height: 480px;
  padding: var(--s-32);
  border-radius: var(--r-2xl);
  background: var(--bg-card);
}
.direction--accent { background: var(--yellow); color: var(--text-invert); }
.direction__body { display: flex; flex-direction: column; gap: var(--s-24); }

.direction__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

/* Внутри жёлтой карточки кнопка тёмная. */
.direction--accent .btn--cta { background: var(--navy); color: var(--text); }
.direction--accent .btn--cta:hover { background: var(--navy-card); }

/* На 1280–1439 колонка слишком узка для дисплейного заголовка. */
@media (max-width: 1439px) { .directions__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1279px) {
  .directions { padding-top: var(--s-64); }
  .directions__divider { margin-bottom: var(--s-48); }
}
@media (max-width: 767px) {
  .directions__grid { grid-template-columns: 1fr; }
  .direction { min-height: 0; }
}

/* ==========================================================================
   17. ГЛАВНАЯ — ПРОЦЕСС
   Слева фото 445×729, справа заголовок; ниже шесть карточек и седьмой слот.
   Первая карточка поднимается к фото отрицательным margin.
   ========================================================================== */

.process { padding-top: 325px; }

.process__top {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: start;
  margin-bottom: var(--s-48);
}

.process__photo { grid-column: 1; height: 729px; border-radius: var(--r-2xl); overflow: hidden; }
.process__photo img { width: 100%; height: 100%; object-fit: cover; }

.process__title { grid-column: 2 / -1; display: flex; flex-direction: column; max-width: 1018px; }

.process__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
  margin-top: -480px;
}
.process__grid > :first-child { grid-column-start: 2; }

.process__card,
.process__slot { height: 480px; border-radius: var(--r-2xl); }

.process__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-24);
  padding: var(--s-32);
  background: var(--bg-card);
  text-align: center;
}

.process__name {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

.process__slot { overflow: hidden; }
.process__slot img { width: 100%; height: 100%; object-fit: cover; }

/* На 1280–1439 колонки узкие: фото уходит над заголовком, карточки в 2 ряда. */
@media (max-width: 1439px) {
  .process { padding-top: var(--s-64); }
  .process__top { grid-template-columns: 1fr; }
  .process__photo, .process__title { grid-column: auto; }
  .process__photo { height: 420px; }
  .process__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
  .process__grid > :first-child { grid-column-start: auto; }
}
@media (max-width: 767px) {
  .process__grid { grid-template-columns: 1fr; }
  .process__card, .process__slot { height: 320px; }
  .process__photo { height: 300px; }
}

/* ==========================================================================
   18. ГЛАВНАЯ — КАРУСЕЛЬ ПРОЕКТОВ
   Активная карточка крупнее и всегда по центру.
   ========================================================================== */

.cases { padding-top: 200px; overflow: hidden; }

.cases__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: var(--fs-display-xl);
  text-align: center;
}
/* Строки — элементы флекса, а те не сжимаются меньше содержимого: без этого
   «РЕАЛИЗОВАННЫЕ» вылезает за экран на телефоне. */
.cases__title span { max-width: 100%; overflow-wrap: break-word; }

.cases__viewport { margin-top: var(--s-64); overflow: hidden; position: relative; }

.cases__track {
  display: flex;
  align-items: center;
  gap: var(--gutter);
  padding-inline: calc(50% - 300px);
  transition: transform var(--dur) var(--ease);
}

.case { flex: 0 0 var(--col-4); transition: flex-basis var(--dur) var(--ease); cursor: pointer; }
.case.is-active { flex-basis: 599px; cursor: default; }

.case__inner {
  display: flex;
  flex-direction: column;
  gap: var(--s-24);
  /* Высота карточки = содержимое + запас на перенос строки. Раньше стояли
     587/790 px — под текстом оставалась пустая половина, и карточка читалась
     как раскрытая дважды. */
  height: 506px;
  padding: var(--s-32);
  border-radius: var(--r-2xl);
  background: var(--bg-card);
  transition: height var(--dur) var(--ease);
}
.case.is-active .case__inner { height: 644px; }

.case__media { flex: 0 0 auto; height: 240px; border-radius: var(--r-lg); overflow: hidden; transition: height var(--dur) var(--ease); }
.case.is-active .case__media { height: 400px; }
.case__media img { width: 100%; height: 100%; object-fit: cover; }

.case__body { display: flex; flex-direction: column; gap: var(--s-12); }

.case__name {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

.case__meta { display: flex; gap: var(--s-16); font-size: var(--fs-small-i); letter-spacing: 0; color: var(--text-muted); }

/* Стрелки поверх карусели, разведены по краям активной карточки.
   pointer-events снят с обёртки, чтобы клики проходили к карточкам. */
.cases__nav {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 660px;
  max-width: calc(100% - var(--s-16) * 2);
  pointer-events: none;
}
.cases__arrow { pointer-events: auto; }
.cases__arrow svg { width: 41px; height: 41px; }
/* Иконка смотрит на ↗ — доворачиваем в чистые горизонтали. */
.cases__arrow--prev svg { transform: rotate(-135deg); }
.cases__arrow--next svg { transform: rotate(45deg); }

@media (max-width: 1279px) {
  .cases { padding-top: var(--s-64); }
  .cases__track { padding-inline: var(--side); }
  .case, .case.is-active { flex-basis: 340px; }
  .case__inner, .case.is-active .case__inner { height: 492px; }
  .case__media, .case.is-active .case__media { height: 200px; }
  .cases__nav { width: 400px; }
}
@media (max-width: 767px) {
  .case, .case.is-active { flex-basis: 270px; }
  .case__inner, .case.is-active .case__inner { height: 470px; }
  .case__inner { padding: var(--s-24); }
  .cases__nav { width: 300px; }
}

/* ==========================================================================
   19. ГЛАВНАЯ — ПАРТНЁРЫ (бегущая строка)
   ========================================================================== */

.partners { padding-top: 200px; overflow: hidden; }
.partners__title { margin-bottom: 125px; }

.marquee { overflow: hidden; }
.marquee + .marquee { margin-top: var(--s-20); }

.marquee__track {
  display: flex;
  gap: var(--s-20);
  width: max-content;
  animation: dz-marquee 40s linear infinite;
}
.marquee--rtl .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* Лента продублирована ровно дважды — сдвиг на половину даёт бесшовный цикл. */
@keyframes dz-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.partner {
  flex: 0 0 290px;
  height: 127px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  padding: var(--s-32);
  border: 1px solid var(--plate-border);
  border-radius: var(--r-xl);
  background: var(--white);
}
.partner__mark { height: 40px; width: auto; }
.partner__type { height: 24px; width: calc(24px * 5.32); }

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee { overflow-x: auto; }
}
@media (max-width: 1279px) {
  .partners { padding-top: var(--s-64); }
  .partners__title { margin-bottom: var(--s-48); }
}
@media (max-width: 767px) {
  .partner { flex-basis: 220px; height: 100px; padding: var(--s-20); }
  .partner__mark { height: 32px; }
  .partner__type { height: 19px; width: calc(19px * 5.32); }
}

/* ==========================================================================
   20. ГЛАВНАЯ — КЛИЕНТЫ И ОТЗЫВЫ
   ========================================================================== */

.clients { padding-top: 100px; }
.clients__title { margin-bottom: 125px; }
.clients__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }

.client {
  display: flex;
  flex-direction: column;
  gap: var(--s-24);
  height: 480px;
  padding: var(--s-32);
  border-radius: var(--r-md);
  background: var(--bg-card);
  overflow: hidden;
}

.client__media {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-64);
}
.client__media img { max-height: 100%; width: auto; object-fit: contain; }

.client__body { display: flex; flex-direction: column; gap: var(--s-12); }

.client__name {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

.client__year {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-button);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--yellow);
}

@media (max-width: 1279px) {
  .clients { padding-top: var(--s-64); }
  .clients__title { margin-bottom: var(--s-48); }
  .clients__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .clients__grid { grid-template-columns: 1fr; }
  .client { height: 380px; }
  .client__media { padding: var(--s-24); }
}

/* ==========================================================================
   21. СЕКЦИЯ КОНТАКТОВ И ФОРМЫ (главная и страницы услуг)
   ========================================================================== */

.contact-block { padding-block: 200px; }

.contact-block__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: stretch;
}

.contact-block__info,
.contact-block__form {
  min-height: 910px;
  display: flex;
  flex-direction: column;
  gap: var(--s-32);
  border-radius: var(--r-2xl);
  background: var(--bg-card);
  padding: var(--s-32);
}

.contact-block__media { flex: 1 1 auto; min-height: 300px; border-radius: var(--r-lg); overflow: hidden; }
.contact-block__media img { width: 100%; height: 100%; object-fit: cover; }

.contact-block__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

/* Правый блок: заголовок сверху, кнопка прижата к нижней кромке. */
.contact-block__form { padding: var(--s-48); justify-content: space-between; }
.contact-block__form .lead-form { flex: 1 1 auto; }
.contact-block__form .lead-form .btn--cta { margin-top: auto; }

@media (max-width: 1279px) {
  .contact-block { padding-block: var(--s-64); }
  .contact-block__inner { grid-template-columns: 1fr; }
  .contact-block__info, .contact-block__form { min-height: 0; }
  .contact-block__form { padding: var(--s-32); }
  .contact-block__media { flex: 0 0 auto; height: 300px; }
}
@media (max-width: 767px) {
  .contact-block__info, .contact-block__form { padding: var(--s-24); }
  .contact-block__media { height: 220px; min-height: 0; }
}

/* ==========================================================================
   22. СТРАНИЦЫ УСЛУГ — ГЕРОЙ
   ========================================================================== */

.uhero {
  position: relative;
  min-height: 940px;
  display: flex;
  align-items: flex-end;
  padding-block: 180px var(--s-64);
  overflow: hidden;
}

.uhero__bg { position: absolute; inset: 0; }
.uhero__bg img { width: 100%; height: 100%; object-fit: cover; }
.uhero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(55.1deg, rgba(0,0,0,.45) 22.98%, rgba(0,0,0,0) 62.73%),
    linear-gradient(0deg, rgb(0,0,0) 0%, rgba(0,0,0,0) 100%);
}

.uhero__inner {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-48);
}

.uhero__main { display: flex; flex-direction: column; gap: var(--s-24); max-width: 1100px; }
.uhero__lead { max-width: 460px; }

/* Правая колонка героя услуг — 600, а не 445: зазор между колонками
   получается из justify-between, а не из gap. */
.uhero__aside { display: flex; flex-direction: column; gap: var(--s-32); width: 600px; flex: 0 0 auto; }
.uhero__actions { display: flex; flex-direction: column; gap: var(--s-16); }
.uhero__actions .btn--cta { width: 100%; }

/* Вторая кнопка героя: белым 10 % на рамке белым 20 %. */
.uhero__second {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-16);
  width: 100%;
  padding: 19px var(--s-24);
  border: 1px solid var(--white-20);
  border-radius: var(--r-md);
  background: var(--white-10);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-button);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  transition: background var(--dur) var(--ease);
}
.uhero__second:hover { background: rgba(255, 255, 255, .16); }
.uhero__second svg { width: 24px; height: 24px; flex: 0 0 auto; }

@media (max-width: 1439px) {
  .uhero__inner { flex-direction: column; align-items: stretch; }
  .uhero__aside { width: 100%; }
}
@media (max-width: 1279px) {
  .uhero { min-height: 0; padding-block: 160px var(--s-64); }
  .uhero__main, .uhero__lead { max-width: none; }
}
@media (max-width: 767px) { .uhero { padding-block: 130px var(--s-48); } }

/* ==========================================================================
   23. СТРАНИЦЫ УСЛУГ — КАРТОЧКИ СОСТАВА (3 × 2, фото сверху)
   ========================================================================== */

.ucards__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }

.ucard {
  display: flex;
  flex-direction: column;
  gap: var(--s-32);
  min-height: 531px;
  padding: var(--s-32);
  border-radius: var(--r-xl);
  background: var(--bg-card);
}

.ucard__media { flex: 1 1 auto; min-height: 0; border-radius: var(--r-lg); overflow: hidden; }
.ucard__media img { width: 100%; height: 100%; object-fit: cover; }
.ucard__body { display: flex; flex-direction: column; gap: var(--s-16); }

.ucard__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

@media (max-width: 1279px) {
  .ucards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ucard { min-height: 0; }
  .ucard__media { height: 240px; flex: 0 0 auto; }
}
@media (max-width: 767px) { .ucards__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   24. СТРАНИЦЫ УСЛУГ — ГОРИЗОНТАЛЬНЫЕ КАРТОЧКИ (фото слева, номер справа)
   ========================================================================== */

.usplit__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 21px var(--gutter); }

.usplit-card {
  display: flex;
  align-items: stretch;
  gap: var(--s-32);
  min-height: 436px;
  padding: var(--s-32);
  border-radius: var(--r-xl);
  background: var(--bg-card);
}

.usplit-card__media, .usplit-card__body { flex: 1 1 0; min-width: 0; }
.usplit-card__media { border-radius: var(--r-lg); overflow: hidden; }
.usplit-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* Номер прижат к верху, текст к низу. */
.usplit-card__body { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-24); }
.usplit-card__text { display: flex; flex-direction: column; gap: var(--s-16); }

.usplit-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

/* Плитки форматов: зазор 24, радиус 32, без описания под заголовком. */
.usplit--tiles .usplit-card { gap: var(--s-24); min-height: 457px; border-radius: var(--r-2xl); }
.usplit--tiles .usplit-card__media { border-radius: var(--r-xl); }
.usplit--tiles .usplit__grid { gap: var(--gutter); }

@media (max-width: 1279px) {
  .usplit__grid { grid-template-columns: 1fr; }
  .usplit-card, .usplit--tiles .usplit-card { min-height: 0; }
}
@media (max-width: 767px) {
  /* Две колонки в 360 не помещаются: фото уходит наверх. */
  .usplit-card { flex-direction: column; padding: var(--s-24); }
  .usplit-card__media { height: 220px; flex: 0 0 auto; }
}

/* ==========================================================================
   25. СТРАНИЦЫ УСЛУГ — ШАГИ
   ========================================================================== */

.usteps__list { display: flex; align-items: stretch; gap: var(--gutter); }

.ustep {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-48);
  padding: var(--s-24);
  border-radius: var(--r-lg);
  background: var(--bg-card);
}

.ustep__body { display: flex; flex-direction: column; gap: var(--s-20); }

.ustep__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-button);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

/* Шесть карточек в ряд помещаются только при контентной колонке 1840. */
@media (max-width: 1839px) {
  .usteps__list { flex-wrap: wrap; }
  .ustep { flex: 1 1 280px; }
}
@media (max-width: 767px) { .ustep { flex: 1 1 100%; gap: var(--s-24); } }

/* ==========================================================================
   26. СТРАНИЦЫ УСЛУГ — КЕЙСЫ
   ========================================================================== */

.ucases__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }

.ucase {
  display: flex;
  flex-direction: column;
  gap: var(--s-32);
  padding: var(--s-32);
  border-radius: var(--r-2xl);
  background: var(--bg-card);
}

.ucase__media { height: 400px; border-radius: var(--r-lg); overflow: hidden; }
.ucase__media img { width: 100%; height: 100%; object-fit: cover; }
.ucase__body { display: flex; flex-direction: column; gap: var(--s-16); }
.ucase__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-16); }

.ucase__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

.ucase__meta {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-caption);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--yellow);
}

@media (max-width: 1279px) {
  .ucases__grid { grid-template-columns: 1fr; }
  .ucase__media { height: 280px; }
}
@media (max-width: 767px) {
  .ucase { padding: var(--s-24); gap: var(--s-24); }
  .ucase__media { height: 200px; }
  .ucase__head { flex-direction: column; align-items: flex-start; gap: var(--s-8); }
}

/* ==========================================================================
   27. СТРАНИЦЫ УСЛУГ — КАЛЬКУЛЯТОР (мастер в 4 шага)
   ========================================================================== */

.ucalc__card {
  width: 909px;
  max-width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-48);
  padding: var(--s-32);
  border-radius: var(--r-2xl);
  background: var(--bg-card);
}

.ucalc__steps { display: flex; align-items: center; gap: var(--s-16); width: 100%; }
.ucalc__line { flex: 1 1 0; min-width: 12px; height: 2px; background: var(--white-20); }

.ucalc__pill {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--s-8);
  padding: 10px var(--s-16);
  border: 1px solid var(--white-20);
  border-radius: var(--r-pill);
  background: rgba(18, 18, 18, .2);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-caption);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.ucalc__pill.is-active { background: var(--yellow); border-color: transparent; color: var(--deep); }
.ucalc__pill.is-done   { color: var(--yellow); border-color: var(--yellow); }

.ucalc__panel { display: none; flex-direction: column; gap: var(--s-24); }
.ucalc__panel.is-active { display: flex; }

.ucalc__legend {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-label);
  letter-spacing: 0;
  text-transform: uppercase;
}

.ucalc__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-24); }
.ucalc__fields .field { gap: var(--s-12); }
.ucalc__field--full { grid-column: 1 / -1; }
/* Поля калькулятора крупнее общесайтовых: 17 + рамка 1 = 60 из макета. */
.ucalc__fields .field__control { padding: 17px 18px; min-height: 60px; }

.ucalc__checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-16) var(--s-32); }

.ucheck { display: flex; align-items: center; gap: var(--s-16); min-height: 36px; cursor: pointer; }
.ucheck__box { position: absolute; opacity: 0; width: 0; height: 0; }

.ucheck__mark {
  flex: 0 0 28px;
  width: 28px; height: 28px;
  position: relative;
  border: 2px solid var(--white-50);
  border-radius: var(--r-sm);
  background: var(--navy);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ucheck__box:checked + .ucheck__mark { background: var(--yellow); border-color: var(--yellow); }
.ucheck__box:checked + .ucheck__mark::after {
  content: '';
  position: absolute;
  left: 9px; top: 3px;
  width: 6px; height: 12px;
  border: solid var(--text-invert);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.ucheck__box:focus-visible + .ucheck__mark { outline: 2px solid var(--yellow); outline-offset: 2px; }
.ucheck__text { font-size: var(--fs-body-l); line-height: var(--lh-body-l); letter-spacing: var(--ls-body-l); }

.ucalc__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-16); width: 100%; }
.ucalc__next, .ucalc__submit { margin-left: auto; min-height: 67px; padding: var(--s-12) var(--s-24); }

@media (max-width: 1279px) {
  .ucalc__card { width: 100%; }
  .ucalc__steps { flex-wrap: wrap; }
  /* Линии между пилюлями при переносе только мешают. */
  .ucalc__line { display: none; }
}
@media (max-width: 767px) {
  .ucalc__fields, .ucalc__checks { grid-template-columns: 1fr; }
  .ucalc__card { padding: var(--s-24); gap: var(--s-32); }
  .ucalc__nav { flex-direction: column-reverse; align-items: stretch; }
  .ucalc__next, .ucalc__submit { margin-left: 0; }
}

/* ==========================================================================
   28. СТРАНИЦЫ УСЛУГ — ГАЛЕРЕЯ И ОТЗЫВЫ (тимбилдинги)
   ========================================================================== */

.ugallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
  margin-bottom: var(--gutter);
}
.ugallery__item { height: 440px; border-radius: var(--r-lg); overflow: hidden; }
.ugallery__item img { width: 100%; height: 100%; object-fit: cover; }

.ureviews__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }

.ureview {
  display: flex;
  flex-direction: column;
  gap: var(--s-32);
  margin: 0;
  padding: var(--s-48);
  border-radius: var(--r-xl);
  background: var(--bg-card);
}
.ureview__text { font-size: var(--fs-body-l); line-height: var(--lh-body-l); letter-spacing: var(--ls-body-l); }
.ureview__author { display: flex; align-items: center; gap: var(--s-16); }
.ureview__avatar { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; }
.ureview__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ureview__who { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }

.ureview__name {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-subtitle);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--yellow);
}
.ureview__role { font-size: var(--fs-small-i); line-height: normal; letter-spacing: 0; color: var(--text-muted); }

@media (max-width: 1279px) {
  .ugallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ugallery__item { height: 260px; }
  .ureviews__grid { grid-template-columns: 1fr; }
  .ureview { padding: var(--s-32); }
}
@media (max-width: 767px) {
  .ugallery { grid-template-columns: 1fr; }
  .ugallery__item { height: 220px; }
  .ureview { padding: var(--s-24); }
  .ureview__author { align-items: flex-start; }
}

/* ==========================================================================
   29. ТЕКСТОВАЯ СТРАНИЦА (политика конфиденциальности)
   ========================================================================== */

.doc { padding-block: var(--s-64) 120px; }
.doc__inner { max-width: 900px; }
.doc__title { margin-bottom: var(--s-32); }
.doc h2 { font-size: var(--fs-h3); margin-top: var(--s-48); margin-bottom: var(--s-16); color: var(--yellow); }
.doc p, .doc li { font-size: var(--fs-body-s); line-height: 1.5; letter-spacing: 0; }
.doc p + p,
.doc ul + p { margin-top: var(--s-12); }
.doc ul { display: flex; flex-direction: column; gap: var(--s-8); margin: var(--s-12) 0; }
/* Отступ под тире: em-dash шире 20px и без запаса липнет к тексту. */
.doc li { padding-left: 28px; position: relative; }
.doc li::before { content: '—'; position: absolute; left: 0; color: var(--yellow); }
.doc a { color: var(--yellow); text-decoration: underline; }

/* ==========================================================================
   30. ПОДВАЛ
   ========================================================================== */

/* Нижний отступ больше верхнего: виджет WhatsApp висит фиксированно и на
   прокрутке до конца перекрывал бы строку копирайта. */
.site-footer { background: var(--deep); padding: var(--s-64) 0 104px; }

.site-footer__inner {
  width: 100%;
  max-width: calc(var(--container) + var(--side) * 2);
  margin-inline: auto;
  padding-inline: var(--side);
  display: flex;
  flex-direction: column;
  gap: var(--s-48);
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 516px) minmax(0, 1fr) minmax(0, auto);
  gap: var(--s-64);
  align-items: start;
}

.site-footer__brand { display: flex; flex-direction: column; gap: var(--s-24); align-items: flex-start; }
.site-footer__about { max-width: 516px; font-size: var(--fs-body-s); line-height: var(--lh-body-s); letter-spacing: var(--ls-body-s); color: var(--text-muted); }
.site-footer__side { display: flex; flex-direction: column; gap: var(--s-32); }

.site-footer__menu {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-label);
  letter-spacing: 0;
  text-transform: uppercase;
}
.site-footer__menu a { transition: color var(--dur) var(--ease); }
.site-footer__menu a:hover { color: var(--yellow); }

/* Крупная надпись DOZOR во всю колонку. */
.site-footer__wordmark img { width: 100%; height: auto; }

.site-footer__copy {
  display: flex;
  gap: var(--s-24);
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--s-24);
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-small-i);
  letter-spacing: 0;
  color: var(--text-muted);
}
.site-footer__copy a { text-decoration: underline; }
.site-footer__copy a:hover { color: var(--yellow); }
.site-footer__dev { display: flex; gap: var(--s-8); align-items: center; }
.site-footer__dev strong { color: var(--white); font-weight: 600; }

@media (max-width: 1279px) { .site-footer__top { grid-template-columns: 1fr; gap: var(--s-48); } }
@media (max-width: 767px) {
  .site-footer { padding: var(--s-48) 0 96px; }
  .site-footer__copy { flex-direction: column; align-items: flex-start; gap: var(--s-12); }
}

/* ==========================================================================
   31. ВИДЖЕТ WHATSAPP
   Фирменный зелёный WhatsApp и оригинальный глиф — виджет должен читаться
   как WhatsApp, а не как «ещё одна круглая кнопка».
   ========================================================================== */

.wa-widget {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: var(--z-widget);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25D366;
  color: #FFFFFF;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.wa-widget:hover { background: #1EBE5B; transform: scale(1.06); }
.wa-widget svg { width: 34px; height: 34px; }

/* Пульс вокруг кнопки: один слой, без анимации размеров самой кнопки. */
.wa-widget::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  opacity: .45;
  animation: wa-pulse 2.4s var(--ease) infinite;
  z-index: -1;
}
@keyframes wa-pulse {
  0%   { transform: scale(1);   opacity: .45; }
  70%  { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .wa-widget::before { animation: none; opacity: 0; } }

@media (max-width: 767px) {
  .wa-widget { right: 16px; bottom: 16px; width: 54px; height: 54px; }
  .wa-widget svg { width: 30px; height: 30px; }
}