/* ===========================================================================
   SKIN «Стекло и сталь» — citydel-center.ru
   Слой 2 из трёх: канон (main.css) → СКИН → семья (family-panel.css).
   Здесь только токены и точечные перекрытия захардкоженных значений канона.
   Лейаут — в family-panel.css. Канон не редактируется.

   z-index (единая шкала): 0 фон-медиа · 1 контент секции · 2 навигация слайдера
   · 3 оверлеи блоков · 9 шапка (канон) · 100 бургер (канон)
   =========================================================================== */

/* ---------- Шрифты: self-hosted woff2, кириллица + латиница ---------- */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/Manrope/manrope-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: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/Manrope/manrope-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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/Manrope/manrope-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: "Manrope";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/Manrope/manrope-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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/IBMPlexSans/ibm-plex-sans-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: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/IBMPlexSans/ibm-plex-sans-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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/IBMPlexSans/ibm-plex-sans-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: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/IBMPlexSans/ibm-plex-sans-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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/IBMPlexSans/ibm-plex-sans-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: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/IBMPlexSans/ibm-plex-sans-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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Токены ---------- */

:root {
  /* Палитра выведена из материала: голубое остекление и светло-серые панели
     фасада класса A. Нейтралы — одно холодное семейство. */
  --cd-ink: #151C24;        /* основной текст, заголовки */
  --cd-deep: #12293F;       /* тёмные полосы, футер */
  --cd-accent: #1A5490;     /* единственный акцент: CTA, ссылки, цифры */
  --cd-accent-soft: #8CB6DE;/* акцент на тёмном фоне (контраст 6.97:1) */
  --cd-canvas: #F3F5F8;     /* фон страницы */
  --cd-surface: #FFFFFF;    /* карточки, тайлы */
  --cd-tint: #E8ECF1;       /* тонированные плашки и полосы */
  --cd-muted: #55606E;      /* вторичный текст (5.85:1 на канвасе) */
  --cd-line: #D8DEE6;       /* разделители на светлом */
  --cd-line-dark: rgba(255, 255, 255, 0.16);
  --cd-on-dark: #FFFFFF;    /* текст и кнопки на тёмных поверхностях */
  --cd-accent-hover: #14406F;
  --cd-header-bg: #ffffff96; /* шапка в начальном состоянии (≈59% белого) */

  --cd-space: 8px;          /* шкала отступов кратна 8, секции 40–64px */
  --cd-font-display: "Manrope", "Segoe UI", sans-serif;

  /* Перекрытия канонных токенов */
  --color-primary-text: var(--cd-ink);
  --color-secondary-text: var(--cd-muted);
  --color-secondary: var(--cd-accent);
  /* Канон использует --color-grey ТОЛЬКО для подписей внутри тёмной панели
     .about-describtion-wrap (карточки лотов, блок «Характеристики»). Значение
     обязано быть светлым: тёмный токен там сливается с фоном. */
  --color-grey: #C3CDD9;
  --color-light: var(--cd-canvas);
  --color-grey-bg: var(--cd-tint);
  --shadow-color: rgba(21, 28, 36, 0.10);
  --border-radius: 4px;
  --border-radius-min: 4px;
  --border-radius-arrow: 2px;
  --font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
}

/* ---------- База ---------- */

body {
  background-color: var(--cd-canvas);
  -webkit-font-smoothing: antialiased;
}

p, li, label {
  line-height: 1.6;
}

a {
  color: inherit;
}

/* Канон снимает фокус-обводку ресетом — возвращаем видимый фокус. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--cd-accent);
  outline-offset: 2px;
}

/* Заголовки секций: канон центрирует и обводит двумя линиями акцента.
   Приводим к дисплейной типографике семьи, одна хайрлайн-линия снизу. */
h1, h2, h3 {
  font-family: var(--cd-font-display);
}

h2 {
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: left;
  color: var(--cd-ink);
  border-top: 0;
  border-bottom: 1px solid var(--cd-line);
  padding: 0 0 16px;
  margin-bottom: 32px;
  text-wrap: balance;
}

h2 span {
  color: var(--cd-accent);
}

.title-color {
  color: var(--cd-ink);
}

/* Цифры везде, где их читают колонками. */
table, .card, .office-card, .histogram, .pn-num {
  font-variant-numeric: tabular-nums;
}

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

header:not(.header-white):not(.fixed):not(.static):not(.active) {
  border-bottom: 1px solid var(--cd-line);
  background: var(--cd-header-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

header li > a,
header li > p {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
}

header.fixed,
header.static {
  box-shadow: 0 4px 16px var(--shadow-color);
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

/* Мобильное меню открыто: шапка сплошная белая, без стекла */
@media (max-width: 991.98px) {
  header.active,
  header.active.fixed,
  header.active.static {
    background: var(--cd-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Телефон в шапке на десктопе (лид-механика: виден без скролла). */
.cd-header-phone {
  font-family: var(--cd-font-display);
  font-weight: 600;
  font-size: 17px;
  white-space: nowrap;
  text-decoration: none;
  color: var(--cd-ink);
  padding: 10px 0;
  font-variant-numeric: tabular-nums;
}

.cd-header-phone:hover {
  color: var(--cd-accent);
}

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

.btn {
  border-radius: var(--border-radius);
  font-weight: 600;
}

.btn-secondary {
  color: var(--cd-on-dark);
  background: var(--cd-accent);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-secondary:hover {
  background: var(--cd-accent-hover);
  outline: 0;
  color: var(--cd-on-dark);
}

.btn-light {
  color: var(--cd-accent);
  background: var(--cd-surface);
  box-shadow: 0 2px 10px var(--shadow-color);
}

/* Табы «Аренда / Продажа»: канон красит их захардкоженным #7c9796. */
.js-office-btn { color: var(--cd-accent); }
.js-office-btn.is-active { color: var(--cd-ink); }
.js-office-btn.disabled { color: var(--cd-muted); }
.office-deal-nav__sep { color: var(--cd-muted); }

/* Слайды-лоты кликабельны (фикс форка 11). */
.office-card-link { color: inherit; text-decoration: none; }

/* ---------- Канонная витрина: перекрашиваем, не перестраиваем ---------- */

.office-rent {
  background: var(--cd-tint);
}

.office-rent__arrow .office-rent__arrow--prev,
.office-rent__arrow .office-rent__arrow--next {
  background-color: var(--cd-accent);
  border-radius: var(--border-radius);
}

.card {
  background-color: var(--cd-surface);
  color: var(--cd-ink);
  border-radius: var(--border-radius);
}

.card .card_info {
  border: 1px solid var(--cd-line);
  border-radius: var(--border-radius);
}

.card .card_title {
  font-family: var(--cd-font-display);
  font-weight: 800;
  color: var(--cd-accent);
}

.card .card_subtitle {
  color: var(--cd-muted);
  font-weight: 500;
}

.card .card_image {
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.office-card {
  background: var(--cd-surface);
  border: 1px solid var(--cd-line);
  border-radius: var(--border-radius);
  color: var(--cd-ink);
}

.office-card p {
  color: var(--cd-muted) !important;
}

.office-card p.font-bold,
.office-card p.color-secondary {
  color: var(--cd-ink) !important;
  font-family: var(--cd-font-display);
  font-weight: 800;
}

.office-card .text-large {
  font-size: 12px;
  letter-spacing: 0.06em;
}

.office-rent-table table {
  width: 100%;
}

.office-rent-table tr {
  border-bottom: 1px solid var(--cd-line);
}

.office-rent-table thead td {
  font-family: var(--cd-font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--cd-muted);
}

.office-rent-table a {
  color: var(--cd-accent);
}

.office-rent-table .show-all-wrapper a {
  color: var(--cd-accent);
}

/* Гистограмма ставок: канон красит столбцы захардкоженным #7c9796. */
.histogram .stand {
  background: var(--cd-accent);
  border-radius: 2px 2px 0 0;
}

.histogram .count_label {
  background: var(--cd-surface);
  border: 1px solid var(--cd-line);
  border-radius: var(--border-radius);
  color: var(--cd-ink);
}

/* ---------- Инфраструктура ---------- */

.infra .structure_item {
  background: var(--cd-surface);
  border: 1px solid var(--cd-line);
  border-radius: var(--border-radius);
  width: auto;              /* канон ставит 33vw — плитки распирает */
  min-width: 0;
  padding: 12px 18px;
  margin: 0;
}

.infra .row {
  gap: 8px;
}

.infra .structure_item .text {
  font-weight: 500;
  color: var(--cd-ink);
  white-space: nowrap;
}

/* ---------- Тёмная панель спеков (карточки лотов) ---------- */

/* Канон заливает панель чистым чёрным на 60% — цвет непредсказуем поверх фото
   и вне палитры. Заливаем токеном с высокой альфой: контраст становится
   расчётным (подписи 8.0:1, значения 12.9:1). background-color, не шорткат —
   инлайн-фон от канонного lazy не затирается. */
.about-describtion-wrap {
  background-color: rgba(18, 41, 63, 0.88);
  border-radius: var(--border-radius);
}

.about-describtion-title {
  background-color: var(--cd-accent);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.about-describtion-wrap .color-grey {
  font-weight: 400;
}

.about-describtion__border {
  background: var(--cd-line-dark);
}

/* ---------- Контакты и формы ---------- */

.contact-card .contact-card-image {
  border-radius: var(--border-radius);
  overflow: hidden;
}

.contact-card p {
  color: var(--cd-ink);
}

.cd-map-frame {
  position: relative;
  width: 100%;
  padding-top: 75%;
  border-radius: var(--border-radius);
  overflow: hidden;
  border: 1px solid var(--cd-line);
}

.cd-map-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

input, textarea {
  border: 1px solid var(--cd-line);
  border-radius: var(--border-radius);
  color: var(--cd-ink);
  background: var(--cd-surface);
}

input::placeholder, textarea::placeholder { color: var(--cd-muted); }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: var(--cd-muted); }
input::-moz-placeholder, textarea::-moz-placeholder { color: var(--cd-muted); }

.input-basic input,
.input-basic textarea {
  border-radius: var(--border-radius);
}

/* Согласие на обработку ПД — flex-ряд; канон центрирует .form-policy на мобиле */
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.form-consent__input {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin: 0.2em 0 0;
  accent-color: var(--cd-accent);
}

.form-consent__label {
  margin: 0;
  line-height: 1.45;
  flex: 1;
  text-align: left;
}

.form-consent.input-error .form-consent__label {
  color: #f00038;
}

@media (max-width: 767.98px) {
  .form-consent .form-consent__label.form-policy {
    text-align: left;
  }
}

/* ---------- Футер: тёмный нейтральный, не акцентная заливка ---------- */

footer {
  background: var(--cd-deep);
}

footer a { color: var(--cd-on-dark); }
footer a:hover { color: var(--cd-accent-soft); }

/* ---------- Прочее ---------- */

.cookie .btn,
.thanks .btn {
  background: var(--cd-accent);
  border-radius: var(--border-radius);
}

/* Канон считает высоту от 100vh: на iOS адресная строка дёргает лейаут. */
@supports (height: 100dvh) {
  .menu-mobile { height: calc(100dvh - 48px); }
  .section-height { min-height: calc(100dvh - 257px); }
}

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