/* ==========================================================================
   Madely Properties — компоненты каталога продаж.

   Дополняет madely.css: базовые токены, шапка, подвал, кнопки и переключатели
   тем берутся оттуда. Здесь только то, чего в Madely Homes не было —
   каталог с фильтрами, карточка объекта, план оплаты, блог и админка.
   Все цвета через переменные, поэтому тёмная тема работает без отдельных
   правил.
   ========================================================================== */

/* ── раскладка ───────────────────────────────────────────────────────────── */

.section {
  padding: clamp(48px, 7vw, 88px) 0;
}

.section-muted {
  background: var(--c-surface-soft);
}

.section > .container,
.hero > .container {
  width: min(1240px, 100% - 2 * clamp(16px, 4vw, 40px));
  margin-inline: auto;
}

.container.narrow {
  width: min(760px, 100% - 2 * clamp(16px, 4vw, 40px));
}

.center {
  text-align: center;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: clamp(20px, 3vw, 36px);
}

.section-head h1,
.section-head h2 {
  font-family: var(--font-head);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}

.section-sub {
  color: var(--c-muted);
  font-family: var(--font-serif);
  font-size: 0.95rem;
  margin: 6px 0 0;
}

.section-head-center {
  justify-content: center;
  text-align: center;
}

/* "Our team / N consultants" hugs the first department section right below
   it instead of leaving the usual full section gap on both sides. */
.team-intro {
  padding-bottom: 25px;
}

.team-dept-first {
  padding-top: 25px;
}

.section-link {
  color: var(--c-primary);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.section-link:hover {
  color: var(--c-primary-h);
}

.empty-state {
  padding: 48px 0;
  color: var(--c-muted);
  text-align: center;
}

/* ── типографика длинных текстов ─────────────────────────────────────────── */

.prose {
  max-width: 68ch;
  color: var(--c-text);
  font-size: 1.02rem;
  line-height: 1.75;
}

.prose p {
  margin: 0 0 1.1em;
}

.prose h2 {
  font-family: var(--font-head);
  font-size: 1.45rem;
  line-height: 1.25;
  margin: 2em 0 0.6em;
}

.prose h3 {
  font-size: 1.15rem;
  margin: 1.6em 0 0.5em;
}

.prose a {
  color: var(--c-primary);
  text-underline-offset: 3px;
}

.prose ul,
.prose ol {
  margin: 0 0 1.1em;
  padding-inline-start: 1.3em;
}

.prose li {
  margin-bottom: 0.4em;
}

.prose strong {
  font-weight: 700;
  color: var(--c-text);
}

/* ── сворачиваемое описание («Lire plus» со старого сайта) ─────────────────── */

.prose-collapsible.is-collapsed {
  position: relative;
  max-height: 15.5em;
  overflow: hidden;
}

.prose-collapsible.is-collapsed::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 4.5em;
  background: linear-gradient(to bottom, transparent, var(--c-bg) 85%);
  pointer-events: none;
}

.prose-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 8px 18px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill, 999px);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}

.prose-toggle:hover,
.prose-toggle:focus-visible {
  border-color: var(--c-primary);
  color: var(--c-primary);
}

/* ── хлебные крошки ──────────────────────────────────────────────────────── */

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 0.85rem;
  color: var(--c-subtle);
}

.breadcrumbs a {
  color: var(--c-muted);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--c-primary);
}

.breadcrumbs [aria-current="page"] {
  color: var(--c-text);
}

/* ── первый экран ────────────────────────────────────────────────────────── */

.hero {
  padding: clamp(56px, 9vw, 116px) 0 clamp(40px, 6vw, 72px);
  background:
    radial-gradient(120% 140% at 15% 0%, var(--c-mint-light) 0%, transparent 55%),
    var(--c-bg);
}

.hero-inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hero-eyebrow {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-primary);
}

.hero-title {
  font-family: var(--font-head);
  font-size: clamp(2.1rem, 5.6vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 18ch;
}

.hero-sub {
  margin: 0;
  max-width: 62ch;
  color: var(--c-muted);
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.6;
}

/* Поиск на первом экране. Обычная GET-форма: у каждой выборки свой адрес,
   результат можно переслать или положить в закладки. */
.hero-search {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  align-items: end;
  gap: 12px;
  margin-top: 10px;
  padding: 16px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.hero-search-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.hero-search-field > span {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-subtle);
}

.hero-search .btn {
  height: 46px;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.hero-stats li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-inline-start: 14px;
  border-inline-start: 2px solid var(--c-primary);
}

.hero-stats strong {
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1;
}

.hero-stats span {
  font-size: 0.82rem;
  color: var(--c-muted);
}

/* ── поля форм ───────────────────────────────────────────────────────────── */

.hero-search-field select,
.hero-search-field input,
.filter select,
.filter input,
.lead-form input,
.lead-form textarea,
.admin-filters input,
.admin-filters select,
.blog-search input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font: inherit;
  font-size: 0.95rem;
  color: var(--c-text);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

/* Native <select>, restyled to look like a real button rather than the bare
   OS control it was — its own arrow instead of the mismatched native one,
   a hover state so the box itself reads as clickable, and the whole field
   (including its caption, wired up in main.js) opens the list, not just
   the narrow arrow hit-area. */
.hero-search-field select,
.filter select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c77b5c' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.hero-search-field select:hover,
.filter select:hover {
  border-color: var(--c-primary);
}

.hero-search-field:has(select),
.filter:has(select) {
  cursor: pointer;
}

.lead-form textarea {
  min-height: 96px;
  resize: vertical;
}

:is(.hero-search-field, .filter, .lead-form, .admin-filters, .blog-search)
  :is(select, input, textarea):focus-visible {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-mint-light);
}

::placeholder {
  color: var(--c-ph);
}

/* ── каталог: сайдбар фильтров + сетка + карта ──────────────────────────────── */
/* Раньше фильтры были одной широкой панелью над сеткой. Старый сайт держал их
   слева колонкой — так и площадь под карточки не съедается, и поля видно все
   разом без разворачивания. */

.catalogue-shell {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.catalogue-filters-panel {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  max-height: calc(100vh - 116px);
  overflow-y: auto;
}

.catalogue-filters-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.catalogue-filters-panel-head h2 {
  flex: 1;
  margin: 0;
  font-size: 1.05rem;
}

.catalogue-filters-close {
  display: none;
}

.catalogue-filters {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.filter-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.filter-block-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-subtle);
}

.filter {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.filter > span {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-subtle);
}

.filter-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.filter-actions .btn {
  height: 44px;
}

.filter-actions .btn-ghost {
  text-align: center;
}

/* Кнопка-переключатель фильтров — скрыта на десктопе, где сайдбар открыт
   всегда; появляется только под .catalogue-shell breakpoint ниже. */
.catalogue-filters-toggle {
  display: none;
}

/* ── карта каталога ──────────────────────────────────────────────────────── */
/* Широкая панель над сеткой, а не колонка сбоку: сбоку от сетки карте
   оставалось слишком мало ширины, и сама сетка карточек сжималась. */

.catalogue-map-drawer {
  margin-bottom: clamp(20px, 2.4vw, 28px);
}

.catalogue-map-summary {
  display: none;
}

.catalogue-map {
  height: 380px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--c-border);
  background: var(--c-bg-card);
}

.catalogue-map-pin {
  /* The Leaflet divIcon wrapper is a 0x0 box (iconSize:[0,0], so the pin
     sizes itself instead), which means a percentage transform on the
     wrapper would resolve against zero — the bottom-center anchor has to
     go on this element, sized to its own content, instead. */
  transform: translate(-50%, -100%);
  /* inline-flex, not flex: a block-level flex child has no containing-block
     width to size against inside that 0x0 wrapper and would collapse
     instead of hugging the price text. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--c-text);
  color: var(--c-bg-card);
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5);
  border: 2px solid var(--c-bg-card);
  transition: transform .15s ease, background .15s ease;
}

.catalogue-map-pin:hover,
.catalogue-map-pin.is-active {
  background: var(--c-primary);
  transform: translate(-50%, -100%) scale(1.08);
  z-index: 10;
}

.catalogue-map-popup {
  min-width: 200px;
}

.catalogue-map-popup img {
  display: block;
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 8px 8px 0 0;
}

.catalogue-map-popup-body {
  padding: 10px 4px 2px;
}

.catalogue-map-popup-body strong {
  display: block;
  font-size: 0.86rem;
  line-height: 1.3;
  margin-bottom: 3px;
}

.catalogue-map-popup-body span {
  font-size: 0.82rem;
  color: var(--c-primary);
  font-weight: 700;
}

.listing-card.is-map-active {
  outline: 2px solid var(--c-primary);
  outline-offset: 3px;
}

@media (max-width: 1180px) {
  .catalogue-shell {
    grid-template-columns: 240px minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .catalogue-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .catalogue-filters-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: center;
    min-height: 48px;
    margin-bottom: 16px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    font-weight: 700;
    color: var(--c-text);
  }

  .catalogue-filters-toggle strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    color: #fff;
    background: var(--c-primary);
    border-radius: 50%;
    font-size: .76rem;
  }

  .catalogue-filters-panel {
    position: fixed;
    inset: 0;
    z-index: 90;
    max-height: none;
    border-radius: 0;
    transform: translateX(-100%);
    transition: transform .25s ease;
  }

  .catalogue-filters-panel.is-open {
    transform: translateX(0);
  }

  .catalogue-filters-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--c-bg-card);
    border-radius: 50%;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
  }

  .catalogue-map-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 0 14px;
    margin-bottom: 10px;
    list-style: none;
    color: var(--c-text);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    font-weight: 700;
    cursor: pointer;
  }

  .catalogue-map-summary::-webkit-details-marker {
    display: none;
  }

  .catalogue-map-drawer:not([open]) .catalogue-map {
    display: none;
  }
}

/* ── сетка карточек ──────────────────────────────────────────────────────── */

.listing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
  gap: clamp(18px, 2.2vw, 28px);
}

.listing-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  transition: transform var(--transition), box-shadow var(--transition);
}

.listing-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}

.listing-card-media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--c-bg-card);
}

.listing-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

/* ── Слайдер фотографий в карточке ───────────────────────────────────────
   Кадры лежат стопкой и переключаются прозрачностью. Ссылка на объект —
   отдельный слой поверх них, а стрелки и точки лежат ещё выше, иначе щелчок
   по стрелке уходил бы в ссылку. */
.listing-card-media-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
}

/* В карточке вместо названия застройщика стоит его логотип — он узнаётся
   быстрее строки текста. Тень нужна по той же причине, что и на странице
   объекта: часть логотипов белые. */
.listing-card-developer.has-logo {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  max-width: 52%;
  min-height: 40px;
  line-height: 0;
}

.listing-card-developer.has-logo img {
  /* Фиксированный слот, а не «по содержимому»: логотипы приходят с разным
     соотношением сторон (160x160, 160x100, 160x70), и при ограничении только
     по высоте один занимал 38px в ширину, другой 87px — ряд выглядел рваным.
     Теперь место под марку одинаковое у всех, а contain вписывает её внутрь. */
  width: 104px;
  height: 34px;
  object-fit: contain;
  object-position: right center;
  filter: drop-shadow(0 1px 1px rgba(16, 24, 24, .3));
}

.listing-card-media .listing-card-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 300ms ease, transform 400ms ease;
}

.listing-card-media .listing-card-slide.is-active { opacity: 1; }

.listing-card-badge { z-index: 2; }

.listing-card-nav {
  position: absolute;
  inset-block-start: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: #16191d;
  background: rgba(255, 255, 255, .88);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 6px 18px -8px rgba(10, 12, 12, .7);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-50%) scale(.86);
  transition: opacity 180ms ease, transform 180ms ease, background 180ms ease;
}

.listing-card-nav-prev { inset-inline-start: 10px; }
.listing-card-nav-next { inset-inline-end: 10px; }
.listing-card-nav svg { width: 16px; height: 16px; }
.listing-card-nav:hover { background: #fff; }

.listing-card:hover .listing-card-nav,
.listing-card:focus-within .listing-card-nav {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* На тач-экранах наведения не бывает — там стрелки видны всегда. */
@media (hover: none) {
  .listing-card-nav {
    opacity: 1;
    transform: translateY(-50%);
  }
}

.listing-card-dots {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 10px;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 5px;
  pointer-events: none;
}

.listing-card-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  cursor: pointer;
  pointer-events: auto;
  transition: background 180ms ease, width 180ms ease, border-radius 180ms ease;
}

.listing-card-dot.is-active {
  width: 16px;
  border-radius: 3px;
  background: #fff;
}

.listing-card:hover .listing-card-media img {
  transform: scale(1.04);
}

.listing-card-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--c-bg-card), var(--c-surface-soft));
}

.listing-card-badge {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  padding: 5px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(20, 16, 14, .78);
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: var(--radius-pill);
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .72);
  backdrop-filter: blur(8px) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
}

.listing-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 18px;
}

.listing-card-area {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-primary);
}

.listing-card-title {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.08rem;
  line-height: 1.3;
}

.listing-card-title a {
  color: inherit;
  text-decoration: none;
}

.listing-card-title a:hover {
  color: var(--c-primary);
}

.listing-card-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.86rem;
  color: var(--c-muted);
}

.listing-card-specs li + li {
  position: relative;
  padding-inline-start: 14px;
}

.listing-card-specs li + li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--c-border);
  transform: translateY(-50%);
}

.listing-card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--c-border);
}

.listing-card-price {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.listing-card-price-label {
  font-size: 0.72rem;
  color: var(--c-subtle);
}

.listing-card-price strong {
  font-size: 1.05rem;
}

.listing-card-developer {
  font-size: 0.8rem;
  color: var(--c-muted);
  text-decoration: none;
}

.listing-card-developer:hover {
  color: var(--c-primary);
}

/* ── карточка объекта ────────────────────────────────────────────────────── */

.property {
  padding: clamp(24px, 4vw, 48px) 0 clamp(48px, 7vw, 88px);
}

.property-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: 24px;
}

.property-head h1 {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(1.7rem, 3.8vw, 2rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
}

.property-meta {
  margin: 8px 0 0;
  color: var(--c-muted);
  font-size: 0.95rem;
}

.property-developer-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 128px;
  padding: 18px 24px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
}

.property-developer-badge img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* Часть логотипов — белые SVG без обводки: на светлой панели они пропадали
     целиком. Мягкая тень обрисовывает контур и тёмным логотипам не мешает. */
  filter: drop-shadow(0 1px 1px rgba(16, 24, 24, .38))
          drop-shadow(0 0 6px rgba(16, 24, 24, .22));
}

.property-meta a {
  color: var(--c-primary);
  text-decoration: none;
}

.property-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: end;
}

.property-price-label {
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-subtle);
}

.property-price strong {
  font-family: var(--font-head);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1;
}

.property-price-alt {
  font-size: 0.85rem;
  color: var(--c-muted);
}

/* Галерея: первый кадр крупный, остальные плиткой. */
.property-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.property-gallery-item {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  aspect-ratio: 4 / 3;
  background:
    linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,0) 42%),
    var(--c-bg-card);
  border: 0;
  cursor: zoom-in;
  overflow: hidden;
}

.property-gallery-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(100deg, transparent 0%, rgba(255,255,255,.34) 48%, transparent 100%);
  opacity: 0;
  transform: translateX(-100%);
  pointer-events: none;
}

.property-gallery-item.is-enhanced:not(.is-image-loaded)::before {
  opacity: 1;
  animation: propertyImageShimmer 1.25s ease-in-out infinite;
}

.property-gallery-item.is-lead {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: 4 / 3;
}

.property-gallery-item img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.015);
  transition:
    opacity 420ms ease,
    transform 700ms cubic-bezier(.22,.61,.36,1);
}

.property-gallery-item.is-enhanced img {
  opacity: 0;
}

.property-gallery-item.is-image-loaded img {
  opacity: 1;
  transform: none;
}

@keyframes propertyImageShimmer {
  100% { transform: translateX(100%); }
}

.property-gallery-more {
  margin: 0 0 28px;
  font-size: 0.85rem;
  color: var(--c-muted);
}

.property-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: start;
  gap: clamp(24px, 4vw, 56px);
}

.property-main {
  min-width: 0;
}

.property-aside {
  position: sticky;
  inset-block-start: 92px;
}

.property-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 14px;
  margin: 0 0 32px;
  padding: 18px;
  list-style: none;
  background: var(--c-surface-soft);
  border-radius: var(--radius);
}

.property-facts li {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.property-facts span {
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-subtle);
}

.property-facts strong {
  font-size: 1.05rem;
}

.property-section {
  margin-bottom: clamp(28px, 4vw, 44px);
}

.property-section h2 {
  margin: 0 0 14px;
  font-family: var(--font-head);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
}

/* План оплаты. Показывается только когда сумма этапов равна 100% —
   маршрут и модель это гарантируют. */
.payment-plan {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: stage;
}

.payment-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 16px 16px 18px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}

.payment-stage::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: var(--c-primary);
  border-start-start-radius: var(--radius);
  border-end-start-radius: var(--radius);
}

.payment-stage-percent {
  font-family: var(--font-head);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--c-primary);
}

.payment-stage-label {
  font-size: 0.88rem;
  color: var(--c-muted);
}

.unit-table,
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.unit-table th,
.unit-table td,
.admin-table th,
.admin-table td {
  padding: 11px 14px;
  text-align: start;
  border-bottom: 1px solid var(--c-border);
  vertical-align: top;
}

.unit-table th,
.admin-table th {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-subtle);
  white-space: nowrap;
}

.unit-table tbody tr:hover,
.admin-table tbody tr:hover {
  background: var(--c-surface-soft);
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.amenity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.92rem;
  color: var(--c-muted);
}

.amenity-grid li {
  position: relative;
  padding-inline-start: 20px;
}

.amenity-grid li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-primary);
}

.property-verified {
  padding: 12px 14px;
  font-size: 0.85rem;
  color: var(--c-muted);
  background: var(--c-surface-soft);
  border-radius: var(--radius-sm);
}

/* ── форма обращения ─────────────────────────────────────────────────────── */

.lead-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(18px, 2.4vw, 26px);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.lead-form-title {
  margin: 0 0 2px;
  font-family: var(--font-head);
  font-size: 1.2rem;
  line-height: 1.25;
}

.lead-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--c-muted);
}

.lead-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.lead-form-consent {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  line-height: 1.45;
}

.lead-form-consent input {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin-top: 2px;
  flex: 0 0 auto;
  accent-color: var(--c-primary);
}

/* Короткое уведомление об обработке данных рядом с полями: на старом сайте
   формы собирали имя, телефон и почту вообще без него. */
.lead-form-notice {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--c-subtle);
}

.lead-form-notice a {
  color: var(--c-primary);
}

.btn-block {
  width: 100%;
  justify-content: center;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── справочники: районы, промоутеры, типы ───────────────────────────────── */

.term-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.term-grid a {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  height: 100%;
  min-height: 98px;
  padding: 12px 14px;
  color: inherit;
  text-decoration: none;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), transform var(--transition);
}

.term-grid a:hover {
  transform: translateY(-2px);
  border-color: var(--c-primary);
}

.term-grid strong {
  font-size: 1rem;
}

.term-grid span {
  font-size: 0.82rem;
  color: var(--c-subtle);
}

.term-card-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 64px;
  padding: 10px;
  background: #5c6063;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
}

.term-card-logo img {
  display: block;
  filter: none;
  opacity: 1;
  object-fit: contain;
}

.term-card-logo img.logo-fit-square {
  width: auto;
  height: 100%;
  max-width: 100%;
}

.term-card-logo img.logo-fit-wide {
  width: 100%;
  height: auto;
  max-height: 100%;
}

.term-card-initial {
  color: var(--c-muted);
  font-family: var(--font-head);
  font-size: 1.4rem !important;
}

.term-card-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

[data-theme="dark"] .term-card-logo {
  background: #050505;
  border-color: rgba(255, 255, 255, 0.12);
}

/* Районы на главной: ровная сетка вместо «таблеток», которые переносились
   как попало и оставляли одинокий район во второй строке. Восемь плиток
   встают полными рядами — 4×2 на десктопе и 2×4 на узких экранах. */
.area-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.area-grid a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  height: 100%;
  min-height: 76px;
  padding: 14px 18px;
  color: inherit;
  text-decoration: none;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  transition: all var(--transition);
}

.area-grid strong {
  font-size: 0.98rem;
  line-height: 1.25;
}

.area-grid span {
  font-size: 0.8rem;
  color: var(--c-subtle);
}

.area-grid a:hover {
  color: var(--c-mint-fg);
  background: var(--c-warm);
  border-color: transparent;
}

.area-grid a:hover span {
  color: inherit;
  opacity: .75;
}

@media (max-width: 900px) {
  .area-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

/* ── услуги ──────────────────────────────────────────────────────────────── */

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.service-card {
  display: flex;
  align-items: center;
  min-height: 108px;
  padding: 22px;
  color: inherit;
  text-decoration: none;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  transition: all var(--transition);
}

.service-card:hover {
  color: var(--c-mint-fg);
  background: var(--c-warm);
  border-color: transparent;
}

.service-card h3 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.08rem;
  line-height: 1.3;
}

/* ── блог ────────────────────────────────────────────────────────────────── */

.blog-search {
  display: flex;
  gap: 10px;
  margin-bottom: clamp(24px, 3vw, 36px);
}

.blog-search input {
  max-width: 420px;
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(18px, 2.2vw, 28px);
}

.article-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  transition: transform var(--transition), box-shadow var(--transition);
}

.article-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}

.article-card > a {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.article-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--c-bg-card);
}

.article-card h2,
.article-card h3 {
  margin: 0;
  padding: 0 18px;
  font-family: var(--font-head);
  font-size: 1.05rem;
  line-height: 1.35;
}

.article-card:hover h2,
.article-card:hover h3 {
  color: var(--c-primary);
}

.article-card-meta {
  margin: auto 0 0;
  padding: 0 18px 18px;
  font-size: 0.8rem;
  color: var(--c-subtle);
}

.article {
  padding: clamp(24px, 4vw, 48px) 0 clamp(48px, 7vw, 88px);
}

.article-head h1 {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(1.8rem, 4vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
}

.article-meta {
  margin: 12px 0 0;
  font-size: 0.85rem;
  color: var(--c-subtle);
}

.article-cover {
  width: 100%;
  margin: 28px 0;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--c-bg-card);
}

.article-body {
  max-width: none;
}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */

.faq-list {
  margin: 24px 0 0;
}

.faq-item {
  padding: 20px 0;
  border-bottom: 1px solid var(--c-border);
}

.faq-item dt {
  margin-bottom: 8px;
  font-family: var(--font-head);
  font-size: 1.1rem;
  line-height: 1.35;
}

.faq-item dd {
  margin: 0;
  color: var(--c-muted);
  line-height: 1.65;
}

/* ── контакты ────────────────────────────────────────────────────────────── */

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 40px;
  align-items: start;
}

@media (max-width: 900px) {
  .contact-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

.contact-list {
  display: grid;
  gap: 14px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.contact-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
}

.contact-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--c-mint-light);
  color: var(--c-mint-fg);
}

.contact-item-icon svg { width: 19px; height: 19px; }

.contact-item-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.contact-item-body strong {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-subtle);
}

.contact-item-body a,
.contact-item-body span {
  color: var(--c-text);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.contact-item-body a:hover { color: var(--c-primary); text-decoration: underline; }

.contact-socials { margin-top: 24px; }

.contact-socials-label {
  margin: 0 0 10px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-subtle);
}

.contact-socials-links { display: flex; flex-wrap: wrap; gap: 10px; }

.contact-socials-links a {
  padding: 7px 16px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  color: var(--c-text);
  font-size: 0.88rem;
  text-decoration: none;
  transition: border-color var(--transition), color var(--transition);
}

.contact-socials-links a:hover { border-color: var(--c-primary); color: var(--c-primary); }

.contact-map {
  overflow: hidden;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  aspect-ratio: 21 / 8;
  background: var(--c-bg-card);
}

.contact-map iframe { display: block; width: 100%; height: 100%; border: 0; }

@media (max-width: 700px) {
  .contact-map { aspect-ratio: 4 / 3; }
}

/* ── команда ─────────────────────────────────────────────────────────────── */
/* Полноразмерное фото на всю карточку + имя/роль/контакты плавающей белой
   панелью снизу — вместо кружка-аватара в тесной строке карт. Flex с
   justify-content:center вместо grid: auto-fill растягивал редкие отделы
   (1–3 человека) в один прижатый влево ряд с пустотой справа. */

.team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.team-card {
  position: relative;
  width: 340px;
  /* Чуть вытянутый кадр: 3/4 обрезал людей слишком плотно. */
  aspect-ratio: 7 / 10;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
}

.team-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Затемнение снизу — не для контраста с текстом (у него своя панель), а
   чтобы низ фотографии не сливался с краем плавающей карточки. */
.team-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 12, 12, .38), transparent 58%);
  pointer-events: none;
}

.team-card:has(.team-card-initials)::after {
  content: none;
}

/* Заглушка вместо фото: у части команды снимка нет, и пустой кружок
   выглядел бы как незагрузившаяся картинка. */
.team-card-initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-mint-light);
  color: var(--c-mint-fg);
  font-size: 2.4rem !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Плавающая белая панель — не зависит от темы сайта: она лежит поверх
   фотографии, а не на фоне страницы, поэтому остаётся читаемой в обоих
   режимах вместо того чтобы гоняться за --c-text/--c-muted по теме. */
.team-card-info {
  position: absolute;
  z-index: 1;
  inset-inline: 10px;
  bottom: 10px;
  /* Контакты вынесены на фото; подпись растёт только при переносе текста. */
  min-height: 94px;
  justify-content: center;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  text-align: start;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-radius: var(--radius);
  box-shadow: 0 14px 30px -18px rgba(10, 12, 12, .55);
}

.team-card-info strong {
  font-size: 1rem;
  color: #17181a;
}

.team-card-info span {
  font-size: 0.82rem;
  color: #6b6b6b;
}

/* Должность и языки остаются доступны полностью, в том числе в переводах. */
.team-card-info { overflow-wrap: anywhere; }
.team-card-role, .team-card-langs { line-height: 1.4; }

.team-card-role { font-weight: 600; color: #834c35 !important; }
.team-card-langs { font-size: 0.74rem !important; color: #545454 !important; }

/* Счётчик людей в заголовке блока отдела. */
.section-count {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-mint-fg);
  background: var(--c-mint-light);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* ── пагинация ───────────────────────────────────────────────────────────── */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(28px, 4vw, 48px);
}

.pagination-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: inherit;
  text-decoration: none;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  transition: all var(--transition);
}

.pagination-link:hover {
  color: var(--c-mint-fg);
  background: var(--c-warm);
  border-color: transparent;
}

.pagination-status {
  font-size: 0.9rem;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}

/* ── админка ─────────────────────────────────────────────────────────────── */

.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin: 24px 0 40px;
  padding: 0;
  list-style: none;
}

.admin-stats a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px;
  color: inherit;
  text-decoration: none;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  transition: border-color var(--transition);
}

.admin-stats a:hover {
  border-color: var(--c-primary);
}

.admin-stats strong {
  font-family: var(--font-head);
  font-size: 1.9rem;
  line-height: 1;
}

.admin-stats span {
  font-size: 0.82rem;
  color: var(--c-muted);
}

.admin-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.admin-filters input,
.admin-filters select {
  width: auto;
  min-width: 180px;
}

.admin-table form {
  margin: 0;
}

.admin-table select {
  min-height: 34px;
  padding: 4px 8px;
  font: inherit;
  font-size: 0.85rem;
  color: var(--c-text);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
}

/* ── адаптив ─────────────────────────────────────────────────────────────── */

@media (max-width: 1040px) {
  .property-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .property-aside {
    position: static;
  }
}

@media (max-width: 720px) {
  .property-gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .property-gallery-item.is-lead {
    grid-column: span 2;
    grid-row: auto;
  }

  .property-head,
  .property-price {
    align-items: flex-start;
    text-align: start;
  }

  .lead-form-row {
    grid-template-columns: 1fr;
  }

  .blog-search {
    flex-direction: column;
  }

  .blog-search input {
    max-width: none;
  }
}

/* Пользователь мог попросить систему убрать анимацию. */
@media (prefers-reduced-motion: reduce) {
  .listing-card,
  .listing-card-media img,
  .property-gallery-item img,
  .article-card,
  .term-grid a,
  .service-card {
    transition: none;
  }

  .property-gallery-item.is-enhanced:not(.is-image-loaded)::before {
    animation: none;
  }

  .listing-card:hover,
  .article-card:hover,
  .term-grid a:hover {
    transform: none;
  }

  .listing-card:hover .listing-card-media img {
    transform: none;
  }
}

/* ── квиз подбора ────────────────────────────────────────────────────────── */

.quiz {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(20px, 3vw, 34px);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.quiz-head { display: flex; flex-direction: column; gap: 8px; }

.quiz-title {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  line-height: 1.25;
}

.quiz-sub { margin: 0; color: var(--c-muted); font-size: 0.95rem; }

.quiz-progress {
  height: 3px;
  margin-top: 6px;
  overflow: hidden;
  background: var(--c-border);
  border-radius: var(--radius-pill);
}

.quiz-progress span {
  display: block;
  width: 25%;
  height: 100%;
  background: var(--c-primary);
  border-radius: inherit;
  transition: width 260ms ease;
}

.quiz-step { margin: 0; padding: 0; border: 0; }

.quiz-step legend {
  padding: 0;
  margin-bottom: 14px;
  font-size: 1.02rem;
  font-weight: 600;
}

.quiz-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.quiz-option {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 12px 16px;
  cursor: pointer;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  transition: border-color var(--transition), background var(--transition);
}

.quiz-option:hover { border-color: var(--c-primary); }

.quiz-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.quiz-option span { font-size: 0.95rem; }

.quiz-option:has(input:checked) {
  color: var(--c-mint-fg);
  background: var(--c-warm);
  border-color: var(--c-primary);
}

.quiz-option:has(input:focus-visible) {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

.quiz-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.quiz-fields label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--c-muted);
}

.quiz-fields input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font: inherit;
  font-size: 0.95rem;
  color: var(--c-text);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
}

.quiz-fields input:focus-visible {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-mint-light);
}

.quiz-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.quiz-nav .btn-ghost { margin-inline-end: auto; }

/* ── ответ после отправки ────────────────────────────────────────────────── */

.lead-form-success {
  margin: 0;
  padding: 22px;
  text-align: center;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--c-mint-fg);
  background: var(--c-warm);
  border-radius: var(--radius);
}

/* ── кнопка WhatsApp ─────────────────────────────────────────────────────── */

.wa-fab {
  position: fixed;
  inset-block-end: 22px;
  inset-inline-end: 22px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  color: #fff;
  background: #25d366;
  border-radius: 50%;
  box-shadow: var(--shadow);
  transition: transform var(--transition);
}

.wa-fab:hover { transform: scale(1.06); }

@media (max-width: 620px) {
  .wa-fab {
    inset-block-end: 16px;
    inset-inline-end: 16px;
    width: 48px;
    height: 48px;
  }
}

/* ── окно при уходе ──────────────────────────────────────────────────────── */
/* Слева снимок гида, справа предложение и форма. Картинка здесь не украшение:
   она показывает ровно то, что придёт на почту, — как это делал старый сайт. */

.exit-popup {
  position: fixed;
  inset: 0;
  z-index: 500;   /* выше баннера про куки: диалог не должен оказаться под ним */
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(2px);
  animation: exit-popup-fade 160ms ease both;
}

.exit-popup[hidden] { display: none; }

.exit-popup-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  width: min(760px, 100%);
  max-height: min(92vh, 760px);
  overflow: hidden auto;
  background: var(--c-bg);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  animation: exit-popup-rise 240ms cubic-bezier(.2, .7, .3, 1) both;
}

.exit-popup-aside {
  display: grid;
  /* Снимок прижат к верхнему краю, преимущества занимают остаток колонки —
     иначе под ними оставалась пустая треть. */
  grid-template-rows: auto 1fr;
  background: linear-gradient(165deg, var(--c-warm), var(--c-surface-soft) 78%);
  border-inline-end: 1px solid var(--c-border);
}

.exit-popup-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 600 / 462;
  object-fit: cover;
  background: var(--c-bg-card);
}

.exit-popup-body {
  align-self: center;
  padding: clamp(20px, 2.6vw, 30px);
}

.exit-popup-close {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 14px;
  z-index: 1;
  width: 34px;
  height: 34px;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--c-text);
  cursor: pointer;
  background: color-mix(in srgb, var(--c-bg) 78%, transparent);
  border: 1px solid var(--c-border);
  border-radius: 50%;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.exit-popup-close:hover { background: var(--c-bg-card); }

.exit-popup-eyebrow {
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-mint-fg);
}

.exit-popup-title {
  margin: 0 0 10px;
  padding-inline-end: 34px;
  font-family: var(--font-head);
  font-size: clamp(1.15rem, 1.7vw, 1.35rem);
  line-height: 1.24;
}

.exit-popup-text {
  margin: 0 0 16px;
  color: var(--c-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.exit-popup-points {
  display: grid;
  align-content: center;
  gap: 9px;
  margin: 0;
  padding: 18px clamp(16px, 1.8vw, 22px) 20px;
  list-style: none;
  font-size: 0.87rem;
  line-height: 1.4;
}

.exit-popup-points li {
  position: relative;
  padding-inline-start: 22px;
}

.exit-popup-points li::before {
  content: '✓';
  position: absolute;
  inset-inline-start: 0;
  color: var(--c-primary);
  font-size: 0.9rem;
}

/* Телефон: снимок становится широкой шапкой — в полной пропорции он съедал
   пол-экрана, — а список преимуществ прячется, чтобы до кнопки хватало
   одного экрана. */
@media (max-width: 720px) {
  .exit-popup { padding: 14px; }

  .exit-popup-card { grid-template-columns: minmax(0, 1fr); }

  .exit-popup-aside { border-inline-end: 0; }

  .exit-popup-photo {
    /* Почти родная пропорция: при широкой обрезке название гида на обложке
       резалось пополам, а ради него снимок здесь и стоит. */
    aspect-ratio: 3 / 2;
    object-position: 50% 18%;
  }

  .exit-popup-body { padding-block-start: 18px; }

  .exit-popup-points { display: none; }
}

@keyframes exit-popup-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes exit-popup-rise {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .exit-popup,
  .exit-popup-card { animation: none; }
}

.lead-form-compact {
  gap: 10px;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

/* ── агент на карточке объекта ───────────────────────────────────────────── */

.agent-box {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding: 14px 16px;
  background: var(--c-surface-soft);
  border-radius: var(--radius);
}

.agent-box-photo {
  display: block;
  width: 52px;
  height: 88px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--c-bg-card);
}

.agent-box-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  transform: scale(1.18);
}

.agent-box-name { display: block; font-weight: 600; }

.agent-box-role { display: block; font-size: 0.8rem; color: var(--c-subtle); }

/* Узкая колонка у края фото оставляет лицо и подпись свободными. */
.team-card-links {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.team-card-links .team-card-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 50%;
  background: #fff;
  color: #393b3a;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
  text-decoration: none;
  transition: color var(--transition), background-color var(--transition),
              border-color var(--transition);
}

.team-card-links .team-card-link svg { width: 17px; height: 17px; flex: none; }
.team-card-links .team-card-link span { display: none; }

.team-card-links .team-card-link:hover {
  background: #f5eee9;
  border-color: var(--c-primary);
  color: #834c35;
}

.team-card-links .team-card-link:focus-visible {
  outline: 2px solid #17181a;
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #fff;
}

.team-card-links .team-card-link-wa {
  background: #eaf6ee;
  border-color: #d6e8dc;
  color: #1d6b32;
}

.team-card-links .team-card-link-wa:hover {
  background: #1d6b32;
  border-color: #1d6b32;
  color: #fff;
}

.header-cta { white-space: nowrap; }

@media (max-width: 860px) {
  .header-cta { display: none; }
}

/* ── лента застройщиков ──────────────────────────────────────────────────── */

.developer-strip-section {
  padding: clamp(28px, 4vw, 44px) 0;
  border-block: 1px solid var(--c-border);
  background: var(--c-surface-soft);
}

.developer-strip-label {
  margin: 0 0 16px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-subtle);
}

.developer-strip {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 4px 0 12px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.developer-strip li { flex: 0 0 auto; scroll-snap-align: start; }

.developer-strip a {
  display: grid;
  place-items: center;
  width: 148px;
  height: 76px;
  padding: 12px 16px;
  background: #5c6063;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), transform var(--transition);
}

.developer-strip a:hover {
  transform: translateY(-2px);
  border-color: var(--c-primary);
}

.developer-strip img {
  max-width: 100%;
  max-height: 48px;
  object-fit: contain;
  filter: none;
  opacity: 1;
  transition: filter var(--transition), opacity var(--transition);
}

.developer-strip a:hover img { filter: none; opacity: 1; }

[data-theme="dark"] .developer-strip a {
  background: #050505;
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .developer-strip img,
[data-theme="dark"] .developer-strip a:hover img {
  filter: none;
  opacity: 1;
}

/* ── отзывы ──────────────────────────────────────────────────────────────── */

.reviews-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.reviews-score {
  font-family: var(--font-head);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--c-text);
}

.reviews-stars { color: #f5a623; letter-spacing: 2px; }

.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.review-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
}

.review-card-head { display: flex; align-items: center; gap: 12px; }

.review-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-mint-fg);
  background: var(--c-warm);
  border-radius: 50%;
}

.review-card-head strong { display: block; font-size: 0.95rem; }

.review-stars { color: #f5a623; font-size: 0.85rem; letter-spacing: 1px; }

.review-body {
  margin: 0;
  color: var(--c-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* ── формы админки ───────────────────────────────────────────────────────── */

.admin-form { display: flex; flex-direction: column; gap: 18px; }

.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.admin-form-grid .span-2 { grid-column: span 2; }

.admin-form label,
.admin-fieldset label,
.admin-lang-bar label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--c-muted);
}

.admin-form input,
.admin-form select,
.admin-form textarea,
.admin-fieldset input,
.admin-fieldset select,
.admin-fieldset textarea,
.admin-lang-bar select {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  font: inherit;
  font-size: 0.94rem;
  color: var(--c-text);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
}

.admin-form textarea,
.admin-fieldset textarea {
  min-height: 90px;
  resize: vertical;
  line-height: 1.6;
}

.admin-form :is(input, select, textarea):focus-visible,
.admin-fieldset :is(input, select, textarea):focus-visible {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-mint-light);
}

.admin-full, .admin-fieldset .admin-full { grid-column: 1 / -1; }

.admin-check {
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
  align-self: end;
  min-height: 42px;
}

.admin-check input {
  width: 18px;
  height: 18px;
  min-height: 0;
  accent-color: var(--c-primary);
}

.admin-fieldset {
  margin: 0;
  padding: 18px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.admin-fieldset legend {
  padding: 0 8px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-subtle);
}

.admin-hint {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--c-subtle);
}

.admin-hint .is-bad { color: var(--c-red); }
.admin-hint .is-ok { color: var(--c-primary); }

.stage-rows { display: flex; flex-direction: column; gap: 8px; }

.stage-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 10px;
}

.admin-lang-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  background: var(--c-surface-soft);
  border-radius: var(--radius-sm);
}

.admin-lang-bar select { max-width: 260px; }

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--c-border);
}

.admin-inline-form { margin: 0; }

.admin-actions .danger { color: var(--c-red); }

.admin-flash {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
}

.admin-flash-success { color: var(--c-mint-fg); background: var(--c-warm); }
.admin-flash-danger { color: var(--c-red-fg); background: var(--c-red-bg); }

@media (max-width: 640px) {
  .admin-form-grid .span-2 { grid-column: span 1; }
}

/* ── migrated WordPress landing and catalogue pages ─────────────────────── */

.photo-hero {
  position: relative;
  min-height: clamp(440px, 64vh, 680px);
  display: flex;
  align-items: end;
  overflow: hidden;
  color: #fff;
  background: #16191d;
}

.photo-hero-compact { min-height: clamp(340px, 48vh, 520px); }

/* About page hero specifically — asked to be much taller than the other
   compact photo heroes (agency partners, landing pages), not shared with
   them. Text is centered on the photo instead of anchored to the bottom,
   since the taller hero left a lot of empty image above the text. */
.photo-hero.about-hero-photo {
  min-height: clamp(560px, 90vh, 1050px);
  align-items: center;
}

.photo-hero.about-hero-photo .photo-hero-inner {
  padding-block: 0;
}

.photo-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.72)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.55), transparent 62%);
}

.photo-hero-inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(72px, 10vw, 118px) clamp(44px, 7vw, 76px);
}

.photo-hero .hero-title,
.photo-hero .hero-sub,
.photo-hero .hero-eyebrow {
  color: #fff;
}

.hero-prose {
  margin-top: 18px;
  max-width: 62ch;
  color: rgba(255, 255, 255, .88);
}

.hero-prose p {
  margin: 0 0 0.8em;
}

.photo-hero .hero-title { max-width: 16ch; }
.photo-hero .hero-sub { color: rgba(255, 255, 255, 0.86); }
.photo-hero .btn { width: fit-content; margin-top: 10px; }

.landing-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

.landing-prose { max-width: 78ch; }
.landing-featured { margin-top: clamp(32px, 5vw, 56px); }
.landing-aside { position: sticky; top: 92px; }

.home-photo-cta {
  position: relative;
  min-height: clamp(360px, 48vw, 520px);
  display: flex;
  align-items: end;
  overflow: hidden;
  color: #fff;
  background: #16191d;
  border-radius: var(--radius-sm);
}

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

.home-photo-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.72)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.58), transparent 66%);
}

.home-photo-cta-body {
  position: relative;
  z-index: 1;
  max-width: 680px;
  padding: clamp(28px, 5vw, 54px);
}

.home-photo-cta h2 {
  max-width: 13ch;
  margin: 0;
  color: #fff;
  font-family: var(--font-head);
  font-size: clamp(2rem, 5vw, 4.4rem);
  line-height: 0.98;
}

.home-photo-cta p {
  max-width: 58ch;
  color: rgba(255, 255, 255, 0.84);
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.home-feature-grid,
.home-step-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-feature,
.home-step-grid li {
  min-height: 210px;
  padding: 22px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
}

.home-feature-kicker,
.home-step-grid span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 18px;
  color: var(--c-mint-fg);
  background: var(--c-warm);
  border-radius: 50%;
  font-size: 0.82rem;
  font-weight: 700;
}

.home-feature h3,
.home-step-grid h3,
.home-contact-panel h2 {
  margin: 0 0 10px;
  font-family: var(--font-head);
  font-size: 1.1rem;
  line-height: 1.28;
}

.home-feature p,
.home-step-grid p,
.home-contact-panel p {
  margin: 0;
  color: var(--c-muted);
  line-height: 1.65;
}

.home-about-layout,
.home-faq-contact {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(28px, 5vw, 58px);
  align-items: start;
}

.home-team-head {
  margin-bottom: 18px;
}

.home-faq-list {
  margin-top: 0;
}

.home-contact-panel {
  padding: 22px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
}

.home-contact-panel .lead-form {
  margin-top: 20px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.catalogue-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -8px 0 22px;
}

.catalogue-tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 9px 14px;
  color: var(--c-text);
  text-decoration: none;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}

.catalogue-tabs a:hover,
.catalogue-tabs a.is-active {
  color: var(--c-mint-fg);
  background: var(--c-warm);
  border-color: transparent;
}

.catalogue-empty {
  display: grid;
  gap: 16px;
  justify-items: center;
}

.catalogue-empty .lead-form {
  width: min(520px, 100%);
  text-align: start;
}

.catalogue-seo { margin-top: clamp(36px, 5vw, 64px); }

.partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
  margin-top: clamp(24px, 4vw, 42px);
}

.partner-card {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 98px;
  padding: 12px 14px;
  color: var(--c-text);
  text-decoration: none;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.partner-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--c-primary) 40%, var(--c-border));
  box-shadow: var(--shadow-card);
}

.partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 64px;
  padding: 10px;
  color: var(--c-muted);
  background: #5c6063;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
}

[data-theme="dark"] .partner-logo {
  background: #050505;
  border-color: rgba(255, 255, 255, 0.12);
}

.partner-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: none;
}

.partner-card strong {
  min-width: 0;
  font-size: 0.95rem;
  line-height: 1.25;
}

@media (max-width: 900px) {
  .landing-layout { grid-template-columns: minmax(0, 1fr); }
  .landing-aside { position: static; }
  .photo-hero { min-height: 420px; }
  .home-feature-grid,
  .home-step-grid,
  .home-about-layout,
  .home-faq-contact {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .home-photo-cta { min-height: 420px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Страницы ошибок (404 / 500)

   Раньше вёрстка жила в инлайновых style="" внутри шаблона, поэтому
   не подчинялась ни теме, ни токенам. Здесь всё на общих переменных, так
   что тёмная тема и смена фирменного цвета применяются сами.
   ═══════════════════════════════════════════════════════════════════════ */

.error-page {
  display: flex;
  align-items: center;
  min-height: 62vh;
  padding: 96px 0 120px;
}

.error-page .container.narrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.error-code {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(72px, 14vw, 132px);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--c-border);
}

.error-title {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 700;
  text-wrap: balance;
}

.error-text {
  margin: 0;
  max-width: 46ch;
  color: var(--c-muted);
  font-size: 16px;
  line-height: 1.6;
}

.error-search {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 480px;
  margin-top: 8px;
}

.error-search input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: 15px;
}

.error-search input::placeholder { color: var(--c-ph); }

.error-search input:focus-visible {
  outline: 2px solid var(--c-primary-h, var(--c-primary));
  outline-offset: 2px;
}

.error-links { margin-top: 12px; }

.error-links-label {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-subtle);
}

.error-links ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.error-links a {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: 14px;
  text-decoration: none;
  transition: border-color var(--transition), background var(--transition);
}

.error-links a:hover,
.error-links a:focus-visible { border-color: var(--c-primary); background: var(--c-bg-card); }

.error-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}

.error-home { margin-top: 8px; }

@media (max-width: 560px) {
  .error-page { padding: 64px 0 80px; min-height: 0; }
  .error-search { flex-direction: column; }
  .error-search .btn { width: 100%; }
}