/* =========================================================================
   USM — базовые стили: типографика, шапка с выпадающими меню,
   полноэкранное меню, кнопки, иконки, модалка, футер.
   ========================================================================= */

/* ---------- Фирменный шрифт USM (вариативный, self-hosted) ---------- */
@font-face {
  font-family: "USM";
  /* облегчённый: без хинтинга, без оси ширины, вес 100–700 (31 КБ вместо 83) */
  src: url("../fonts/usm-v2.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tenor Sans — заголовок первого экрана (SIL OFL 1.1) ---------- */
/* Только цифры с осью ширины — для огромного года в блоке «С 2009 года»
   на странице генподряда (там нужна wdth, в основном шрифте её нет) */
@font-face {
  font-family: "USM Digits";
  src: url("../fonts/usm-digits.woff2") format("woff2");
  font-weight: 100 950;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tenor Sans";
  src: url("../fonts/tenor-sans-cyrillic.woff2") format("woff2");
  font-weight: 400;
  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: "Tenor Sans";
  src: url("../fonts/tenor-sans-latin.woff2") format("woff2");
  font-weight: 400;
  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;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  font-size-adjust: from-font;
  overflow-x: hidden;
}

/* display в правилах ниже перебивает атрибут hidden — возвращаем ему силу */
[hidden] { display: none !important; }

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  margin: 0;
  font-weight: var(--weight-display);
  color: var(--color-ink);
  text-wrap: balance;
}

.h3 {
  font-family: var(--font-display);
  font-size: var(--card-title-size);
  font-weight: var(--card-title-weight);
  line-height: var(--card-title-line-height);
  color: var(--color-ink);
}

p { margin: 0; font-size: var(--p-size); line-height: var(--p-line-height); font-weight: var(--p-weight); text-wrap: pretty; }
.p-small, p.p-small { font-size: var(--p-small-size); }
.p-bold {
  font-family: var(--font-body);
  font-size: var(--p-size);
  line-height: var(--p-line-height);
  font-weight: var(--p-bold-weight);
  letter-spacing: 0;
  text-transform: none;
  text-wrap: pretty;
}
ul, ol { margin: 0; padding: 0; list-style: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

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

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  top: 0; left: 0;
  z-index: 200;
  padding: 12px 20px;
  background: var(--color-bg-dark);
  color: #fff;
  text-decoration: none;
  transform: translateY(-120%);
  transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* ---------- Иконки Tabler (спрайт вшит в страницу) ---------- */

.icon {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--sm { width: 18px; height: 18px; stroke-width: 1.75; }
.icon--lg { width: 32px; height: 32px; stroke-width: 1.25; }
/* MAX — контурный знак, поэтому наследует ту же толщину линии, что и
   соседние иконки Tabler. */
.icon--brand-max { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* ---------- Контейнер и заголовки секций ---------- */

/* Поля секций совпадают с полями первого экрана: на 1920 это 160px слева
   и справа, а содержимое не шире 1600px. */
.wrap {
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--space-xl); }
.section--soft { background: var(--color-bg-soft); }
.section--mute { background: var(--color-bg-mute); }

/* Светлая секция с фирменным паттерном — те же окружности, что на первом
   экране и в полноэкранном меню, только цветом акцента и на пределе
   видимости. Перелив — маской, как у меню: двигается маска, а не фон,
   поэтому сам паттерн стоит на месте и рябь не появляется. */
.section--pattern {
  position: relative;
  isolation: isolate;
  background: var(--color-bg-soft);
}
.section--pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23ad8d6c' stroke-width='1' vector-effect='non-scaling-stroke'%3E%3Ccircle cx='0' cy='0' r='98.84'/%3E%3Ccircle cx='200' cy='0' r='98.84'/%3E%3Ccircle cx='0' cy='200' r='98.84'/%3E%3Ccircle cx='200' cy='200' r='98.84'/%3E%3Ccircle cx='100' cy='100' r='98.84'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 10.42vw 10.42vw;
  opacity: 0.13;
  -webkit-mask-image: linear-gradient(100deg, transparent 18%, #000 50%, transparent 82%);
          mask-image: linear-gradient(100deg, transparent 18%, #000 50%, transparent 82%);
  -webkit-mask-size: 200% 100%;
          mask-size: 200% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  animation: section-sheen 9s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes section-sheen {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to   { -webkit-mask-position: 0 0;    mask-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .section--pattern::before { animation: none; }
}
.section--dark {
  background: var(--color-bg-dark);
  color: var(--color-muted-dark);
}
.section--dark h2,
.section--dark h3 { color: var(--color-text-dark); }

/* Предохранитель для типографики: неразрывные пробелы склеивают короткие
   слова с соседними («к\00a0сотрудничеству»), и на узком экране такая пара
   не должна выталкивать страницу вбок. Браузер разорвёт её только если она
   действительно не влезает в колонку. */
p, li, dd, dt, h1, h2, h3, h4, h5, h6, blockquote, figcaption, td, th {
  overflow-wrap: break-word;
}

.section__head { max-width: 832px; margin-bottom: 56px; }

.section__title {
  font-size: 48px;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

/* Ступени заголовка секции — целыми числами, как и вся сетка */
@media (max-width: 1200px) { .section__title { font-size: 40px; } }
@media (max-width: 900px)  { .section__title { font-size: 34px; } .section__head { margin-bottom: 40px; } }
@media (max-width: 560px)  { .section__title { font-size: 28px; } }

.section__lead, .p-large {
  margin-top: 16px;
  max-width: 704px;
  font-size: var(--lead-size);
  line-height: var(--lead-line-height);
  color: var(--color-muted);
}
p.p-large { font-size: var(--p-large-size); line-height: var(--lead-line-height); font-weight: var(--weight-supporting-text); letter-spacing: var(--p-large-letter-spacing); }
.section--dark .section__lead, .section--dark .p-large { color: var(--color-muted-dark); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* ---------- Кнопки ---------- */

.btn-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 49px;
  padding: 0 24px;
  border: 1.2px solid var(--color-line-soft);
  border-radius: var(--radius-btn);
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
/* ширина по тексту — «Документы» в блоке о компании, поля 29 */
.btn-line--auto { width: auto; padding-inline: 29px; }
/* Наведение — «USM — 2 hover»: обводка не меняется, текст #956e45 */
.btn-line:hover,
.btn-line:focus-visible {
  /* цвет текста не меняется — единый ховер ниже */
  border-color: rgba(165, 131, 96, 0.5);   /* #a58360 на 50% */
}


.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-size: var(--p-size);
  line-height: var(--p-line-height);
  font-weight: var(--p-weight);
  /* Кнопки используют обычный регистр по всей дизайн-системе. */
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              opacity var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.btn--primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.btn--primary:hover,
.btn--primary:focus-visible { background: var(--color-accent-ink); border-color: var(--color-accent-ink); }

.btn--ghost {
  border-color: var(--color-line);
  color: var(--color-ink);
  background: transparent;
}
.btn--ghost:hover,
.btn--ghost:focus-visible { border-color: var(--color-ink); }

.btn--on-dark {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  /* приглушена прозрачностью, а не цветом: при наведении просто доходит
     до полной, без подложки под текстом */
  opacity: 0.8;
}
.btn--on-dark:hover,
.btn--on-dark:focus-visible { opacity: 1; }

/* Вторичная кнопка на тёмной подложке. */
.btn--ghost.btn--on-dark {
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--color-text-dark);
  opacity: 1;
}
.btn--ghost.btn--on-dark:hover,
.btn--ghost.btn--on-dark:focus-visible {
  border-color: var(--color-accent-strong);
  color: var(--color-accent);
}

.btn[disabled] { opacity: 0.55; cursor: default; }

/* На очень узких экранах длинная надпись вроде «Предложить сотрудничество»
   не влезает в строку — разрешаем перенос вместо выезда за край. */
@media (max-width: 400px) {
  .btn {
    white-space: normal;
    text-align: center;
    padding: 12px 20px;
  }
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-accent);
}
.link-arrow .icon { transition: transform var(--dur-fast) var(--ease); }
.link-arrow:hover .icon,
.link-arrow:focus-visible .icon { transform: translate(3px, -3px); }

/* ---------- Логотип USM ---------- */
/* Набран тем же шрифтом, что и весь сайт: три буквы «ЮСМ» 28px и
   расшифровка в две строки 9px, зазор 15. Один и тот же логотип в шапке,
   на мобильном и в подвале — размеры не меняются по ширине экрана. */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  font-family: var(--font-display);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.logo__mark {
  font-size: 28px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-accent);
  text-transform: uppercase;
}

/* Расшифровка центрируется рядом с «ЮСМ» через align-items у логотипа. */
.logo__desc {
  position: relative;
  top: -0.5px;
  left: -2px;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--color-lead);
}

.site-header--dark .logo__desc { color: rgba(255, 255, 255, 0.72); }
/* наведение на логотип — расшифровка окрашивается в акцент */
.logo__desc { transition: color var(--dur-fast) var(--ease); }
a.logo:hover .logo__desc,
a.logo:focus-visible .logo__desc { color: var(--color-accent); }


/* ---------- Шапка ---------- */

/* Шапка — часть страницы: при прокрутке вниз уезжает вместе с ней.
   При прокрутке вверх (js/motion.js) полоса .site-header__inner
   закрепляется сверху (.is-stuck) и выезжает (.is-shown); сама коробка
   .site-header остаётся в потоке, раскладка не прыгает. */
.site-header {
  position: relative;
  /* выше полноэкранного меню: бургер сам служит крестиком, поэтому
     шапка остаётся видимой поверх меню */
  z-index: 100;
  /* Коробка в потоке — постоянной высоты, и менять её нельзя: sticky-шапка
     занимает место в потоке, поэтому её сжатие укорачивало бы документ.
     Браузер компенсировал бы это прокруткой (scroll anchoring) и сам
     возвращал бы страницу обратно за порог is-stuck — шапка дребезжала.
     Поэтому подбирается только внутренняя полоса, раскладка не трогается. */
  height: var(--header-h);
  color: var(--color-ink);
  transition: color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
/* Подвал показался снизу — шапка уезжает вверх, чтобы её логотип
   не наезжал на логотип подвала (js/motion.js ставит .is-away).
   При открытом меню шапка нужна — там её не прячем. */
.site-header.is-stuck .site-header__inner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transform: translateY(-100%);
}
.site-header.is-stuck.is-shown .site-header__inner { transform: none; }
.site-header.is-away .site-header__inner { transform: translateY(-100%); }
.is-menu-open .site-header .site-header__inner { transform: none; }

/* При прокрутке фон становится сплошным, высота остаётся неизменной. */
.site-header__inner {
  position: relative;
  height: var(--header-h);
  background: transparent;
  transition: height var(--dur-base) var(--ease),
              background var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease);
}
.site-header.is-stuck .site-header__inner {
  height: var(--header-h-stuck);
  background: var(--color-bg);
}

/* На первом экране страницы партнёра шапка лежит поверх тёмного hero.
   После начала прокрутки возвращается обычная белая компактная шапка. */
.partner-page-body .site-header:not(.is-stuck) { color: #fff; }
.partner-page-body .site-header:not(.is-stuck) .site-header__inner,
.obj-page-body .site-header:not(.is-stuck) .site-header__inner { background: transparent; }
.partner-page-body .site-header:not(.is-stuck) .logo__desc,
.partner-page-body .site-header:not(.is-stuck) .nav__link,
.partner-page-body .site-header:not(.is-stuck) .site-header__phone,
.partner-page-body .site-header:not(.is-stuck) .site-header__burger { color: rgba(255, 255, 255, 0.86); }
.partner-page-body .site-header:not(.is-stuck) a.logo:hover .logo__desc,
.partner-page-body .site-header:not(.is-stuck) a.logo:focus-visible .logo__desc { color: var(--color-accent); }
.partner-page-body .site-header:not(.is-stuck) .site-header__cta { border-color: rgba(255, 255, 255, 0.38); color: #fff; }
.partner-page .breadcrumbs,
.partner-page .breadcrumbs [aria-current] { color: rgba(255, 255, 255, 0.72); }
.partner-page .breadcrumbs a { color: rgba(255, 255, 255, 0.72); }
.partner-page .breadcrumbs a:hover,
.partner-page .breadcrumbs a:focus-visible { color: #fff; }

/* Раскладка по макету: логотип на 160, меню на 493, правая группа
   прижата к полю 160. Бургер — крайний справа, и крестик закрытия
   полноэкранного меню встаёт ровно на его место. */
/* Полоса шапки тянется на всю ширину страницы (там же живёт фон
   залипающей шапки), а контент внутри — в контейнере не шире 1920px
   (1600 + поля, как у .wrap): ниже 1920px ничего не меняется,
   шире — контент центрируется. */
.site-header__content {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Меню стоит по центру свободного места: auto-поля с обеих сторон делят
   зазор между логотипом и правой группой поровну. padding-inline держит
   минимальный воздух, когда места мало, — без него длинные названия
   упираются в телефон. */
.site-header .nav { margin-inline: auto; padding-inline: 40px; }

.site-header__right {
  display: flex;
  align-items: center;
  margin-left: auto;
}
/* При видимом меню его auto-поля уже забирают всё место — третье auto
   у правой группы сдвинуло бы меню влево от центра. */
.site-header .nav + .site-header__right { margin-left: 0; }

.site-header__right .site-header__cta { margin-left: 40px; }
.site-header__right .burger { margin-left: 24px; }

@media (max-width: 1600px) {
  .site-header .nav { padding-inline: 28px; }
  .site-header__right .site-header__cta { margin-left: 24px; }
}

/* 1920 и шире — как в макете «USM — 2»: логотип, меню, телефон, кнопка
   и бургер стоят в строку 1600px на равных промежутках (space-between).
   Правая группа растворяется в общей строке, чтобы промежутки делились
   поровну между всеми пятью элементами. */
@media (min-width: 1601px) {
  .site-header__content { justify-content: space-between; }
  .site-header .nav { margin-inline: 0; padding-inline: 0; }
  .site-header__right { display: contents; }
  .site-header__right .site-header__cta,
  .site-header__right .burger { margin-left: 0; }
}

.site-header__phone {
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.site-header__phone:hover { color: var(--color-accent); }

/* ---------- Контакты под номером телефона ----------
   Наведение или фокус на номере раскрывает карточку со всеми контактами,
   как на usm92.ru. Только CSS: :hover для мыши, :focus-within для
   клавиатуры. Вид — как у выпадающих списков меню. */

.contacts { position: relative; }

.contacts__drop {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 10;
  width: 300px;
  margin-top: 16px;
  padding: 20px 24px;
  background: #fff;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px -20px rgba(20, 21, 26, 0.38);
  color: var(--color-ink);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -6px);
  /* закрывается с задержкой — мышь успевает перейти с номера на карточку */
  transition: opacity var(--dur-fast) var(--ease) 0.14s,
              transform var(--dur-fast) var(--ease) 0.14s,
              visibility 0s linear calc(var(--dur-fast) + 0.14s);
}
/* мостик над карточкой: зазор 16px не должен обрывать наведение */
.contacts__drop::before {
  content: "";
  position: absolute;
  inset: -17px 0 auto;
  height: 17px;
}
.contacts:hover .contacts__drop,
.contacts:focus-within .contacts__drop {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.contacts__list {
  display: grid;
  gap: 14px;
  font-size: 15px;
  line-height: 1.4;
}
.contacts__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.contacts__list .contacts__hours { padding-left: 28px; }
.contacts__list .icon { margin-top: 1px; color: var(--color-accent); }
.contacts__list a {
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.contacts__list a:hover,
.contacts__list a:focus-visible { color: var(--color-accent); }
.contacts__list span { color: var(--color-lead); }
.contacts__list li:last-child span { opacity: 0.5; }

.contacts__foot {
  display: flex;
  align-items: center;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-soft);
}
.contacts__social { display: flex; gap: 6px; }
.contacts__social a,
.contacts__social-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1.2px solid var(--color-line-soft);
  border-radius: var(--radius-btn);
  color: var(--color-ink);
  transition: color var(--dur-fast) var(--ease);
}
.contacts__social .icon { width: 20px; height: 20px; }
.contacts__social a:hover,
.contacts__social a:focus-visible { color: var(--color-accent-hover); }

/* На узком экране номер остаётся доступен — иконкой рядом с бургером */
.site-header__phone-btn {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--color-ink);   /* как иконка заявки рядом */
}

/* Контурная кнопка из макета «USM — 2»: обводка 1.2px цветом текста
   на 20%, отступы 8/16. */
.site-header__cta {
  min-height: 38px;
  padding: 7px 16px 8px;
  justify-content: center;
  border: 1.2px solid var(--color-line-soft);
  border-radius: var(--radius-btn);
  font-size: 15px;
  line-height: 21px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-ink);
  background: transparent;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
/* Наведение по макету «USM — 2 hover»: обводка та же, текст теплеет */
.site-header__cta:hover,
.site-header__cta:focus-visible {
  /* цвет текста не меняется */
  border-color: rgba(165, 131, 96, 0.5);   /* #a58360 на 50%, как у .btn-line */
}

/* ---------- Бургер ---------- */

.burger {
  position: relative;
  width: 24px;
  height: 24px;
  flex: none;
  padding: 0;
}
/* Кликабельная зона больше иконки, но на сетку не влияет */
.burger::before { content: ""; position: absolute; inset: -12px; }

.burger span {
  position: absolute;
  left: 4px;
  width: 16px;
  height: 2px;
  background: currentColor;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease), top var(--dur-fast) var(--ease);
}
.burger span:nth-child(1) { top: 8px; }
.burger span:nth-child(2) { top: 14px; }
.burger span:nth-child(3) { display: none; }

.burger[aria-expanded="true"] span:nth-child(1) { top: 11px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { top: 11px; transform: rotate(-45deg); }

/* ---------- Навигация с выпадающими списками ---------- */

.nav { position: relative; }

.nav__list {
  display: flex;
  align-items: center;
  gap: 56px;
}

@media (max-width: 1600px) { .nav__list { gap: 28px; } }
@media (max-width: 1400px) { .nav__list { gap: 20px; } }

.nav__item { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 0;
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
.nav__link:hover,
.nav__link:focus-visible,
.nav__item.is-open > .nav__link { color: var(--color-accent); }

.nav__link[aria-expanded] .icon { transition: transform var(--dur-fast) var(--ease); }
.nav__item.is-open > .nav__link .icon { transform: rotate(180deg); }

.nav__link[aria-current="page"] { color: var(--color-accent); }

/* Само выпадающее меню */
.nav__drop {
  position: absolute;
  top: 100%;
  left: -20px;
  z-index: 10;
  min-width: 272px;
  margin-top: 12px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px -20px rgba(20, 21, 26, 0.38);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              visibility 0s linear var(--dur-fast);
}
.nav__item.is-open > .nav__drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
/* у последних пунктов список прижимается к правому краю, чтобы не уезжал за экран */
.nav__item--end .nav__drop { left: auto; right: -20px; }

/* Иконка держится первой строки: у двухстрочных пунктов
   центрирование по всему блоку опускало её к середине. */
.nav__drop a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 15px;
  line-height: 1.35;
  text-decoration: none;
  color: var(--color-text);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav__drop a:hover,
.nav__drop a:focus-visible { background: #f8f5f2; color: var(--color-accent); }
.nav__drop .icon {
  color: var(--color-accent);
  flex: 0 0 auto;
  /* Геометрически центр первой строки — это (line-height 20px − иконка 18px) / 2,
     то есть 1px. Но оптически иконка при этом сидит низко: её штрихи тяжелее
     строчных букв, и глаз просит на пиксель выше. Поэтому 0, а не 1. */
  margin-top: 0;
}

.nav__drop-note {
  padding: 8px 14px 4px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ---------- Полноэкранное меню (как на usm92) ---------- */

.site-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--menu-bg);
  color: var(--menu-text);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s var(--ease), visibility 0s linear 0.7s;
}

/* Та же решётка, что на первом экране, но в цвет акцента и почти на грани
   видимости. Перелив — как у года во втором блоке, только там волна шла
   заливкой по глифам, а здесь подсвечивать надо сам узор, поэтому волна
   сделана маской: она проявляет и гасит решётку, а не красит её. */
.site-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23ad8d6c' stroke-width='1' vector-effect='non-scaling-stroke'%3E%3Ccircle cx='0' cy='0' r='98.84'/%3E%3Ccircle cx='200' cy='0' r='98.84'/%3E%3Ccircle cx='0' cy='200' r='98.84'/%3E%3Ccircle cx='200' cy='200' r='98.84'/%3E%3Ccircle cx='100' cy='100' r='98.84'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 10.42vw 10.42vw;
  opacity: 0.16;
  -webkit-mask-image: linear-gradient(100deg, transparent 18%, #000 50%, transparent 82%);
          mask-image: linear-gradient(100deg, transparent 18%, #000 50%, transparent 82%);
  -webkit-mask-size: 200% 100%;
          mask-size: 200% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  animation: menu-sheen 4s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes menu-sheen {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to   { -webkit-mask-position: 0 0;    mask-position: 0 0; }
}

/* содержимое меню поверх решётки */
.site-menu__content { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .site-menu::before { animation: none; }
}

.site-menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s var(--ease);
}

.site-menu__content { display: flex; height: 100%; }

/* Левое поле — ровно то же, что у логотипа в шапке (--gutter),
   иначе список визуально «съезжает» относительно шапки */
.site-menu__side {
  flex: 1 1 66.3%;
  display: flex;
  /* Не align-items: center, а auto-поля у содержимого. Центрирование
     флексом при нехватке места срезает верх и делает его недоступным
     для прокрутки — с auto-полями содержимое просто прижимается к верху. */
  align-items: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-block: calc(var(--header-h) + 32px) 0;   /* воздух под шапкой, когда меню выше экрана */
  padding-inline: var(--gutter) 50px;
  min-width: 0;
  /* Шапка поверх меню прозрачная, и при прокрутке пункты проезжали бы
     прямо через логотип. Растворяем содержимое на высоте шапки —
     в непрокрученном состоянии там и так пусто, так что видно не будет. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent calc(var(--header-h) * 0.75), #000 calc(var(--header-h) + 32px));
          mask-image: linear-gradient(to bottom, transparent 0, transparent calc(var(--header-h) * 0.75), #000 calc(var(--header-h) + 32px));
}

.site-menu__cols {
  display: flex;
  align-items: stretch;
  gap: 39px;
  width: 100%;
  margin-block: auto;
  /* нижний воздух при прокрутке, иначе последняя строка липнет к краю */
  padding-bottom: var(--space-lg);
}
.site-menu__mobile-columns { display: none; }

/* Раскладка колонками, а не флексом: подпункты стоят столбиком, поэтому
   список стал вдвое длиннее и в одну колонку уже не помещается. Разделы
   раскидываются по колонкам сами, break-inside держит раздел целиком. */
.site-menu__list {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  column-count: 2;
  column-gap: 56px;
}
.site-menu__list > li {
  break-inside: avoid;
  /* 20 → 30 (+50%) → 39 (+ещё 30%) */
  margin-bottom: 39px;
}
/* Последний отступ в каждой колонке лишний: он растянул бы блок ниже
   текста и сбил бы вертикальное центрирование меню. */
.site-menu__list > li:last-child { margin-bottom: 0; }

/* Колонка уже 250 px начинает рвать длинные названия разделов на две
   строки, поэтому сначала ужимаем промежуток, а потом возвращаемся
   к одной колонке. */
@media (max-width: 1600px) { .site-menu__list { column-gap: 40px; } }
/* до 1080px список держит две колонки — дальше меню переходит на две стопки */

.site-menu__list > li > a {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.35;
  font-weight: 400;
  text-decoration: none;
  color: var(--menu-text);
  transition: color var(--dur-fast) var(--ease);
}
.site-menu__list > li > a:hover,
.site-menu__list > li > a:focus-visible,
.site-menu__list > li > a[aria-current="page"] { color: var(--menu-accent); }

.site-menu__sub {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.site-menu__sub a {
  font-size: 14px;
  color: var(--menu-minor);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.site-menu__sub a:hover,
.site-menu__sub a:focus-visible { color: var(--menu-accent); }

/* Разделители убраны — колонки держатся на отступах */

/* «Ещё» живёт в третьем столбике и выглядит как раздел списка:
   те же кегль и цвет, что у пунктов первого уровня. */
.site-menu__more-title {
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.35;
  font-weight: 400;
  text-decoration: none;
  color: var(--menu-text);
  transition: color var(--dur-fast) var(--ease);
}
.site-menu__more-title:hover,
.site-menu__more-title:focus-visible { color: var(--menu-accent); }

.site-menu__aside {
  flex: 0 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* тот же шаг, что между разделами слева (margin-bottom 39px) */
  gap: 39px;
}

/* Метрика и набор — как у обычной кнопки сайта (.btn): 42 в высоту,
   14/14 капителью с разрядкой. Своими остаются только цвета: на тёмном
   фоне меню нужен контурный вариант. */
.site-menu__cta {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 24px;
  border: 1px solid var(--menu-border);
  border-radius: var(--radius-btn);
  font-size: 15px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--menu-minor);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.site-menu__cta:hover,
.site-menu__cta:focus-visible { color: var(--menu-text); border-color: var(--menu-text); }

.site-menu__link,
.site-menu__minor a,
.site-menu__minor span {
  font-size: 14px;   /* как подпункты соседних колонок (.site-menu__sub) */
  line-height: 1.35;
  color: var(--menu-minor);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.site-menu__link:hover,
.site-menu__link:focus-visible,
.site-menu__minor a:hover,
.site-menu__minor a:focus-visible { color: var(--menu-accent); }



.site-menu__minor { display: flex; flex-direction: column; gap: 10px; }
.site-menu__minor span { opacity: 0.5; }

/* Мессенджеры — те же линейные иконки Tabler, белым. Кликабельная зона
   44px, а сама иконка стоит по левому краю колонки, вровень с текстом. */
.site-menu__social { display: flex; gap: 8px; margin: 16px 0 0 -10px; }
.site-menu__social a,
.site-menu__social-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: #fff;
  transition: color var(--dur-fast) var(--ease);
}
.site-menu__social a:hover,
.site-menu__social a:focus-visible { color: var(--menu-accent); }
/* Тот же отступ от заголовка, что у подпунктов раздела, — оба блока
   в третьем столбике набраны по одной схеме. */
.site-menu__more-title + .site-menu__minor { margin-top: 12px; }

.site-menu__media { flex: 0 0 33.7%; min-width: 0; overflow: hidden; }

/* Статичная фотография с естественным светом, без анимированных наложений.
   Появление — плавным проявлением всего блока. */
.site-menu__media {
  opacity: 0;
  transition: opacity 1s var(--ease-img);
}
.site-menu.is-open .site-menu__media { opacity: 1; }

.site-menu__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 75% center;
}

/* Отдельной кнопки закрытия нет: бургер сам превращается в крестик и
   остаётся на своём месте в шапке. Двух иконок больше не существует,
   значит и разъехаться нечему.

   Пока меню открыто, в шапке видны только логотип и бургер: остальное
   увело бы внимание, а на фоне фотографии читалось бы плохо. */
/* Меню блокирует прокрутку через overflow: hidden на html — при этом
   sticky-шапка теряет скролл-порт и падает в статическую позицию, то есть
   улетает к началу документа вместе с логотипом и крестиком. Пока меню
   открыто, прикалываем её к экрану. Правый край — по --sb (ширина полосы
   прокрутки, которую menu.js компенсирует паддингом), иначе бургер
   дёрнулся бы вбок в момент открытия. */
/* Коробку шапки НЕ вынимаем из потока (раньше было position: fixed) —
   иначе страница под меню в момент открытия подпрыгивала на высоту шапки.
   К экрану прикалывается только внутренняя полоса. */
.is-menu-open .site-header {
  color: var(--menu-text);
  background: transparent;
}
.is-menu-open .site-header .site-header__inner {
  position: fixed;
  top: 0;
  left: 0;
  right: var(--sb, 0px);
}
.is-menu-open .site-header .site-header__inner,
.is-menu-open .site-header.is-stuck .site-header__inner { background: transparent; }
.is-menu-open .site-header .logo__mark { color: var(--menu-accent); }
.is-menu-open .site-header .logo__desc { color: rgba(255, 255, 255, 0.75); }
.is-menu-open .site-header .site-header__inner::after { opacity: 0; }

/* Крестик поверх светлого фасада, без сплошной заливки шапки. */
@media (min-width: 1101px) {
  html body.is-menu-open .site-header:not(.is-toned) .burger,
  html body.is-menu-open .site-header .burger { color: var(--color-ink); }
}

.is-menu-open .site-header .nav,
.is-menu-open .contacts,
.is-menu-open .site-header__phone {
  opacity: 0;
  pointer-events: none;
}

/* «Отправить заявку» в открытом меню — кнопка самой шапки: она встаёт
   в верхнюю строку напротив логотипа, над правой колонкой меню.
   Левый край колонки меряет menu.js (--menu-cta-left); без него кнопка
   остаётся на своём обычном месте. Внутри меню кнопки нет, поэтому
   маска прокрутки меню её не гасит, а шапка не перекрывает клики.
   Вид — как у контурной кнопки меню. */
@media (min-width: 761px) {
  .is-menu-open .site-header__cta {
    position: absolute;
    top: 50%;
    left: var(--menu-cta-left, auto);
    margin-left: 0;
    transform: translateY(-50%);
  }
}
/* в открытом меню — та же кнопка, что в шапке (размер, шрифт, без капса),
   меняются только цвета под тёмный фон */
.is-menu-open .site-header__cta {
  width: auto;
  border-color: var(--menu-border);
  color: var(--menu-minor);
  background: transparent;
}
.is-menu-open .site-header__cta:hover,
.is-menu-open .site-header__cta:focus-visible {
  color: var(--menu-text);
  border-color: var(--menu-text);
  background: transparent;
}

/* На телефоне кнопки в шапке нет (см. адаптив шапки, 620px), но в
   открытом меню она нужна — встаёт справа от логотипа, перед крестиком,
   как в подвале. */
@media (max-width: 620px) {
  .is-menu-open .site-header__cta {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 16px;
    font-size: 11px;
    letter-spacing: 0.03em;
  }
  .is-menu-open .site-header__right .burger { margin-left: 16px; }
  .is-menu-open .contacts { display: none; }
}

@media (max-width: 1100px) {
  .site-menu__media { display: none; }
  .site-menu__side { flex-basis: 100%; padding-inline: var(--gutter); }
}

/* Когда обычная навигация уже скрыта, полноэкранное меню повторяет
   двухстопочную структуру подвала: слева три раздела, справа — дома
   и контакты. Так промежуточные планшетные ширины не получают случайные
   колонки из desktop-варианта. */
@media (max-width: 1080px) {
  .site-menu__cols { display: block; }
  .site-menu__cols > .site-menu__list,
  .site-menu__cols > .site-menu__aside { display: none; }
  .site-menu__mobile-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    align-items: start;
  }
  .site-menu__mobile-stack { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
  .site-menu__mobile-columns .site-menu__list { display: block; column-count: 1; margin: 0; }
  .site-menu__mobile-columns .site-menu__aside { display: block; flex-basis: auto; padding-left: 0; }
}

/* На планшете CTA остаётся в обычной правой группе шапки. Позиционирование
   над desktop-колонкой здесь уже неприменимо: она заменена двумя стопками. */
@media (min-width: 761px) and (max-width: 1080px) {
  .is-menu-open .site-header__cta {
    position: static;
    top: auto;
    left: auto;
    margin-left: 24px;
    transform: none;
  }
}

@media (max-width: 760px) {
  .site-menu::before { background-size: 20.84vw 20.84vw; }
  .site-menu__side {
    padding-block: calc(var(--header-h) + 48px) 0;
  }
  .site-menu__cols { display: block; }
  .site-menu__cols > .site-menu__list,
  .site-menu__cols > .site-menu__aside { display: none; }
  .site-menu__mobile-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
  .site-menu__mobile-stack { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
  .site-menu__mobile-columns .site-menu__list { display: block; column-count: 1; margin: 0; }
  .site-menu__mobile-columns .site-menu__list > li { margin-bottom: 24px; }
  .site-menu__mobile-columns .site-menu__list > li:last-child { margin-bottom: 0; }
  .site-menu__mobile-columns .site-menu__list > li > a,
  .site-menu__mobile-columns .site-menu__more-title { font-size: 17px; line-height: 1.2; }
  .site-menu__mobile-stack:nth-child(2) .site-menu__list > li > a {
    display: block;
    line-height: 1.2 !important;
  }
  .site-menu__mobile-columns .site-menu__sub { gap: 8px; margin-top: 10px; }
  .site-menu__mobile-columns .site-menu__minor { gap: 8px; }
  .site-menu__mobile-columns .site-menu__sub a,
  .site-menu__mobile-columns .site-menu__minor a,
  .site-menu__mobile-columns .site-menu__minor span { font-size: 13px; line-height: 1.35; }
  .site-menu__mobile-columns .site-menu__aside { display: block; flex-basis: auto; padding-left: 0; }
  .site-menu__mobile-columns .site-menu__social {
    width: 100%;
    margin: 16px 0 0;
    justify-content: space-between;
    gap: 0;
  }
  .site-menu__mobile-columns .site-menu__social a,
  .site-menu__mobile-columns .site-menu__social-icon { width: 36px; height: 36px; }
}

/* ---------- Появление картинок (по мотивам sminex) ---------- */

.img-reveal {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--color-bg-mute);
}

/* Яндекс.Браузер при наведении на картинку показывает поверх неё свою
   панель (перевод, поиск по изображению). Убираем её двумя способами:
   картинка перестаёт быть целью указателя, а сверху лежит прозрачный слой.
   Клики при этом доходят до карточки-ссылки, она родитель. */
.img-reveal > img { pointer-events: none; }

.img-reveal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}
.img-reveal > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Масштаб и сдвиг — два разных свойства. Появление и наведение плавно
   меняют масштаб (transform, --rs), параллакс пишет сдвиг (translate,
   --py) без перехода. Раньше оба сидели в одном transform: пока шло
   появление, сдвиг тянулся за прокруткой с опозданием в 1,25 с, а когда
   переход обнулялся, кадр рывком догонял — фото «дёргались». */
.js .img-reveal > img {
  --rs: 1.14;
  --py: 0px;
  --rt: 1.25s;
  translate: 0 var(--py);
  transform: scale(var(--rs));
  opacity: 0;
  transition: transform var(--rt) var(--ease-img), opacity 0.9s var(--ease-img);
}
.js .img-reveal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-bg-mute);
  transform-origin: bottom center;
  transform: scaleY(1);
  transition: transform 1.1s var(--ease-img);
}
.js .img-reveal.is-in > img { --rs: 1; opacity: 1; }

/* Параллакс фото при прокрутке — на всех фото сайта (атрибут
   data-parallax на рамке). Основа — sminex.com/frunzenskiy, ход по просьбе
   заказчика на 20% сильнее: картинка на 20% выше рамки (по 10% запаса
   сверху и снизу) и за время, пока рамка проходит экран снизу доверху,
   смещается на 16% высоты рамки (±8% — в запас укладывается). Сдвиг пишет
   js/motion.js в --py. Рамке нужны свой размер (aspect-ratio или
   явная высота), position и overflow: hidden. */
[data-parallax] > img {
  position: absolute;
  left: 0;
  top: -10%;
  width: 100%;
  height: 120%;
  object-fit: cover;
}
/* у рамок без появления (.img-reveal) сдвиг — единственный трансформ */
.js [data-parallax]:not(.img-reveal) > img { translate: 0 var(--py, 0px); }
.js img[data-parallax] { translate: 0 var(--py, 0px); }
.js .img-reveal.is-in::after { transform: scaleY(0); }

/* Плавное появление текстовых блоков.
   Прячем только при работающем JS — иначе текст пропадёт у тех,
   у кого скрипты отключены, и у краулеров без выполнения JS. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .85s ease-out, transform .95s cubic-bezier(0.16, 1, 0.3, 1);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Модалка «Отправить заявку» ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: var(--space-sm);
  /* та же поправка на полосу прокрутки, иначе центр попапа сместится */
  padding-right: calc(var(--space-sm) + var(--sb, 0px));
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease), visibility 0s linear var(--dur-base);
}
.modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-base) var(--ease);
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  /* Тёплый графит без размытия: размытие внутри плавно проявляющегося
     окна Chrome дорисовывает только в конце появления — фон сначала
     темнел, а через секунду вдобавок расплывался. */
  background: rgba(52, 50, 49, 0.6);
}

.modal__dialog {
  position: relative;
  width: min(544px, 100%);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  padding: 32px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 40px 90px -40px rgba(52, 50, 49, 0.6);
  transform: translateY(16px);
  transition: transform var(--dur-base) var(--ease);
}
.modal.is-open .modal__dialog { transform: none; }

.modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--color-muted);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.modal__close:hover { background: var(--color-bg-soft); color: var(--color-ink); }

.modal__title {
  font-size: 26px;
  line-height: 32px;
  font-weight: 450;
}

/* На невысоких экранах (13" ноутбуки) поджимаем ещё немного,
   чтобы попап помещался целиком и не приходилось скроллить. */
/* На невысоких экранах (13\" ноутбуки) попап должен помещаться целиком:
   убираем подводку и слегка поджимаем, не трогая сами поля. */
@media (max-height: 880px) {
  .modal__dialog { padding: 28px 32px 32px; }
  .modal .form { margin-top: 20px; gap: 14px; }
  .modal textarea.field__control { min-height: 72px; }
}

@media (max-height: 760px) {
  .modal .form { gap: 12px; }
  .modal .field__control { min-height: 46px; padding: 11px 14px; }
  .modal .form__captcha-refresh { width: 46px; height: 46px; }
  .modal .form__submit { min-height: 46px; }
  .modal textarea.field__control { min-height: 60px; }
}

/* ---------- Форма ---------- */

.form { margin-top: 28px; display: grid; gap: 20px; }

.field { display: grid; gap: 4px; }

.field__label {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-text);
}

.field__control {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  font: inherit;
  font-size: 16px;
  line-height: 22px;
  color: var(--color-ink);
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-btn);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field__control::placeholder { color: #9a9a98; }

/* Рамка не толстеет при фокусе — вместо этого добавляется внутренняя тень,
   поэтому поле не «прыгает» на пиксель. */
.field__control:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

textarea.field__control { min-height: 96px; resize: vertical; line-height: 24px; }

.field--error .field__control { border-color: #c0483c; background: #fdf7f6; }
.field--error .field__control:focus { box-shadow: inset 0 0 0 1px #c0483c; }
.field__error {
  display: none;
  font-size: 13px;
  line-height: 18px;
  color: #c0483c;
}
.field--error .field__error { display: block; }

/* honeypot — скрыт от людей, доступен ботам */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__captcha {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: end;
}
.form__captcha .field { min-width: 0; }
.form__captcha-refresh {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-btn);
  color: var(--color-muted);
  background: #fff;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.form__captcha-refresh:hover { color: var(--color-accent); border-color: var(--color-accent); }
.form__captcha--smart {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.form__captcha--smart .smart-captcha { min-height: 0; }

/* ---------- Согласие: свой чекбокс, а не системный ---------- */

.form__consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-block: 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text);
  cursor: pointer;
}
.form__consent a {
  color: var(--color-accent);
  text-decoration: none;
}
.form__consent a:hover,
.form__consent a:focus-visible { color: var(--color-accent-ink); }

.form__captcha-inline {
  color: var(--color-text);
}

.form__consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 4px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

/* Галочка нарисована уголком из двух рамок — без картинок и шрифтов */
.form__consent input[type="checkbox"]::after {
  content: "";
  width: 10px;
  height: 6px;
  margin-top: -2px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.form__consent input[type="checkbox"]:checked {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.form__consent input[type="checkbox"]:checked::after { opacity: 1; }
.form__consent input[type="checkbox"]:hover { border-color: var(--color-accent); }
.form__consent--error input[type="checkbox"] {
  border-color: #c0483c;
  background: #fff7f5;
  box-shadow: 0 0 0 3px rgb(192 72 60 / 12%);
}
.form__consent--error span { color: #c0483c; }

.form__submit { width: 100%; }
.form__submit, .btn--large {
  min-height: 52px;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  text-transform: none;
}

.form__status {
  font-size: 15px;
  line-height: 21px;
}
/* Пустой статус не занимает места — под кнопкой не остаётся пустоты */
.form__status:empty { display: none; }
.form__status--error { color: #c0483c; }
.form__status--ok { color: #3d7a4f; }

/* ---------- Экран «заявка отправлена» ---------- */

.form-done {
  display: grid;
  justify-items: start;
  gap: 14px;
  padding: 36px 0 8px;
}
.form-done[hidden] { display: none; }

.form-done__mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent);
}
.form-done__mark .icon { width: 28px; height: 28px; }

.form-done__title {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.2;
  color: var(--color-ink);
}
.form-done__text { font-size: 15px; line-height: 1.5; color: var(--color-muted); }
/* Виден только в превью-сборке (body[data-demo]), в бою скрыт */
[data-demo-only] { display: none; }
body[data-demo] [data-demo-only] { display: block; }

.form-done__note {
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-accent-ink);
  padding: 10px 14px;
  border: 1px dashed var(--color-accent);
  border-radius: var(--radius-btn);
}

/* ---------- Футер ----------
   Макет заказчика (1920): графит, сверху логотип и контурная кнопка
   «Отправить заявку», через 80 — пять колонок по 288 с зазором 40
   (заголовок USM Medium 15 белым, ссылки 15/1.4 с шагом 28, группы
   в «Контактах» — через 20), через 100 — строка копирайта 13px. */

.site-footer {
  background: #333;
  color: rgba(255, 255, 255, 0.62);
  padding-block: 60px 48px;
  font-size: 15px;
  line-height: 1.4;
}

.site-footer a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.site-footer a:hover,
.site-footer a:focus-visible { color: #fff; }

.site-footer__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.site-footer .logo__mark { color: var(--color-accent); }
.site-footer .logo__desc { color: rgba(255, 255, 255, 0.7); }
.site-footer__cta {
  font-size: 15px;
  line-height: 21px;
  font-weight: 400;
}


/* на широком экране стопки не видны — колонки встают в ряд по order */
.site-footer__stack { display: contents; }
.site-footer__col[aria-labelledby="ft-gp"] { order: 1; }
.site-footer__col[aria-labelledby="ft-sd"] { order: 2; }
.site-footer__col[aria-labelledby="ft-ok"] { order: 3; }
.site-footer__col[aria-labelledby="ft-more"] { order: 4; }
.site-footer__col--contacts { order: 5; }
.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 40px;
  margin-top: 80px;
}
.site-footer__title {
  margin: 0 0 12px;
  color: #fff;
}
.site-footer__col ul { display: grid; gap: 7px; }
.site-footer__col ul a {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: var(--p-weight);
  line-height: var(--p-line-height);
  text-wrap: pretty;
}
.site-footer__col ul + ul,
.site-footer__col ul + .site-footer__address { margin-top: 20px; }
.site-footer__address, .site-footer__hours {
  font-family: var(--font-body);
  /* тот же кегль, что у ссылок списка выше (16px), иначе адрес выглядел крупнее */
  font-size: 16px;
  font-weight: var(--p-weight);
  line-height: var(--p-line-height);
  text-wrap: pretty;
}
.site-footer__address { font-style: normal; }
.site-footer__hours { display: inline-block; margin-top: 8px; opacity: 0.5; }
.site-footer__social {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px !important;
}
.site-footer__social a,
.site-footer__social-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: rgba(255, 255, 255, 0.78);
  transition: color var(--dur-fast) var(--ease);
}
.site-footer__social .icon { width: 20px; height: 20px; }
.site-footer__social a:hover,
.site-footer__social a:focus-visible { color: var(--color-accent); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  margin-top: 100px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}
.site-footer__bottom > .p-small { color: var(--color-muted); }

@media (max-width: 1200px) {
  .site-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
}
@media (max-width: 900px) {
  .site-footer { padding-block: 48px 32px; }
  .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 48px; }
  .site-footer__bottom { margin-top: 56px; }
}
@media (max-width: 900px) {
  /* Две независимые стопки — колонки не выравниваются по строкам,
     поэтому под короткой колонкой нет пустоты. Кнопка заявки — в сетке,
     по левому краю второй стопки. */
  .site-footer__head,
  .site-footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .site-footer__head { align-items: center; }
  .site-footer__cta { justify-self: start; }
  .site-footer__stack { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
  .site-footer__col a { overflow-wrap: anywhere; }
}
/* на узком телефоне «Отправить заявку» не влезает в колонку — «Заявка» */
.site-footer__cta-short { display: none; }
@media (max-width: 420px) {
  .site-footer__cta-full { display: none; }
  .site-footer__cta-short { display: inline; }
}

/* ---------- Адаптив шапки ---------- */

/* Короткая надпись «Заявка» — только в открытом меню на узком телефоне,
   где «Отправить заявку» не помещается рядом с логотипом и крестиком. */
.site-header__cta-short { display: none; }
@media (max-width: 400px) {
  .is-menu-open .site-header__cta-full { display: none; }
  .is-menu-open .site-header__cta-short { display: inline; }
}

@media (max-width: 1280px) {
  .site-header__phone,
  .contacts { display: none; }
  .site-header__phone-btn { display: grid; }
}
@media (max-width: 1080px) {
  .nav { display: none; }          /* разделы уходят в полноэкранное меню */
  .site-header .nav + .site-header__right { margin-left: auto; }
}
@media (max-width: 620px) {
  .site-header__cta { display: none; }
  .site-header__phone-btn { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .js .img-reveal > img { transform: none; opacity: 1; }
  .js .img-reveal::after { display: none; }
  .js .reveal { opacity: 1; transform: none; }
}

/* Общая строка крошек сразу под шапкой, на поле контента. */
.breadcrumbs {
  display: flex;
  flex-wrap: nowrap;            /* не помещаются — горизонтальный скролл, а не перенос */
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  margin-bottom: 32px;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  color: var(--color-muted);
}
/* крошки на 50% прозрачнее, на всех страницах */
.breadcrumbs a,
.breadcrumbs [aria-current],
.breadcrumbs li + li::before { opacity: 1; transition: color var(--dur-fast) var(--ease); }
/* наведение на любую крошку — видны все звенья целиком */
.breadcrumbs:hover a,
.breadcrumbs:hover [aria-current],
.breadcrumbs:hover li + li::before,
.breadcrumbs:focus-within a,
.breadcrumbs:focus-within [aria-current],
.breadcrumbs:focus-within li + li::before { opacity: 1; }
/* текущая страница на 30% тусклее остальных звеньев — и в покое, и при наведении */
.breadcrumbs [aria-current] { opacity: 1; }
.breadcrumbs:hover [aria-current],
.breadcrumbs:focus-within [aria-current] { opacity: 1; }
/* слеши на 70% тусклее ссылок */
.breadcrumbs li + li::before { opacity: 1; }
.breadcrumbs:hover li + li::before,
.breadcrumbs:focus-within li + li::before { opacity: 1; }
/* без отступа сверху: строка прижата к верху своей высоты */
.breadcrumbs { align-items: flex-start; align-content: flex-start; }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-accent); }
.breadcrumbs::-webkit-scrollbar { display: none; }
nav:has(> .breadcrumbs) { min-width: 0; max-width: 100%; }
.breadcrumbs { max-width: 100%; }
.breadcrumbs li { display: inline-flex; flex: none; align-items: center; gap: 6px; }
.breadcrumbs li + li::before { content: "/"; }
.breadcrumbs [aria-current] { color: inherit; }

/* Все H1 используют одну типографическую роль; цвет и расположение задаёт страница. */
h1[class] {
  font-family: var(--font-title);
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  line-height: var(--h1-line-height);
  letter-spacing: var(--h1-letter-spacing);
  text-transform: uppercase;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Описания под заголовками: общая насыщенность текста. */
p[class*="__lead"], p[class*="__text"],
.partner__text p, .proj-about__text p, .proj-done__cols p,
.partner-benefits__list p {
  font-weight: var(--weight-supporting-text);
}

/* Заголовки разделов на всех страницах используют общую шкалу. */
main h2[class]:not(.visually-hidden), main h2:not([class]) {
  font-family: var(--font-title);
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  line-height: var(--h2-line-height);
  letter-spacing: var(--h2-letter-spacing);
  text-transform: uppercase;
  min-width: 0;
  overflow-wrap: anywhere;
}

.h2-factoid {
  font-family: var(--font-title);
  font-size: 60px;
  font-weight: var(--h2-weight);
  line-height: var(--h2-line-height);
  letter-spacing: var(--h2-letter-spacing);
}

/* Прозрачная чертёжная сетка для иконок карточек. */
.icon-blueprint { position: relative; display: grid; place-items: center; width: 88px; height: 88px; flex-shrink: 0; color: var(--color-sand-2); }
.icon-blueprint__grid { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--color-muted); stroke-width: .75; opacity: .5; pointer-events: none; }
.icon-blueprint > .icon { position: relative; width: 56px; height: 56px; color: inherit; stroke-width: 1.25; }

/* Карусели: общий скрытый скроллбар, прокрутка остаётся доступной. */
[data-scroller-track], .pcar__track, .gallery {
  scrollbar-width: none;
}
[data-scroller-track]::-webkit-scrollbar,
.pcar__track::-webkit-scrollbar,
.gallery::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Общий контейнер архитектурных эскизов, как на странице ЖК «Таврида». */
.sketch, .proj-sketch { position: relative; margin: 0; }
.sketch img, .proj-sketch img {
  display: block;
  width: 100%;
  height: auto;
  opacity: var(--sketch-opacity, 0.3);
}
.sketch::after, .proj-sketch::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* Маску включает работающий скрипт: без JS эскиз полностью виден. */
[data-sketch].sketch--drawing img {
  --draw: 0;
  -webkit-mask-image: linear-gradient(110deg, #000 calc(var(--draw) * 130% - 30%), rgba(0,0,0,0.25) calc(var(--draw) * 130% - 12%), transparent calc(var(--draw) * 130%));
          mask-image: linear-gradient(110deg, #000 calc(var(--draw) * 130% - 30%), rgba(0,0,0,0.25) calc(var(--draw) * 130% - 12%), transparent calc(var(--draw) * 130%));
}
@media (prefers-reduced-motion: reduce) {
  [data-sketch].sketch--drawing img { -webkit-mask-image: none; mask-image: none; }
}

/* Local Streamline Sharp SVGs preserve their square line endings. */
.icon.icon--streamline { stroke-linecap: butt; stroke-linejoin: miter; }

/* все звенья крошек одного веса */
.breadcrumbs a, .breadcrumbs [aria-current] { font-weight: inherit; }

/* Кнопка заявки в шапке: между 1081 и 1280px, пока меню ещё в строке,
   а места мало — только иконка конверта. */
.site-header__cta-icon { display: none; width: 20px; height: 20px; }
@media (min-width: 1081px) and (max-width: 1280px), (max-width: 620px) {
  body:not(.is-menu-open) .site-header .site-header__cta { display: grid; place-items: center; width: 44px; height: 44px; min-height: 0; padding: 0; border: 0; background: transparent; }
  body:not(.is-menu-open) .site-header__cta .site-header__cta-icon { display: block; }
  body:not(.is-menu-open) .site-header__cta .site-header__cta-full,
  body:not(.is-menu-open) .site-header__cta .site-header__cta-short { display: none; }
  body:not(.is-menu-open) .site-header__right .site-header__cta { margin-left: 4px; }
}

/* Иконка телефона на тёмной шапке (страницы объектов, партнёра, заявки) — белая */
.partner-page-body .site-header:not(.is-stuck) .site-header__phone-btn,
.page-lead .site-header:not(.is-stuck) .site-header__phone-btn { color: #fff; }
/* на страницах объектов — цвет текста шапки темы: белый на тёмной, тёмный на светлой */
.obj-page-body:not(.is-menu-open) .site-header:not(.is-stuck) .site-header__phone-btn { color: var(--proj-hero-ink); }

/* ---------- Полное меню — стилями подвала ----------
   Разделы как заголовки колонок подвала (жирный основной текст, белый),
   пункты как ссылки подвала (основной текст, 62% белого, при наведении
   белые). Одинаково на всех ширинах, включая мобильную раскладку. */
.site-menu .site-menu__list > li > a,
.site-menu .site-menu__mobile-columns .site-menu__list > li > a,
.site-menu .site-menu__more-title,
.site-menu .site-menu__mobile-columns .site-menu__more-title {
  font-family: var(--font-body);
  font-size: var(--p-size);
  font-weight: var(--p-bold-weight);
  line-height: var(--p-line-height);
  letter-spacing: 0;
  color: #fff;
}
.site-menu .site-menu__sub,
.site-menu .site-menu__mobile-columns .site-menu__sub { gap: 7px; margin-top: 12px; }
.site-menu .site-menu__sub a,
.site-menu .site-menu__minor a,
.site-menu .site-menu__minor span,
.site-menu .site-menu__mobile-columns .site-menu__sub a,
.site-menu .site-menu__mobile-columns .site-menu__minor a,
.site-menu .site-menu__mobile-columns .site-menu__minor span {
  font-family: var(--font-body);
  font-size: var(--p-size);
  font-weight: var(--p-weight);
  line-height: var(--p-line-height);
  color: rgba(255, 255, 255, 0.62);
  text-wrap: pretty;
}
.site-menu .site-menu__minor { gap: 7px; }
.site-menu .site-menu__sub a:hover,
.site-menu .site-menu__sub a:focus-visible,
.site-menu .site-menu__minor a:hover,
.site-menu .site-menu__minor a:focus-visible,
.site-menu .site-menu__list > li > a:hover,
.site-menu .site-menu__list > li > a:focus-visible,
.site-menu .site-menu__more-title:hover,
.site-menu .site-menu__more-title:focus-visible { color: #fff; }
.site-menu .site-menu__minor span { opacity: 0.8; }
@media (max-width: 760px) {
  .site-menu .site-menu__mobile-columns .site-menu__sub a { overflow-wrap: anywhere; }
}

/* Открытое меню: иконка звонка остаётся (белая, рядом с заявкой и крестиком).
   Раскладка меню переключается на двухстопочную на той же ширине,
   что и шапка (1080px), — иначе между 1081 и 1180 кнопка заявки
   оказывалась поверх фото. */
.is-menu-open .site-header__phone-btn { color: var(--menu-text); }

/* в открытом меню на широком экране звонок стоит рядом с «Отправить заявку» */
@media (min-width: 1081px) {
  .is-menu-open .site-header__phone-btn {
    position: absolute;
    top: 50%;
    left: var(--menu-phone-left, auto);
    transform: translateY(-50%);
  }
}

/* телефон, открытое меню: вместо «Заявка» — конверт, как в шапке */
@media (max-width: 620px) {
  .is-menu-open .site-header .site-header__cta { display: grid; place-items: center; width: 44px; height: 44px; min-height: 0; padding: 0; border: 0; color: var(--menu-text); }
  .is-menu-open .site-header__cta .site-header__cta-icon { display: block; }
  .is-menu-open .site-header__cta .site-header__cta-full,
  .is-menu-open .site-header__cta .site-header__cta-short { display: none; }
  .is-menu-open .site-header__right { gap: 16px; }
  .is-menu-open .site-header__right .site-header__cta { margin-left: 0; }
  /* Телефон и письмо живут в кнопках 44px, крестик — в 24px.
     Добавляем разницу половин, чтобы центры трёх пиктограмм шли по одной сетке. */
  .is-menu-open .site-header__right .burger { margin-left: 10px; }
}

/* Иконки шапки (звонок, заявка, бургер-зона) — одного размера 20px
   и одной видимой толщины линии */
.site-header__phone-btn .icon,
.site-header__cta-icon { width: 20px; height: 20px; stroke-width: 1.5; }

/* пункты полного меню и контакты в нём — 16px (заголовки разделов 18px) */
.site-menu .site-menu__sub a,
.site-menu .site-menu__minor a,
.site-menu .site-menu__minor span,
.site-menu .site-menu__mobile-columns .site-menu__sub a,
.site-menu .site-menu__mobile-columns .site-menu__minor a,
.site-menu .site-menu__mobile-columns .site-menu__minor span { font-size: 16px; }

@media (max-width: 760px) {
  .site-menu .site-menu__sub a,
  .site-menu .site-menu__minor a,
  .site-menu .site-menu__minor span,
  .site-menu .site-menu__mobile-columns .site-menu__sub a,
  .site-menu .site-menu__mobile-columns .site-menu__minor a,
  .site-menu .site-menu__mobile-columns .site-menu__minor span { font-size: 15px; }
}

/* Выпадающее меню без моргания:
   — подсветка пункта появляется сразу (плавно только гаснет), иначе
     при переходе между соседними пунктами оба на миг полупрозрачные;
   — невидимый мостик закрывает зазор 12px между пунктом шапки и списком,
     чтобы курсор по дороге не «выходил» из меню. */
.nav__drop a:hover,
.nav__drop a:focus-visible { transition-duration: 0s; }
.nav__drop::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 14px; }

/* ---------- Шапка над тёмными блоками ----------
   js/header-tone.js ставит .is-tone-dark и цвет фона блока под шапкой
   (--header-tone): шапка того же цвета, ссылки и иконки светлые. */
.site-header.is-stuck.is-tone-dark .site-header__inner { background: var(--header-tone, #2b2a29); }
.site-header.is-tone-dark { color: #fff; }
.site-header.is-tone-dark .nav__link,
.site-header.is-tone-dark .site-header__phone,
.site-header.is-tone-dark .site-header__phone-btn,
.site-header.is-tone-dark .burger { color: rgba(255, 255, 255, 0.88); }
.site-header.is-tone-dark .logo__desc { color: rgba(255, 255, 255, 0.72); }
.site-header.is-tone-dark .nav__link:hover,
.site-header.is-tone-dark .nav__item.is-open > .nav__link,
.site-header.is-tone-dark .site-header__phone:hover { color: #fff; }
.site-header.is-tone-dark a.logo:hover .logo__desc { color: var(--color-accent); }
.site-header.is-tone-dark .site-header__cta { border-color: rgba(255, 255, 255, 0.38); color: #fff; background: transparent; }
.site-header.is-tone-dark .site-header__cta:hover { border-color: rgba(255, 255, 255, 0.7); color: #fff; }
.site-header.is-tone-dark .site-header__inner::after { opacity: 0; }

/* Шапка всегда в цвет блока под ней (светлые блоки тоже) */
.site-header.is-stuck.is-toned .site-header__inner { background: var(--header-tone, #fff); }
/* Параллакс без ряби: фото растеризуется один раз в свой слой,
   при прокрутке слой только сдвигается (мелкие узоры — арматура,
   фасады — больше не мерцают от пересэмплирования на каждом кадре). */
.js [data-parallax] > img, .js img[data-parallax] { will-change: translate; backface-visibility: hidden; }
/* Подвал на десктопе: колонки по ширине содержимого, свободное место
   делится поровну между ними — визуальные промежутки одинаковые. */
@media (min-width: 1201px) {
  .site-footer__cols { grid-template-columns: repeat(5, auto); justify-content: space-between; column-gap: 40px; }
  /* «О компании» шире всех из-за одного длинного пункта («Контактная информация»),
     из-за этого до «Новостей» визуально больше воздуха — подтягиваем колонку. */
  .site-footer__col[aria-labelledby="ft-more"] { margin-left: -24px; }
}
/* Подвал: горизонтальные разделители — под логотипом и над нижней строкой */
.site-footer__cols { padding-top: 48px; border-top: 1px solid rgb(255 255 255 / 10%); margin-top: 48px; }
.site-footer__bottom { padding-top: 32px; border-top: 1px solid rgb(255 255 255 / 10%); }
@media (min-width: 901px) { .site-footer__bottom { margin-top: 48px; } }
.site-footer__cols, .site-footer__bottom { border-top-color: rgb(255 255 255 / 3.5%); }
/* Нижняя строка подвала: от линии до текста = от текста до края */
.site-footer__bottom { padding-top: 48px; }
@media (max-width: 900px) { .site-footer__bottom { padding-top: 32px; } }
/* Подвал: от логотипа до линии и от колонок до нижней линии — вдвое меньше */
.site-footer__cols { margin-top: 24px; }
@media (min-width: 901px) { .site-footer__bottom { margin-top: 48px; } }

/* Подвал: края и нижняя строка вдвое компактнее
   (сверху до логотипа, от линии до копирайта и от копирайта до низа) */
.site-footer { padding-top: 30px; padding-bottom: 24px; }
.site-footer__bottom { padding-top: 24px; }
@media (max-width: 900px) {
  .site-footer { padding-top: 24px; padding-bottom: 16px; }
  .site-footer__bottom { padding-top: 16px; }
}
/* Подвал на мобилке/планшете: ровные отступы вокруг линий */
@media (max-width: 900px) {
  .site-footer { padding-top: 24px; padding-bottom: 24px; }
  .site-footer__cols { margin-top: 24px; padding-top: 32px; }
  .site-footer__bottom { margin-top: 32px; padding-top: 24px; flex-direction: column; gap: 12px; }
}
@media (max-width: 420px) { .site-footer__social { gap: 0 !important; flex-wrap: nowrap; } }
/* Подвал: глубокий тёплый графит — на ступень темнее тёмных блоков (#2b2a29),
   в той же тёплой гамме, без серой «пыли» */
.site-footer { background: #1f1d1b; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--color-accent); }
/* Нижняя строка подвала: от линии до низа столько же, сколько от верха до первой линии */
@media (min-width: 901px) { .site-footer { padding-bottom: 32px; } .site-footer__bottom { padding-top: 32px; } }
@media (min-width: 901px) { .site-footer { padding-bottom: 38px; } .site-footer__bottom { padding-top: 37px; } }
/* iOS: под плавающей панелью браузера над шапкой не просвечивает контент —
   фон шапки продолжается вверх за край экрана */
.site-header.is-stuck .site-header__inner::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 120px; background: inherit; pointer-events: none;
}

/* ---------- Вторичная кнопка на тёмном фоне — единое поведение ----------
   Покой: светлый текст 90%, обводка белым 22%.
   Наведение (как на светлом): текст и обводка уходят в акцент, без белого 100%. */
:root { --btn-dark-text: rgb(247 244 239 / 90%); --btn-dark-line: rgb(255 255 255 / 22%); --btn-dark-hover: #c9a882; --btn-dark-hover-line: rgb(173 141 108 / 60%); }
html .btn--ghost.btn--on-dark,
html .section--dark .btn-line,
html .proj-others .btn-line,
html .proj-map .btn-line,
html .svc-hero .svc-hero__line,
html .objects-page .page-hero .btn-line,
html .site-header.is-tone-dark .site-header__cta,
html .partner-page-body .site-header:not(.is-stuck) .site-header__cta,
html .services-page .site-header:not(.is-stuck) .site-header__cta {
  color: var(--btn-dark-text); border-color: var(--btn-dark-line); background: transparent; opacity: 1;
}

/* ===== Единый ховер всех вторичных (контурных) кнопок =====
   На любом фоне одинаково: текст остаётся своим, рамка плотнеет до 60%
   цвета текста, фон не меняется. Без вспышки в белый. */
:is(.btn-line, .btn--ghost, .site-header__cta, .proj-hero__btn-line, .svc-hero__line) {
  transition: border-color .25s ease, background-color .25s ease, color .25s ease;
}
html body :is(.btn-line, .btn--ghost, .site-header__cta, .proj-hero__btn-line, .svc-hero__line):is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, currentColor 60%, transparent) !important;
}

/* Мобилка: страница никогда не скроллится по горизонтали (карусели скроллятся внутри себя) */
html, body { overflow-x: clip; }

/* Перелив решётки в меню работает только пока меню открыто: скрытое меню
   на весь экран перерисовывало маску каждый кадр — постоянная нагрузка на процессор */
.site-menu::before { animation-play-state: paused; }
.site-menu.is-open::before { animation-play-state: running; }

/* Мобилка: все описания — 16px (основной текст, лиды, абзацы карточек и страниц) */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .section__lead, .p-large, .about__lead, .team__info, .brands__lead, .lead-block__lead,
  .page-hero__lead, .proj-hero__lead, .prose p, .obj__panel-text p, .obj__works, .service__lead,
  .faq__a, .grid-card__text, .proj-about__text, .houses-review__excerpt, .svc-section p { font-size: 16px; }
  .origin { --origin-lead: 16px; }
  .hero, .intro { --lead-size: 16px; }
}

/* Телефон в шапке: шеврон подсказывает, что при наведении откроются контакты */
.site-header__phone { display: inline-flex; align-items: center; gap: 6px; }
.site-header__phone .icon { width: 16px; height: 16px; flex: none; transition: transform var(--dur-fast, .2s) var(--ease, ease); }
.contacts:is(:hover, :focus-within) .site-header__phone .icon { transform: rotate(180deg); }

/* Полноэкранное меню поверх закреплённой шапки: полоса шапки прозрачная,
   а не в цвет блока под ней (правила is-tone-dark/is-toned выше сильнее
   общего .is-menu-open, поэтому усиливаем селектор). */
html body.is-menu-open .site-header .site-header__inner,
html body.is-menu-open .site-header.is-stuck .site-header__inner { background: transparent; }

/* Фото в полноэкранном меню — декоративное: не ловит наведение, поэтому
   Яндекс Браузер не показывает над ним свою плашку (атрибут yatoolbar="off"
   он здесь игнорирует), а картинку нельзя случайно утащить мышью. */
.site-menu__media { user-select: none; -webkit-user-select: none; }
.site-menu__media img { pointer-events: none; -webkit-user-drag: none; }

/* Бегущая лента (js/scroller.js, data-autoplay): дробная часть сдвига —
   translate карточек, целая — прокрутка. Так лента плывёт ровно, без шага
   в целый пиксель. Без автопрокрутки переменная не задана — сдвига нет. */
[data-autoplay] [data-scroller-track] > * { translate: var(--autoplay-shift, 0) 0; }

/* Крошки: разделители-слэши везде одинаковые — 50% от цвета текста крошек */
.breadcrumbs li + li::before,
.breadcrumbs:hover li + li::before,
.breadcrumbs:focus-within li + li::before {
  opacity: 1;
  color: color-mix(in srgb, currentColor 50%, transparent);
}

/* Телефон: внутренние отступы формы-попапа вдвое меньше */
@media (max-width: 640px) {
  .modal .modal__dialog { padding: 14px 16px 16px; }
  .modal .modal__title { padding-right: 36px; }
  .modal .modal__close { top: 6px; right: 6px; }
}

/* Телефон: заголовки всех форм (попап, форма на странице, «заявка отправлена») */
@media (max-width: 640px) {
  .modal .modal__title,
  .lead-block__form .lead-block__form-title,
  .form-done__title { font-size: 21px; line-height: 32px; font-weight: 500; }
}

/* Наведение на пункт верхнего меню — акцентный цвет на всех страницах.
   Раньше страницы с тёмной шапкой (объекты, услуги, новости, проекты) красили
   пункты своим цветом с большей специфичностью, и ховера на них не было.
   Селектор усилен повторами классов, чтобы перебить эти правила. */
html body .site-header.site-header:not(.is-menu-open) .nav__link.nav__link:hover,
html body .site-header.site-header:not(.is-menu-open) .nav__link.nav__link:focus-visible,
html body .site-header.site-header:not(.is-menu-open) .nav__item.is-open > .nav__link.nav__link { color: var(--color-accent); }

/* Номер телефона в шапке: то же наведение, что у пунктов меню. Пока открыт
   список контактов (наведение на весь блок .contacts), номер остаётся акцентным.
   На страницах с тёмной шапкой своё правило цвета его перебивало. */
html body .site-header.site-header:not(.is-menu-open) .contacts:hover .site-header__phone.site-header__phone,
html body .site-header.site-header:not(.is-menu-open) .site-header__phone.site-header__phone:hover,
html body .site-header.site-header:not(.is-menu-open) .site-header__phone.site-header__phone:focus-visible,
html body .site-header.site-header:not(.is-menu-open) .contacts:focus-within .site-header__phone.site-header__phone { color: var(--color-accent); }

/* Утилиты вместо inline-стилей */
.svg-sprite { display: none; }
.pos-center { object-position: center; }
.pos-right-center { object-position: right center; }
.pos-74-center { object-position: 74% center; }
.pos-68-50 { object-position: 68% 50%; }