/* ============================================================
   SKIN K2 — «стекло и вечерний свет»
   Палитра из материала объекта: панорамное остекление с зелёным
   тонированием (тёмный петроль), тёплый свет окон (золото),
   алюминий/холодные нейтралы. Family-agnostic: токены + точечные
   перекрытия хардкодов канона. Канонный main.css не трогаем.

   Контраст (contrast.mjs, WCAG 2.2):
     ink #1B2B28 / canvas #F4F6F5 ......... 13.60  AA+AAA
     ivory #F4F6F5 / petrol #12302B ....... 13.04  AA+AAA
     gold #D9A94F / petrol #12302B ........  6.57  AA
     ink #1B2B28 / gold #D9A94F ...........  6.84  AA (кнопка)
     bronze #8A6423 / canvas #F4F6F5 ......  4.93  AA (акцент-текст на светлом)
     mute #46554F / canvas ................  7.24  AA
     dim #9FB5AE / petrol .................  6.54  AA (служебный на тёмном)
     bronze-бордер / canvas ...............  4.93  ≥3:1 (граница контролов)
     grey #9FB5AE / petrol (панель лотов) .  6.54  AA
     gold / petrol-2 (шапка панели) .......  7.86  AA+AAA

   Акцент один — золото; на светлом фоне его текстовая роль — тёмный
   тон того же семейства (bronze), кнопки идентичны на всей странице:
   заливка gold + текст ink + граница bronze.

   z-index шкала: 1 контент поверх фото · 2 оверлеи блоков ·
   10 шапка (канон) · 100 мобильное меню (канон).
   ============================================================ */

/* ---------- Шрифты: self-hosted woff2, cyrillic + latin ---------- */
@font-face {
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/Commissioner/commissioner-cyrillic-500-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/Commissioner/commissioner-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/Commissioner/commissioner-cyrillic-700-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/Commissioner/commissioner-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/Commissioner/commissioner-cyrillic-800-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/Commissioner/commissioner-latin-800-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/Onest/onest-cyrillic-400-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/Onest/onest-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/Onest/onest-cyrillic-500-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/Onest/onest-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/Onest/onest-cyrillic-600-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/Onest/onest-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}

/* ---------- Токены ---------- */
:root {
  /* перекрытия канона */
  --color-primary-text: #1B2B28;
  --color-secondary-text: #46554F;
  --color-secondary: #8A6423;            /* акцент-текст/бордеры на светлом (bronze) */
  --color-grey: #9FB5AE;              /* лейблы на тёмной панели спеков (только там и используется) */
  --color-light: #ECF1EF;
  --color-grey-bg: #ECF1EF;
  --border-radius: 8px;
  --border-radius-min: 8px;
  --border-radius-arrow: 8px;
  --font-family: 'Onest', 'Montserrat', sans-serif;
  --shadow-color: rgb(18 48 43 / 12%);

  /* свои токены скина */
  --k2-petrol: #12302B;                  /* тёмная полоса */
  --k2-petrol-2: #0C201C;                /* глубина: футер, ховеры на тёмном */
  --k2-petrol-raise: #1A3B35;            /* приподнятая ячейка на тёмном */
  --k2-ivory: #F4F6F5;                   /* канвас и текст на тёмном */
  --k2-ink: #1B2B28;
  --k2-gold: #D9A94F;                    /* акцент (кнопки, ссылки на тёмном) */
  --k2-gold-hover: #E0B460;
  --k2-card: #FFFFFF;                    /* поверхность карточек на светлом */
  --k2-bronze: #8A6423;                  /* акцент-текст на светлом, граница кнопок */
  --k2-dim: #9FB5AE;                     /* служебный на тёмном */
  --k2-mute: #46554F;                    /* вторичный на светлом */
  --k2-line: rgba(159, 181, 174, 0.35);  /* разделители на тёмном */
  --k2-line-light: rgba(27, 43, 40, 0.14);
  --skin-font-display: 'Commissioner', 'Onest', sans-serif;
}

body {
  background: var(--k2-ivory);
  color: var(--k2-ink);
}

h1, h2, h3, .title-color, .title-large {
  font-family: var(--skin-font-display);
}
h1, h2 { text-wrap: balance; }

/* ---------- Кнопки: заливка золото + текст ink + граница bronze — везде одинаково ---------- */
.btn-secondary {
  color: var(--k2-ink);
  background: var(--k2-gold);
  border: 1px solid var(--k2-bronze);
  font-weight: 600;
}
.btn-secondary:hover { color: var(--k2-ink); }
@media (min-width: 991px) {
  .btn-secondary:hover {
    background: var(--k2-gold-hover);
    outline: none;
    border-color: var(--k2-bronze);
    color: var(--k2-ink);
  }
}

/* ---------- Шапка: сплошной петроль, фикс-состояние нейтрализовано под тон ---------- */
header, header.header-white {
  background: var(--k2-petrol);
  border-bottom: 1px solid var(--k2-line);
}
/* До прокрутки: на петроле — светлые ссылки в десктоп-навигации. */
header nav li > a,
header nav li > p,
header .container a.font-semibold,
header .container .d-tb-flex {
  color: var(--k2-ivory);
}
header nav li > a:hover,
header nav li > p:hover {
  color: var(--k2-gold);
}
header nav li > a.active,
header nav li > p.active {
  color: var(--k2-gold);
}
header svg g path {
  fill: var(--k2-ivory);
}
header .burger .burger__line {
  background: var(--k2-ivory);
}
header .header-logo-white {
  filter: drop-shadow(1px 0px 3px rgba(244, 246, 245, 0.35));
}
/* Открытое меню: шапка остаётся петролевой, иконки — светлые (канон ставит #fff и тёмный бургер). */
header.active,
header.header-white.active,
header.fixed.active {
  background: var(--k2-petrol);
  border-bottom-color: var(--k2-line);
}
header.active:not(.header-white) nav li > a,
header.active:not(.header-white) nav li > p,
header.active:not(.header-white) .container a.font-semibold,
header.active:not(.header-white) .container .d-tb-flex {
  color: var(--k2-ivory);
}
header.active svg g path,
header.header-white.active svg g path {
  fill: var(--k2-ivory);
}
header.active .burger .burger__line,
header.active .burger.open .burger__line,
header.header-white.active .burger .burger__line {
  background: var(--k2-ivory);
}
/* Средняя полоска: канон сдвигает её вбок — прячем, иначе артефакт у крестика. */
.burger.open .burger__line:nth-child(2) {
  opacity: 0;
}
header.header-white.active .container a,
header.header-white.active .container p {
  color: var(--k2-ivory);
}
header.fixed nav a, header.fixed nav p, header.fixed nav li > a, header.fixed nav li > p,
header.static nav a, header.static nav p, header.static nav li > a, header.static nav li > p {
  color: var(--k2-ivory);
}
header.fixed nav li > a.active, header.fixed nav li > p.active,
header.static nav li > a.active, header.static nav li > p.active {
  color: var(--k2-gold);
}
header.fixed a, header.fixed p, header.fixed li > a, header.fixed li > p,
header.static a, header.static p, header.static li > a, header.static li > p {
  color: var(--k2-ivory);
}
header.fixed, header.static {
  background: var(--k2-petrol);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 4px 14px rgba(12, 32, 28, 0.35);
}
header.fixed li > a.active, header.fixed li > p.active,
header.static li > a.active, header.static li > p.active {
  color: var(--k2-gold);
}
header.header-white li > a.active, header.header-white li > p.active {
  color: var(--k2-gold);
}
header.fixed .header-logo, header.static .header-logo { color: var(--k2-ivory); }
header.fixed .burger .burger__line, header.static .burger .burger__line { background: var(--k2-ivory); }
header.fixed svg g path, header.static svg g path { fill: var(--k2-ivory); }
header.fixed .header-logo-dark, header.static .header-logo-dark { display: none; }

/* Мобильное меню: тёмный фон K2, светлые ссылки (перекрытие канона). */
.menu-mobile,
.menu-mobile > .container,
.header-white.active .menu-mobile .container {
  background: var(--k2-petrol);
}
.menu-mobile li {
  border-bottom-color: rgba(244, 246, 245, 0.12);
}
.menu-mobile li a,
.header-white .menu-mobile li a,
.header-white.active .menu-mobile li a,
header.active .menu-mobile li a {
  color: var(--k2-ivory);
}
.menu-mobile li a.active,
.header-white .menu-mobile li a.active {
  color: var(--k2-gold);
}
.menu-mobile a.color-primary {
  color: var(--k2-gold) !important;
}
.menu-mobile p.color-primary {
  color: var(--k2-dim) !important;
}

/* ---------- Мобильное меню и тапабельные цели ---------- */
.menu-mobile li a { min-height: 44px; display: flex; align-items: center; }

/* ---------- Футер: тёмный нейтральный, не акцентной заливкой ---------- */
footer { background: var(--k2-petrol-2); }

/* ---------- Канонный hero-оверлей: градиент в тон скина, без блюра ---------- */
.top-gradient {
  background: linear-gradient(180deg, rgba(18, 48, 43, 0.55) 0%, rgba(12, 32, 28, 0.75) 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ---------- Табы Аренда/Продажа: перекраска канонного бирюзового хардкода ---------- */
.js-office-btn { color: var(--k2-bronze); }
.js-office-btn.is-active { color: var(--color-primary-text); }
.js-office-btn.disabled { color: var(--k2-mute); }
.office-deal-nav__sep { color: var(--k2-mute); }

/* ---------- Гистограмма ставок: столбики золотом (перекрытие канонного хардкода) ---------- */
.histogram .stand { background-color: var(--k2-gold); border: 1px solid var(--k2-bronze); }
.histogram .count_label { background: var(--k2-ivory); }

/* ---------- Слайдер лотов: cover вместо канонного letterbox; карточка-ссылка ---------- */
.office-slider img { -o-object-fit: cover; object-fit: cover; }
.office-card-link { color: inherit; text-decoration: none; }
.office-card-link:hover .card_title { color: var(--k2-bronze); }

/* ---------- Хардкоды радиусов канона → единая система 8px ---------- */
.input-basic input, .input-basic textarea { border-radius: 8px; }
.card .card_image { border-radius: 8px 8px 0 0; }

/* ---------- Формы: фокус и контраст плейсхолдера ---------- */
.form-input input, .form-input textarea { border-radius: 8px; }
.form-input input::placeholder, .form-input textarea::placeholder { color: var(--k2-mute); opacity: 1; }

/* Согласие на обработку ПД */
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}
.form-consent__input {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0.15rem 0 0;
  accent-color: var(--k2-gold);
}
.form-consent__label {
  margin: 0;
  line-height: 1.45;
  flex: 1;
  text-align: left;
}
.form-consent .form-consent__label.form-policy {
  margin-top: 0;
}
.form-consent.input-error .form-consent__label {
  color: #c0392b;
}
@media (max-width: 767.98px) {
  .form-consent .form-consent__label.form-policy {
    text-align: left;
  }
}

/* Toast после отправки формы */
.thanks {
  background: var(--k2-petrol);
  color: var(--k2-ivory);
  border: 1px solid var(--k2-gold);
  box-shadow: 0 8px 28px rgba(12, 32, 28, 0.35);
  z-index: 100;
}
.thanks__text {
  margin: 0;
  color: inherit;
}
.thanks--error {
  border-color: #c0392b;
}
.thanks--error .thanks__text {
  color: var(--k2-ivory);
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--k2-bronze);
  outline-offset: 2px;
}

/* ---------- Цифры в таблицах и факт-строках ---------- */
.office-rent-table table, .card_title, .histogram { font-variant-numeric: tabular-nums; }

/* ---------- Тени: тонированные в петроль, диффузные ---------- */
.card, .contact-card { box-shadow: 0 8px 24px rgba(18, 48, 43, 0.08); }

/* ---------- Панель спеков (карточка лота, «Характеристики»): системный петроль ---------- */
.about-describtion-wrap {
  background: var(--k2-petrol);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-radius: 8px;
  overflow: hidden;
}
.about-describtion-title { background: var(--k2-petrol-2); }
.about-describtion-title .title-color { color: var(--k2-gold); }
.about-describtion-title .text-small { color: var(--k2-dim); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}