/* ==========================================================================
   GeoPromSistem: дизайн-система
   Палитра: синий акцент (#2563eb) + чёрный/белый. Чередование тёмных/светлых секций.
   Шрифты: Tektur (заголовки, как у 5systems) + Inter (текст), локальные (fonts.css).
   ========================================================================== */

/* ---------- Токены ---------- */
:root {
  /* акцент: синий */
  --accent:      #2563eb;
  --accent-600:  #2563eb;
  --accent-400:  #2563eb;
  --accent-soft: rgba(37, 99, 235, 0.14);
  --accent-line: rgba(37, 99, 235, 0.35);

  /* тёмные (графит) */
  --ink:         #000000;
  --ink-2:       #14181e;
  --ink-3:       #1b2028;
  --ink-card:    #191e26;

  /* текст на светлом */
  --text:        #14181d;
  --text-2:      #4b5563;
  --text-3:      #6b7280;

  /* на тёмном */
  --on-dark:     #f4f5f7;
  --on-dark-2:   #a8b0bd;
  --on-dark-3:   #7c8493;

  /* поверхности */
  --surface:     #ffffff;
  --surface-2:   #f5f6f8;
  --surface-3:   #eceef1;
  --line:        #e5e7eb;
  --line-2:      #d7dae0;
  --line-dark:   rgba(255, 255, 255, 0.10);
  --line-dark-2: rgba(255, 255, 255, 0.16);

  /* радиусы и тени в стиле 5systems: острые углы везде, кроме декоративных иконок-кружков */
  --r-sm: 0px;
  --r:    0px;
  --r-lg: 0px;
  --shadow-sm: 0 4px 14px -6px rgba(15, 18, 22, 0.14);
  --shadow:    0 14px 40px -16px rgba(15, 18, 22, 0.20);
  --shadow-lg: 0 34px 70px -24px rgba(15, 18, 22, 0.30);

  /* раскладка: ширина контента как у 5systems (max-w-7xl = 1280px) */
  --container: 1280px;
  --gutter: clamp(18px, 4vw, 40px);
  --section-y: clamp(64px, 8vw, 118px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 76px;
}

/* ---------- Сброс ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* color-scheme:light, иначе на коротких страницах (без хиро) браузер в тёмном
   режиме ОС рисует свой чёрный canvas под документом, если тот короче вьюпорта */
:root { color-scheme: light; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px); }
body {
  min-height: 100svh; display: flex; flex-direction: column;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* #main растягивается, прижимая футер к низу на страницах короче вьюпорта */
#main { flex: 1 0 auto; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; }
::selection { background: var(--accent-soft); }

h1, h2, h3, h4, h5 {
  font-family: 'Tektur', 'Rubik', 'Inter', sans-serif;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* ---------- Иконки ---------- */
.ico { width: 24px; height: 24px; flex: none; fill: none; }
.ico--sm { width: 18px; height: 18px; }
.ico--lg { width: 32px; height: 32px; }

/* ---------- Раскладка ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }
.section--muted { background: var(--surface-2); }
.section--dark { background: var(--surface-2); color: var(--text); }
.section--ink2 { background: var(--surface-3); color: var(--text); }

/* заголовок секции */
.section-head { max-width: 720px; margin-bottom: clamp(34px, 5vw, 56px); }
.section-head--center { margin-inline: auto; text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Rubik', sans-serif; font-weight: 600; font-size: 13px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-600);
}
.section--dark .eyebrow, .section--ink2 .eyebrow { color: var(--accent-400); }
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--accent); border-radius: 2px; }
.section-head--center .eyebrow::before { display: none; }
.section-title { font-size: clamp(28px, 4.4vw, 46px); margin-top: 14px; }
.section-title .accent { color: inherit; }
.section-sub { margin-top: 16px; font-size: clamp(16px, 2vw, 19px); color: var(--text-2); }

/* Заголовок секции: título слева, подзаголовок справа за разделителем (стиль 5systems) */
.section-head--split { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.section-head--split .section-title { margin-top: 0; }
.section-head__cta { display: inline-flex; margin-top: 22px; }
.section-head__cta-group { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 22px; }
.btn__icon-img { width: 18px; height: 18px; flex: none; }
.home-about__cta .btn, .section-head__cta, .section-head__cta-group .btn { width: 236px; max-width: 100%; }
.section-head--split .section-head__lead { padding-left: 32px; border-left: 2px solid var(--accent-line); color: var(--text-2); font-size: clamp(16px, 1.6vw, 19px); }
@media (max-width: 700px) {
  .section-head--split { grid-template-columns: 1fr; gap: 20px; }
  .section-head--split .section-head__lead { padding-left: 0; border-left: none; }
}

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: 'Rubik', sans-serif; font-weight: 600; font-size: 16px; line-height: 1;
  padding: 15px 26px; border-radius: var(--r-sm);
  border: 1px solid transparent; cursor: pointer;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(0) scale(0.99); }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-600); }
.btn--ghost { background: transparent; border-color: var(--line-2); color: var(--text); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-600); }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--accent); color: #fff; }
.btn--sm { padding: 11px 18px; font-size: 14px; }
.btn--lg { padding: 17px 32px; font-size: 17px; }
.btn--block { width: 100%; }

/* ---------- Ссылка-стрелка ---------- */
.arrow-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Rubik', sans-serif; font-weight: 600; color: var(--accent-600);
  transition: gap 0.25s var(--ease);
}
.arrow-link .ico { transition: transform 0.25s var(--ease); }
.arrow-link:hover .ico { transform: translateX(4px); }
.section--dark .arrow-link, .section--ink2 .arrow-link { color: var(--accent-400); }

/* ==========================================================================
   Шапка фиксированная, белая на всех страницах и с самого верха, включая
   первый экран с hero. Прозрачного состояния больше нет, поэтому нет и
   перекраски содержимого при скролле. Класс is-solid остался только ради
   тени: у верха страницы её нет, при прокрутке появляется и отделяет шапку
   от контента, который под неё уезжает.
   ========================================================================== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 999;
  background: #fff; color: var(--text);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.35s var(--ease);
}
.site-header.is-solid { box-shadow: var(--shadow-sm); }

/* Шапка в одну строку: слева лого, по центру ссылки, справа телефон,
   WhatsApp и бургер. Второй ряд (topbar) убран, поэтому высота шапки
   теперь равна --header-h и переменная --topbar-h больше не нужна. */
.navbar__inner {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
  height: var(--header-h);
}

.navbar__brand { display: inline-flex; align-items: center; gap: 12px; flex: none; min-width: 0; }
.navbar__brand-logo { width: 40px; height: 40px; object-fit: contain; flex: none; }
.navbar__brand-name { display: block; height: 16px; width: auto; flex: none; }
.navbar__actions { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: none; }
.navbar__phone {
  display: inline-flex; flex-direction: column; align-items: flex-end;
  line-height: 1.15; color: inherit; white-space: nowrap; transition: opacity 0.2s;
}
.navbar__phone:hover { opacity: 0.7; }
.navbar__phone-number { font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 17px; }
/* Строка «в сети» под номером с зелёной точкой: пульсация мягкая, по
   прозрачности, чтобы не дёргала глаз рядом с телефоном */
.navbar__phone-status {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 3px;
  font-size: 15px; font-weight: 500; color: var(--text-3);
}
/* На широких экранах строка ещё крупнее, как в макете, откуда взят блок */
@media (min-width: 1024px) { .navbar__phone-status { font-size: 16px; } }
.navbar__phone-dot {
  width: 12px; height: 12px; flex: none; border-radius: 50%; background: #22c55e;
  animation: phone-dot-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes phone-dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .navbar__phone-dot { animation: none; } }
.navbar__wa {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none;
  background: #25D366; color: #fff; transition: background-color 0.2s;
}
.navbar__wa:hover { background: #20bd5a; }

/* align-self: stretch нужен, чтобы .nav__item занимал всю высоту навбара и
   выпадающий список начинался ровно от нижней кромки шапки: между ссылкой
   и меню не остаётся зазора, на котором курсор «терял» бы наведение. */
.nav { align-self: stretch; display: flex; align-items: center; gap: 22px; }
.nav__link {
  font-weight: 700; font-size: 15px; color: inherit; white-space: nowrap;
  transition: opacity 0.2s;
}
.nav__link:hover, .nav__link.is-active { opacity: 0.7; }

/* Выпадающий список услуг: :hover для мыши + :focus-within для клавиатуры,
   без JS. Сама «Услуги» остаётся ссылкой на страницу со всеми услугами. */
.nav__item { position: relative; align-self: stretch; display: flex; align-items: center; }
.nav__link--parent { display: inline-flex; align-items: center; gap: 5px; }
.nav__chevron { width: 13px; height: 13px; transform: rotate(90deg); transition: transform 0.25s var(--ease); }
.nav__item:hover .nav__link--parent .nav__chevron,
.nav__item:focus-within .nav__link--parent .nav__chevron { transform: rotate(-90deg); }

.nav__dropdown {
  position: absolute; top: 100%; left: -16px; z-index: 5;
  min-width: 310px; padding: 8px;
  display: flex; flex-direction: column;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0s linear 0.22s;
}
.nav__item:hover .nav__dropdown,
.nav__item:focus-within .nav__dropdown {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}
.nav__dropdown-link {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 14px; font-size: 14.5px; font-weight: 600; line-height: 1.35;
  color: var(--text-2); transition: background-color 0.15s, color 0.15s;
}
/* Иконка услуги синяя, чтобы список читался как набор направлений, а не
   как простыня ссылок. Цвет свой, не наследуется от текста пункта. */
.nav__dropdown-icon { width: 20px; height: 20px; flex: none; color: var(--accent-600); }
.nav__dropdown-link:hover { background: var(--surface-2); color: var(--accent-600); }

.navbar__brand-logo { width: 44px; height: 44px; object-fit: contain; }
.navbar__brand-name { display: block; height: 17px; width: auto; flex: none; }

.burger { display: none; position: relative; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--line-2); color: inherit; flex: none; }
.burger:hover { opacity: 0.75; }
.burger__icon { position: absolute; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); }
.burger__icon--close { opacity: 0; transform: scale(0.5) rotate(-90deg); }
.site-header.is-menu-open .burger__icon--menu { opacity: 0; transform: scale(0.5) rotate(90deg); }
.site-header.is-menu-open .burger__icon--close { opacity: 1; transform: none; }

/* Мобильное меню начинается ПОД шапкой (не поверх неё), чтобы бургер/крестик
   оставались кликабельными поверх чёрной панели без борьбы z-index внутри .site-header */
.mobile-menu {
  position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; z-index: 998;
  background: var(--surface); color: var(--text);
  padding: 24px var(--gutter) 32px;
  display: flex; flex-direction: column;
  overflow-y: auto;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.3s var(--ease); }
.mobile-menu__nav { display: flex; flex-direction: column; gap: 10px; }
.mobile-menu__link {
  font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 20px; color: var(--text);
  padding: 18px 20px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface-2);
  transition: opacity 0.2s;
}
.mobile-menu__link:hover, .mobile-menu__link.is-active { opacity: 0.7; }

/* Услуги в мобильном меню: нативный details, без JS */
.mobile-menu__group { display: contents; }
.mobile-menu__summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  cursor: pointer; list-style: none;
}
.mobile-menu__summary::-webkit-details-marker { display: none; }
.mobile-menu__summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-top: -4px;
  border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3);
  transform: rotate(45deg); transition: transform 0.25s var(--ease);
}
.mobile-menu__group[open] .mobile-menu__summary::after { transform: rotate(-135deg); margin-top: 4px; }
.mobile-menu__sub { display: flex; flex-direction: column; padding: 6px 0 4px 14px; }
.mobile-menu__sublink {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 8px; font-size: 16px; font-weight: 600; color: var(--text-2);
  border-bottom: 1px solid var(--line);
}
.mobile-menu__sublink:last-child { border-bottom: none; }
.mobile-menu__sublink--all { color: var(--accent-600); font-weight: 700; }

body.no-scroll { overflow: hidden; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative; color: var(--on-dark);
  display: flex; flex-direction: column;
  padding-top: calc(var(--header-h) + 40px);
  padding-bottom: clamp(40px, 6vw, 80px);
  background: var(--ink);
  overflow: hidden;
}
@media (min-width: 901px) {
  .hero { padding-top: calc(var(--header-h) + 56px); }
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10, 14, 20, 0.70) 0%, rgba(10, 14, 20, 0.45) 40%, rgba(10, 14, 20, 0.10) 60%, rgba(10, 14, 20, 0) 80%);
}
@media (max-width: 767px) {
  .hero {
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: calc(var(--header-h) + 16px);
    padding-bottom: 24px;
  }
  .hero__inner {
    flex: 1;
    justify-content: center;
    gap: 22px;
  }
  .hero__top {
    flex: 0 0 auto;
    justify-content: center;
  }
  .hero__bg::after {
    background: linear-gradient(180deg, rgba(10, 14, 20, 0.65) 0%, rgba(10, 14, 20, 0.45) 50%, rgba(10, 14, 20, 0.65) 100%);
  }
  .hero__title {
    font-size: clamp(26px, 7vw, 36px);
    line-height: 1.15;
  }
  .hero__text--mobile {
    font-size: 14px;
    line-height: 1.45;
    margin-top: 22px;
    max-width: 310px;
  }
  .hero__bottom {
    gap: 0;
  }
}
/* Раскладка как у 5systems: заголовок растёт сверху по центру,
   подзаголовок+кнопка прижаты к низу (на десктопе в одну строку). */
.hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: clamp(32px, 5vw, 60px); }
.hero__top { display: flex; flex-direction: column; text-align: center; }
.hero__title { font-size: clamp(38px, 7vw, 74px); font-weight: 800; color: #fff; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4); }
/* Ограничиваем заголовок левой половиной кадра: иначе он уезжает на светлое
   небо справа, где белым по светлому не читается */
@media (min-width: 768px) { .hero__title { max-width: 15ch; } }
.hero__title .accent { color: inherit; }
.hero__bottom { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.hero__text--mobile { display: block; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, 0.9); font-weight: 400; max-width: 300px; margin: 16px auto 0; text-align: center; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); }
.hero__text--desktop { display: none; font-size: clamp(17px, 2.3vw, 21px); color: #ffffff; font-weight: 500; max-width: 620px; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; width: 100%; }
.hero__actions .btn { width: auto; max-width: 270px; padding: 13px 20px; font-size: 15px; }
@media (min-width: 768px) {
  .hero__top { text-align: left; }
  .hero__text--mobile { display: none; }
  .hero__text--desktop { display: block; text-align: left; }
  .hero__bottom { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 32px; }
  .hero__actions { width: auto; justify-content: flex-start; }
  .hero__actions .btn { width: auto; max-width: none; padding: 17px 32px; font-size: 17px; }
}

/* ==========================================================================
   О компании на главной (тёмный блок сразу под hero, стиль 5systems:
   заголовок+цифры слева, текст справа, без фото/галереи)
   ========================================================================== */
.home-about { background: var(--surface); color: var(--text); }
.home-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 100px); align-items: start; }
.home-about__title { color: var(--text); font-size: clamp(30px, 5vw, 54px); text-transform: uppercase; }
.home-about__title .accent { color: inherit; }
.home-about__stats { display: flex; gap: clamp(24px, 4vw, 52px); margin-top: 34px; }
.home-about__stat-num-row { display: flex; align-items: baseline; gap: 3px; }
.home-about__stat-num { font-family: 'Rubik', sans-serif; font-weight: 800; font-size: clamp(32px, 4vw, 44px); color: var(--text); line-height: 1; letter-spacing: -0.02em; }
.home-about__stat-suffix { font-family: 'Rubik', sans-serif; font-weight: 700; font-size: clamp(18px, 2vw, 24px); color: var(--accent-400); }
.home-about__stat-label { margin-top: 7px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-400); }
.home-about__stat-sub { margin-top: 2px; font-size: 13px; color: var(--text-3); }
.home-about__cta { margin-top: clamp(34px, 5vw, 54px); display: flex; justify-content: center; }
.home-about__text { color: var(--text-2); font-size: clamp(16px, 1.6vw, 19px); line-height: 1.75; }
.home-about__text p + p { margin-top: 36px; }
.home-about__text strong { color: var(--text); font-style: italic; text-transform: uppercase; letter-spacing: 0.01em; }
@media (max-width: 900px) {
  .home-about__grid { grid-template-columns: 1fr; gap: 40px; }
}

/* Галерея объектов на главной: асимметричная сетка, стиль 5systems */
.home-gallery { margin-top: clamp(56px, 8vw, 96px); }
.home-gallery__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-flow: dense; gap: 16px;
}
.home-gallery__item { position: relative; overflow: hidden; background: var(--ink-3); aspect-ratio: 1 / 1; }
.home-gallery__item--wide { grid-column: span 2; aspect-ratio: 2 / 1; }
.home-gallery__item--tall { display: none; }
.home-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.home-gallery__item:hover img { transform: scale(1.06); }
@media (min-width: 901px) {
  .home-gallery__grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 24px; height: 620px; }
  .home-gallery__item { aspect-ratio: auto; }
  .home-gallery__item--wide { grid-column: span 2; grid-row: span 1; }
  .home-gallery__item--tall { display: block; grid-column: span 1; grid-row: span 2; }
}

/* Карта Казахстана: офис в Алматы + маршруты до крупных городов, стиль 5systems */
.home-map { margin-top: clamp(56px, 8vw, 96px); }
.home-map__frame { position: relative; max-width: 900px; margin-inline: auto; }
.home-map__img { width: 100%; height: auto; display: block; color: var(--accent-400); }
.home-map__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.home-map__route {
  fill: none; stroke: var(--ink); stroke-opacity: 0.45; stroke-width: 1.2;
  stroke-dasharray: 4 4; vector-effect: non-scaling-stroke;
  animation: home-map-flow 1s linear infinite;
}
@keyframes home-map-flow { from { stroke-dashoffset: 8; } to { stroke-dashoffset: 0; } }

.home-map__city { position: absolute; transform: translate(-50%, -50%); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; z-index: 2; }
.home-map__ping { position: absolute; width: 36px; height: 36px; border-radius: 50%; background: rgba(220, 38, 38, 0.25); animation: home-map-ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite; }
.home-map__pulse { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: rgba(220, 38, 38, 0.4); animation: home-map-pulse 2.4s ease-in-out infinite; }
.home-map__dot { position: relative; width: 12px; height: 12px; border-radius: 50%; background: #dc2626; box-shadow: 0 0 12px rgba(220, 38, 38, 0.9); border: 1.5px solid #fff; }
.home-map__label {
  position: absolute; top: 100%; margin-top: 8px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-family: 'Rubik', sans-serif; font-weight: 800; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.08em; color: #fff;
  background: rgba(0, 0, 0, 0.55); padding: 3px 9px;
}
@keyframes home-map-ping { 75%, 100% { transform: scale(2.1); opacity: 0; } }
@keyframes home-map-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

/* Крупные города: маленькие точки без пульсации, подпись всегда видна, ярче при наведении */
.home-map__city--minor { width: 10px; height: 10px; z-index: 1; }
.home-map__dot--minor { width: 6px; height: 6px; border-radius: 50%; background: var(--on-dark-3); border: 1px solid #fff; }
.home-map__label--minor {
  position: absolute; top: 100%; margin-top: 5px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.05em; color: #fff;
  background: rgba(0, 0, 0, 0.55); padding: 2px 6px;
  opacity: 0.85; transition: opacity 0.2s, background-color 0.2s;
}
.home-map__city--minor:hover .home-map__label--minor { opacity: 1; background: var(--accent-600); }

.home-map__caption { margin-top: 56px; text-align: center; color: var(--text-2); font-size: clamp(15px, 1.6vw, 18px); max-width: 720px; margin-inline: auto; }
@media (prefers-reduced-motion: reduce) {
  .home-map__route, .home-map__ping, .home-map__pulse { animation: none; }
}

/* ==========================================================================
   Полоса статистики
   ========================================================================== */
.stats { background: var(--surface-3); color: var(--text); border-top: 1px solid var(--line); }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stats__grid--3 { grid-template-columns: repeat(3, 1fr); }
.stat { padding: clamp(30px, 4vw, 46px) 24px; text-align: center; border-right: 1px solid var(--line); }
.stat:last-child { border-right: none; }
.stat__value { font-family: 'Rubik', sans-serif; font-weight: 800; font-size: clamp(34px, 5vw, 54px); color: var(--accent-400); line-height: 1; letter-spacing: -0.03em; }
.stat__label { margin-top: 12px; font-size: 15px; color: var(--text-2); }

/* ==========================================================================
   Карточки услуг
   ========================================================================== */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface-2); border: 1px solid var(--line);
  padding: 24px; overflow: hidden;
  transition: box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.card:hover { box-shadow: var(--shadow-lg); border-color: var(--accent-line); }
.card__media { display: block; overflow: hidden; margin-bottom: 22px; border: 1px solid var(--line-2); aspect-ratio: 16 / 9; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__title { font-size: 20px; margin-bottom: 12px; text-transform: uppercase; min-height: 45px; }
.card__text { color: var(--text-2); font-size: 14.5px; line-height: 1.6; flex: 1; margin-bottom: 26px; }
.card__cta { margin-top: auto; }

/* карточки объектов (портфолио) с фотографией */
.project-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.project-card {
  display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  transition: box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.project-card:hover { box-shadow: var(--shadow-lg); border-color: var(--accent-line); }
.project-card__media { position: relative; display: block; width: 100%; padding: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-3); text-align: left; }
.project-card__media img { width: 100%; height: 100%; object-fit: cover; }
.project-card__badge {
  position: absolute; left: 14px; bottom: 14px; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0, 0, 0, 0.6); color: #fff;
  font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 12.5px;
  padding: 6px 12px; border-radius: 999px;
}
.project-card__badge .ico { width: 15px; height: 15px; }
.project-card__body { padding: 22px 24px 26px; flex: 1; display: flex; flex-direction: column; }
.project-card__title { font-size: 19px; margin-bottom: 6px; min-height: 64px; }
.project-card__meta { color: var(--text-3); font-size: 14px; margin-bottom: 12px; min-height: 23px; }
.project-card__desc { color: var(--text-2); font-size: 14.5px; line-height: 1.55; margin-bottom: 14px; }
.project-card__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.project-card__link { margin-top: auto; }
.chip {
  display: inline-flex; align-items: center; padding: 4px 11px;
  background: var(--accent-soft); color: var(--accent-600); font-size: 12.5px; font-weight: 600;
}
.chip--ghost { background: transparent; border: 1px solid var(--line-2); color: var(--text-2); }
.chip--ghost.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.chip-filter a { transition: opacity 0.2s; }
.chip-filter a:hover { opacity: 0.7; }
.muted { color: var(--text-3); }


/* ==========================================================================
   О компании (split)
   ========================================================================== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.split--reverse .split__media { order: 2; }
.split--top { align-items: start; }
.split__media { position: relative; }
.split__media img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.split__badge {
  position: absolute; right: -14px; bottom: -18px;
  background: var(--accent); color: #fff; padding: 18px 22px; border-radius: var(--r);
  box-shadow: var(--shadow); max-width: 230px;
}
.split__badge b { font-family: 'Rubik', sans-serif; font-size: 30px; display: block; line-height: 1; }
.split__badge span { font-size: 13.5px; font-weight: 500; }
.prose > * + * { margin-top: 16px; }
.prose p { color: var(--text-2); font-size: 17px; line-height: 1.7; }

/* Типографика для rich-text статей блога (санитизировано на сервере через nh3) */
.prose h1 { font-size: clamp(28px, 4.5vw, 44px); }
.prose h2 { font-size: 26px; margin-top: 36px; }
.prose h3 { font-size: 21px; margin-top: 28px; }
.prose ul, .prose ol { padding-left: 22px; color: var(--text-2); font-size: 17px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 8px; }
.prose blockquote {
  border-left: 3px solid var(--accent); padding: 4px 0 4px 20px; margin: 24px 0;
  color: var(--text-2); font-style: italic;
}
.prose a { color: var(--accent-600); text-decoration: underline; text-underline-offset: 2px; transition: opacity 0.2s; }
.prose a:hover { opacity: 0.7; }
.prose img { max-width: 100%; height: auto; border-radius: var(--r); margin: 8px 0; }
.prose hr { border: none; border-top: 1px solid var(--line); margin: 32px 0; }
.split__actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; }

/* Страница услуги: фото 16:9 слева (как в карточках услуг) + заголовок справа */
.service-hero__media { display: block; overflow: hidden; border: 1px solid var(--line-2); aspect-ratio: 16 / 9; }
.service-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.service-hero__title { font-size: clamp(30px, 5vw, 46px); }
.service-hero__text { margin-top: 16px; color: var(--text-2); font-size: clamp(16px, 1.8vw, 19px); line-height: 1.7; }
.service-body { max-width: 760px; margin: clamp(48px, 7vw, 80px) auto 0; }

/* ==========================================================================
   Преимущества
   ========================================================================== */
.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.features--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .features--3 { grid-template-columns: repeat(2, 1fr); } }
.feature { display: flex; gap: 18px; padding: 26px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s var(--ease); }
.feature:hover { border-color: var(--accent-line); box-shadow: var(--shadow); transform: translateY(-3px); }
.feature__icon { width: 52px; height: 52px; flex: none; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-600); }
/* .feature может быть ссылкой (<a class="feature">), тогда внутренние
   подписи это span'ы и им нужен блочный режим */
.feature__title { display: block; font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 18px; margin-bottom: 6px; color: var(--text); }
.feature__text { display: block; color: var(--text-2); font-size: 15px; line-height: 1.55; }
a.feature:hover .feature__title { color: var(--accent-600); }

/* ==========================================================================
   Процесс (таймлайн)
   ========================================================================== */
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; }
.step { position: relative; padding-top: 28px; }
.step::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--line-dark); }
.step::after { content: ""; position: absolute; top: -4px; left: 0; width: 34%; height: 10px; background: var(--accent); border-radius: 2px; box-shadow: 0 0 18px var(--accent-line); }
.step__n { font-family: 'Rubik', sans-serif; font-weight: 800; font-size: 44px; color: rgba(255, 255, 255, 0.12); line-height: 1; }
.section--light .step::before { background: var(--line); }
.step__title { font-size: 19px; margin: 12px 0 8px; }
.step__text { color: var(--on-dark-2); font-size: 15px; }
.section--light .step__n { color: var(--surface-3); }
.section--light .step__text { color: var(--text-2); }

/* ==========================================================================
   Галерея объектов (горизонтальный скролл)
   ========================================================================== */
.gallery-wrap { position: relative; }
.gallery {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(82%, 420px); gap: 18px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px;
  scrollbar-width: thin;
}
.gallery::-webkit-scrollbar { height: 8px; }
.gallery::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; }
.gallery__item {
  position: relative; scroll-snap-align: start; border-radius: var(--r); overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--surface-3); cursor: pointer;
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.gallery__item:hover img { transform: scale(1.06); }
.gallery__cap {
  position: absolute; inset: auto 0 0 0; padding: 30px 18px 16px;
  background: linear-gradient(transparent, rgba(10, 13, 17, 0.85)); color: #fff;
  font-size: 14px; font-weight: 500; opacity: 0; transform: translateY(8px); transition: 0.3s var(--ease);
}
.gallery__item:hover .gallery__cap { opacity: 1; transform: none; }
.gallery-nav { display: flex; gap: 10px; margin-top: 22px; }
.gallery-nav__btn { width: 48px; height: 48px; border-radius: var(--r-sm); border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--text); transition: 0.2s; }
.gallery-nav__btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.gallery-nav__btn[disabled] { opacity: 0.35; cursor: not-allowed; }
.gallery-nav__btn:first-child .ico { transform: rotate(180deg); }

/* ==========================================================================
   Лайтбокс галереи объекта (полноэкранный слайдер, страница «Проекты»)
   ========================================================================== */
.lightbox {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s;
}
.lightbox.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.3s var(--ease); }
.lightbox__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.92); backdrop-filter: blur(4px); }
.lightbox__top { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px; color: #fff; }
.lightbox__title { font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 15px; }
.lightbox__count { margin-top: 3px; font-size: 13px; color: var(--on-dark-3); }
.lightbox__close {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.25); color: #fff; transition: 0.2s;
}
.lightbox__close:hover { border-color: var(--accent-400); color: var(--accent-400); }
.lightbox__stage { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0 60px 16px; }
.lightbox__img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; }
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 48px; height: 48px; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid rgba(255, 255, 255, 0.2);
  transition: background-color 0.2s, border-color 0.2s;
}
.lightbox__nav:hover { background: var(--accent); border-color: var(--accent); }
.lightbox__nav--prev { left: 12px; }
.lightbox__nav--prev .ico { transform: rotate(180deg); }
.lightbox__nav--next { right: 12px; }
.lightbox__thumbs { position: relative; z-index: 1; flex: none; display: flex; gap: 8px; justify-content: center; padding: 0 16px 18px; overflow-x: auto; }
.lightbox__thumb { flex: none; width: 60px; height: 60px; overflow: hidden; border: 2px solid transparent; opacity: 0.5; transition: opacity 0.2s, border-color 0.2s; cursor: pointer; }
.lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lightbox__thumb.is-active { opacity: 1; border-color: var(--accent-400); }
@media (max-width: 700px) {
  .lightbox__stage { padding: 0 8px 12px; }
  .lightbox__nav { width: 38px; height: 38px; }
  .lightbox__nav--prev { left: 4px; }
  .lightbox__nav--next { right: 4px; }
  .lightbox__thumb { width: 46px; height: 46px; }
}

/* ==========================================================================
   Лицензия: превью скана рядом с текстом (правая колонка .split). На
   мобильном это компактная карточка по aspect-ratio. От 901px оно крупное и
   прилипает под шапкой (position: sticky), пока пользователь читает
   длинный текст слева, вместо аспект-рейшо на весь остаток вьюпорта.
   ========================================================================== */
/* Скан лицензии: страницы документа идут столбиком в правой колонке.
   Липкой её больше не делаем, как было у встроенного просмотрщика: три листа
   A4 выше экрана, прилипать нечему. Рамка отделяет белый лист от белого фона
   страницы, без неё края документа просто растворялись. */
.license-scan { display: grid; gap: 20px; align-content: start; }
.license-scan img { display: block; height: auto; border: 1px solid var(--line); }

/* ==========================================================================
   Форма заявки
   ========================================================================== */
.lead-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: block; margin-bottom: 12px; }
.field__label { display: block; font-size: 13px; font-weight: 500; color: var(--text-2); margin-bottom: 5px; }
.field__input {
  width: 100%; padding: 11px 14px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface); transition: border-color 0.2s, box-shadow 0.2s; font-size: 15px;
}
.field__input::placeholder { color: var(--text-3); }
.field__input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field__input.is-invalid { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12); }
.field__textarea { resize: vertical; min-height: 72px; }
.field__select-wrap { position: relative; display: block; }
.field__select { appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer; }
.field__select-chevron { position: absolute; right: 15px; top: 50%; transform: translateY(-50%) rotate(90deg); color: var(--text-3); pointer-events: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead-form__note { font-size: 12px; color: var(--text-3); margin-top: 10px; text-align: center; }
.lead-form__status { margin-top: 10px; font-size: 14px; text-align: center; font-weight: 500; }
.lead-form__status.is-ok { color: #15803d; }
.lead-form__status.is-err { color: #dc2626; }
.lead-form__status a { color: var(--accent-600); text-decoration: underline; }
.lead-form__submit.is-loading { opacity: 0.7; pointer-events: none; }

/* карта */
.map-embed { border: 0; width: 100%; height: 100%; min-height: 480px; border-radius: var(--r-lg); filter: grayscale(0.2) contrast(1.05); }

/* ==========================================================================
   Подвал
   ========================================================================== */
.site-footer { background: var(--surface-2); color: var(--text-2); padding-block: clamp(48px, 6vw, 76px) 30px; border-top: 1px solid var(--line); }
.footer__grid { display: flex; justify-content: space-between; gap: 40px; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__logo { width: 44px; height: 44px; object-fit: contain; }
.brand__name { display: block; height: 17px; width: auto; }
.footer__desc { margin-top: 18px; font-size: 15px; max-width: 320px; color: var(--text-2); }
.footer__soc { display: flex; gap: 12px; margin-top: 22px; }
.footer__soc a { width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: var(--r-sm); display: grid; place-items: center; color: var(--text-2); transition: opacity 0.2s; }
.footer__soc a:hover { opacity: 0.7; }
.footer__title { font-family: 'Rubik', sans-serif; font-size: 15px; font-weight: 600; color: var(--text); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 18px; }
.footer__list { display: grid; gap: 11px; font-size: 15px; }
.footer__list a { transition: opacity 0.2s; }
.footer__list a:hover { opacity: 0.7; }
.footer__list--contacts { max-width: 280px; }
.footer__office { color: var(--text-2); }
.footer__bottom { margin-top: 46px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 13.5px; color: var(--text-3); }
.footer__license { color: inherit; transition: opacity 0.2s; }
.footer__license:hover { opacity: 0.7; }

/* ==========================================================================
   Модалка
   ========================================================================== */
.modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s; }
.modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.3s var(--ease); }
.modal__overlay { position: absolute; inset: 0; background: rgba(10, 13, 17, 0.7); backdrop-filter: blur(4px); }
.modal__dialog {
  position: relative; z-index: 1; width: 100%; max-width: 420px; max-height: 88vh;
  background: var(--surface); box-shadow: var(--shadow-lg);
  transform: translateY(16px) scale(0.98); transition: transform 0.3s var(--ease);
  display: flex; flex-direction: column;
}
.modal.is-open .modal__dialog { transform: none; }
/* Кнопка закрытия лежит вне .modal__body, поэтому не уезжает при скролле длинной формы
   (как крестик в мобильном меню всегда остаётся на месте, а не внутри списка ссылок). */
.modal__close { position: absolute; top: 10px; right: 10px; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center; color: var(--text); border: 1px solid var(--line-2); transition: 0.2s; }
.modal__close:hover { opacity: 0.75; }
.modal__body { overflow-y: auto; padding: 22px; }
.modal__title { font-size: 24px; padding-right: 56px; }
.modal__text { color: var(--text-2); font-size: 14px; margin: 5px 0 16px; }

/* ==========================================================================
   Внутренние страницы: шапка страницы
   ========================================================================== */
.page-hero {
  position: relative; background: var(--surface-2); color: var(--text); overflow: hidden;
  padding-block: clamp(40px, 6vw, 64px);
}
.page-hero::before { content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(37, 99, 235, 0.18), transparent 65%); }
.page-hero__inner { position: relative; z-index: 1; }
.page-hero h1 { font-size: clamp(30px, 5vw, 52px); margin-top: 14px; }
.page-hero__text { margin-top: 16px; color: var(--text-2); font-size: clamp(16px, 2vw, 19px); }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--text-3); }
.breadcrumbs a { transition: opacity 0.2s; }
.breadcrumbs a:hover { opacity: 0.7; }
.breadcrumbs span { color: var(--text-3); }

/* контентные списки на страницах услуг */
.content-list { display: grid; gap: 12px; margin-top: 10px; }
.content-list li { position: relative; padding-left: 30px; color: var(--text-2); font-size: 16.5px; }
.content-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 16px; height: 16px; background: var(--accent-soft); border-radius: 50%; }
.content-list li::after { content: ""; position: absolute; left: 5px; top: 13px; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }
.content-ol { counter-reset: c; display: grid; gap: 16px; }
.content-ol li { position: relative; padding-left: 52px; min-height: 36px; color: var(--text-2); }
.content-ol li::before { counter-increment: c; content: counter(c); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--accent); color: #fff; font-family: 'Rubik', sans-serif; font-weight: 700; display: grid; place-items: center; }
.content-ol li b { color: var(--text); }

/* ==========================================================================
   Экраны-заглушки (спасибо / 404)
   ========================================================================== */
.status-screen { min-height: calc(100svh - 200px); display: grid; place-items: center; text-align: center; padding: clamp(50px, 9vw, 100px) var(--gutter); }

/* Страницы без тёмного hero (спасибо/404): шапка сразу непрозрачная, контент отступает под неё */
body.no-hero #main { padding-top: var(--header-h); }
@media (min-width: 901px) {
}
.status-screen__inner { max-width: 560px; }
.status-screen__icon { width: 88px; height: 88px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-600); display: grid; place-items: center; margin: 0 auto 26px; }
.status-screen__icon .ico { width: 44px; height: 44px; }
.status-screen__code { font-family: 'Rubik', sans-serif; font-weight: 800; font-size: clamp(88px, 20vw, 168px); line-height: 0.9; color: var(--surface-3); letter-spacing: -0.05em; margin-bottom: 8px; }
.status-screen h1 { font-size: clamp(28px, 5vw, 46px); }
.status-screen p { margin-top: 14px; color: var(--text-2); font-size: 18px; }
.status-screen__actions { margin-top: 32px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Объединённая секция «Вопросы + Контакты»: слева FAQ, справа контакты.
   На мобильном схлопывается в одну колонку с зазором как у обычной секции,
   чтобы визуально сохранить прежнее разделение на два блока. */
.faq-contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; }
.faq-contact-col { display: flex; flex-direction: column; gap: 28px; }
.faq-contact-col .section-head { margin-bottom: 0; }
.faq-contact-col .section-title { margin-top: 0; }
.faq-contact-col .section-head__cta-group { margin-top: 28px; }
/* Внутри узкой колонки секции--split нужен зазор поменьше и защита от
   переполнения длинными значениями (email, телефон) в уже урезанной ширине.
   Разделитель переносим на правый край левого блока (border-right), а не
   на левый край правого (border-left): так его высота всегда равна высоте
   заголовка+кнопок, а не более высокого блока с телефоном/почтой/режимом. */
.faq-contact-col .section-head--split { gap: 24px; }
.faq-contact-col .section-head--split > div { min-width: 0; }
.faq-contact-col .section-head--split > div:first-child { border-right: 2px solid var(--accent-line); padding-right: 24px; }
.faq-contact-col .section-head--split .section-head__lead { padding-left: 20px; border-left: none; }
@media (max-width: 900px) {
  .faq-contact-grid { grid-template-columns: 1fr; gap: var(--section-y); }
  .faq-contact-col .section-head--split > div:first-child { border-right: none; padding-right: 0; }
}

/* Частые вопросы: нативный <details>/<summary>, без JS: контент всегда в
   DOM независимо от открытого/закрытого состояния, доступен и краулерам */
.faq-list { max-width: 820px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item__q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 2px; cursor: pointer; list-style: none;
  font-family: 'Rubik', sans-serif; font-weight: 600; font-size: 17px; color: var(--text);
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-top: -4px;
  border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3);
  transform: rotate(45deg); transition: transform 0.25s var(--ease);
}
.faq-item[open] .faq-item__q::after { transform: rotate(-135deg); margin-top: 4px; }
.faq-item__a { padding: 0 2px 22px; max-width: 720px; }
.faq-item__a p { color: var(--text-2); font-size: 15.5px; line-height: 1.65; }

/* Контактная строка (телефон/email/режим работы + WhatsApp) на главной */
.contact-info { display: flex; flex-direction: column; gap: 16px; }
.contact-info__item { display: flex; flex-direction: column; gap: 4px; }
.contact-info__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); }
.contact-info__value { font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 19px; color: var(--text); transition: opacity 0.2s; overflow-wrap: break-word; }
a.contact-info__value:hover { opacity: 0.7; }

/* Страница «Контакты»: реквизиты слева, форма заявки справа */
.contact-info--page { gap: 22px; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.contact-info__value--sm { font-size: 17px; line-height: 1.45; }
.contacts-legal { margin-top: 34px; }
.contacts-legal h2 { font-size: 22px; margin-top: 0; }
.contacts-form { padding: clamp(24px, 3vw, 34px); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.contacts-form__title { font-size: 24px; }
.contacts-form__text { margin: 10px 0 22px; color: var(--text-2); font-size: 15.5px; line-height: 1.6; }
.contacts-geo { margin-top: 26px; max-width: 820px; color: var(--text-2); font-size: 16px; line-height: 1.65; }
.contact-info--page + .section-head__cta-group { margin-top: 28px; }

/* Секция техники внутри блока «О компании» на главной */
.home-equip { margin-top: clamp(56px, 8vw, 96px); }

/* Карусель: в кадре три карточки, стрелки листают ровно на кадр.
   Остановку задаёт scroll-snap, поэтому промах прокрутки самокорректируется.
   Общая для блоков «Наши услуги» и «Производственно-техническая база»:
   ширина колонки считается от --carousel-gap, который секция может задать свой.
   Вертикальные отбивки с отрицательным margin нужны, чтобы тень карточки
   при наведении не срезалась краем трека. */
.carousel__track {
  --carousel-gap: 24px;
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--carousel-gap)) / 3);
  gap: var(--carousel-gap);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-block: 6px 12px; margin-block: -6px -12px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { scroll-snap-align: start; }
@media (max-width: 1100px) { .carousel__track { grid-auto-columns: calc((100% - var(--carousel-gap)) / 2); } }
@media (max-width: 720px) { .carousel__track { grid-auto-columns: min(86%, 330px); } }
.carousel__nav { justify-content: center; }
.carousel__btn--prev .ico { transform: rotate(180deg); }
/* Стрелки вынесены ЗА ширину контента, в поле между контентной колонкой и
   краем окна, поэтому карточки занимают всю ширину контейнера.

   Порог 1360px не на глаз. Контейнер шире 1280px не растёт, гуттер упирается
   в 40px, значит контент равен 1200px, а поле с каждой стороны это
   (100vw - 1200) / 2. Кнопке нужно 48px плюс отступ 18px, то есть 66px:
   на 1360px поля 80px, запас есть; на 1280px его всего 40px и кнопка вылезла
   бы за окно. Поэтому ниже порога стрелки идут под треком: это честнее, чем
   класть их на карточки или обрезать краем экрана. */
@media (min-width: 1360px) {
  .carousel { position: relative; }
  .carousel__nav { display: contents; }
  .carousel__nav[hidden] { display: none; }
  .carousel__nav .gallery-nav__btn {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    background: var(--surface);
  }
  /* Фон здесь же, иначе правило выше перебивало :hover из .gallery-nav__btn
     (та же специфичность, но ниже по файлу) и стрелка белела на белом */
  .carousel__nav .gallery-nav__btn:hover {
    background: var(--accent); border-color: var(--accent); color: #fff;
  }
  /* right: calc(100% + 18px) ставит правый край кнопки на 18px левее левой
     кромки трека, то есть целиком снаружи контента */
  .carousel__btn--prev { right: calc(100% + 18px); }
  .carousel__nav .gallery-nav__btn:not(.carousel__btn--prev) { left: calc(100% + 18px); }
}

.equip-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); transition: border-color 0.3s, box-shadow 0.3s; }
.equip-card:hover { border-color: var(--accent-line); box-shadow: var(--shadow); }
/* Снимок сверху во всю ширину карточки, как в карточках услуг */
.equip-card__media { display: block; overflow: hidden; border-bottom: 1px solid var(--line); }
.equip-card__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.5s var(--ease); }
.equip-card:hover .equip-card__media img { transform: scale(1.04); }
.equip-card__body { padding: 24px 26px 26px; }
.equip-card__title { font-size: 18px; line-height: 1.25; margin-bottom: 14px; }
.equip-card__list { display: flex; flex-direction: column; gap: 11px; }
.equip-card__list li { position: relative; padding-left: 19px; color: var(--text-2); font-size: 15px; line-height: 1.55; }
.equip-card__list li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 7px; height: 7px; background: var(--accent-600);
}

/* Карты контактов */
.maps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.maps-grid:has(.map-card:only-child) { grid-template-columns: 1fr; }
.map-card { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); background: var(--surface); }
@media (max-width: 900px) { .maps-grid { grid-template-columns: 1fr; } }

/* Появление блоков при прокрутке убрано по просьбе владельца: контент
   виден сразу. Уважение к prefers-reduced-motion оставляем, оно гасит
   оставшиеся анимации (пульсация точек, бегущие маршруты на карте). */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Адаптив
   ========================================================================== */
@media (max-width: 1024px) {
  .footer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
  .process { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .project-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
  .navbar__brand-logo { width: 36px; height: 36px; }
  .navbar__brand-name { height: 14px; }
  .cards { grid-template-columns: 1fr; }
  .project-cards { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .split__badge { position: static; margin-top: 18px; max-width: none; display: inline-block; }
  .features { grid-template-columns: 1fr; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: none; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--line); }
}
/* Ниже 600px номер из шапки убран: с подписью «в сети» он требует около
   180px и в строку с лого, вотсапом и бургером не встаёт. Позвонить можно
   из футера и со страницы контактов. */
@media (max-width: 600px) {
  .navbar__phone { display: none; }
}

/* ==========================================================================
   Мобильная главная: правки, которые нужны только на узких экранах
   ========================================================================== */
/* Ниже 900px: то, что зависит от касания и от узкой карты */
@media (max-width: 900px) {
  /* Стрелки каруселей не нужны: карточки листаются свайпом */
  .carousel__nav { display: none; }

  /* «Наши услуги»: вместо карусели обычный столбик карточек, как на странице
     услуг, где .cards на этой же ширине становится одноколоночным. Видны
     первые три, остальные открываются кнопкой «Смотреть все». Карусель здесь
     не инициализируется (main.js), поэтому в треке ровно исходные карточки. */
  [data-carousel-stack] .carousel__track {
    grid-auto-flow: row; grid-template-columns: 1fr;
    overflow-x: visible; scroll-snap-type: none;
  }
  [data-carousel-stack] .carousel__track > *:nth-child(n + 4) { display: none; }

  /* Подписи городов на карте: на узком экране плашки налезали друг на друга */
  .home-map__label { font-size: 9px; letter-spacing: 0.05em; padding: 2px 6px; margin-top: 6px; }
  .home-map__label--minor { font-size: 7.5px; letter-spacing: 0.03em; padding: 1px 4px; margin-top: 4px; }
  .home-map__dot { width: 10px; height: 10px; }
  .home-map__ping, .home-map__pulse { display: none; }
}

/* Ниже 700px: порог не случайный, именно здесь .section-head--split
   схлопывается в одну колонку. Выше него половинки стоят рядом, и
   центрировать их содержимое или прятать подзаголовок нельзя: остались бы
   съехавший заголовок и пустая половина. */
@media (max-width: 700px) {
  /* «Наши услуги»: заголовок и кнопка по центру, подзаголовок скрыт */
  .section-head--mobile-center { text-align: center; }
  .section-head--mobile-center > div { display: flex; flex-direction: column; align-items: center; }
  .section-head--mobile-center .section-head__lead { display: none; }

  /* Контакты: заголовок, кнопки и сами контакты по центру */
  .faq-contact-col .section-head { text-align: center; }
  .faq-contact-col .section-head--split > div:first-child { display: flex; flex-direction: column; align-items: center; }
  .faq-contact-col .section-head__cta-group { align-items: center; }
  .faq-contact-col .section-head--split .section-head__lead { padding-left: 0; }
  .faq-contact-col .contact-info { align-items: center; }
  .faq-contact-col .contact-info__item { align-items: center; text-align: center; }
}

/* На самых узких экранах самая длинная подпись, «Усть-Каменогорск», выступала
   за правый край карты: поджимаем кегль и поля ещё немного */
@media (max-width: 420px) {
  .home-map__label { font-size: 8px; padding: 2px 5px; }
  .home-map__label--minor { font-size: 6.5px; letter-spacing: 0; padding: 1px 3px; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .lead-form__row { grid-template-columns: 1fr; }
  .footer__grid { display: grid; grid-template-columns: 1fr; }
  .gallery { grid-auto-columns: 88%; }
}
@media (max-width: 480px) {
}
@media (max-width: 400px) {
  .stats__grid { grid-template-columns: 1fr; }
  .stat { border-right: none; border-bottom: 1px solid var(--line); }
  .stat:last-child { border-bottom: none; }
}