/* Компоненты, которые повторяются по странице. Раскладка — классами Tailwind в index.html. */

/* Типографика v2: заголовки и текст — Manrope, цветное курсивное слово — Source Serif 4 italic (.accent) */
:root {
  --font-sans: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --font-serif-accent: 'Source Serif 4', Georgia, serif;
}
.accent { font-family: var(--font-serif-accent); font-style: italic; font-weight: 400; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (min-width: 1024px) { html { scroll-padding-top: 112px; } }
body { -webkit-text-size-adjust: 100%; }

/* ---------- Типографика ---------- */

.eyebrow { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #B4654A; font-weight: 700; }
.step-label { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
.h2 { margin: 0; font-size: 34px; line-height: 1.08; letter-spacing: -.02em; font-weight: 600; }
@media (min-width: 640px)  { .h2 { font-size: 44px; } }
@media (min-width: 1024px) { .h2 { font-size: 52px; } }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 32px; border-radius: 999px; border-width: 1px; border-style: solid;
  font-size: 16px; font-weight: 600; text-decoration: none; text-align: center;
  transition: opacity .2s, transform .2s;
}
.btn:hover { opacity: .88; }
.btn:active { transform: scale(.98); }

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

.site-header { transition: background-color .25s, border-color .25s, color .25s; border-bottom: 1px solid transparent; }
.site-header[data-tone="light"] { color: #fff; }
/* у шапки нет подложки: над любым экраном — только логотип и стеклянные кнопки.
   Цвет (светлый / тёмный) меняется по тону экрана под шапкой (data-tone, app.js) */
.site-header[data-tone="dark"] { color: #1F1A17; }
.h-logo { color: inherit; }

/* Telegram, WhatsApp и «Меню» — «жидкое стекло» как в iOS 26:
   полупрозрачная подложка с размытием и насыщением, светлый блик сверху,
   тонкая светящаяся кромка и мягкая тень. Цвет стекла зависит от тона шапки. */
.h-btn {
  --glass-bg: rgba(255, 255, 255, .14);
  --glass-edge: rgba(255, 255, 255, .45);
  --glass-hi: rgba(255, 255, 255, .55);
  --glass-shadow: rgba(0, 0, 0, .18);
  position: relative; isolation: isolate;
  display: flex; align-items: center; justify-content: center; flex: none;
  height: 44px; border-radius: 22px; border: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 55%),
    var(--glass-bg);
  -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 -1px 1px rgba(255, 255, 255, .12),
    inset 0 0 0 1px var(--glass-edge),
    0 6px 20px var(--glass-shadow);
  color: inherit; text-decoration: none; cursor: pointer;
  transition: background-color .25s, box-shadow .25s, transform .2s cubic-bezier(.2, .8, .2, 1);
}
.h-btn:hover { --glass-bg: rgba(255, 255, 255, .24); transform: translateY(-1px); }
.h-btn:active { transform: scale(.96); }
.h-btn--round { width: 44px; }
/* логотип — такая же стеклянная круглая кнопка (подложки у шапки нет, так он читается на любом фоне);
   наверху страницы, где логотип крупный, стекла нет */
.h-btn--logo { width: 56px; height: 56px; border-radius: 28px; }
.site-header.is-top .h-btn--logo {
  width: auto; height: auto; border-radius: 0; background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.site-header.is-top .h-btn--logo:hover { transform: none; }
.h-btn--menu {
  gap: 10px; padding: 0 16px 0 20px;
  font: 600 13px var(--font-sans); letter-spacing: .14em; text-transform: uppercase;
}
/* светлые экраны (песок) — стекло с тёплым оттенком и тёмной кромкой */
.site-header[data-tone="dark"] .h-btn,
.site-header[data-tone="ink"] .h-btn {
  --glass-bg: rgba(255, 255, 255, .5);
  --glass-edge: rgba(43, 36, 31, .14);
  --glass-hi: rgba(255, 255, 255, .9);
  --glass-shadow: rgba(31, 26, 23, .1);
}
.site-header[data-tone="dark"] .h-btn:hover,
.site-header[data-tone="ink"] .h-btn:hover { --glass-bg: rgba(255, 255, 255, .72); }
/* на мобиле у «Меню» остаётся только иконка */
@media (max-width: 639px) {
  .h-btn--menu { width: 44px; padding: 0; }
  .h-btn__label { display: none; }
}

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

.menu-overlay {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column; background: #1F1A17; color: #fff;
  padding: 24px 16px 32px; overflow-y: auto;
  animation: menuIn .35s ease both;
}
.menu-overlay[hidden] { display: none; }
@media (min-width: 640px)  { .menu-overlay { padding: 24px 32px 40px; } }
@media (min-width: 1024px) { .menu-overlay { padding: 24px 64px 56px; } }
@keyframes menuIn { from { opacity: 0; } to { opacity: 1; } }

.menu-overlay__top { display: flex; align-items: center; justify-content: space-between; }
.menu-overlay__logo { color: #fff; }
.menu-overlay__logo .logo { width: 72px; height: 72px; }
.menu-overlay__close {
  width: 44px; height: 44px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .55);
  background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.menu-overlay__close:hover { background: rgba(255, 255, 255, .1); }

.menu-overlay__nav { display: flex; flex-direction: column; margin: auto 0; padding: 32px 0; }
.menu-overlay__nav a {
  display: block; padding: 6px 0; color: #fff; text-decoration: none;
  font: 600 clamp(36px, 7vw, 72px)/1.1 var(--font-sans); letter-spacing: -.03em;
  opacity: .9; transition: opacity .2s, color .2s;
  animation: menuItem .5s cubic-bezier(.2, .7, .2, 1) both;
}
.menu-overlay__nav a:hover, .menu-overlay__nav a.is-active { opacity: 1; color: #E8C2AE; }
.menu-overlay__nav a:nth-child(2) { animation-delay: .04s; }
.menu-overlay__nav a:nth-child(3) { animation-delay: .08s; }
.menu-overlay__nav a:nth-child(4) { animation-delay: .12s; }
.menu-overlay__nav a:nth-child(5) { animation-delay: .16s; }
.menu-overlay__nav a:nth-child(6) { animation-delay: .2s; }
@keyframes menuItem { from { opacity: 0; transform: translateY(16px); } to { opacity: .9; transform: none; } }
.menu-overlay__cta { background: #fff; color: #1F1A17; border-color: #fff; }
@media (prefers-reduced-motion: reduce) { .menu-overlay, .menu-overlay__nav a { animation: none; } }
body.menu-open { overflow: hidden; }

/* ---------- Экран 4 ---------- */


/* ---------- Экран 6 ---------- */


/* ---------- Экран 7 ---------- */


/* ---------- Экран 8: FAQ ---------- */


/* затемнение первого экрана */
.hero__shade {
  background: linear-gradient(180deg, rgba(20,16,12,.35) 0%, rgba(20,16,12,.15) 30%, rgba(20,16,12,.55) 60%, rgba(20,16,12,.88) 100%);
}

.site-header { transition: background-color .25s, border-color .25s, color .25s; }

/* ---------- Появление текста первого экрана ---------- */

.reveal {
  opacity: 0; transform: translateY(28px); filter: blur(8px);
  transition: opacity 1s cubic-bezier(.2, .7, .2, 1), transform 1s cubic-bezier(.2, .7, .2, 1), filter 1s ease;
  transition-delay: calc(var(--d, 0) * 140ms + 150ms);
}
body.is-ready .reveal { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { transform: none; filter: none; transition-duration: .4s; }
}

/* ---------- Видео фоном (свой файл, assets/video) ---------- */

/* Сцена экранов 1–2: обёртка выше экрана на запас прокрутки, внутри — закреплённый кадр.
   Пока прокручивается запас, --p растёт 0 → 1: полукруг выезжает и закрывает первый экран. */
/* Кадр — высотой с окно при свёрнутой панели браузера (lvh): иначе на телефоне, когда панель при прокрутке
   сворачивается, под кадром проглядывала тёмная полоса. Сам первый экран — по малой высоте (svh),
   чтобы кнопка и строки снизу не уходили под развёрнутую панель. Запас прокрутки — по-прежнему один svh. */
.hero-wrap { position: relative; height: 200vh; height: calc(100svh + 100lvh); background: #2B241F; }
.hero-pin { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-pin > .hero { position: absolute; inset: 0 0 auto; height: 100%; height: 100svh; z-index: 1; }

/* первый экран уходит под полукруг: текст гаснет и чуть поднимается (видео под ним продолжает играть) */
.hero-pin > .hero { opacity: clamp(0, 1 - var(--p, 0) * 3.2, 1); }
.hero > .hero__content, .hero > .hero__facts { translate: 0 calc(var(--p, 0) * -60px); }
.hero-wrap.is-covered .hero { pointer-events: none; }
.hero-video { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* видео на весь экран (cover). Вшитый логотип из правого нижнего угла срезан ещё при сжатии файла */
.hero-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }

/* ---------- Первый экран: размеры от высоты окна ----------
   На низких окнах (ноутбук, браузер не на весь экран) заголовок и отступы
   уменьшаются, чтобы весь текст и кнопки помещались без прокрутки. */

.hero__content {
  gap: clamp(14px, 3svh, 28px);
  padding-top: calc(var(--header-top, 96px) + clamp(8px, 2svh, 32px));
  /* нижний отступ больше верхнего — блок с текстом и кнопкой сидит выше центра */
  padding-bottom: clamp(48px, 12svh, 140px);
}
.hero__title { font-size: clamp(30px, min(6.4vw, 8svh), 68px); }
.hero__lead  { font-size: clamp(15px, min(4.4vw, 2.6svh), 20px); }
.hero__content .btn { min-height: clamp(44px, 6.4svh, 56px); }
.hero__facts { padding-bottom: clamp(16px, 4svh, 48px); }
:root { --header-h: 80px; --header-top: 96px; }
@media (min-width: 1024px) { :root { --header-h: 112px; --header-top: 152px; } }
/* совсем низкое окно — строку фактов убираем, она дублирует блоки ниже */
@media (max-height: 560px) and (min-width: 640px) { .hero .hero__facts { display: none; } }

.hero__fact-more { display: inline; }

/* плашка «Долгосрочная аренда…» — в стиле плашки финального CTA (.fcta__badge «Ответим в течение 15 минут») */
.hero__badge {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .4);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 13px; letter-spacing: .06em;
}
.hero__dot { flex: none; width: 8px; height: 8px; border-radius: 4px; background: #B4654A; }

/* элементы только для телефона */
.hero__lead-m, .hero__trust { display: none; }

/* ---------- Первый экран — мобильная версия v3 (ТЗ cc-task-hero-mobile-v3, макет 390×844) ----------
   Верхняя половина — чистое видео, весь текст прижат к низу на мягком градиенте и выровнен влево.
   Без подложки под абзацем, линии и сетки из 4 пунктов; под кнопкой — одна строка-доверие.
   Шапка над первым экраном — блок #header ниже (без подложки, логотип 62px).
   Селекторы в два класса — чтобы перебить утилиты Tailwind на тех же элементах. */
@media (max-width: 768px) {
  /* не ниже 560px: на 320×568 весь текст и строка-доверие в окне */
  .hero-pin { min-height: 560px; }
  .hero-video video { object-position: 50% 55%; }

  /* верх чуть темнее под шапку, середина прозрачная, низ тёмный под текст */
  .hero .hero__shade {
    background: linear-gradient(180deg, rgba(20,16,12,.35) 0%, rgba(20,16,12,0) 22%, rgba(20,16,12,0) 38%, rgba(20,16,12,.55) 60%, rgba(20,16,12,.88) 100%);
  }

  .hero .hero__content {
    position: absolute; left: 0; right: 0; bottom: 0; flex: none; z-index: 1;
    align-items: flex-start; justify-content: flex-end; gap: 16px; text-align: left;
    padding: 0 22px calc(40px + env(safe-area-inset-bottom));
  }
  /* затемнение привязано к тексту: на низких экранах текст поднимается выше 38%, а читаться должен на любом кадре */
  .hero .hero__content::before {
    content: ""; position: absolute; z-index: -1; inset: -120px 0 0 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(20,16,12,0) 0%, rgba(20,16,12,.55) 120px, rgba(20,16,12,.88) 100%);
  }

  /* плашка: цвета — как у плашки финального CTA, размер — из макета v3 (30px, 12px), чтобы влезала при выравнивании влево */
  .hero .hero__badge { height: 30px; padding: 0 13px; gap: 7px; font-size: 12px; letter-spacing: 0; white-space: nowrap; }
  .hero .hero__dot { width: 6px; height: 6px; border-radius: 3px; }
  .hero .hero__title { max-width: none; font-size: 34px; line-height: 1.06; letter-spacing: -.025em; }
  /* акцент переносится по словам (появляется только прозрачностью) */
  .hero .hero__title em { display: inline; color: #E8C2AE; }
  .hero .hero__lead { max-width: 320px; font-size: 16px; line-height: 1.45; color: rgba(255, 255, 255, .88); text-wrap: pretty; }
  .hero .hero__lead-d { display: none; }
  .hero .hero__lead-m { display: inline; }
  .hero .hero__cta { width: 100%; margin-top: 6px; }
  .hero .hero__cta .btn {
    width: 100%; min-height: 56px; height: 56px; padding: 0; border-radius: 999px;
    color: #1F1A17; font-size: 16px; font-weight: 600; box-shadow: 0 8px 24px rgba(20, 16, 12, .28);
  }
  .hero .hero__trust { display: block; align-self: stretch; margin: 0; text-align: center; font-size: 12.5px; color: rgba(255, 255, 255, .65); }
  .hero .hero__facts { display: none; }
}
@media (max-width: 359px) {
  .hero .hero__content { padding-left: 18px; padding-right: 18px; }
  .hero .hero__badge { font-size: 10.5px; padding: 0 11px; gap: 6px; }
  .hero .hero__title { font-size: 30px; }
}
/* низкие экраны (≤700) */
@media (max-width: 768px) and (max-height: 700px) {
  .hero .hero__content { gap: 12px; padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
  .hero .hero__title { font-size: 30px; }
  .hero .hero__lead { font-size: 15px; }
  .hero .hero__cta { margin-top: 4px; }
  .hero .hero__cta .btn { min-height: 52px; height: 52px; }
}
@media (max-width: 359px) and (max-height: 600px) {
  .hero .hero__title { font-size: 27px; }
}
/* без backdrop-filter — кнопкам шапки плотнее подложка */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 768px) {
    .site-header[data-tone="light"]:not(.header--over-image) .h-btn:not(.h-btn--logo) { background: rgba(20, 16, 12, .45); }
  }
}

/* ======================================================================
   Логотип Mironov.Estate — цвет задаётся через color (fill: currentColor)
   ====================================================================== */

.logo { display: block; flex: none; color: inherit; }
.logo__ring { font: 600 13.5px 'Manrope', sans-serif; letter-spacing: .32em; fill: currentColor; }
.logo__mono { font: 500 72px 'Bodoni Moda', 'Playfair Display', Georgia, serif; fill: currentColor; }

/* тон шапки: light — белая поверх фото и видео, ink / dark — тёмная над песочными экранами, night — над картой */
.site-header[data-tone="ink"] { color: #2B241F; }
.site-header[data-tone="dark"] .h-logo { color: #2B241F; }
/* над тёмной секцией карты — светлые логотип и кнопки */
.site-header[data-tone="night"] { color: #F4EFE7; }
.site-header[data-tone="night"] .h-btn { --glass-bg: rgba(255, 255, 255, .1); --glass-edge: rgba(244, 239, 231, .3); --glass-hi: rgba(255, 255, 255, .35); }

/* ---------- Логотип в шапке: два слоя (ТЗ cc-task-header-mobile) ----------
   Кольцо с надписью крутится от скролла, монограмма стоит ровно (лёгкий наклон от скорости) — app.js.
   Слои — отдельные SVG, вращается сам элемент: только composite, без перерисовки текста */
.logo--live { position: relative; }
.logo--live svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.logo__ring-svg { will-change: transform; }

/* ---------- Шапка — мобильная версия (≤768, ТЗ cc-task-header-mobile, макет 390×844) ----------
   Два состояния: над видео первого экрана — без подложки, логотип 62px и у каждой кнопки своё стекло 38px
   (#header без .is-bar, ТЗ cc-task-hero-mobile-v3), дальше — светлая полоса с логотипом 52px и кнопками 36px
   (.is-bar ставит app.js, когда видео ушло из-под шапки). Переход .35s. Шапка всегда видна.
   Селекторы через #header — перебивают тона шапки (data-tone, header--over-image) и утилиты Tailwind */
@media (max-width: 768px) {
  #header {
    --hdr-ease: .35s cubic-bezier(.22, .61, .36, 1);
    left: 12px; right: 14px; top: calc(12px + env(safe-area-inset-top)); height: 64px; box-sizing: border-box;
    border-radius: 0; border: 1px solid transparent; color: #fff;
    background: rgba(20, 16, 12, 0); box-shadow: none;
    transition: left var(--hdr-ease), right var(--hdr-ease), top var(--hdr-ease), height var(--hdr-ease),
      padding var(--hdr-ease), border-radius var(--hdr-ease), background-color var(--hdr-ease),
      border-color var(--hdr-ease), box-shadow var(--hdr-ease), color var(--hdr-ease);
  }
  #header.is-bar {
    left: 0; right: 0; top: 0; height: calc(68px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top);
    border-radius: 0; border-color: transparent transparent #E3D9CB; color: #1F1A17;
    background: rgba(244, 239, 231, .94); box-shadow: none;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  }
  #header .site-header__bar { height: 100%; gap: 8px; padding: 0; transition: padding var(--hdr-ease); }
  #header.is-bar .site-header__bar { padding: 0 12px 0 10px; }

  /* логотип: над видео 62px, в полосе 52px; без стеклянной подложки, цвет — currentColor шапки */
  #header .h-btn--logo {
    width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; color: inherit;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  #header .h-btn--logo:hover { transform: none; }
  #header .h-logo .logo { width: 62px; height: 62px; transition: width var(--hdr-ease), height var(--hdr-ease); }
  #header.is-bar .h-logo .logo { width: 52px; height: 52px; }

  /* Telegram, WhatsApp, «Меню ⋮»: над видео 38px, в полосе 36px, тонкая рамка */
  #header .h-actions { gap: 6px; }
  #header .h-btn:not(.h-btn--logo) {
    height: 38px; border-radius: 19px; color: inherit;
    /* над видео без капсулы — кнопкам своё лёгкое стекло, чтобы читались на светлых кадрах */
    background: rgba(20, 16, 12, .22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    transition: background-color var(--hdr-ease), box-shadow var(--hdr-ease), transform .2s;
  }
  #header.is-bar .h-btn:not(.h-btn--logo) { height: 36px; border-radius: 18px; background: transparent; box-shadow: inset 0 0 0 1px #CDBFAE; -webkit-backdrop-filter: none; backdrop-filter: none; }
  #header .h-btn:not(.h-btn--logo):hover { transform: none; }
  #header .h-btn--round { width: 38px; padding: 0; transition: width var(--hdr-ease), height var(--hdr-ease), background-color var(--hdr-ease), box-shadow var(--hdr-ease); }
  #header.is-bar .h-btn--round { width: 36px; }
  #header .h-btn--round svg { width: 17px; height: 17px; }
  #header .h-btn--menu { width: auto; gap: 6px; padding: 0 10px 0 13px; font: 600 11.5px var(--font-sans); letter-spacing: .14em; }
  #header .h-btn--menu svg { width: 14px; height: 14px; }
  #header .h-btn__label { display: inline; }

  /* меню на телефоне — нижняя панель, полноэкранное не открывается */
  .menu-overlay { display: none !important; }
}
@media (max-width: 374px) {
  #header .h-logo .logo { width: 54px; height: 54px; }
  #header.is-bar .h-logo .logo { width: 46px; height: 46px; }
  #header .h-btn--menu { padding: 0 9px 0 11px; letter-spacing: .1em; }
}

/* ---------- Меню на телефоне — нижняя панель (bottomSheet в app.js: .msheet.is-sheet — открыта) ---------- */
.msheet { display: none; }
@media (max-width: 768px) {
  .msheet { display: block; }
  .msheet__backdrop {
    position: fixed; inset: 0; z-index: 110; opacity: 0; pointer-events: none;
    background: rgba(10, 8, 6, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); transition: opacity .3s ease;
  }
  .msheet.is-sheet .msheet__backdrop { opacity: 1; pointer-events: auto; }
  .msheet__panel {
    position: fixed; z-index: 111; left: 0; right: 0; bottom: 0; max-height: min(92svh, calc(var(--sheet-vh, 100svh) - 12px));
    display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; outline: none; box-sizing: border-box;
    padding: 10px 22px calc(26px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0;
    background: #FBF8F3; color: #1F1A17; box-shadow: 0 -20px 60px rgba(0, 0, 0, .35);
    transform: translateY(110%); visibility: hidden;
    transition: transform .42s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .42s;
  }
  .msheet.is-sheet .msheet__panel { transform: translateY(var(--sheet-drag, 0px)); visibility: visible; transition: transform .42s cubic-bezier(.22, .61, .36, 1); }
  .msheet.is-dragging .msheet__panel { transition: none; }
  .msheet__handle { flex: none; width: 40px; height: 4px; margin: 0 auto 8px; border-radius: 2px; background: #CDBFAE; }
  .msheet__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; }
  .msheet__title { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: #B4654A; outline: none; }
  .msheet__close {
    width: 34px; height: 34px; padding: 0; border-radius: 17px; border: 1px solid #E3D9CB; background: transparent;
    color: #6B5F55; font-size: 14px; cursor: pointer;
  }
  .msheet__nav { display: flex; flex-direction: column; border-bottom: 1px solid #E3D9CB; }
  .msheet__nav a {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 13px 0;
    border-top: 1px solid #E3D9CB; color: #1F1A17; text-decoration: none;
  }
  .msheet__nav .accent { font-size: 24px; line-height: 1.15; }
  .msheet__nav small { font-size: 12px; color: #8A7D72; white-space: nowrap; }
  .msheet__msgs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
  .msheet__msg {
    display: flex; align-items: center; justify-content: center; height: 46px; border-radius: 999px;
    border: 1px solid #CDBFAE; color: #1F1A17; font-size: 14px; font-weight: 600; text-decoration: none;
  }
  .msheet__cta {
    display: flex; align-items: center; justify-content: center; height: 52px; margin-top: 8px; border-radius: 999px;
    background: #B4654A; color: #fff; font-size: 16px; font-weight: 600; text-decoration: none;
  }
  .msheet__cta:hover { color: #fff; }
}
@media (max-width: 768px) and (max-height: 700px) {
  .msheet__nav a { padding: 10px 0; }
  .msheet__nav .accent { font-size: 21px; }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  #header, #header .site-header__bar, #header .h-btn { transition: none !important; }
  .msheet__panel, .msheet.is-sheet .msheet__panel { transform: none; opacity: 0; transition: opacity .25s ease, visibility 0s linear .25s; }
  .msheet.is-sheet .msheet__panel { opacity: 1; transition: opacity .25s ease; }
}

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

/* ---------- Рейка с номером экрана и SCROLL (слева) ----------
   Все вертикальные линии сайта стоят на одной оси --rail-x. Контейнер шириной 1px
   ровно по оси, содержимое центрируется по нему и свисает в обе стороны —
   так ширина цифр («02», «11») и надписи SCROLL не сдвигает линию. */

:root { --rail-x: 100px; }
.rail, .scroll-hint { width: 1px; }
.rail {
  position: absolute; left: var(--rail-x); top: 150px; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600;
}
.rail i { display: block; flex: none; width: 1px; height: 24px; }
.rail span, .scroll-hint span, .scroll-hint svg { flex: none; }
.rail .rail__long { height: var(--len, 300px); }
.rail--light { color: #fff; }
.rail--light i { background: #fff; }
.rail--light .rail__long { background: rgba(255, 255, 255, .7); }
.rail--dark { color: #2B241F; }
.rail--dark i { background: #2B241F; }
.rail--dark .rail__long { background: rgba(43, 36, 31, .5); }

.scroll-hint {
  position: absolute; left: var(--rail-x); bottom: 56px; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 14px; color: #2B241F;
}
.scroll-hint span {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 12px; letter-spacing: .3em; text-transform: uppercase; font-weight: 700;
}
@media (max-width: 1099px) { .rail, .scroll-hint { display: none; } }

/* ======================================================================
   Экран 2: переход — фото, снизу поднимается голубой круг
   ====================================================================== */

.intro {
  position: absolute; inset: 0; z-index: 2; overflow: hidden; color: #2B241F;
  pointer-events: none;  /* лежит поверх первого экрана, клики проходят к его кнопкам */
}
.intro__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,16,12,0.45) 0%, rgba(20,16,12,0) 35%); opacity: clamp(0, var(--p, 0) * 1.5, 1); }

/* Сцена в координатах макета 1440×1000, масштаб --s считает app.js по размеру окна.
   --p — прогресс подъёма круга от 0 (круг под нижней границей) до 1 (верх круга на 330px). */
.intro__stage {
  position: absolute; left: 50%; top: 0; z-index: 1;
  width: 1440px; height: 1000px;
  transform: translateX(-50%) scale(var(--s, 1)); transform-origin: top center;
}
/* круг и всё, что на нём (заголовок по дуге, логотип, подпись), сдвигаются одинаково —
   текст «прилеплен» к полусфере и выезжает вместе с ней */
.intro__circle, .intro__content {
  --rise: calc((1 - var(--p, 1)) * 700px);
  transform: translate3d(0, var(--rise), 0);
  will-change: transform;
}
.intro__circle {
  position: absolute; left: 50%; top: 330px; width: 2600px; height: 2600px; margin-left: -1300px;
  border-radius: 50%; background: #F4EFE7;
}
.intro__content {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 360px 64px 0;
}
.intro__arc { display: block; max-width: none; }
.intro__arc-text { font: 600 46px 'Manrope', ui-sans-serif, system-ui, sans-serif; letter-spacing: -.02em; fill: #2B241F; }
.intro__arc-accent { font-family: var(--font-serif-accent); font-style: italic; font-weight: 400; font-size: 52px; letter-spacing: 0; fill: #B4654A; }
.intro__title-m { display: none; }
.intro__logo { margin-top: -150px; color: #2B241F; }
.intro__logo .logo { width: 168px; height: 168px; }
.intro__line { width: 1px; height: 104px; background: #2B241F; opacity: .7; margin-top: 24px; }
.intro__caption {
  margin: 28px 0 0; max-width: 520px; font: italic 400 20px/1.45 var(--font-serif-accent); color: #2B241F;
}

/* рейка «02» и SCROLL проявляются, когда круг почти поднялся */
.intro .scroll-hint, .intro .rail {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}
.intro.is-shown .scroll-hint, .intro.is-shown .rail { opacity: 1; transform: none; }

/* мобильная версия: без масштабирования сцены, круг меньше, заголовок — две прямые строки */
@media (max-width: 767px) {
  .intro__stage { left: 0; width: 100%; height: 100%; height: 100svh; transform: none; }   /* круг от малой высоты, как раньше; ниже его продолжает сам круг */
  .intro__circle, .intro__content { --rise: calc((1 - var(--p, 1)) * 70svh); }
  .intro__circle { top: 38%; width: 260vw; height: 260vw; margin-left: -130vw; }
  .intro__content { padding: calc(38svh + 32px) 16px 0; }
  .intro__arc { display: none; }
  .intro__title-m {
    display: block; margin: 0; font-size: 28px; line-height: 1.15; letter-spacing: -.02em; font-weight: 600; color: #2B241F;
  }
  .intro__title-m em { color: #B4654A; }
  .intro__logo { margin-top: 24px; }
  .intro__logo .logo { width: 116px; height: 116px; }
  .intro__line { height: 56px; margin-top: 16px; }
  .intro__caption { margin-top: 20px; font-size: 17px; }
}

/* reduced motion: app.js переключает --p сразу 0 ↔ 1, без промежуточных кадров */
@media (prefers-reduced-motion: reduce) {
  .intro .scroll-hint, .intro .rail { transition: none; }
}

/* ======================================================================
   Экран 3: «Проверенные дома для семей». Десктоп (>768) — лента больших карточек, вариант B3
   (ТЗ cc-task-houses-desktop-B3, макет 1440×1080); телефон — лента C2 ниже.
   Видно 3 целых карточки и край ~60px четвёртой (до 1280 — 2 + край): ширину карточки считаем от ширины блока
   (контейнер .hd, единицы cqw), край — за счёт того, что лента выходит за правое поле блока (margin-right: -64px).
   ====================================================================== */

.homes {
  position: relative; background: #F4EFE7; color: #2B241F;
  padding: calc(var(--header-h, 80px) + 8px) 64px 48px;
}
.homes > .rail, .homes > .scroll-hint { display: none; }

.hd {
  --gap: 24px; --pad: 64px;
  --card-w: clamp(340px, (100cqw - 2 * var(--gap) - 60px) / 3, 600px);
  container-type: inline-size;
  display: flex; flex-direction: column; gap: 22px;
}
@media (max-width: 1279px) { .hd { --card-w: clamp(300px, (100cqw - var(--gap) - 60px) / 2, 600px); } }
@media (max-width: 1023px) {
  .homes { padding-left: 32px; padding-right: 32px; }
  .hd { --pad: 32px; --card-w: clamp(290px, (100cqw - var(--gap) - 48px) / 2, 600px); }
}

/* 1. заголовок и навигация */
.hd__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.hd__titles { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.hd__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #B4654A; }
.hd__title { margin: 0; font: 600 64px/1.02 var(--font-sans); letter-spacing: -.03em; color: #2B241F; }
.hd__title .accent { font-family: var(--font-serif-accent); font-style: italic; font-weight: 400; color: #B4654A; }
.hd__nav { flex: none; display: flex; align-items: center; gap: 14px; }
.hd__pos { margin-right: 6px; font-size: 14px; font-weight: 500; color: #6B5F55; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hd__round {
  width: 44px; height: 44px; padding: 0; border-radius: 22px; border: 1px solid rgba(43, 36, 31, .4);
  background: transparent; color: #2B241F; font: 18px/1 var(--font-sans); cursor: pointer; transition: background-color .2s, color .2s, opacity .2s;
}
.hd__round:hover:not(:disabled) { background: #2B241F; color: #F4EFE7; }
.hd__round:disabled { opacity: .35; cursor: default; }

/* 2. фильтры */
.hd__filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding: 16px 0;
  border-top: 1px solid #E3D9CB; border-bottom: 1px solid #E3D9CB;
}
.hd__fgroup { display: flex; align-items: center; gap: 8px; }
.hd__flabel { margin-right: 4px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #6B5F55; white-space: nowrap; }
.hd__chip {
  height: 38px; padding: 0 16px; border-radius: 19px; border: 1px solid rgba(43, 36, 31, .3); background: transparent;
  color: #2B241F; font: 600 13.5px var(--font-sans); white-space: nowrap; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s;
}
.hd__chip:hover { border-color: #2B241F; }
.hd__chip[aria-pressed="true"] { background: #2B241F; border-color: #2B241F; color: #F4EFE7; cursor: default; }
.hd__shown { margin-left: auto; font-size: 14px; color: #6B5F55; white-space: nowrap; }
.hd__shown b { color: #2B241F; }

/* 3. лента: нативный скролл со snap; выходит за правое поле блока. Снизу запас под тени, сверху — под подъём карточки */
.hd__viewport { margin-right: calc(-1 * var(--pad)); }
.hd__track {
  display: flex; gap: var(--gap); padding: 6px var(--hd-end, 0px) 36px 0;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; outline: none;
}
.hd__track::-webkit-scrollbar { display: none; }
.hd__track:focus-visible { box-shadow: inset 0 0 0 2px #B4654A; border-radius: 26px; }
.hd__dots { display: flex; justify-content: center; gap: 6px; margin-top: -18px; }   /* -6px по макету минус лишний запас трека под тень */
.hd__dot { position: relative; width: 6px; height: 6px; padding: 0; border: 0; border-radius: 3px; background: #D6C9B8; cursor: pointer; transition: width .3s, background-color .3s; }
.hd__dot::before { content: ''; position: absolute; inset: -10px -4px; }   /* зона нажатия больше точки */
.hd__dot[aria-current="true"] { width: 22px; background: #1F1A17; }
.hd__dots:has(.hd__dot:only-child) { visibility: hidden; }
.hd.is-empty .hd__viewport, .hd.is-empty .hd__dots { display: none; }
.hd.is-empty .hd__nav { visibility: hidden; }

.hd__empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 60px 0; text-align: center; }
.hd__empty[hidden] { display: none; }
.hd__empty-title { font: italic 400 30px/1 var(--font-serif-accent); color: #2B241F; }
.hd__empty-text { color: #6B5F55; }
.hd__empty-btn {
  display: inline-flex; align-items: center; height: 52px; margin-top: 8px; padding: 0 26px; border-radius: 26px;
  background: #B4654A; color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; transition: background-color .2s;
}
.hd__empty-btn:hover { background: #8F4D36; color: #fff; }

/* 4. карточка дома */
.hc3 {
  flex: none; width: var(--card-w); box-sizing: border-box; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 14px; padding: 8px 8px 16px;
  background: #FBF8F3; border: 1px solid #E3D9CB; border-radius: 24px; box-shadow: 0 10px 24px rgba(31, 26, 23, .06);
  color: #2B241F; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.hc3:hover { transform: translateY(-4px); border-color: #CDBFAE; box-shadow: 0 18px 36px rgba(31, 26, 23, .1); }
.hc3__photo { position: relative; aspect-ratio: 412 / 270; border-radius: 18px; overflow: hidden; background: #E3D9CB; isolation: isolate; }
.hc3__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.hc3:hover .hc3__photo img { transform: scale(1.04); }
.hc3__ph { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; background: linear-gradient(165deg, #E9DFD0, #BFA98D); font-size: 13px; color: #2B241F; }
.hc3__badge {
  position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px;
  border-radius: 14px; background: rgba(251, 248, 243, .95); font-size: 11.5px; font-weight: 700; color: #8F4D36; white-space: nowrap;
}
.hc3__badge i { width: 5px; height: 5px; border-radius: 3px; background: #B4654A; }
.hc3__fav {
  position: absolute; right: 6px; top: 6px; width: 44px; height: 44px; padding: 0; border: 0; background: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.hc3__fav svg { width: 24px; height: 24px; overflow: visible; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .25)); }
.hc3__fav path { fill: rgba(31, 26, 23, .45); stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; transition: fill .2s; }
.hc3__fav[aria-pressed="true"] path { fill: #B4654A; }
.hc3__fav.is-pop svg { animation: hc3Pop .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes hc3Pop { 0% { transform: scale(1); } 45% { transform: scale(1.28); } 100% { transform: scale(1); } }
.hc3__arr {
  position: absolute; top: 50%; width: 32px; height: 32px; margin-top: -16px; padding: 0; border: 0; border-radius: 16px;
  background: rgba(251, 248, 243, .92); color: #1F1A17; font: 15px/1 var(--font-sans); cursor: pointer;
  display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s;
}
.hc3__arr--prev { left: 10px; }
.hc3__arr--next { right: 10px; }
.hc3:hover .hc3__arr, .hc3__photo:focus-within .hc3__arr { opacity: 1; }
.hc3__pdots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; align-items: center; gap: 5px; pointer-events: none; }
.hc3__pdots i { width: 6px; height: 6px; border-radius: 4px; background: #fff; opacity: .55; transition: width .2s, height .2s, opacity .2s; }
.hc3__pdots i.is-on { width: 8px; height: 8px; opacity: 1; }

.hc3__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; padding: 0 10px; }
.hc3__name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hc3__type { font-size: 13px; color: #6B5F55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc3__district { font: italic 400 clamp(24px, var(--card-w) * .074, 30px)/1.05 var(--font-serif-accent); color: #2B241F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc3__price { flex: none; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.hc3__price b { font-size: clamp(19px, var(--card-w) * .055, 22px); font-weight: 700; white-space: nowrap; }
.hc3__price span { font-size: 12px; color: #6B5F55; white-space: nowrap; }

.hc3__specs { display: flex; margin: 0 10px; padding: 12px 0; border-top: 1px solid #E3D9CB; border-bottom: 1px solid #E3D9CB; }
.hc3__spec { flex: 1 1 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hc3__spec + .hc3__spec { padding-left: 12px; border-left: 1px solid #E3D9CB; }
.hc3__spec b { font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc3__spec span { font-size: 12px; color: #6B5F55; }

.hc3__list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0 10px; list-style: none; font-size: 14.5px; }
.hc3__list li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hc3__list li > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc3__list svg { flex: none; width: 16px; height: 16px; fill: none; stroke: #8A7D72; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hc3 :focus-visible, .hc3-more:focus-visible { outline: 2px solid #B4654A; outline-offset: 2px; }
.hc3:focus-visible { outline: 2px solid #B4654A; outline-offset: 3px; }
.hc3__fav:focus-visible { outline-offset: -6px; border-radius: 50%; }

/* последняя карточка «Посмотреть все» — высотой с карточки ряда */
.hc3-more {
  flex: none; width: var(--card-w); box-sizing: border-box; align-self: stretch; scroll-snap-align: start;
  display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 24px;
  border: 1px solid #E3D9CB; border-radius: 22px; background: #FBF8F3; color: #1F1A17; text-decoration: none; transition: transform .25s ease;
}
.hc3-more:hover { transform: translateY(-4px); color: #1F1A17; }
.hc3-more__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hc3-more__grid img, .hc3-more__grid i { display: block; width: 100%; height: 96px; border-radius: 12px; object-fit: cover; background: linear-gradient(165deg, #E9DFD0, #BFA98D); }
.hc3-more__title { font: italic 400 30px/1.05 var(--font-serif-accent); }
.hc3-more__go { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #6B5F55; }
.hc3-more__btn { flex: none; width: 44px; height: 44px; border-radius: 22px; background: #1F1A17; color: #fff; display: flex; align-items: center; justify-content: center; transition: background-color .2s; }
.hc3-more__btn svg { width: 20px; height: 20px; }
.hc3-more:hover .hc3-more__btn { background: #B4654A; }

/* 1024–1279 и уже: карточка уже — цифры и район чуть меньше, чтобы ничего не обрезалось */
@media (max-width: 1279px) {
  .hd__title { font-size: clamp(40px, 4.6vw, 64px); }   /* заголовок и навигация — в одну строку */
  .hd__filters { gap: 12px 18px; }
  .hd__fgroup { gap: 6px; }
  .hd__chip { padding: 0 12px; }
}
@media (max-width: 1023px) {
  .hd__head { flex-wrap: wrap; }
  .hc3__spec b { font-size: 15px; }
  .hc3__spec + .hc3__spec { padding-left: 8px; }
  .hc3__list { font-size: 13.5px; }
}

/* блок целиком в экран, как в макете: высота фото — то, что остаётся от окна после заголовка, фильтров,
   нижней части карточки и точек (--fit), но не выше 4:5 ширины карточки и не ниже 160px.
   Кнопок и тегов в карточке нет (подробности — кликом по карточке): это место отдано фото.
   На невысоких окнах (ноутбуки) заголовок, фильтры и карточка плотнее */
.hd { --fit: 667px; }
.hc3__photo { aspect-ratio: auto; height: clamp(160px, 100svh - var(--fit), var(--card-w) * .8); }
@media (min-width: 769px) and (max-height: 960px) {
  .homes { padding-top: calc(var(--header-h, 80px) - 8px); }
  .hd { --fit: 568px; gap: 14px; }
  .hd__titles { gap: 8px; }
  .hd__title { font-size: 48px; }
  .hd__filters { padding: 10px 0; }
  .hc3 { gap: 10px; padding-bottom: 12px; }
  .hc3__specs { padding: 9px 0; }
  .hc3__list { gap: 6px; }
}
@media (min-width: 769px) and (max-height: 820px) {
  .hd { --fit: 538px; }
  .hd__eyebrow { display: none; }
  .hd__title { font-size: 42px; }
}

/* 5. панель подробностей справа (fixed, над шапкой; квиз — ещё выше) */
.hdr { position: fixed; inset: 0; z-index: 96; }
.hdr[hidden] { display: none; }
.hdr__overlay { position: absolute; inset: 0; background: rgba(31, 26, 23, .35); opacity: 0; transition: opacity .3s ease; }
.hdr__panel {
  position: absolute; right: 0; top: 0; bottom: 0; width: min(620px, 100vw); box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 14px; padding: 28px 32px 32px;
  background: #F4EFE7; color: #2B241F; box-shadow: -20px 0 60px rgba(0, 0, 0, .2); outline: none;
  transform: translateX(100%); transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
.hdr.is-open .hdr__overlay { opacity: 1; }
.hdr.is-open .hdr__panel { transform: none; }
html.hdr-lock, html.hdr-lock body { overflow: hidden; }

.hdr__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.hdr__eyebrow { min-width: 0; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #B4654A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr__close {
  flex: none; width: 44px; height: 44px; padding: 0; border-radius: 22px; border: 1px solid rgba(43, 36, 31, .4);
  background: transparent; color: #2B241F; font: 16px/1 var(--font-sans); cursor: pointer; transition: background-color .2s, color .2s;
}
.hdr__close:hover { background: #2B241F; color: #F4EFE7; }
.hdr__title { margin: 0; font: italic 400 40px/1.05 var(--font-serif-accent); color: #2B241F; }

.hdr__gallery { position: relative; flex: none; height: 330px; border-radius: 6px; overflow: hidden; background: #E3D9CB; }
.hdr__gallery img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hdr__ph { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; background: linear-gradient(165deg, #E9DFD0, #BFA98D); font-size: 14px; }
.hdr__arr {
  position: absolute; top: 50%; width: 40px; height: 40px; margin-top: -20px; padding: 0; border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .7); background: rgba(31, 26, 23, .28); color: #fff; font: 18px/1 var(--font-sans); cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; transition: background-color .2s;
}
.hdr__arr:hover { background: rgba(31, 26, 23, .5); }
.hdr__arr--prev { left: 16px; }
.hdr__arr--next { right: 16px; }
.hdr__avail {
  position: absolute; left: 16px; top: 16px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px;
  border-radius: 14px; background: #FBF8F3; color: #2D6337; font-size: 12px; font-weight: 700;
}
.hdr__avail i { width: 6px; height: 6px; border-radius: 3px; background: #2D6337; }
.hdr__count {
  position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; height: 28px; padding: 0 12px;
  border-radius: 14px; background: rgba(31, 26, 23, .5); color: #fff; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.hdr__dots { position: absolute; left: 0; right: 0; bottom: 22px; display: flex; justify-content: center; gap: 8px; pointer-events: none; }
.hdr__dots button { position: relative; width: 6px; height: 6px; padding: 0; border: 0; border-radius: 3px; background: rgba(255, 255, 255, .55); cursor: pointer; pointer-events: auto; transition: width .3s; }
.hdr__dots button::before { content: ''; position: absolute; inset: -10px -3px; }
.hdr__dots button[aria-current="true"] { width: 22px; background: #fff; }

.hdr__specs, .hdr__tile, .hdr__box { background: #FBF8F3; border: 1px solid #E3D9CB; border-radius: 6px; }
.hdr__specs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; }
.hdr__spec { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 8px 11px 12px; }
.hdr__spec + .hdr__spec { border-left: 1px solid #E3D9CB; }
.hdr__spec dt, .hdr__label { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: #6B5F55; white-space: nowrap; }
.hdr__spec dd { margin: 0; font: italic 400 19px/1 var(--font-serif-accent); color: #2B241F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr__tiles { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 8px; }
.hdr__tile { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 10px 12px 11px; }
.hdr__value { font: italic 400 19px/1 var(--font-serif-accent); color: #2B241F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr__note { font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: #6B5F55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr__box { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; }
.hdr__box .hdr__label { font-size: 11px; }
.hdr__box p { margin: 0; font-size: 15px; line-height: 1.6; }
.hdr__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.hdr__cta, .hdr__ghost {
  display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 26px; border-radius: 26px;
  font: 600 15px var(--font-sans); text-decoration: none; white-space: nowrap; transition: background-color .2s, color .2s;
}
.hdr__cta { flex: 1 1 auto; background: #B4654A; color: #fff; }
.hdr__cta:hover { background: #8F4D36; color: #fff; }
.hdr__ghost { padding: 0 24px; border: 1px solid rgba(43, 36, 31, .4); color: #2B241F; }
.hdr__ghost:hover { background: #2B241F; color: #F4EFE7; }
.hdr :focus-visible { outline: 2px solid #B4654A; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .hc3, .hc3-more, .hc3__photo img, .hdr__panel, .hdr__overlay { transition: none; }
  .hc3:hover, .hc3-more:hover, .hc3:hover .hc3__photo img { transform: none; }
  .hc3__fav.is-pop svg { animation: none; }
}
/* ---------- Мобильный слайдер домов, вариант C2 (≤768, ТЗ cc-task-houses-slider-C2, макет 390×540) — финальный ----------
   Вместо десктопного блока — лента карточек на светлой подложке, в конце «Посмотреть все» (2×2 превью фото),
   под лентой точки-индикатор. Нативный скролл со snap, карточки и точки строит app.js из window.SLIDES. */
.hs { display: none; }
@media (max-width: 768px) {
  /* переход по якорю (меню): заголовок ниже полосы шапки (68px) */
  .homes { padding: 32px 0 24px; scroll-margin-top: calc(72px + env(safe-area-inset-top)); }
  .hd { display: none; }
  .hs { display: flex; flex-direction: column; gap: 20px; }
  .hs__head { padding: 0 20px; }
  .hs__title { margin: 0; font: 600 30px/1.04 var(--font-sans); letter-spacing: -.03em; color: #1F1A17; }
  .hs__title .accent { color: #B4654A; }
  .hs__sub { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: #6B5F55; }

  /* карточка min(320px, 84vw); нижний padding трека — чтобы тень карточек не обрезалась */
  .hs__track {
    --card: min(320px, 84vw);
    display: flex; gap: 12px; margin: 0; padding: 0 20px 14px; list-style: none;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: 20px;
    touch-action: pan-x pan-y; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .hs__track::-webkit-scrollbar { display: none; }
  .hs__track::after { content: ""; flex: none; width: 6px; }   /* распорка в конце */
  .hs__item { position: relative; flex: none; display: flex; width: var(--card); scroll-snap-align: start; }

  .hs-card, .hs-more {
    flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0;
    background: #FBF8F3; border: 1px solid #E3D9CB; color: #1F1A17; text-decoration: none;
    -webkit-tap-highlight-color: transparent; transition: transform .15s ease;
  }
  .hs-card:active, .hs-more:active { transform: scale(.98); }
  .hs-card { gap: 12px; padding: 8px 8px 14px; border-radius: 22px; box-shadow: 0 10px 24px rgba(31, 26, 23, .06); }
  .hs-card__photo { position: relative; aspect-ratio: 304 / 200; border-radius: 16px; overflow: hidden; background: #E3D9CB; }
  .hs-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .hs-card__ph {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(165deg, #E9DFD0, #BFA98D); font-size: 13px; color: #6B5F55;
  }
  .hs-card__badge {
    position: absolute; left: 10px; top: 10px; height: 26px; padding: 0 10px; border-radius: 13px;
    display: inline-flex; align-items: center; gap: 6px; background: rgba(251, 248, 243, .95);
    font-size: 11px; font-weight: 700; color: #8F4D36;
  }
  .hs-card__badge::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 3px; background: #B4654A; }
  /* сердечко — отдельная кнопка поверх карточки: видно 24px, область нажатия 44px */
  .hs-card__fav {
    position: absolute; right: 8px; top: 8px; width: 44px; height: 44px; padding: 0; border: 0; background: none;
    display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .hs-card__fav svg { width: 24px; height: 24px; overflow: visible; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .25)); }
  .hs-card__fav path { fill: rgba(31, 26, 23, .45); stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; transition: fill .2s; }
  .hs-card__fav[aria-pressed="true"] path { fill: #B4654A; }
  .hs-card__fav.is-pop svg { animation: favPop .35s cubic-bezier(.3, 1.6, .5, 1); }
  @keyframes favPop { 0% { transform: scale(1); } 45% { transform: scale(1.28); } 100% { transform: scale(1); } }
  .hs-card__fav:focus-visible { outline: 2px solid #fff; outline-offset: -6px; border-radius: 50%; }

  .hs-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 8px; }
  .hs-card__name, .hs-card__price { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .hs-card__price { flex: none; align-items: flex-end; text-align: right; }
  .hs-card__kind { font-size: 12px; color: #6B5F55; }
  .hs-card__district { font: italic 400 24px/1.05 var(--font-serif-accent); color: #1F1A17; }
  .hs-card__sum { font-size: 17px; font-weight: 700; color: #1F1A17; white-space: nowrap; }
  .hs-card__per { font-size: 11px; color: #6B5F55; }
  .hs-card__specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 8px; padding-top: 10px; border-top: 1px solid #E3D9CB; }
  .hs-card__spec { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .hs-card__spec + .hs-card__spec { padding-left: 12px; border-left: 1px solid #E3D9CB; }
  .hs-card__spec b { font-size: 15px; font-weight: 600; }
  .hs-card__spec span { font-size: 11px; color: #6B5F55; }
  .hs-card__district, .hs-card__kind, .hs-card__spec b, .hs-card__spec span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* последняя карточка «Посмотреть все»: высота — как у соседних (stretch), слева 2×2 превью */
  .hs-more { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: center; padding: 14px; border-radius: 18px; }
  .hs-more__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .hs-more__grid img, .hs-more__grid i { display: block; width: 100%; height: 80px; border-radius: 10px; object-fit: cover; background: linear-gradient(165deg, #E9DFD0, #BFA98D); }
  .hs-more__text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
  .hs-more__title { font-size: 20px; line-height: 1.15; font-weight: 600; letter-spacing: -.01em; }
  .hs-more__sub { font-size: 13px; color: #6B5F55; }
  .hs-more__go { width: 44px; height: 44px; margin-top: 6px; border-radius: 22px; background: #1F1A17; color: #fff; display: flex; align-items: center; justify-content: center; }
  .hs-more__go svg { width: 20px; height: 20px; }

  /* точки: видно 6px (активная 22px), область нажатия 24px */
  .hs__dots { display: flex; justify-content: center; gap: 6px; margin-top: -6px; }
  .hs__dot { width: auto; height: 24px; padding: 0 9px; margin: 0 -9px; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .hs__dot::before { content: ""; display: block; width: 6px; height: 6px; border-radius: 3px; background: #D6C9B8; transition: width .3s ease, background-color .3s; }
  .hs__dot[aria-current="true"]::before { width: 22px; background: #1F1A17; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-card__fav.is-pop svg { animation: none; }
  .hs-card:active, .hs-more:active { transform: none; }
  .hs__dot::before { transition: none; }
}

/* ---------- Логотип в шапке: крупный наверху страницы, компактный после прокрутки ---------- */

.h-logo .logo { width: 56px; height: 56px; transition: width .35s ease, height .35s ease; }
.site-header.is-top .h-logo .logo { width: 72px; height: 72px; }
@media (min-width: 1024px) {
  .h-logo .logo { width: 64px; height: 64px; }
  .site-header.is-top .h-logo .logo { width: 104px; height: 104px; }
}

/* ======================================================================
   Секция «Сначала школа и садик…» — карта школ и садов (ТЗ v3, макет 03-map-schools.html)
   Координаты всего на карте — в системе viewBox 0 0 595 1427, в HTML — в % от размеров карты.
   ====================================================================== */

.mapsec {
  --map-land: #2A2522;
  --map-w: 459px;
  position: relative; overflow: hidden; background: #141210; color: #F4EFE7;
}
.mapsec__inner { position: relative; max-width: 1440px; min-height: 1080px; margin: 0 auto; }

.mapsec__side {
  position: relative; z-index: 1; max-width: 560px; box-sizing: border-box;
  padding: calc(var(--header-h, 80px) + 24px) 64px 72px; display: flex; flex-direction: column; gap: 30px;
}
.mapsec__intro { display: flex; flex-direction: column; gap: 14px; }
.mapsec__eyebrow { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: #E8C2AE; font-weight: 700; }
.mapsec__title { margin: 0; font: 600 56px/1.05 var(--font-sans); letter-spacing: -.025em; color: #F4EFE7; }
.mapsec__title .accent { color: #E8C2AE; }
.mapsec__hint { margin: 0; font-size: 17px; line-height: 1.6; color: rgba(244, 239, 231, .6); }
.mapsec__step { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: rgba(244, 239, 231, .6); }

/* 01 · фильтр и легенда */
.mapsec__filter { display: flex; flex-direction: column; gap: 12px; }
.mapsec__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.map-chip {
  height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(244, 239, 231, .35);
  background: transparent; color: #F4EFE7; font: 600 13px var(--font-sans); cursor: pointer; transition: background-color .2s, color .2s;
}
.map-chip:hover { background: rgba(244, 239, 231, .08); }
.map-chip.is-on { background: #F4EFE7; color: #1F1A17; }
.mapsec__legend { display: flex; flex-wrap: wrap; gap: 22px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(244, 239, 231, .7); }
.mapsec__legend span { display: inline-flex; align-items: center; gap: 8px; }
.mapsec__legend i { display: inline-block; box-sizing: border-box; }
.lg-school { width: 12px; height: 12px; border-radius: 6px; background: #B4654A; border: 2px solid #F4EFE7; }
.lg-kg { width: 10px; height: 10px; transform: rotate(45deg); background: #E8C2AE; }

/* 02 · районы рядом */
.mapsec__near { display: flex; flex-direction: column; gap: 10px; }
.map-near { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid rgba(244, 239, 231, .15); }
.map-near__name { font-size: 28px; color: #F4EFE7; }
.map-near__time { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(244, 239, 231, .6); white-space: nowrap; }
.mapsec__cta {
  display: inline-flex; align-self: flex-start; align-items: center; height: 56px; padding: 0 32px; border-radius: 999px;
  background: #F4EFE7; color: #1F1A17; text-decoration: none; font-size: 16px; font-weight: 600; transition: opacity .2s;
}
.mapsec__cta:hover { opacity: .9; color: #1F1A17; }
.mapsec__note { font-size: 12px; line-height: 1.5; color: rgba(244, 239, 231, .4); }

/* карта: 459×1100 на 1440, левый край 761px, чуть выше секции */
.mapsec__viewport { position: absolute; left: calc(50% + 41px); top: -60px; width: var(--map-w); aspect-ratio: 595 / 1427; }
.mapsec__canvas { position: absolute; inset: 0; }
.map-land, .map-overlay { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.map-land path { fill: var(--map-land); }
.map-overlay { pointer-events: none; }
.map-overlay .d-dot { fill: rgba(244, 239, 231, .45); }
.map-overlay .d-label { font: 14px Manrope, sans-serif; letter-spacing: .08em; text-transform: uppercase; fill: rgba(244, 239, 231, .45); }
.map-overlay .ring { fill: none; stroke: #F4EFE7; stroke-width: 1.3; stroke-dasharray: 5 8; }
.map-overlay .rings { animation: ringsIn .25s ease both; }
@keyframes ringsIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }

/* маркеры — HTML-кнопки без подписей; зона клика 28px (на тач-экранах 44px) */
.map-pins { position: absolute; inset: 0; }
.map-pin {
  position: absolute; z-index: 3; width: 28px; height: 28px; margin: -14px 0 0 -14px; padding: 0;
  display: flex; align-items: center; justify-content: center; border: 0; background: transparent; cursor: pointer;
  /* круглая зона нажатия: у близких пар (QSI ↔ Kajonkiet, BCIS ↔ Buds) центр маркера не попадает в зону соседа */
  border-radius: 50%;
}
.map-pin[hidden] { display: none; }
.map-pin.is-on { z-index: 6; }
.map-pin:focus-visible { outline: 2px solid #E8C2AE; outline-offset: 2px; border-radius: 50%; }
.map-pin__mark { display: block; box-sizing: border-box; width: 14px; height: 14px; border-radius: 7px; background: #B4654A; border: 2px solid #F4EFE7; transition: transform .2s; }
.map-pin.is-kg .map-pin__mark { width: 11px; height: 11px; border-radius: 0; transform: rotate(45deg); background: #E8C2AE; border: 1.5px solid #141210; }
.map-pin:hover .map-pin__mark { transform: scale(1.25); }
.map-pin.is-kg:hover .map-pin__mark { transform: rotate(45deg) scale(1.25); }
/* выбранная точка пульсирует, как кнопка «подробнее» в «Стоимости» (цикл 1.8s), — видно, что точки кликабельны.
   Пульс — отдельный круг (::after), а не тень значка: у сада значок — повёрнутый квадрат, и тень расходилась
   серым ромбом (на iOS ещё и застывала) */
.map-pin.is-on::after {
  content: ''; position: absolute; width: 14px; height: 14px; border-radius: 50%; pointer-events: none;
  background: rgba(244, 239, 231, .5); opacity: 0; animation: pinPulse 1.8s ease-out infinite;
}
@keyframes pinPulse {
  0% { opacity: .9; transform: scale(1); }
  70% { opacity: 0; transform: scale(3); }
  100% { opacity: 0; transform: scale(3); }
}
@media (prefers-reduced-motion: reduce) { .map-pin.is-on::after { animation: none; } }
/* палец-подсказка у выбранной точки (как рука у «подробнее» в «Стоимости»): кончик пальца на точке,
   рука «нажимает», от касания расходится кольцо — цикл 1.8s, синхронно с пульсом */
.map-tap { position: absolute; z-index: 7; width: 0; height: 0; pointer-events: none; }
.map-tap[hidden] { display: none; }
.map-tap__ring {
  position: absolute; left: -12px; top: -12px; width: 24px; height: 24px; border-radius: 12px; box-sizing: border-box;
  border: 2px solid #F4EFE7; animation: svcRing 1.8s ease-out infinite;
}
.map-tap__hand {
  position: absolute; left: -2px; top: 4px; overflow: visible; transform-origin: 30% 10%;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45)); animation: svcTap 1.8s ease-in-out infinite;
}
.map-tap__hand path { fill: #FBF8F3; stroke: #2B241F; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) {
  .map-tap__ring { animation: none; opacity: 0; }
  .map-tap__hand { animation: none; transform: rotate(-12deg); }
}
/* метка дома (пришли со страницы дома, app.js addHouseMark): терракотовый круг с домиком */
.map-house {
  position: absolute; z-index: 5; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: #B4654A; border: 2px solid #F4EFE7;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45); pointer-events: none;
}
.map-house svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* активный — внешнее кольцо 30px */
.map-pin.is-on::before { content: ''; position: absolute; width: 30px; height: 30px; border-radius: 15px; border: 1.5px solid #F4EFE7; box-sizing: border-box; }
@media (pointer: coarse) { .map-pin { width: 44px; height: 44px; margin: -22px 0 0 -22px; } }
/* появление по очереди при первом показе секции (stagger 30ms) */
.map-pins.is-armed .map-pin {
  opacity: 0; scale: .6;
  transition: opacity .35s ease calc(var(--i) * 30ms), scale .35s ease calc(var(--i) * 30ms);
}
.map-pins.is-in .map-pin { opacity: 1; scale: 1; }

/* карточка */
.map-pop {
  position: absolute; z-index: 30; width: 340px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 12px; padding: 22px 24px 24px;
  background: #F4EFE7; color: #2B241F; border-radius: 6px; box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  animation: popIn .2s ease both; outline: none;
}
.map-pop[hidden] { display: none; }
@keyframes popIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.map-pop__handle { display: none; }
.map-pop__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.map-pop__kind { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: #B4654A; }
.map-pop__close {
  flex: none; width: 28px; height: 28px; border-radius: 14px; border: 1px solid #E3D9CB; background: transparent;
  color: #6B5F55; cursor: pointer; font-size: 14px; line-height: 1; transition: background-color .2s;
}
.map-pop__close:hover { background: rgba(43, 36, 31, .06); }
.map-pop__name { font: italic 400 26px/1.12 var(--font-serif-accent); color: #1F1A17; }
.map-pop__facts { display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.45; color: #2B241F; }
.map-pop__facts b { font-weight: 700; }
.map-pop__desc { margin: 0; font-size: 14px; line-height: 1.55; color: #6B5F55; }
.map-pop__addr { margin: 0; font-size: 12px; line-height: 1.5; color: #8A7D72; }
.map-pop__btns { display: flex; gap: 8px; margin-top: 4px; }
.map-pop__pdf, .map-pop__homes {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: 999px;
  text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap;
}
.map-pop__pdf { flex: 1 1 auto; background: #1F1A17; color: #fff; }
.map-pop__pdf:hover { color: #fff; opacity: .9; }
.map-pop__pdf[hidden] { display: none; }
.map-pop__homes { padding: 0 16px; border: 1px solid #CDBFAE; color: #2B241F; }
.map-pop__homes:hover { color: #2B241F; background: rgba(43, 36, 31, .05); }
/* без PDF «Дома рядом» — на всю ширину */
.map-pop__pdf[data-pdf][hidden] ~ .map-pop__homes { flex: 1 1 auto; }

/* средние экраны: колонка уже, карта меньше и прижата вправо */
@media (max-width: 1279px) and (min-width: 769px) {
  .mapsec { --map-w: 400px; }
  .mapsec__inner { min-height: 960px; }
  .mapsec__side { max-width: 500px; padding-left: 32px; padding-right: 32px; }
  .mapsec__viewport { left: auto; right: 32px; }
}
@media (max-width: 960px) and (min-width: 769px) {
  .mapsec { --map-w: 340px; }
  .mapsec__inner { min-height: 820px; }
  .mapsec__side { max-width: 400px; }
  .mapsec__title { font-size: 44px; }
}

/* элементы только для телефона */
.mapsec__br, .mapsec__rings, .mapsec__hint-m, .map-chip i, .map-shade, .map-cards { display: none; }

/* мобильная (≤ 768px, ТЗ cc-task-map-swipe-mobile, макет 390×844): блок — один экран вместе с шапкой сайта.
   Заголовок сверху, под ним карта до низа экрана; поверх карты — фильтры, снизу затемнение и карусель карточек.
   Карта жестов не перехватывает (страница листается дальше), её ведёт карусель: слой 459×1100,
   translate(--tx, --ty) scale(--mz) от app.js. Переменные зарегистрированы (@property) — сдвиг анимируется,
   пины держат экранный размер (контр-масштаб от --mz). */
@property --tx { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --ty { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --mz { syntax: '<number>'; inherits: true; initial-value: 1; }
@media (max-width: 768px) {
  .mapsec {
    --hdr: calc(max(14px, env(safe-area-inset-top)) + 56px);
    box-sizing: border-box; height: 100vh; height: 100svh; min-height: calc(var(--hdr) + 540px);
    padding-top: var(--hdr); scroll-margin-top: calc(-1 * var(--header-h, 80px));
  }
  .mapsec__inner { min-height: 0; height: 100%; display: flex; flex-direction: column; }
  .mapsec__side { display: contents; }
  .mapsec__near, .mapsec__cta, .mapsec__note, .mapsec__legend, .mapsec__step { display: none; }

  .mapsec__intro { order: 1; flex: none; gap: 8px; padding: 26px 20px 12px; }
  .mapsec__eyebrow { font-size: 11px; letter-spacing: .14em; }
  .mapsec__title { font-size: 26px; line-height: 1.08; letter-spacing: -.02em; }
  .mapsec__br { display: inline; }
  .mapsec__hint { font-size: 13px; line-height: 1.45; }
  .mapsec__more { display: none; }
  .mapsec__hint-m { display: inline; }

  .mapsec__viewport {
    order: 2; position: relative; left: 0; top: 0; flex: 1 1 auto; min-height: 0; width: 100%; height: auto;
    aspect-ratio: auto; overflow: hidden; user-select: none; -webkit-user-select: none;
  }
  .mapsec__canvas {
    inset: auto; left: 0; top: 0; width: 459px; height: auto; aspect-ratio: 595 / 1427;
    transform-origin: 0 0; transform: translate(var(--tx), var(--ty)) scale(var(--mz));
    transition: --tx .5s cubic-bezier(.22, .61, .36, 1), --ty .5s cubic-bezier(.22, .61, .36, 1), --mz .5s cubic-bezier(.22, .61, .36, 1);
  }
  .map-overlay .ring { stroke-width: 1.6; }

  /* пины: экранный размер постоянный; область нажатия 36px, значок ×1.3, у выбранной кольцо 30px */
  .mapsec__canvas .map-pins .map-pin { width: 36px; height: 36px; margin: -18px 0 0 -18px; scale: calc(1 / var(--mz)); }
  .map-pin__mark { scale: 1.3; }
  .map-house { scale: calc(1 / var(--mz)); }
  /* на телефоне вместо поповера — карусель */
  .mapsec .map-pop { display: none; }

  /* фильтры поверх карты */
  .mapsec__filter { position: absolute; z-index: 10; left: 12px; right: 12px; top: 10px; gap: 0; padding: 0; }
  .mapsec__chips { gap: 6px; flex-wrap: nowrap; }
  .map-chip {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; white-space: nowrap; font-size: 12px;
    border-color: rgba(244, 239, 231, .3); background: rgba(20, 18, 16, .55);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  .map-chip.is-on { background: #F4EFE7; color: #1F1A17; }
  .map-chip i { display: inline-block; box-sizing: border-box; flex: none; }
  .map-chip .lg-school { width: 10px; height: 10px; border-width: 1.5px; }
  .map-chip .lg-kg { width: 9px; height: 9px; }
  .mapsec__rings { display: block; align-self: flex-end; margin: 10px 2px 0 0; font-size: 10px; line-height: 1.4; color: rgba(244, 239, 231, .45); }

  /* затемнение под карточками */
  .map-shade {
    display: block; position: absolute; z-index: 8; left: 0; right: 0; bottom: 0; height: 330px; pointer-events: none;
    background: linear-gradient(180deg, rgba(20, 18, 16, 0) 0%, rgba(20, 18, 16, .85) 45%, #141210 100%);
  }

  /* карусель: нативный горизонтальный скролл со snap, активная карточка по центру, края соседних видны */
  .map-cards {
    --card-w: min(318px, 82vw);
    display: block; position: absolute; z-index: 12; left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom));
  }
  .map-cards__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 16px 10px; }
  .map-cards__hint { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(244, 239, 231, .7); }
  .map-cards__arrows { display: flex; gap: 8px; }
  .map-cards__arrow {
    display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 18px;
    border: 1px solid rgba(244, 239, 231, .35); background: rgba(20, 18, 16, .6); color: #F4EFE7; cursor: pointer;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); -webkit-tap-highlight-color: transparent;
  }
  .map-cards__arrow:active { background: rgba(244, 239, 231, .15); }
  .map-cards__track {
    position: relative; display: flex; gap: 10px; margin: 0; padding: 0 calc((100% - var(--card-w)) / 2); list-style: none;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch;
  }
  .map-cards__track::-webkit-scrollbar { display: none; }

  .map-card {
    flex: none; width: var(--card-w); box-sizing: border-box; scroll-snap-align: center;
    display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; border-radius: 16px;
    background: #F4EFE7; color: #2B241F; box-shadow: 0 -6px 30px rgba(0, 0, 0, .35);
    position: relative; transform: scale(.96); transition: transform .3s ease;
  }
  /* соседние карточки приглушены вуалью, а не прозрачностью — сквозь них не видно карту и пины */
  .map-card::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: #141210; opacity: .45; transition: opacity .3s ease;
  }
  .map-card[hidden] { display: none; }
  .map-card[aria-current="true"] { transform: none; }
  .map-card[aria-current="true"]::after { opacity: 0; }
  .map-card__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; min-width: 0; }
  .map-card__kind {
    min-width: 0; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #B4654A;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .map-card__num { flex: none; font-size: 11px; font-weight: 600; color: #8A7D72; }
  .map-card__name { margin: 0; font-size: 22px; line-height: 1.1; color: #1F1A17; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .map-card__line {
    margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
    height: calc(2 * 1.45em); font-size: 12px; line-height: 1.45; color: #6B5F55;
  }
  .map-card__line b { color: #2B241F; font-weight: 700; }
  .map-card__near { display: flex; gap: 5px; overflow: hidden; }
  .map-card__chip {
    flex: none; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px; border-radius: 13px;
    background: #EBE2D6; font-size: 10.5px; color: #6B5F55; white-space: nowrap;
  }
  .map-card__chip .accent { font-size: 13.5px; color: #1F1A17; }
  .map-card__btns { display: flex; gap: 8px; margin-top: 2px; }
  .map-card__pdf, .map-card__homes {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; box-sizing: border-box;
    border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
  }
  .map-card__pdf { flex: 1 1 auto; background: #1F1A17; color: #fff; }
  .map-card__pdf:hover { color: #fff; }
  .map-card__pdf[hidden] { display: none; }
  .map-card__homes { flex: none; padding: 0 16px; border: 1px solid #CDBFAE; color: #2B241F; }
  .map-card__homes:hover { color: #2B241F; }
}
/* низкие экраны (≤ 700): заголовок мельче, подпись скрыта — карте больше места */
@media (max-width: 768px) and (max-height: 700px) {
  .mapsec__intro { padding-top: 18px; gap: 6px; }
  .mapsec__title { font-size: 22px; }
  .mapsec__hint { display: none; }
  .map-cards__bar { padding-bottom: 8px; }
}
@media (max-width: 374px) {
  .map-card { padding: 12px 14px 14px; }
  .map-card__homes { padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .map-overlay .rings, .map-pop { animation: none; }
  .mapsec__canvas, .map-card { transition: none; }
}

/* ---------- Шапка поверх картинки (например, листьев) — матовая подложка у кнопок ----------
   Класс ставит app.js, когда шапка пересекает элемент с data-header-image. */
.site-header.header--over-image { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; }
.header--over-image .h-btn {
  --glass-bg: rgba(244, 239, 231, .6); --glass-edge: rgba(43, 36, 31, .16); --glass-hi: rgba(255, 255, 255, .9); --glass-shadow: rgba(31, 26, 23, .14);
}

/* ======================================================================
   «Мы с вами весь год» — таймлайн сопровождения (макет 05-year-timeline.html)
   ====================================================================== */

.year { position: relative; overflow: hidden; background: #F4EFE7; color: #2B241F; }
.year__leaves {
  position: absolute; right: -40px; top: -10px; z-index: 0; width: 360px; height: auto;
  pointer-events: none; user-select: none; display: block;
  transform: translate3d(0, var(--leaf-y, 0px), 0); will-change: transform;
  /* покачивание на ветру: поворот вокруг верхнего правого угла (откуда растут листья), по кругу.
     Отдельное свойство rotate не мешает параллаксу в transform */
  transform-origin: 100% 0;
  animation: leavesSway 5s ease-in-out infinite alternate;
}
@keyframes leavesSway {
  0%   { rotate: -2deg; }
  50%  { rotate: 1.2deg; }
  100% { rotate: 2.4deg; }
}
.year__inner {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: 40px;
  padding: calc(var(--header-h, 80px) + 8px) 64px 24px 160px;
}
.year__head { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 56px; text-align: center; }
.year__eyebrow { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: #B4654A; font-weight: 700; }
.year__title { margin: 0; font: 600 76px/1.05 var(--font-sans); letter-spacing: -.03em; color: #2B241F; }
.year__accent { position: relative; display: inline-block; color: #B4654A; }
.year__br { display: none; }
.year__underline { position: absolute; left: 0; bottom: -10px; overflow: visible; }
.year__underline path { fill: none; stroke: #B4654A; stroke-width: 2.5; stroke-linecap: round; }
.year__lead { margin: 0 auto; max-width: 560px; text-align: center; font-size: 17px; line-height: 1.6; color: #6B5F55; }

/* таймлайн: 1240×300 в макете, масштабируется по ширине; подписи — в % от размеров */
.yt { position: relative; width: min(1240px, 100%); aspect-ratio: 1240 / 300; margin: 0 auto; }
/* под линией в боксе 1240×300 пусто (линия поднята на 40) — на десктопе убираем этот хвост */
@media (min-width: 769px) { .yt { margin-bottom: calc(min(1240px, 100%) * -50 / 1240); } }
.yt__line { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.yt__path { fill: none; stroke: #2B241F; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.yt__dots circle { fill: #2B241F; }
.yt__dots circle.is-accent { fill: #B4654A; }
.yt__steps { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }

/* подпись привязана к точке снизу: bottom = расстояние от точки до низа + 16px; центр = x точки */
.yt__step {
  position: absolute; width: 180px; transform: translateX(-50%);
  left: calc(var(--x) / 1240 * 100%); bottom: calc((300 - var(--y)) / 300 * 100% + 16px);
  display: flex; flex-direction: column; gap: 6px; text-align: center;
}
.yt__n { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #B4654A; font-weight: 700; }
.yt__t { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: #2B241F; line-height: 1.3; }
.yt__d { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #6B5F55; }
.yt__logo {
  position: absolute; width: 68px; height: 68px; color: #2B241F;
  left: calc(var(--x) / 1240 * 100%); top: calc(var(--y) / 300 * 100% - 92px); transform: translateX(-50%);
}
.yt__logo .logo { width: 68px; height: 68px; }

/* анимация: линия рисуется слева направо (1.6s), точки и подписи — по очереди за ней */
.yt.is-armed .yt__path { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 1.6s cubic-bezier(.25, .7, .3, 1); }
.yt.is-armed .yt__dots circle, .yt.is-armed .yt__step, .yt.is-armed .yt__logo {
  opacity: 0; translate: 0 8px; transition: opacity .45s ease, translate .45s ease; transition-delay: var(--delay, 0s);
}
.yt.is-drawn .yt__path { stroke-dashoffset: 0; }
.yt.is-drawn .yt__dots circle, .yt.is-drawn .yt__step, .yt.is-drawn .yt__logo { opacity: 1; translate: 0 0; }

@media (max-width: 1099px) {
  .year__inner { padding-left: 32px; padding-right: 32px; }
  .year__title { font-size: clamp(48px, 7vw, 76px); }
}
/* 769–1023: подписи тесноваты — чуть меньше шрифт и ширина */
@media (max-width: 1023px) and (min-width: 769px) {
  .yt__step { width: 140px; }
  .yt__t, .yt__d { font-size: 11px; }
  .yt__logo, .yt__logo .logo { width: 52px; height: 52px; }
  .yt__logo { top: calc(var(--y) / 300 * 100% - 72px); }
}

/* мобильная: тот же горизонтальный таймлайн, но шире экрана — листается пальцем по горизонтали */
@media (max-width: 768px) {
  .year__leaves { width: 260px; right: -60px; top: 0; opacity: .9; }
  .year__inner { padding: calc(var(--header-h, 80px) + 8px) 16px 16px; gap: 28px; }
  .year__head { margin-top: 140px; align-items: flex-start; text-align: left; }
  .year__title { font-size: 40px; }
  .year__accent { display: inline-block; }
  .year__br { display: inline; }
  .year__lead { margin: 0; text-align: left; font-size: 16px; }

  /* рамка во всю ширину экрана; у краёв затухание — подсказка, что дальше есть ещё этапы */
  .yt-scroll {
    display: flex; margin: 0 -16px; overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 48px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 48px), transparent 100%);
  }
  .yt-scroll::-webkit-scrollbar { display: none; }
  .yt-scroll:focus-visible { outline: 2px solid #B4654A; outline-offset: -2px; }
  /* 960px — подписи помещаются; поля по бокам, чтобы крайние подписи не обрезались; низ без пустого хвоста */
  .yt { flex: none; width: 960px; margin: 0 32px calc(960px * -50 / 1240); }
  .yt__step { width: 136px; }
  .yt__t, .yt__d { font-size: 11px; }
  .yt__logo, .yt__logo .logo { width: 80px; height: 80px; }
  .yt__logo { top: calc(var(--y) / 300 * 100% - 100px); }
}

@media (prefers-reduced-motion: reduce) {
  .year__leaves { transform: none; animation: none; }
  .yt.is-armed .yt__path, .yt.is-armed .yt__dots circle, .yt.is-armed .yt__step, .yt.is-armed .yt__logo {
    transition: none; stroke-dashoffset: 0; opacity: 1; translate: 0 0;
  }
}

/* ======================================================================
   Переход «облака» (макет 05b-clouds-transition.html): песок → белый → облака → вид с воздуха.
   Координаты — в единицах макета 1440×1000: --u = 1/1440 ширины экрана, раскладка масштабируется пропорционально.
   ====================================================================== */

.clouds {
  --u: calc(100vw / 1440);
  position: relative; height: calc(1000 * var(--u));
  /* заезжает на низ «Мы с вами весь год» — облака начинаются почти сразу под линией таймлайна */
  margin-top: calc(-250 * var(--u));
  /* обрезаем облака только снизу и по бокам: сверху они свободно уходят на песок предыдущего блока,
     без ровного среза по границе секции */
  clip-path: inset(-100vh 0 0 0);
  /* clip-path не мешает странице расширяться вбок — по горизонтали режем ещё и overflow (clip не создаёт прокрутку) */
  overflow-x: clip;
}
.clouds__stage { position: absolute; inset: 0; }
/* продолжение предыдущей секции без шва: тот же песок сверху, уходит в белый */
/* верх прозрачный (сквозь него виден песок предыдущего блока), дальше плавно в белый — без шва */
.clouds__sand {
  position: absolute; left: 0; right: 0; top: 0; height: calc(520 * var(--u)); z-index: 0;
  /* плавный переход песок → белый без «изломов» (на изломах глаз видит линию): много промежуточных
     точек по сглаженной кривой, без ровных участков одного цвета в середине */
  background: linear-gradient(180deg,
    rgba(244, 239, 231, 0) 0%, rgba(244, 239, 231, .6) 8%, #F4EFE7 16%,
    #F5F1EA 28%, #F7F3EE 38%, #F9F6F2 48%, #FBF9F6 58%, #FDFCFA 68%, #FEFEFD 78%, #FFFFFF 88%, #FFFFFF 100%);
}
.clouds__photo {
  position: absolute; left: 0; top: calc(380 * var(--u)); width: 100%; height: calc(100% - 380 * var(--u));
  object-fit: cover; object-position: center 25%; display: block; z-index: 1;
  transform: scale(var(--zoom, 1)); transform-origin: 50% 0; will-change: transform;
}
.clouds__haze {
  position: absolute; left: 0; right: 0; top: calc(280 * var(--u)); height: calc(300 * var(--u)); z-index: 2;
  /* белая дымка закрывает верхний край фото (380u) — вместе с облаками «стыка» не видно.
     Вход и выход плавные: ни сверху, ни снизу у дымки нет края */
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .55) 14%, rgba(255, 255, 255, .9) 26%, #FFFFFF 34%, #FFFFFF 46%,
    rgba(255, 255, 255, .8) 60%, rgba(255, 255, 255, .45) 78%, rgba(255, 255, 255, .15) 90%, rgba(255, 255, 255, 0) 100%);
}
/* облака: позиции из макета. Параллакс: --sy — прокрутка секции (app.js), у каждого облака своя
   скорость --k (дальние медленнее, ближние быстрее) и свой разлёт в стороны --kx по --dir */
.cloud {
  position: absolute; left: calc(var(--l) * var(--u)); top: calc(var(--t) * var(--u)); width: calc(var(--w) * var(--u));
  height: auto; pointer-events: none; user-select: none; will-change: transform;
  transform: translate3d(calc(var(--dir) * var(--spread, 0) * var(--kx, 1) * 14vw), calc(var(--sy, 0px) * var(--k, .4)), 0);
}
.cloud--far { z-index: 4; }
.cloud--near { z-index: 5; }
.cloud--1 { --k: .18; --kx: .6; }
.cloud--2 { --k: .32; --kx: .9; }
.cloud--3 { --k: .24; --kx: .7; }
.cloud--4 { --k: .62; --kx: 1.3; }
.cloud--5 { --k: .78; --kx: 1.1; }
.cloud--6 { --k: .48; --kx: 1.2; }
.cloud--7 { --k: .9;  --kx: 1.5; }
.cloud--flip { scale: -1 1; }

/* зацикленное покачивание облаков: заметно плывут в сторону и вверх-вниз.
   Отдельное свойство translate складывается с параллаксом в transform. У каждого облака своё время,
   чтобы они не двигались синхронно. */
.cloud { animation: cloudDrift var(--drift-t, 7s) ease-in-out var(--drift-d, 0s) infinite alternate; }
.cloud--1 { --drift-t: 9s;   --drift-x: 6vw;    --drift-y: 1.2vw; }
.cloud--2 { --drift-t: 11s;  --drift-x: -5.5vw; --drift-y: -1vw;  --drift-d: -3s; }
.cloud--3 { --drift-t: 10s;  --drift-x: -6.5vw; --drift-y: 1.1vw; --drift-d: -1.5s; }
.cloud--4 { --drift-t: 7.5s; --drift-x: 5vw;    --drift-y: -1.4vw; --drift-d: -4s; }
.cloud--5 { --drift-t: 8s;   --drift-x: -5vw;   --drift-y: 1vw;   --drift-d: -2s; }
.cloud--6 { --drift-t: 8.5s; --drift-x: 4.5vw;  --drift-y: -.9vw; --drift-d: -5s; }
.cloud--7 { --drift-t: 7s;   --drift-x: -4vw;   --drift-y: 1.2vw; --drift-d: -2.5s; }
@keyframes cloudDrift {
  from { translate: 0 0; }
  to   { translate: var(--drift-x, 1.5vw) var(--drift-y, .4vw); }
}
.clouds__shade {
  position: absolute; left: 0; right: 0; bottom: calc(-41 * var(--u)); height: calc(200 * var(--u)); z-index: 6;
  background: linear-gradient(0deg, rgba(20, 16, 12, .4), rgba(20, 16, 12, 0));
}
.clouds__rail, .clouds__hint { z-index: 7; }
/* облака заезжают на «Мы с вами весь год» на 250u — рейку «05» опускаем на столько же,
   чтобы она не налезала на SCROLL предыдущего экрана */
.clouds__rail { top: calc(250 * var(--u) + 150px); }
.clouds__hint { color: #fff; }

/* мобильная: ~80vh, фото с 35%, три крупных облака по ~140vw */
@media (max-width: 768px) {
  .clouds { height: 80vh; height: 80svh; margin-top: -48px; }
  /* фото само проявляется сверху (маска), под ним белый песок, дымка выше — у фото нет видимого края */
  .clouds__sand { height: 60%; }
  .clouds__photo {
    top: 35%; height: 65%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .25) 8%, rgba(0, 0, 0, .7) 18%, #000 30%);
    mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .25) 8%, rgba(0, 0, 0, .7) 18%, #000 30%);
  }
  .clouds__haze { top: 28%; height: 170px; }
  .clouds__shade { bottom: 0; height: 140px; }
  .cloud:not(.cloud--m) { display: none; }
  .cloud--m { width: 140vw; }
  .cloud--1 { left: -55vw; top: 3%; }
  .cloud--3 { left: 15vw; top: 12%; }
  .cloud--5 { left: -30vw; top: 24%; }
}

@media (prefers-reduced-motion: reduce) {
  .cloud, .clouds__photo { transform: none; will-change: auto; animation: none; }
  .cloud--flip { scale: -1 1; }
}

/* ======================================================================
   «Проверка дома» — чек-лист + «30» от руки (макет 04-house-check.html)
   ====================================================================== */

.hc { position: relative; background: #F4EFE7; color: #2B241F; }
.hc__grid {
  display: grid; grid-template-columns: 1fr 1.25fr; gap: 48px; align-items: start;
  padding: calc(var(--header-h, 80px) + 24px) 64px 72px 160px;
}
.hc__left { display: flex; flex-direction: column; gap: 24px; padding-top: 24px; }
.hc__head { display: flex; flex-direction: column; gap: 14px; }
.hc__eyebrow { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: #B4654A; font-weight: 700; }
.hc__title { margin: 0; font: 600 56px/1.05 var(--font-sans); letter-spacing: -.025em; color: #1F1A17; }
.hc__title .accent { color: #B4654A; }
.hc__lead { margin: 0; font-size: 17px; line-height: 1.6; color: #6B5F55; }

/* блок «30»: цифра в двойной обводке от руки (контуры намеренно не замкнуты) */
.hc30 { display: flex; flex-direction: column; gap: 4px; padding: 8px 0 8px 10px; }
.hc30__row { display: flex; align-items: center; gap: 28px; }
.hc30__ring { position: relative; flex: none; width: 220px; height: 180px; display: flex; align-items: center; justify-content: center; }
.hc30__num { font-size: 140px; line-height: 1; color: #B4654A; }
.hc30__lines { position: absolute; left: -10px; top: -6px; overflow: visible; transform-origin: 0 0; }
.hc30__lines path, .hc30__lines-m path { fill: none; stroke-linecap: round; }
.hc30__outer { stroke: #B4654A; stroke-width: 2; }
.hc30__inner { stroke: #2B241F; stroke-width: 1.4; opacity: .7; }
.hc30__text { display: flex; flex-direction: column; gap: 10px; }
.hc30__label { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: #2B241F; }
.hc30__sub { font-size: 15px; line-height: 1.5; color: #6B5F55; max-width: 240px; }
.hc30__note { display: flex; align-items: flex-start; gap: 10px; padding-left: 150px; }
.hc30__arrow { flex: none; overflow: visible; }
.hc30__arrow path { fill: none; stroke: #2B241F; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hc30__note-text { font-size: 24px; line-height: 1.2; color: #2B241F; padding-top: 22px; }

.hc__btn { align-self: flex-start; background: #1F1A17; color: #fff; border-color: #1F1A17; }

/* карточка чек-листа */
.hc__card { display: flex; flex-direction: column; padding: 28px 32px 12px; background: #FBF8F3; border: 1px solid #E3D9CB; border-radius: 6px; }
.hc__card-head { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 20px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #6B5F55; }
.hc__list { list-style: none; margin: 0; padding: 0; }
.hc__item { display: grid; grid-template-columns: 32px 1fr; gap: 20px; align-items: start; padding: 20px 0; border-top: 1px solid #E3D9CB; }
.hc__check { width: 28px; height: 28px; border-radius: 14px; background: #B4654A; display: flex; align-items: center; justify-content: center; margin-top: 4px; }
.hc__check path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hc__body { display: flex; flex-direction: column; gap: 8px; }
.hc__risk { font-size: 30px; line-height: 1.1; color: #2B241F; }
.hc__action { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.6; color: #6B5F55; }

/* анимация появления: сначала терракотовый контур, потом тёмный, цифра, стрелка, заметка; строки по очереди */
.hc30.is-armed .hc30__lines path, .hc30.is-armed .hc30__lines-m path, .hc30.is-armed .hc30__arrow path, .hc__list.is-armed .hc__check path {
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
}
.hc30.is-armed .hc30__outer { transition: stroke-dashoffset 1.2s cubic-bezier(.3, .6, .3, 1); }
.hc30.is-armed .hc30__inner { transition: stroke-dashoffset .9s cubic-bezier(.3, .6, .3, 1) .3s; }
.hc30.is-armed .hc30__num { opacity: 0; scale: .96; transition: opacity .6s ease .25s, scale .6s ease .25s; }
.hc30.is-armed .hc30__arrow path { transition: stroke-dashoffset .5s ease 1.6s; }
.hc30.is-armed .hc30__arrow path + path { transition-delay: 2s; }
.hc30.is-armed .hc30__note-text { opacity: 0; transition: opacity .6s ease 2.1s; }
.hc30.is-in .hc30__lines path, .hc30.is-in .hc30__lines-m path, .hc30.is-in .hc30__arrow path { stroke-dashoffset: 0; }
.hc30.is-in .hc30__num { opacity: 1; scale: 1; }
.hc30.is-in .hc30__note-text { opacity: 1; }

.hc__list.is-armed .hc__item { opacity: 0; translate: 0 8px; transition: opacity .45s ease var(--d, 0s), translate .45s ease var(--d, 0s); }
.hc__list.is-armed .hc__check path { transition: stroke-dashoffset .35s ease calc(var(--d, 0s) + .25s); }
.hc__list.is-in .hc__item { opacity: 1; translate: 0 0; }
.hc__list.is-in .hc__check path { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .hc30.is-armed *, .hc__list.is-armed * , .hc__list.is-armed .hc__item { transition: none !important; }
}

/* десктоп: экран целиком помещается в окно — отступы, заголовок, «30» и строки чек-листа
   зависят от высоты окна (на 1440×900 и на ноутбуке с панелью браузера ~760px) */
@media (min-width: 901px) {
  .hc__grid {
    padding-top: calc(var(--header-h, 80px) + clamp(0px, 1.2svh, 16px));
    padding-bottom: clamp(24px, 4svh, 56px);
  }
  .hc__left { padding-top: 0; gap: clamp(12px, 2.2svh, 24px); }
  .hc__head { gap: clamp(8px, 1.4svh, 14px); }
  .hc__title { font-size: clamp(34px, 5.4svh, 56px); }
  .hc__lead { font-size: clamp(15px, 1.9svh, 17px); }
  .hc__card { padding: clamp(16px, 2.4svh, 28px) 32px clamp(4px, 1svh, 12px); }
  .hc__card-head { padding-bottom: clamp(10px, 1.6svh, 20px); }
  .hc__item { padding: clamp(8px, 1.5svh, 20px) 0; }
  .hc__body { gap: clamp(2px, .6svh, 8px); }
  .hc__risk { font-size: clamp(20px, 3.1svh, 30px); }
  .hc__action { line-height: 1.45; }
}
/* «30» нарисована в пикселях — на низких окнах уменьшаем блок целиком */
@media (min-width: 901px) and (max-height: 860px) { .hc30 { zoom: .82; } }
@media (min-width: 901px) and (max-height: 720px) { .hc30 { zoom: .7; } }

/* 1024–1280: две колонки, крупные размеры чуть меньше */
@media (max-width: 1280px) {
  .hc__title { font-size: min(48px, max(34px, 5.4svh)); }
  .hc__risk { font-size: min(26px, max(20px, 3.1svh)); }
}
@media (max-width: 1099px) { .hc__grid { padding-left: 32px; padding-right: 32px; gap: 36px; } }

/* ≤900: одна колонка — заголовок → «30» → кнопка → чек-лист */
@media (max-width: 900px) {
  .hc__grid { grid-template-columns: 1fr; padding: calc(var(--header-h, 80px) + 16px) 20px 56px; gap: 32px; }
  .hc__left { padding-top: 0; }
}

/* ≤480 */
@media (max-width: 480px) {
  .hc__title { font-size: 36px; }
  .hc30 { padding-left: 4px; }
  .hc30__row { gap: 16px; }
  .hc30__ring { width: 176px; height: 144px; }
  .hc30__num { font-size: 110px; }
  .hc30__lines { left: -8px; top: -5px; transform: scale(.8); }
  .hc30__label { font-size: 13px; }
  .hc30__sub { font-size: 14px; }
  .hc30__note { padding-left: 90px; }
  .hc30__note-text { font-size: 20px; }
  .hc__card { padding: 22px 18px 8px; }
  .hc__card-head { font-size: 12px; }
  .hc__item { grid-template-columns: 28px 1fr; gap: 14px; padding: 18px 0; }
  .hc__risk { font-size: 22px; }
  .hc__action { font-size: 12px; }
}

/* элементы только для телефона */
.hc-m, .hc30__lines-m, .hc__rows, .hc__more, .hc__backdrop, .hc__sheet-top, .hc__panel, .hc__panel-note { display: none; }

/* ≤768 (ТЗ cc-task-house-check-final, макет 390×844): высота по контенту — заголовок, «30» с подписью и одна
   кнопка «Что мы проверяем» (компонент «Расширенный сервис» из «Стоимости» с иконкой файла). Чек-лист (.hc__card) —
   нижняя панель (bottomSheet в app.js: .hc.is-sheet открыта, --sheet-drag — сдвиг пальцем). */
@media (max-width: 768px) {
  /* переход по якорю (меню): начало блока ниже полосы шапки */
  .hc { scroll-margin-top: calc(56px + env(safe-area-inset-top)); }
  /* на весь экран, содержимое по центру; сверху место под полосу шапки */
  .hc__grid { display: flex; flex-direction: column; justify-content: center; min-height: 100vh; min-height: 100svh; box-sizing: border-box; padding: 88px 20px 56px; }
  .hc__left, .hc__head { gap: 14px; }
  .hc__eyebrow { font-size: 12px; }
  .hc__title { font-size: 31px; line-height: 1.06; letter-spacing: -.03em; }
  .hc__lead { font-size: 16px; line-height: 1.5; }
  .hc__btn { display: none; }

  .hc30 { padding: 0; margin-top: 4px; }
  .hc30__row { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: center; }
  .hc30__ring { width: 150px; height: 104px; }
  .hc30__num { position: relative; font-size: 68px; }
  .hc30__lines { display: none; }
  .hc30__lines-m { display: block; position: absolute; inset: 0; overflow: visible; }
  .hc30__lines-m .hc30__outer { stroke-width: 1.5; }
  .hc30__lines-m .hc30__inner { stroke: #5B4E45; stroke-width: 1; opacity: 1; }
  .hc30__text { gap: 6px; }
  .hc30__label { font-size: 12px; letter-spacing: .14em; color: #1F1A17; }
  .hc30__sub { font-size: 14px; line-height: 1.4; max-width: none; }
  .hc-d, .hc30__note { display: none; }
  .hc-m { display: inline; }

  /* 6 рисков строками — как прайс «Стоимости»: курсив, отточие, справа галочка вместо «0 ₽» (ТЗ cc-task-house-check-v4) */
  .hc__rows { display: block; list-style: none; margin: 0; padding: 8px 0 0; border-top: 1px solid #E3D9CB; }
  .hc__row {
    display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 7px 0; border: 0; background: none;
    color: #1F1A17; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .hc__row:focus-visible { outline: 2px solid #B4654A; outline-offset: 2px; border-radius: 4px; }
  .hc__row-name { font-size: 19px; line-height: 1.2; white-space: nowrap; }
  .hc__row-dots { flex: 1 1 auto; min-width: 12px; border-bottom: 2px dotted rgba(31, 26, 23, .25); transform: translateY(-4px); }
  .hc__row-check { flex: none; align-self: center; fill: none; stroke: #B4654A; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .hc__row:active .hc__row-name { color: #B4654A; }

  /* кнопка — компонент «Расширенный сервис» (.svc__btn, .svc__dots, .svc-pill), размеры из макета */
  .hc__more { display: block; margin-top: 6px; }
  .hc .hc__open { flex-wrap: nowrap; gap: 8px; padding: 10px; transition: background-color .2s, transform .15s; }
  .hc .hc__open:active { background: rgba(180, 101, 74, .16); transform: scale(.98); }
  .hc__open-ico {
    flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; box-sizing: border-box;
    border-radius: 9px; background: #FBF8F3; border: 1px solid rgba(180, 101, 74, .3);
  }
  .hc .hc__open .svc__name { font-size: 19px; white-space: nowrap; }
  .hc .hc__open .svc__dots { min-width: 0; }
  .hc .hc__open .svc-pill { gap: 6px; height: 30px; padding: 0 10px; font-size: 10.5px; letter-spacing: .08em; }
  .hc .hc__open .svc-pill svg { width: 13px; height: 13px; }

  /* подложка и панель */
  .hc__backdrop {
    display: block; position: fixed; inset: 0; z-index: 94; opacity: 0; pointer-events: none;
    background: rgba(10, 8, 6, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); transition: opacity .3s ease;
  }
  .hc.is-sheet .hc__backdrop { opacity: 1; pointer-events: auto; }
  /* высота фиксированная (66% экрана) — шторка не прыгает при смене вкладок; внутри вертикальный скролл */
  .hc__card {
    position: fixed; z-index: 95; left: 0; right: 0; bottom: 0; height: 66vh; height: 66svh; max-height: none;
    overflow-y: auto; overscroll-behavior: contain; outline: none; box-sizing: border-box;
    padding: 0 22px calc(24px + env(safe-area-inset-bottom)); border: 0; border-radius: 22px 22px 0 0;
    background: #FBF8F3; box-shadow: 0 -20px 60px rgba(0, 0, 0, .35);
    transform: translateY(105%); visibility: hidden;
    transition: transform .42s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .42s;
  }
  .hc.is-sheet .hc__card { transform: translateY(var(--sheet-drag, 0px)); visibility: visible; transition: transform .42s cubic-bezier(.22, .61, .36, 1); }
  .hc.is-sheet.is-dragging .hc__card { transition: none; }
  .hc__card-head, .hc__list { display: none; }
  /* шапка и вкладки закреплены сверху при прокрутке списка */
  .hc__sheet-top { display: block; position: sticky; top: 0; z-index: 2; margin: 0 -22px; padding: 10px 22px 0; background: #FBF8F3; }
  .hc__handle { display: block; width: 40px; height: 4px; margin: 0 auto 6px; border-radius: 2px; background: #CDBFAE; }
  .hc__sheet-head { display: flex; flex-direction: column; gap: 6px; position: relative; padding: 14px 50px 12px 0; }
  .hc__sheet-kicker { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: #B4654A; }
  .hc__sheet-title { margin: 0; font-size: 28px; line-height: 1.1; color: #1F1A17; outline: none; }
  .hc__close {
    position: absolute; right: 0; top: 10px; width: 40px; height: 40px; padding: 0; border-radius: 20px;
    border: 1px solid #E3D9CB; background: transparent; color: #6B5F55; font-size: 15px; cursor: pointer;
  }
  /* вкладки: лента листается пальцем; ряд выходит за поля шторки */
  .hc__tabs-wrap { position: relative; margin: 0 -22px; }
  .hc__tabs {
    display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
    padding: 4px 56px 6px 22px; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  }
  .hc__tabs::-webkit-scrollbar { display: none; }
  .hc__tab {
    flex: none; scroll-snap-align: start; scroll-margin-left: 22px; height: 36px; padding: 0 14px; border-radius: 18px;
    border: 1px solid #CDBFAE; background: transparent; color: #2B241F; font: 600 13.5px var(--font-sans); white-space: nowrap;
    cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .2s, color .2s, border-color .2s;
  }
  .hc__tab.is-on { background: #1F1A17; border-color: #1F1A17; color: #fff; }
  .hc__tab:focus-visible { outline: 2px solid #B4654A; outline-offset: 2px; }
  .hc__tabs-fade {
    position: absolute; right: 0; top: 0; bottom: 0; width: 76px; pointer-events: none;
    background: linear-gradient(90deg, rgba(251, 248, 243, 0) 0%, #FBF8F3 55%); transition: opacity .2s;
  }
  .hc__tabs-more {
    position: absolute; right: 14px; top: 50%; margin-top: -15px; width: 30px; height: 30px; border-radius: 15px; pointer-events: none;
    display: flex; align-items: center; justify-content: center; background: #EFE6DB;
    animation: tabNudge 1.4s ease-in-out infinite; transition: opacity .2s;
  }
  .hc__tabs-wrap.is-end .hc__tabs-fade, .hc__tabs-wrap.is-end .hc__tabs-more { opacity: 0; }
  .hc__tabs-hint { margin: 2px 0 0; padding-bottom: 6px; font-size: 11px; color: #A3968A; transition: opacity .2s; }
  .hc__tabs-hint.is-hidden { display: none; }
  /* панель риска — строки в стиле окна «Персонал и услуги для дома» из «Стоимости» */
  .hc__panel { display: block; padding-top: 12px; }
  .hc__panel-title { margin: 0; font-size: 24px; line-height: 1.15; color: #1F1A17; }
  .hc__panel-desc { margin: 0; padding: 6px 0 10px; font-size: 14px; line-height: 1.45; color: #6B5F55; }
  .hc__panel-desc::first-letter { text-transform: uppercase; }
  .hc__points { list-style: none; margin: 0; padding: 0; }
  .hc__point { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid #E3D9CB; font-size: 15.5px; line-height: 1.35; color: #2B241F; }
  .hc__point-check { flex: none; fill: none; stroke: #B4654A; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .hc__panel-note { display: block; margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: #6B5F55; }
  .hc__item { grid-template-columns: 26px 1fr; gap: 14px; padding: 11px 0; }
  .hc__check { width: 26px; height: 26px; border-radius: 13px; margin-top: 2px; }
  .hc__body { gap: 2px; }
  .hc__risk { font-size: 21px; line-height: 1.2; }
  .hc__action { font-size: 13px; line-height: 1.4; letter-spacing: 0; text-transform: none; }
  .hc__action::first-letter { text-transform: uppercase; }
}
@keyframes tabNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
/* узкие (360): текст кнопки и строк мельче — пилюля не переносится, «Затопление в сезон дождей» в одну строку */
@media (max-width: 374px) {
  .hc .hc__open .svc__name { font-size: 17px; }
  .hc__row-name { font-size: 17px; }
}
/* низкие экраны (≤700): блок со списком помещается в экран сцены перехода */
@media (max-width: 768px) and (max-height: 700px) {
  .hc__grid { padding-top: 80px; padding-bottom: 20px; }
  .hc__left, .hc__head { gap: 10px; }
  .hc__title { font-size: 27px; }
  .hc__lead { font-size: 15px; line-height: 1.4; }
  .hc30 { margin-top: 0; }
  .hc30__row { grid-template-columns: 116px 1fr; gap: 12px; }
  .hc30__ring, .hc30__lines-m { width: 116px; height: 80px; }
  .hc30__num { font-size: 52px; }
  .hc__rows { padding-top: 4px; }
  .hc__row { padding: 4px 0; }
  .hc__row-name { font-size: 17px; }
  .hc .hc__open { padding: 8px 10px; }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .hc__card { transform: none; opacity: 0; transition: opacity .25s ease, visibility 0s linear .25s; }
  .hc.is-sheet .hc__card { transform: none; opacity: 1; transition: opacity .25s ease; }
  .hc__tabs-more { animation: none; }
}
/* ======================================================================
   «Стоимость» (макет 07-pricing.html)
   ====================================================================== */

.pr { position: relative; overflow: hidden; background: #F4EFE7; color: #2B241F; }
.pr__grid {
  display: grid; grid-template-columns: 1.1fr 1fr; column-gap: 72px; row-gap: 28px; align-items: start;
  grid-template-areas: "head hero" "list hero";
  padding: calc(var(--header-h, 80px) + 48px) 64px 64px 160px;
}
.pr__head { grid-area: head; display: flex; flex-direction: column; gap: 14px; }
.pr__eyebrow { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: #B4654A; font-weight: 700; }
.pr__title { margin: 0; font: 600 56px/1.05 var(--font-sans); letter-spacing: -.025em; color: #1F1A17; }
.pr__title .accent { color: #B4654A; }
.pr__lead { margin: 0; max-width: 480px; font-size: 17px; line-height: 1.6; color: #6B5F55; }

/* прайс-лист: название → точечный лидер → цена */
.pr__list { grid-area: list; margin: 0; border-top: 1px solid #E3D9CB; padding-top: 6px; }
.pr__row { display: flex; align-items: baseline; gap: 14px; padding: 14px 0; }
.pr__row dt { font-size: 28px; line-height: 1.15; color: #2B241F; white-space: nowrap; }
.pr__lead-dots { flex: 1 1 auto; min-width: 24px; border-bottom: 2px dotted rgba(43, 36, 31, .35); transform: translateY(-6px); transform-origin: 0 50%; }
/* в <dl> у строки только dt/dd — поэтому лидер лежит внутри dd, перед ценой */
.pr__row dd { flex: 1 1 auto; display: flex; align-items: baseline; gap: 14px; margin: 0; min-width: 0; }
.pr__price { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: #6B5F55; white-space: nowrap; }
.pr__price.is-free { color: #B4654A; }

/* «0 ₽» с двойным подчёркиванием от руки и заметкой со стрелкой */
.pr__hero { grid-area: hero; padding-top: 170px; }
.pr__stage { position: relative; height: 300px; }
.pr__zero { position: absolute; left: 40px; top: 0; font-size: 200px; line-height: 1; color: #B4654A; letter-spacing: -.02em; white-space: nowrap; }
.pr__under { position: absolute; left: 30px; top: 200px; overflow: visible; }
.pr__under path { fill: none; stroke: #2B241F; stroke-width: 2.2; stroke-linecap: round; }
.pr__under .pr__under2 { stroke-width: 1.3; opacity: .6; }
.pr__arrow { position: absolute; left: 340px; top: 150px; transform: scaleY(-1); overflow: visible; }
.pr__arrow path { fill: none; stroke: #2B241F; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pr__note { position: absolute; left: 380px; top: 60px; width: 180px; font-size: 22px; line-height: 1.25; color: #2B241F; }

/* ======================================================================
   «Собственникам» — лид-магнит (макет 07b-owners-lead.html)
   ====================================================================== */

.ow { position: relative; overflow: hidden; min-height: 1000px; background: #141210; color: #fff; display: flex; }
.ow__bg { position: absolute; inset: -40px 0; z-index: 0; transform: translate3d(0, var(--ow-y, 0px), 0); will-change: transform; }
.ow__photo { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; display: block; }
.ow__shade { position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(20, 18, 16, .88) 0%, rgba(20, 18, 16, .6) 50%, rgba(20, 18, 16, .25) 100%); }
.ow .rail { z-index: 2; }

.ow__grid {
  position: relative; z-index: 1; flex: 1; display: grid; grid-template-columns: 1.15fr 1fr; column-gap: 80px; row-gap: 28px;
  grid-template-areas: "head form" "perks form"; align-content: center; align-items: start;
  padding: calc(var(--header-h, 80px) + 24px) 64px 64px 160px;
}
.ow__head { grid-area: head; display: flex; flex-direction: column; gap: 16px; align-self: end; }
.ow__eyebrow { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: #E8C2AE; font-weight: 700; }
.ow__title { margin: 0; font: 600 64px/1.04 var(--font-sans); letter-spacing: -.03em; color: #fff; }
.ow__accent { position: relative; display: inline-block; color: #E8C2AE; }
.ow__underline { position: absolute; left: 0; bottom: -8px; overflow: visible; }
.ow__underline path { fill: none; stroke: #E8C2AE; stroke-width: 2.2; stroke-linecap: round; }
.ow__lead { margin: 0; max-width: 520px; font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .8); }

.ow__perks { grid-area: perks; list-style: none; margin: 0; padding: 0; max-width: 560px; }
.ow__perk { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .18); }
.ow__perk-n { font-size: 11px; letter-spacing: .16em; color: #E8C2AE; font-weight: 700; padding-top: 8px; }
.ow__perk-body { display: flex; flex-direction: column; gap: 6px; }
.ow__perk-title { font-size: 26px; line-height: 1.15; }
.ow__perk-text { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.6; color: rgba(255, 255, 255, .7); }

/* форма: рукописная пометка и стрелка над карточкой */
.ow__formwrap { grid-area: form; position: relative; align-self: center; }
.ow__hand { position: absolute; left: -250px; top: -96px; font-size: 22px; color: #E8C2AE; white-space: nowrap; }
.ow__hand-arrow { position: absolute; left: -120px; top: -70px; overflow: visible; }
.ow__hand-arrow path, .ow__done-check path { fill: none; stroke: #E8C2AE; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ow__card { background: #F4EFE7; color: #2B241F; border-radius: 6px; padding: 40px; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.ow__form { display: flex; flex-direction: column; gap: 22px; }
.ow__form-head { display: flex; flex-direction: column; gap: 8px; }
.ow__form-eyebrow { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: #B4654A; }
.ow__form-title { margin: 0; font: 600 30px/1.12 var(--font-sans); letter-spacing: -.02em; outline: none; }
.ow__form-title .accent { color: #B4654A; }
.ow__field { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ow__label { padding: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #6B5F55; }
.ow__input {
  height: 52px; width: 100%; padding: 0; border: 0; border-bottom: 1px solid #CDBFAE; border-radius: 0;
  background: transparent; color: #2B241F; font: 17px var(--font-sans); outline: none; transition: border-color .2s;
}
.ow__input::placeholder { color: #A3968A; }
select.ow__input { -webkit-appearance: none; appearance: none; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236B5F55' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 4px center; }
select.ow__input:invalid { color: #A3968A; }
.ow__input:focus { border-bottom-color: #2B241F; }
.ow__input.is-invalid { border-bottom-color: #B4654A; }
.ow__chips { display: flex; gap: 8px; padding-top: 6px; }
.ow__chip { position: relative; }
.ow__chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ow__chip span {
  display: flex; align-items: center; justify-content: center; min-width: 48px; height: 40px; padding: 0 14px; border-radius: 20px;
  border: 1px solid #CDBFAE; font-size: 15px; font-weight: 600; color: #2B241F; transition: background .2s, color .2s, border-color .2s;
}
.ow__chip input:checked + span { background: #1F1A17; border-color: #1F1A17; color: #fff; }
.ow__chip input:focus-visible + span { outline: 2px solid #B4654A; outline-offset: 2px; }
.ow__submit { width: 100%; margin-top: 6px; background: #1F1A17; color: #fff; border-color: #1F1A17; cursor: pointer; font-family: inherit; }
.ow__submit[disabled] { opacity: .6; cursor: progress; }
.ow__error { margin: -8px 0 0; font-size: 14px; line-height: 1.4; color: #B4654A; text-align: center; }
.ow__hint { margin: 0; font-size: 13px; line-height: 1.5; color: #6B5F55; text-align: center; }
.ow__done { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 40px 8px; text-align: center; outline: none; }
.ow__done[hidden] { display: none; }
.ow__done-check path { stroke: #B4654A; stroke-width: 2.4; }
.ow__done-text { margin: 0; font: 600 28px/1.2 var(--font-sans); letter-spacing: -.02em; color: #2B241F; }
.ow__done-text .accent { color: #B4654A; }

/* ---------- анимации появления (app.js: .is-armed → .is-in) ---------- */
.pr__list.is-armed .pr__row { opacity: 0; translate: 0 8px; transition: opacity .45s ease var(--d), translate .45s ease var(--d); }
.pr__list.is-armed .pr__lead-dots { scale: 0 1; transition: scale .6s cubic-bezier(.3, .6, .3, 1) calc(var(--d) + .15s); }
.pr__list.is-in .pr__row { opacity: 1; translate: 0 0; }
.pr__list.is-in .pr__lead-dots { scale: 1 1; }
.pr__hero.is-armed .pr__zero { opacity: 0; scale: .96; transform-origin: 30% 60%; transition: opacity .6s ease, scale .6s ease; }
.pr__hero.is-armed path, .ow__formwrap.is-armed path, .ow__head.is-armed path { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.pr__hero.is-armed .pr__under path { transition: stroke-dashoffset .8s ease .4s; }
.pr__hero.is-armed .pr__under .pr__under2 { transition-delay: .7s; }
.pr__hero.is-armed .pr__arrow path { transition: stroke-dashoffset .5s ease 1.1s; }
.pr__hero.is-armed .pr__arrow path + path { transition-delay: 1.5s; }
.pr__hero.is-armed .pr__note { opacity: 0; transition: opacity .6s ease 1.4s; }
.pr__hero.is-in .pr__zero { opacity: 1; scale: 1; }
.pr__hero.is-in path, .ow__formwrap.is-in path, .ow__head.is-in path { stroke-dashoffset: 0; }
.pr__hero.is-in .pr__note { opacity: 1; }
.ow__head.is-armed .ow__underline path { transition: stroke-dashoffset .9s ease .3s; }
.ow__formwrap.is-armed .ow__card { opacity: 0; translate: 0 24px; transition: opacity .6s ease, translate .6s cubic-bezier(.2, .7, .2, 1); }
.ow__formwrap.is-armed .ow__hand { opacity: 0; transition: opacity .5s ease .5s; }
.ow__formwrap.is-armed .ow__hand-arrow path { transition: stroke-dashoffset .6s ease .7s; }
.ow__formwrap.is-armed .ow__hand-arrow path + path { transition-delay: 1.2s; }
.ow__formwrap.is-in .ow__card { opacity: 1; translate: 0 0; }
.ow__formwrap.is-in .ow__hand { opacity: 1; }
.ow__done-check path { stroke-dasharray: 120; stroke-dashoffset: 120; animation: drawCheck .7s ease .1s forwards; }
@keyframes drawCheck { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .pr__list.is-armed *, .pr__list.is-armed .pr__row, .pr__hero.is-armed *, .ow__formwrap.is-armed *, .ow__head.is-armed * { transition: none !important; }
  .ow__bg { transform: none; }
  .ow__done-check path { animation: none; stroke-dashoffset: 0; }
}

/* шапка над фото «Собственникам»: светлые кнопки с матовой подложкой */
.site-header[data-tone="light"].header--over-image .h-btn {
  --glass-bg: rgba(255, 255, 255, .12); --glass-edge: rgba(255, 255, 255, .4); --glass-hi: rgba(255, 255, 255, .5); --glass-shadow: rgba(0, 0, 0, .18);
}

/* «Собственникам» на десктопе: экран = высота окна (было min-height 1000px), форма, заголовок
   и список преимуществ ужимаются по высоте окна — всё помещается на 1440×900 и на ноутбуке ~720px */
@media (min-width: 901px) {
  .ow { min-height: 100svh; }
  .ow__grid {
    row-gap: clamp(14px, 2.6svh, 28px);
    padding-top: calc(var(--header-h, 80px) + clamp(0px, 1.5svh, 24px));
    padding-bottom: clamp(24px, 4svh, 64px);
  }
  .ow__head { gap: clamp(8px, 1.6svh, 16px); }
  .ow__title { font-size: clamp(38px, 6.2svh, 64px); }
  .ow__lead { font-size: clamp(15px, 2svh, 18px); }
  .ow__perk { padding: clamp(8px, 1.5svh, 16px) 0; }
  .ow__perk-title { font-size: clamp(20px, 2.8svh, 26px); }
  .ow__perk-n { padding-top: clamp(4px, .8svh, 8px); }
  .ow__formwrap { --owp: clamp(40px, 7svh, 72px); padding-top: var(--owp); align-self: center; }
  /* подпись стоит над началом стрелки — линия не заезжает на текст */
  .ow__hand { top: calc(var(--owp) - 120px); }
  /* острие стрелки (точка 137,74 в svg) упирается в левый верхний угол формы снаружи, а не уходит под неё */
  .ow__hand-arrow { z-index: 2; left: -148px; top: calc(var(--owp) - 80px); }
  .ow__card { padding: clamp(22px, 3.6svh, 40px) clamp(28px, 3.6svh, 40px); }
  .ow__form { gap: clamp(10px, 2.2svh, 22px); }
  .ow__form-head { gap: clamp(4px, .8svh, 8px); }
  .ow__form-title { font-size: clamp(22px, 3.3svh, 30px); }
  .ow__field { gap: clamp(2px, .8svh, 8px); }
  .ow__input { height: clamp(38px, 5.6svh, 52px); }
  .ow__chip span { height: clamp(34px, 4.4svh, 40px); }
  .ow__chips { padding-top: clamp(2px, .6svh, 6px); }
  .ow__submit { min-height: clamp(44px, 6svh, 56px); }
}

/* ---------- адаптив ---------- */
@media (max-width: 1099px) {
  .pr__grid, .ow__grid { padding-left: 32px; padding-right: 32px; }
}
@media (max-width: 1024px) {
  .pr__title, .ow__title { font-size: 48px; }
  .pr__zero { font-size: 150px; left: 10px; }
  .pr__under { left: 0; top: 150px; width: 240px; }
  .pr__arrow { display: none; }
  .pr__note { left: 20px; top: 210px; width: 260px; }
  .pr__hero { padding-top: 120px; }
  .pr__stage { height: 280px; }
  .ow__grid { column-gap: 48px; }
  .ow__hand { left: -170px; top: -90px; font-size: 20px; }
  .ow__hand-arrow { left: -80px; top: -64px; scale: .8; }
  @media (min-width: 901px) {
    .ow__hand { top: calc(var(--owp) - 112px); }
    .ow__hand-arrow { left: -128px; top: calc(var(--owp) - 76px); }
  }
}
/* ≤900: одна колонка. 07: заголовок → «0 ₽» → прайс. 07b: заголовок → форма → преимущества */
@media (max-width: 900px) {
  .pr__grid { grid-template-columns: 1fr; grid-template-areas: "head" "hero" "list"; padding: calc(var(--header-h, 80px) + 24px) 20px 56px; }
  .pr__hero { padding-top: 8px; }
  .pr__row dt { white-space: normal; }
  .ow { min-height: 0; }
  .ow__shade { background: linear-gradient(180deg, rgba(20, 18, 16, .55) 0%, rgba(20, 18, 16, .75) 45%, rgba(20, 18, 16, .92) 100%); }
  .ow__grid { grid-template-columns: 1fr; grid-template-areas: "head" "form" "perks"; row-gap: 40px; padding: calc(var(--header-h, 80px) + 24px) 20px 56px; }
  .ow__formwrap { padding-top: 52px; }
  .ow__hand { left: 0; top: 0; }
  .ow__hand-arrow { left: 190px; top: -6px; scale: .55; transform-origin: 0 0; }
}
@media (max-width: 480px) {
  .pr__title, .ow__title { font-size: 36px; }
  .pr__zero { font-size: 110px; }
  .pr__under { top: 110px; width: 180px; }
  .pr__note { top: 160px; font-size: 20px; }
  .pr__stage { height: 220px; }
  .pr__row dt { font-size: 22px; }
  .pr__row dd { font-size: 12px; }
  .ow__lead { font-size: 16px; }
  .ow__card { padding: 24px; }
  .ow__form-title { font-size: 26px; }
  .ow__chips { flex-wrap: wrap; }
  .ow__perk-title { font-size: 22px; }
}

/* элементы только для телефона */
.ow__m, .ow__open, .ow__backdrop, .ow__handle, .ow__close, .ow__hand-arrow-m, .ow__done-close, .ow__lead-m, .ow__perk-text-m { display: none; }

/* ≤768 (ТЗ cc-task-owners-mobile-v3, макет 390×844): экран-фото, части разнесены по высоте — заголовок сверху,
   3 шага посередине, кнопка «Узнать ставку аренды →» снизу; без рукописной подписи и стрелки. Форма — та же карточка, но это
   bottom sheet (position: fixed): открывается кнопкой, закрывается ×, подложкой, свайпом вниз, Esc и «назад».
   --sheet-kb — высота экранной клавиатуры (bottomSheet в app.js): панель поднимается над ней. */
@media (max-width: 768px) {
  .ow { min-height: 100vh; min-height: 100svh; scroll-margin-top: 0; }
  .ow__photo { object-position: 62% 60%; }
  .ow__shade { background: linear-gradient(180deg, rgba(20, 18, 16, .6) 0%, rgba(20, 18, 16, .78) 40%, rgba(20, 18, 16, .92) 100%); }
  /* сетка на всю высоту блока: заголовок — вверху, шаги — посередине, кнопка — внизу */
  .ow__grid {
    grid-template-areas: "head" "perks" "form"; align-content: space-between; row-gap: 28px;
    min-height: 100vh; min-height: 100svh; box-sizing: border-box;
    padding: 100px 22px calc(34px + env(safe-area-inset-bottom));
  }
  .ow__head { gap: 14px; }
  .ow__eyebrow { font-size: 11px; letter-spacing: .2em; }
  .ow__title { font-size: 40px; line-height: 1.05; letter-spacing: -.03em; }
  .ow__underline { height: 14px; bottom: -6px; }
  .ow__underline path { stroke-width: 2.2; }
  .ow__lead { max-width: 330px; margin-top: 6px; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .8); }
  .ow__lead-d { display: none; }
  .ow__lead-m { display: inline; }
  .ow__perks { max-width: none; border-bottom: 1px solid rgba(255, 255, 255, .16); }
  .ow__perk { grid-template-columns: 34px 1fr; gap: 8px; padding: 16px 0; border-top-color: rgba(255, 255, 255, .16); }
  .ow__perk-n { padding-top: 3px; font: italic 400 17px/1.15 var(--font-serif-accent); letter-spacing: 0; color: #E8C2AE; }
  .ow__perk-body { gap: 6px; }
  .ow__perk-title { font-size: 23px; line-height: 1.15; color: #fff; }
  .ow__perk-text { display: none; }
  .ow__perk-text-m { display: block; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .68); }

  .ow__formwrap { padding-top: 0; align-self: auto; }
  .ow__hand, .ow__hand-arrow, .ow__hand-arrow-m { display: none; }
  .ow__open {
    display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 58px;
    border: 0; border-radius: 999px; background: #F4EFE7; color: #1F1A17; cursor: pointer;
    font: 600 16px var(--font-sans); box-shadow: 0 10px 30px rgba(0, 0, 0, .3); transition: transform .2s;
  }
  .ow__open:active { transform: scale(.98); }
  .ow__open svg { flex: none; }
  .ow__open:focus-visible { outline: 2px solid #E8C2AE; outline-offset: 3px; }

  /* подложка и панель */
  .ow__backdrop {
    display: block; position: fixed; inset: 0; z-index: 94; opacity: 0; pointer-events: none;
    background: rgba(10, 8, 6, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); transition: opacity .3s ease;
  }
  .ow-sheet.is-sheet .ow__backdrop { opacity: 1; pointer-events: auto; }
  .ow-sheet .ow__card {
    position: fixed; z-index: 95; left: 0; right: 0; bottom: var(--sheet-kb, 0px);
    max-height: min(90svh, calc(var(--sheet-vh, 100svh) - 12px)); overflow-y: auto; overscroll-behavior: contain;
    padding: 10px 22px calc(26px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0;
    box-shadow: 0 -20px 60px rgba(0, 0, 0, .4);
    opacity: 1; translate: none; transform: translateY(105%); visibility: hidden;
    transition: transform .42s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .42s, bottom .2s ease;
  }
  .ow-sheet.is-sheet .ow__card { transform: translateY(var(--sheet-drag, 0px)); visibility: visible; transition: transform .42s cubic-bezier(.22, .61, .36, 1), bottom .2s ease; }
  .ow-sheet.is-dragging .ow__card { transition: none; }
  .ow__handle { display: block; width: 40px; height: 4px; margin: 0 auto 6px; border-radius: 2px; background: #CDBFAE; }
  .ow__close {
    display: block; position: absolute; right: 22px; top: 30px; width: 34px; height: 34px; padding: 0; border-radius: 17px;
    border: 1px solid #E3D9CB; background: transparent; color: #6B5F55; font-size: 14px; cursor: pointer;
  }
  .ow__m { display: inline; }
  .ow__form { gap: 16px; }
  .ow__form-head { gap: 6px; padding-right: 46px; }
  .ow__form-eyebrow { font-size: 11px; }
  .ow__form-title { font-size: 25px; }
  .ow__field { gap: 4px; }
  .ow__label { font-size: 11px; }
  .ow__input { height: 46px; font-size: 16px; }   /* не меньше 16px — иначе iOS зумит при фокусе */
  .ow__chips { flex-wrap: nowrap; gap: 6px; }
  .ow__chip { flex: 1 1 0; }
  .ow__chip span { min-width: 0; height: 44px; padding: 0; font-size: 16px; }
  .ow__submit { min-height: 54px; margin-top: 4px; }
  .ow__hint { font-size: 12px; }
  .ow__done { padding: 28px 0 8px; }
  .ow__done-text { font-size: 24px; }
  .ow__done-close { display: inline-flex; width: 100%; min-height: 54px; background: #1F1A17; color: #fff; border-color: #1F1A17; cursor: pointer; font-family: inherit; }
}
/* низкие экраны (≤700): плотнее; блок может стать выше экрана — это нормально */
@media (max-width: 768px) and (max-height: 700px) {
  .ow__grid { padding-top: 88px; }
  .ow__title { font-size: 34px; }
  .ow__perk { padding: 12px 0; }
  .ow__perk-title { font-size: 21px; }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .ow-sheet .ow__card {
    transform: none; opacity: 0; transition: opacity .25s ease, visibility 0s linear .25s;
  }
  .ow-sheet.is-sheet .ow__card { transform: none; opacity: 1; transition: opacity .25s ease; }
}
html.sheet-lock, html.sheet-lock body { overflow: hidden; }   /* открыта нижняя панель (bottomSheet в app.js) */
.ow__beds.is-invalid .ow__chip span { border-color: #B4654A; }

/* ======================================================================
   «Юридическая защита» с парящей Фемидой (макет legal-themis.html)
   ====================================================================== */

.lg { position: relative; overflow: hidden; background: #F4EFE7; color: #2B241F; }
.lg__inner {
  position: relative; min-height: 1000px; display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--header-h, 80px) + 8px) 64px 48px 160px;
}
.lg__eyebrow { position: relative; z-index: 1; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: #B4654A; font-weight: 700; }

/* один h2, части разнесены по краям */
.lg__title { position: relative; z-index: 1; width: 100%; margin: 140px 0 0; display: flex; justify-content: space-between; align-items: flex-start; font-weight: 600; }
.lg__left { font: 600 92px/1 var(--font-sans); letter-spacing: -.035em; color: #1F1A17; }
.lg__right { font-size: 92px; line-height: 1; letter-spacing: -.02em; color: #B4654A; text-align: right; }

.lg__bottom { position: relative; z-index: 1; width: 100%; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-top: auto; }
.lg__about { display: flex; flex-direction: column; gap: 14px; max-width: 320px; }
.lg__about p { margin: 0; font-size: 17px; line-height: 1.6; color: #6B5F55; }
/* «Образец контракта» — второстепенная: контурная, как бывшая «Задать вопрос» в FAQ, с иконкой документа */
.lg__btn {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px 0 22px; font-size: 15px;
  background: transparent; color: #2B241F; border: 1px solid rgba(43, 36, 31, .45);
}
.lg__btn:hover { opacity: 1; color: #2B241F; background: rgba(43, 36, 31, .06); }
.lg__btn svg { flex: none; color: #B4654A; }
.lg__stat { display: flex; flex-direction: column; gap: 4px; text-align: right; }
.lg__zero { font-size: 64px; line-height: 1; color: #2B241F; }
.lg__stat-label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #6B5F55; font-weight: 700; }

/* ---------- Фемида: слои движения ----------
   .themis-parallax — сдвиг при прокрутке (--th-y) и позиция; .themis-float — дрейф вверх-вниз 7s;
   .themis-sway — покачивание 9s (rotate + translate) и наклон к курсору (transform, --tilt-x/--tilt-y);
   img — появление сверху; .themis-shadow — тень, тот же ритм 7s, что и дрейф. */
.themis-parallax {
  --th-h: 860px; --float-amp: -18px;
  position: absolute; left: 50%; top: calc(var(--header-h, 80px) - 10px); z-index: 0;
  height: var(--th-h); aspect-ratio: 408 / 612;
  transform: translate3d(-38%, var(--th-y, 0px), 0); will-change: transform; pointer-events: none;
}
.themis-float, .themis-sway { width: 100%; height: 100%; will-change: transform; }
.themis-float { animation: themisFloat 7s ease-in-out infinite; }
.themis-sway {
  transform-origin: 50% 45%;
  transform: perspective(1200px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  animation: themisSway 9s ease-in-out infinite alternate;
}
.themis-img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; }
/* сама тень — появление (opacity); её ритм в ::before, чтобы keyframes не перебивали появление */
.themis-shadow { position: absolute; left: 51%; top: 89%; width: 38%; height: 5%; translate: -50% 0; }
.themis-shadow::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; filter: blur(12px);
  background: radial-gradient(closest-side, rgba(43, 36, 31, .18), rgba(43, 36, 31, 0));
  animation: themisShadow 7s ease-in-out infinite;
}
@keyframes themisFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 var(--float-amp); } }
@keyframes themisSway {
  from { rotate: -1.2deg; translate: -6px 0; }
  to   { rotate: 1.2deg;  translate: 6px 0; }
}
/* статуя выше — тень меньше и прозрачнее */
@keyframes themisShadow { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: .85; opacity: .5; } }

/* вне экрана — анимация на паузе */
.lg.is-off .themis-float, .lg.is-off .themis-sway, .lg.is-off .themis-shadow::before { animation-play-state: paused; }

/* появление: статуя опускается сверху, затем заголовки выезжают с боков */
.lg.is-armed .themis-img { opacity: 0; translate: 0 -60px; transition: opacity 1.4s cubic-bezier(.22, 1, .36, 1), translate 1.4s cubic-bezier(.22, 1, .36, 1); }
.lg.is-armed .themis-shadow { opacity: 0; transition: opacity 1s ease .6s; }
.lg.is-armed .lg__left { opacity: 0; translate: -40px 0; transition: opacity .9s ease .3s, translate .9s cubic-bezier(.22, 1, .36, 1) .3s; }
.lg.is-armed .lg__right { opacity: 0; translate: 40px 0; transition: opacity .9s ease .3s, translate .9s cubic-bezier(.22, 1, .36, 1) .3s; }
.lg.is-in .themis-img, .lg.is-in .lg__left, .lg.is-in .lg__right { opacity: 1; translate: 0 0; }
.lg.is-in .themis-shadow { opacity: 1; }
/* пока статуя не появилась, ритм парения не запускаем */
.lg.is-armed:not(.is-in) .themis-float, .lg.is-armed:not(.is-in) .themis-sway, .lg.is-armed:not(.is-in) .themis-shadow::before { animation-play-state: paused; }

/* ---------- адаптив ---------- */
@media (max-width: 1099px) { .lg__inner { padding-left: 32px; padding-right: 32px; } }
@media (max-width: 1024px) {
  .lg__left, .lg__right { font-size: 64px; }
  .themis-parallax { --th-h: 640px; }
  .lg__inner { min-height: 820px; }
  .lg__title { margin-top: 110px; }
}
/* десктоп и планшет: экран = высота окна (было min-height 1000px). Статуя, заголовок и отступы
   масштабируются по высоте окна — всё помещается и на 1440×900, и на ноутбуке ~720px */
@media (min-width: 769px) {
  .lg__inner { min-height: 100svh; box-sizing: border-box; padding-bottom: clamp(24px, 4.8svh, 48px); }
  .lg__title { margin-top: clamp(40px, 14svh, 140px); }
  .lg__left, .lg__right { font-size: clamp(52px, 9.2svh, 92px); }
  /* статуя начинается под надписью «Юридическая защита» — поднятая рука с весами её не перекрывает */
  .themis-parallax { top: calc(var(--header-h, 80px) + 36px); --th-h: min(820px, calc(100svh - var(--header-h, 80px) - 76px)); }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .lg__left, .lg__right { font-size: min(64px, max(44px, 7svh)); }
  .lg__title { margin-top: clamp(40px, 11svh, 110px); }
  .themis-parallax { --th-h: min(640px, calc(100svh - var(--header-h, 80px) - 76px)); }
}
/* ≤768: надзаголовок → «Честно» → статуя → «к обеим сторонам» → абзац + кнопка → «0 споров» */
@media (max-width: 768px) {
  .lg__inner { min-height: 0; align-items: stretch; padding: calc(var(--header-h, 80px) + 16px) 20px 48px; }
  .lg__eyebrow { align-self: center; }
  .lg__title { display: contents; }
  .lg__left { order: 1; margin-top: 32px; font-size: 48px; align-self: flex-start; }
  .themis-parallax {
    order: 2; position: relative; left: auto; top: auto; align-self: center; margin: 8px 0;
    --th-h: 520px; --float-amp: -10px; transform: none;
  }
  .lg__right { order: 3; font-size: 48px; align-self: flex-end; }
  .lg__bottom { order: 4; margin-top: 36px; flex-direction: column; align-items: flex-start; gap: 32px; }
  .lg__stat { align-self: flex-end; }
}
@media (max-width: 480px) {
  .themis-parallax { --th-h: 420px; }
  .lg__left, .lg__right { font-size: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .themis-float, .themis-sway, .themis-shadow::before { animation: none; }
  .themis-parallax, .themis-sway { transform: none; }
  @media (min-width: 769px) { .themis-parallax { transform: translateX(-38%); } }
  .lg.is-armed .themis-img, .lg.is-armed .lg__left, .lg.is-armed .lg__right, .lg.is-armed .themis-shadow { translate: 0 0; transition: opacity .4s ease; }
}

/* ======================================================================
   Переход 6 → 7 по горизонтали (.hswap). Включается классом .is-on (app.js: десктоп ≥901px,
   без reduced motion). «Проверка» и «Стоимость» лежат в одной sticky-сцене высотой с окно;
   при прокрутке запаса (.hswap__spacer, один экран) обе сдвигаются только по X (--hx 0 → 1),
   поэтому вертикаль целиком на браузере и ничего не дрожит. Потом сцена уезжает вверх как обычно.
   ====================================================================== */
.hswap { position: relative; }
.hswap.is-on { overflow-x: clip; touch-action: pan-y pinch-zoom; }   /* горизонтальный свайп ведёт переход (app.js), вертикаль и зум — браузеру */
.hswap.is-on .hswap__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.hswap.is-on .hswap__stage > section {
  position: absolute; inset: 0; height: 100%; box-sizing: border-box; overflow: hidden;
  will-change: transform; backface-visibility: hidden;
}
/* Сцена «перелистывания» (--hx 0 → 1):
   1) тексты «Проверки» по очереди уходят влево и гаснут (--o у каждого элемента со своей задержкой --i),
      карточка чек-листа уезжает целиком;
   2) справа налево проходит тонкая терракотовая линия, за ней открывается «Стоимость» (clip-path);
   3) тексты «Стоимости» по очереди въезжают справа (--e), строки прайса и «0 ₽» дорисовываются (is-in). */
.hswap.is-on .hswap__stage > .pr {
  z-index: 1; --w: clamp(0, (var(--hx, 0) - .15) / .7, 1);
  clip-path: inset(0 0 0 calc((1 - var(--w)) * 100%));
}
.hswap__edge { display: none; }
.hswap.is-on .hswap__edge {
  display: block; position: absolute; top: 0; bottom: 0; z-index: 2; width: 1px; pointer-events: none;
  left: calc((1 - clamp(0, (var(--hx, 0) - .15) / .7, 1)) * 100%);
  background: linear-gradient(180deg, rgba(180, 101, 74, 0), #B4654A 18%, #B4654A 82%, rgba(180, 101, 74, 0));
  box-shadow: 0 0 24px rgba(180, 101, 74, .45);
  opacity: calc(clamp(0, var(--hx, 0) * 12, 1) * clamp(0, (1 - var(--hx, 0)) * 12, 1));
}
/* уходят: «Проверка» */
.hswap.is-on .hc :is(.rail, .scroll-hint, .hc__head, .hc30, .hc__btn, .hc__card) {
  --o: clamp(0, (var(--hx, 0) - var(--i, 0) * .045) * 3.4, 1);
}
.hswap.is-on .hc :is(.rail, .scroll-hint, .hc__head, .hc30, .hc__btn) {
  opacity: calc(1 - var(--o)); transform: translate3d(calc(var(--o) * -80px), 0, 0);
}
/* белая карточка чек-листа уезжает целиком — пункты внутри неподвижны */
.hswap.is-on .hc .hc__card { opacity: calc(1 - var(--o)); transform: translate3d(calc(var(--o) * -140px), 0, 0); }
.hswap.is-on .hc .hc__head { --i: 0; }
.hswap.is-on .hc .hc30 { --i: 1; }
.hswap.is-on .hc .hc__btn { --i: 2; }
.hswap.is-on .hc .rail, .hswap.is-on .hc .scroll-hint { --i: 0; }
.hswap.is-on .hc .hc__card { --i: 2.5; }
/* въезжают: «Стоимость» */
.hswap.is-on .pr :is(.pr__head, .pr__list, .pr__row, .pr__hero) {
  --e: clamp(0, (var(--hx, 0) - .42 - var(--i, 0) * .05) * 3.4, 1);
}
.hswap.is-on .pr :is(.pr__head, .pr__list, .pr__hero) { opacity: var(--e); }
.hswap.is-on .pr :is(.pr__head, .pr__row, .pr__hero) { transform: translate3d(calc((1 - var(--e)) * 90px), 0, 0); }
.hswap.is-on .pr .pr__head { --i: 0; }
.hswap.is-on .pr .pr__list { --i: .6; }
.hswap.is-on .pr .pr__row:nth-child(1) { --i: .8; }
.hswap.is-on .pr .pr__row:nth-child(2) { --i: 1.3; }
.hswap.is-on .pr .pr__row:nth-child(3) { --i: 1.8; }
.hswap.is-on .pr .pr__row:nth-child(4) { --i: 2.3; }
.hswap.is-on .pr .pr__row:nth-child(5) { --i: 2.8; }
.hswap.is-on .pr .pr__row:nth-child(6) { --i: 3.3; }
.hswap.is-on .pr .pr__hero { --i: 1.5; }
/* кликабелен только тот экран, что сейчас открыт */
.hswap.is-on.is-second .hc, .hswap.is-on:not(.is-second) .pr { pointer-events: none; }
.hswap.is-on .hswap__spacer { height: 100svh; }
/* SCROLL на «Проверке» ведёт вправо — туда, куда уезжает экран */
.hswap.is-on .hc .scroll-hint svg { transform: rotate(-90deg); margin-block: -22px; }
/* открыта нижняя панель чек-листа: sticky-сцена — свой слой, поднимаем её над шапкой, чтобы подложка закрыла всё */
.hswap__stage:has(.hc.is-sheet) { z-index: 100; }

/* подсказки перелистывания: «вперёд» гаснет в начале перехода, «назад» проявляется в конце (--hx 0 → 1).
   Нажимать можно только ту, что сейчас видна (.is-second) */
.hswap__tab, .hswap__finger { display: none; }
.hswap.is-on .hswap__tab--next, .hswap.is-on .hswap__finger { opacity: clamp(0, 1 - var(--hx, 0) * 4, 1); }
.hswap.is-on .hswap__tab--back { opacity: clamp(0, (var(--hx, 0) - .75) * 4, 1); }
.hswap.is-on.is-second .hswap__tab--next,
.hswap.is-on:not(.is-second) .hswap__tab--back { pointer-events: none; visibility: hidden; }
.hswap__tab svg { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* десктоп: закладки у края экрана, как у страницы книги */
@media (min-width: 901px) {
  .hswap.is-on .hswap__tab {
    position: absolute; top: 50%; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 10px;
    width: 44px; padding: 18px 0; margin-top: -78px; box-sizing: border-box; border: 1px solid #E3D9CB; background: #FBF8F3;
    color: #2B241F; font: 700 11px/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
    box-shadow: 0 10px 30px rgba(31, 26, 23, .1); transition: background-color .2s, color .2s, opacity .2s;
  }
  .hswap__tab span { writing-mode: vertical-rl; }
  .hswap__tab svg { width: 18px; height: 18px; color: #B4654A; }
  .hswap__tab--next { right: 0; border-right: 0; border-radius: 22px 0 0 22px; }
  .hswap__tab--back { left: 0; border-left: 0; border-radius: 0 22px 22px 0; }
  .hswap__tab--back span { transform: rotate(180deg); }
  .hswap__tab:hover { background: #2B241F; color: #F4EFE7; }
  .hswap__tab:hover svg { color: #F4EFE7; }
  .hswap__tab--next svg { animation: hswapNudge 1.8s ease-in-out infinite; }
  .hswap__tab--back svg { animation: hswapNudgeBack 1.8s ease-in-out infinite; }
}
/* телефон: «стеклянный» кружок касания в стиле iOS (Liquid Glass) у низа экрана «Проверки» — по очереди показывает
   «смахнуть влево» (перелистнуть) и «провести вверх» (листать дальше); в момент касания чуть «нажимается».
   Гаснет с началом перехода; после первого перелистывания (.was-flipped) не показывается */
@media (max-width: 768px) {
  .hswap.is-on .hswap__finger {
    position: absolute; left: 50%; top: calc(100svh - 46px - env(safe-area-inset-bottom)); z-index: 4;
    display: block; width: 26px; height: 26px; margin: -13px 0 0 -13px; pointer-events: none;
  }
  .hswap__dot {
    position: absolute; inset: 0; border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .95) 0, rgba(255, 255, 255, .5) 32%, rgba(255, 255, 255, .18) 62%, rgba(180, 101, 74, .1) 100%);
    border: 1px solid rgba(255, 255, 255, .75);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .9), inset 0 -3px 6px rgba(43, 36, 31, .1), 0 4px 14px rgba(31, 26, 23, .14), 0 0 0 .5px rgba(43, 36, 31, .12);
    -webkit-backdrop-filter: blur(6px) saturate(170%); backdrop-filter: blur(6px) saturate(170%);
    opacity: 0; animation: hswapDot 5s cubic-bezier(.45, 0, .25, 1) infinite;
  }
  .hswap.was-flipped .hswap__finger { display: none; }
}
@media (max-width: 768px) and (max-height: 700px) {
  .hswap.is-on .hswap__finger { --up: -18px; --dn: 6px; top: calc(100svh - 30px - env(safe-area-inset-bottom)); }
}
@keyframes hswapNudge { 0%, 60%, 100% { transform: translateX(0); } 30% { transform: translateX(4px); } }
@keyframes hswapNudgeBack { 0%, 60%, 100% { transform: translateX(0); } 30% { transform: translateX(-4px); } }
/* касание справа → влево; касание снизу → вверх */
@keyframes hswapDot {
  0% { transform: translate(22px, 0) scale(1.15); opacity: 0; }
  6% { transform: translate(22px, 0) scale(.88); opacity: 1; }
  10% { transform: translate(22px, 0) scale(1); opacity: 1; }
  34% { transform: translate(-28px, 0) scale(1); opacity: 1; }
  42% { transform: translate(-30px, 0) scale(1.1); opacity: 0; }
  50% { transform: translate(0, var(--dn, 10px)) scale(1.15); opacity: 0; }
  56% { transform: translate(0, var(--dn, 10px)) scale(.88); opacity: 1; }
  60% { transform: translate(0, var(--dn, 10px)) scale(1); opacity: 1; }
  84% { transform: translate(0, var(--up, -30px)) scale(1); opacity: 1; }
  92%, 100% { transform: translate(0, calc(var(--up, -30px) - 2px)) scale(1.1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hswap__tab svg, .hswap__dot { animation: none; }
  .hswap__dot { opacity: 1; }
}

/* телефон: сцена высотой со «Стоимость» (--pr-h от app.js, она выше экрана) — пока идёт переход, видна верхняя
   часть, после него «Стоимость» дочитывается обычной прокруткой. «Проверка» — экран сверху сцены.
   У «Проверки» нет transform/will-change: внутри неё нижняя панель (position: fixed) — иначе она привязалась бы к секции */
@media (max-width: 768px) {
  .hswap.is-on .hswap__stage { height: max(100svh, var(--pr-h, 100svh)); }
  .hswap.is-on .hswap__stage > .hc { bottom: auto; height: 100svh; will-change: auto; backface-visibility: visible; }
  /* в сцене «Стоимость» открывается у верха экрана — сверху место под полосу шапки */
  .hswap.is-on .pr__grid { padding-top: 88px; padding-bottom: 32px; }
  /* «Стоимость» помещается в экран — содержимое по центру по высоте, как у «Проверки дома» */
  .hswap.is-on .pr .pr__grid { min-height: 100svh; box-sizing: border-box; align-content: center; }
  .hswap.is-on .hc .hc__rows { --i: 1.5; --o: clamp(0, (var(--hx, 0) - var(--i) * .045) * 3.4, 1); opacity: calc(1 - var(--o)); transform: translate3d(calc(var(--o) * -80px), 0, 0); }
  .hswap.is-on .hc .hc__more { --i: 2; --o: clamp(0, (var(--hx, 0) - var(--i) * .045) * 3.4, 1); opacity: calc(1 - var(--o)); transform: translate3d(calc(var(--o) * -80px), 0, 0); }
  /* чек-лист на телефоне — панель, а не карточка в сцене: правила «уезжающей карточки» не действуют */
  .hswap.is-on .hc .hc__card { opacity: 1; transform: translateY(105%); }
  .hswap.is-on .hc.is-sheet .hc__card { transform: translateY(var(--sheet-drag, 0px)); }
}

/* телефон: шапка висит поверх контента — места под неё в блоке не нужно. Вместе с 56px снизу у «Проверки дома»
   (тот же песочный фон) между блоками 88px; переход из меню — с отступом под полосу шапки.
   «Стоимость» помещается в один экран телефона (в сцене перехода): «0 ₽» меньше и с подписью справа,
   прайс мельче и плотнее, «Расширенный сервис» в одну строку с «подробнее» */
@media (max-width: 768px) {
  .pr { scroll-margin-top: calc(72px + env(safe-area-inset-top)); }
  .pr__grid { padding-top: 32px; row-gap: 20px; }
  .pr__head { gap: 10px; }
  .pr__title { font-size: 30px; line-height: 1.06; }
  .pr__lead { font-size: 15px; line-height: 1.45; }

  .pr__hero { padding-top: 0; }
  .pr__stage { height: 96px; }
  .pr__zero { left: 0; font-size: 76px; }
  .pr__under { left: -4px; top: 76px; width: 130px; height: 18px; }
  .pr__note { left: 150px; top: 14px; width: auto; max-width: 190px; font-size: 18px; line-height: 1.25; }

  .pr__list { padding-top: 2px; }
  .pr__row { gap: 10px; padding: 8px 0; }
  .pr__row dt { font-size: 17px; line-height: 1.2; white-space: nowrap; }
  .pr__row dd { font-size: 11px; gap: 10px; }
  .pr__lead-dots { min-width: 12px; transform: translateY(-4px); }
  /* «Расширенный сервис»: одна строка — название и «подробнее» (перебивает общий мобильный стиль .svc__btn) */
  .pr .pr__row.svc { margin-top: 6px; }
  .pr .svc__btn { flex-wrap: nowrap; gap: 10px; padding: 10px 12px; }
  .pr .svc__name { font-size: 19px; white-space: nowrap; }
  .pr .svc__dots { min-width: 0; }
  .pr .svc-pill { gap: 6px; height: 30px; padding: 0 10px; font-size: 10.5px; letter-spacing: .08em; }
  .pr .svc-pill svg { width: 13px; height: 13px; }
  /* подсказку «нажмите» с пальцем на телефоне не показываем — пульсирующей «подробнее» достаточно */
  .pr .svc-hint { display: none; }
}
/* узкие (360): названия строк и сервиса чуть мельче */
@media (max-width: 374px) {
  .pr__row dt { font-size: 16px; }
  .pr .svc__name { font-size: 17px; }
  .pr__note { left: 140px; font-size: 16px; }
}
/* низкие экраны (≤700): ещё плотнее */
@media (max-width: 768px) and (max-height: 700px) {
  .pr__grid { row-gap: 14px; }
  .pr__title { font-size: 27px; }
  .pr__lead { font-size: 14px; }
  .pr__stage { height: 80px; }
  .pr__zero { font-size: 62px; }
  .pr__under { top: 62px; width: 108px; }
  .pr__note { left: 124px; top: 8px; font-size: 16px; }
  .pr__row { padding: 6px 0; }
}
/* «Стоимость» на десктопе — тот же масштаб, что у «Проверки дома»: заголовок, лид, строки прайса
   и отступы зависят от высоты окна; экран помещается в окно целиком */
@media (min-width: 901px) {
  .pr__grid {
    row-gap: clamp(14px, 2.6svh, 28px);
    padding-top: calc(var(--header-h, 80px) + clamp(0px, 1.2svh, 16px));
    padding-bottom: clamp(24px, 4svh, 56px);
  }
  .pr__head { gap: clamp(8px, 1.4svh, 14px); }
  .pr__title { font-size: clamp(34px, 5.4svh, 56px); }
  .pr__lead { font-size: clamp(15px, 1.9svh, 17px); }
  .pr__row { padding: clamp(8px, 1.5svh, 14px) 0; }
  .pr__row dt { font-size: clamp(20px, 3.1svh, 30px); }
  .pr__price { font-size: 13px; letter-spacing: .08em; }
  .pr__hero { padding-top: clamp(40px, 12svh, 170px); }
}
@media (min-width: 901px) and (max-width: 1280px) {
  .pr__title { font-size: min(48px, max(34px, 5.4svh)); }
  .pr__row dt { font-size: min(26px, max(20px, 3.1svh)); }
}

/* ======================================================================
   «Стоимость» → строка «Расширенный сервис»: кнопка «подробнее», подсказка с рукой, попап с ценами
   (ТЗ cc-task-pricing-services-popup, макет 07-pricing.html). Логика — app.js, данные — services.json.
   ====================================================================== */
/* строка шире списка на 16px с каждой стороны — текст остаётся на одной линии с остальными строками */
.pr__row.svc { display: block; position: relative; z-index: 5; margin: 8px -16px 0; padding: 0; }
.svc dd { margin: 0; }
.svc__btn {
  width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 16px; box-sizing: border-box;
  border: 1px solid rgba(180, 101, 74, .35); border-radius: 6px; background: rgba(180, 101, 74, .10);
  cursor: pointer; font-family: inherit; text-align: left; color: inherit; transition: background-color .2s;
}
.svc__btn:hover, .svc.is-open .svc__btn { background: rgba(180, 101, 74, .16); }
.svc__btn:focus-visible { outline: 2px solid #B4654A; outline-offset: 2px; }
.svc__name { font-size: 28px; line-height: 1.15; color: #B4654A; white-space: nowrap; }
.svc__dots { flex: 1 1 auto; min-width: 24px; border-bottom: 2px dotted rgba(180, 101, 74, .45); transform: translateY(4px); }
.svc-pill {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px;
  background: #B4654A; color: #fff; font: 700 12px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  animation: svcPulse 1.8s ease-out infinite;
}
@keyframes svcPulse { 0% { box-shadow: 0 0 0 0 rgba(180, 101, 74, .55); } 70% { box-shadow: 0 0 0 14px rgba(180, 101, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(180, 101, 74, 0); } }

/* подсказка «наведите или нажмите» — декоративная, синхронно с пульсом (цикл 1.8s) */
.svc-hint {
  position: absolute; right: 50px; top: 100%; margin-top: 4px; display: flex; flex-direction: row-reverse; align-items: center; gap: 6px;
  pointer-events: none; transition: opacity .2s;
}
.svc-hint[hidden] { display: none; }
.svc:hover .svc-hint, .svc.is-open .svc-hint { opacity: 0; }
.svc-hint__icon { position: relative; width: 34px; height: 40px; }
.svc-tapring { position: absolute; left: 0; top: -2px; width: 20px; height: 20px; border-radius: 10px; border: 2px solid #B4654A; box-sizing: border-box; animation: svcRing 1.8s ease-out infinite; }
.svc-hand { position: absolute; left: 4px; top: 4px; overflow: visible; transform-origin: 30% 10%; animation: svcTap 1.8s ease-in-out infinite; }
.svc-hand path { fill: #FBF8F3; stroke: #2B241F; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.svc-hint__text { font-size: 18px; color: #B4654A; white-space: nowrap; }
@keyframes svcTap { 0%, 100% { transform: translate(0, 0) rotate(-12deg); } 40% { transform: translate(-6px, -8px) rotate(-12deg); } 55% { transform: translate(-4px, -5px) rotate(-12deg) scale(.9); } 70% { transform: translate(-6px, -8px) rotate(-12deg); } }
@keyframes svcRing { 0%, 40% { opacity: 0; transform: scale(.4); } 55% { opacity: .8; transform: scale(1); } 90%, 100% { opacity: 0; transform: scale(1.6); } }

/* попап: position: fixed в body, координаты считает app.js — справа от строки, низ на 40px ниже строки;
   если справа не помещается — над строкой */
.svc-pop {
  position: fixed; left: 0; top: 0; width: 400px; max-height: calc(100vh - 16px); overflow-y: auto; box-sizing: border-box; z-index: 45;
  display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 20px;
  background: #FBF8F3; color: #2B241F; border: 1px solid #E3D9CB; border-radius: 6px; box-shadow: 0 24px 60px rgba(31, 26, 23, .18);
  outline: none; animation: svcPopIn .18s ease both;
}
.svc-pop[hidden] { display: none; }
/* не сжимать строки и кнопку, когда попап упирается в max-height, — прокручивается сам попап */
.svc-pop > * { flex-shrink: 0; }
@keyframes svcPopIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.svc-pop__handle { display: none; }
.svc-pop__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.svc-pop__eyebrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: #B4654A; }
.svc-pop__close {
  flex: none; width: 28px; height: 28px; border-radius: 14px; border: 1px solid #E3D9CB; background: transparent;
  color: #6B5F55; cursor: pointer; font-size: 13px; line-height: 1; transition: background-color .2s;
}
.svc-pop__close:hover { background: rgba(43, 36, 31, .06); }
.svc-pop__title { font: italic 400 26px/1.12 var(--font-serif-accent); color: #1F1A17; }
.svc-pop__list { display: flex; flex-direction: column; margin-top: 4px; }
.svc-pop__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; border-top: 1px solid #E3D9CB; }
.svc-pop__row span { font-size: 14px; line-height: 1.35; color: #2B241F; }
.svc-pop__row b { font-size: 13px; font-weight: 700; color: #B4654A; white-space: nowrap; }
.svc-pop__note { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: #6B5F55; }
.svc-pop__cta {
  display: inline-flex; align-self: flex-start; align-items: center; height: 44px; padding: 0 22px; margin-top: 4px; border-radius: 999px;
  background: #1F1A17; color: #fff; text-decoration: none; font-size: 14px; font-weight: 600; transition: opacity .2s;
}
.svc-pop__cta:hover { color: #fff; opacity: .9; }

/* мобильная: пилюля может уйти под название; попап — bottom sheet на всю ширину, список прокручивается */
@media (max-width: 768px) {
  .pr__row.svc { margin: 8px -12px 0; }
  .svc__btn { flex-wrap: wrap; padding: 14px 12px; row-gap: 10px; }
  .svc__name { font-size: 24px; white-space: normal; }
  .svc-hint { right: 12px; }
  .svc-hint__text { font-size: 16px; }
  .svc-pop {
    position: fixed; left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto; margin: 0; z-index: 60;
    max-height: 82vh; max-height: 82svh; overflow-y: auto; overscroll-behavior: contain;
    border-radius: 16px 16px 0 0; border-bottom: 0; padding: 10px 16px calc(20px + env(safe-area-inset-bottom));
    box-shadow: 0 -12px 40px rgba(31, 26, 23, .22); animation: svcSheetIn .28s cubic-bezier(.2, .7, .2, 1) both;
  }
  .svc-pop__handle { display: block; flex: none; width: 40px; height: 4px; border-radius: 2px; background: rgba(43, 36, 31, .2); margin: 0 auto 4px; }
  .svc-pop__cta { align-self: stretch; justify-content: center; }
}
@keyframes svcSheetIn { from { transform: translateY(100%); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .svc-pill, .svc-hand, .svc-tapring, .svc-pop { animation: none; }
  .svc-hand { transform: rotate(-12deg); }
  .svc-tapring { opacity: 0; }
}

/* ======================================================================
   «Частые вопросы» + финальный CTA на видео в полукруге (макет 08-faq-final-cta.html)
   ====================================================================== */
.fq { position: relative; background: #F4EFE7; color: #2B241F; }
.fq__grid {
  display: grid; grid-template-columns: 1fr 1.55fr; gap: 72px; align-items: start;
  padding: calc(var(--header-h, 80px) + 24px) 64px 0 160px;
}
.fq__head { display: flex; flex-direction: column; gap: 18px; padding-top: 18px; }
.fq__eyebrow { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: #B4654A; font-weight: 700; }
.fq__title { margin: 0; font: 600 56px/1.05 var(--font-sans); letter-spacing: -.025em; color: #1F1A17; }
.fq__title .accent { color: #B4654A; }
.fq__lead { margin: 0; max-width: 340px; font-size: 17px; line-height: 1.6; color: #6B5F55; }
/* подвал: логотип и название компании */
.foot__brand { display: inline-flex; align-items: center; gap: 14px; color: #fff; text-decoration: none; font-size: 20px; font-weight: 700; letter-spacing: .01em; }
.foot__brand:hover { color: #fff; }
.foot__brand .logo { width: 56px; height: 56px; }
.fq__ask {
  display: inline-flex; align-self: flex-start; align-items: center; height: 52px; padding: 0 28px; margin-top: 6px; border-radius: 999px;
  border: 1px solid rgba(43, 36, 31, .45); color: #2B241F; text-decoration: none; font-size: 15px; font-weight: 600; transition: background-color .2s;
}
.fq__ask:hover { color: #2B241F; background: rgba(43, 36, 31, .06); }
.fq__list { display: flex; flex-direction: column; border-bottom: 1px solid #E3D9CB; }
.fq__item { border-top: 1px solid #E3D9CB; }
.fq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0;
  border: 0; background: transparent; cursor: pointer; font-family: inherit; text-align: left; color: #2B241F;
}
.fq__q .accent { font-size: 30px; line-height: 1.15; color: #2B241F; }
.fq__q:focus-visible { outline: 2px solid #B4654A; outline-offset: 4px; }
.fq__plus {
  flex: none; width: 36px; height: 36px; border-radius: 18px; border: 1px solid rgba(43, 36, 31, .35); box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: #2B241F;
  transition: transform .25s ease, background-color .25s;
}
.fq__item.is-open .fq__plus { transform: rotate(45deg); background: rgba(43, 36, 31, .06); }
/* раскрытие по высоте: grid-template-rows 0fr → 1fr, 250ms */
.fq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.fq__a > div { overflow: hidden; }
.fq__item.is-open .fq__a { grid-template-rows: 1fr; }
.fq__a p { margin: 0 0 24px; max-width: 640px; font-size: 16px; line-height: 1.65; color: #6B5F55; }

/* видео-полукруг: дуга ellipse(rx ry at 50% 100%) раскрывается по скроллу (--fp 0 → 1, app.js):
   старт ellipse(55% 60%) — узкий низкий купол, финиш ellipse(85% 100%) */
.fcta {
  --rx0: 55%; --rx1: 85%; --ry0: 60%; --ry1: 100%;
  --fcta-clip: ellipse(calc(var(--rx0) + (var(--rx1) - var(--rx0)) * var(--fp, 1)) calc(var(--ry0) + (var(--ry1) - var(--ry0)) * var(--fp, 1)) at 50% 100%);
  position: relative; height: 820px; margin-top: 88px; background: #F4EFE7; color: #fff; overflow: hidden;
}
.fcta__stage { position: absolute; inset: 0; overflow: hidden; background: #2B241F; clip-path: var(--fcta-clip); }
.fcta__poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transform: scale(calc(1.12 - .12 * var(--fp, 1))); transform-origin: 50% 100%;
}
.fcta__poster { object-fit: cover; object-position: center 55%; display: block; }
.fcta__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 16, 12, .40) 0%, rgba(20, 16, 12, .58) 45%, rgba(20, 16, 12, .75) 100%); }

/* слой текста — на весь блок и обрезан той же дугой, что и фон: белый текст не выходит на светлый фон, пока дуга растёт */
.fcta__content {
  position: absolute; inset: 0; z-index: 1; clip-path: var(--fcta-clip);
  display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 190px 120px 0; text-align: center;
}
.fcta__badge {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .4);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 13px; letter-spacing: .06em;
}
.fcta__dot { width: 8px; height: 8px; border-radius: 4px; background: #B4654A; }
.fcta__title { margin: 0; max-width: 1040px; font: 600 62px/1.06 var(--font-sans); letter-spacing: -.03em; color: #fff; }
.fcta__title .accent { color: #E8C2AE; letter-spacing: -.01em; }
.fcta__u { position: relative; display: inline-block; white-space: nowrap; }
.fcta__underline { position: absolute; left: 0; bottom: -10px; width: 100%; height: 18px; overflow: visible; }
.fcta__underline path { fill: none; stroke: #E8C2AE; stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fcta__lead { margin: 0; max-width: 560px; font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .85); }
.fcta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 4px; }
.fcta__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 28px; border-radius: 999px;
  text-decoration: none; font-size: 16px; font-weight: 600; transition: opacity .2s, background-color .2s;
}
.fcta__btn--quiz { padding: 0 34px; background: #F4EFE7; color: #1F1A17; }
.fcta__btn--quiz:hover { color: #1F1A17; opacity: .92; }
.fcta__btn--glass {
  border: 1px solid rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .08); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.fcta__btn--glass:hover { color: #fff; background: rgba(255, 255, 255, .16); }

/* появление текста после p ≈ 0.5: fade + translateY 24px, кнопки — со сдвигом 80ms, подчёркивание рисуется */
.fcta__badge, .fcta__title, .fcta__lead, .fcta__btn {
  opacity: 0; translate: 0 24px;
  transition: opacity .6s ease var(--delay, 0s), translate .6s cubic-bezier(.2, .7, .2, 1) var(--delay, 0s);
}
.fcta__title { --delay: .08s; }
.fcta__lead { --delay: .16s; }
.fcta__btn { --delay: calc(.24s + var(--k, 0) * 80ms); }
.fcta.is-shown :is(.fcta__badge, .fcta__title, .fcta__lead, .fcta__btn) { opacity: 1; translate: 0 0; }
.fcta__underline path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s ease .5s; }
.fcta.is-shown .fcta__underline path { stroke-dashoffset: 0; }

@media (max-width: 1099px) { .fq__grid { padding-left: 32px; padding-right: 32px; gap: 48px; } .fcta__content { padding-inline: 48px; } .fcta__title { font-size: 52px; } }

/* мобильная: FAQ в одну колонку, «Задать вопрос» под списком; видео-блок min(100svh, 760px), дуга круче */
@media (max-width: 768px) {
  .fq__grid { display: flex; flex-direction: column; gap: 0; padding: calc(var(--header-h, 80px) + 16px) 16px 0; }
  .fq__head { display: contents; }
  .fq__eyebrow { order: 1; }
  .fq__title { order: 2; margin-top: 14px; font-size: 40px; }
  .fq__lead { order: 3; margin-top: 14px; font-size: 16px; }
  .fq__list { order: 4; margin-top: 28px; }
  .fq__ask { order: 5; margin-top: 24px; }
  .fq__q { padding: 18px 0; gap: 16px; }
  .fq__q .accent { font-size: 22px; }
  .fq__a p { font-size: 15px; margin-bottom: 20px; }

  .fcta { --rx0: 80%; --rx1: 120%; height: min(100svh, 760px); margin-top: 56px; }
  .fcta__content { gap: 18px; padding: calc(min(100svh, 760px) * .22) 20px 0; }
  .fcta__title { font-size: 34px; }
  .fcta__lead { font-size: 16px; }
  .fcta__btns { flex-direction: column; align-self: stretch; gap: 10px; }
  .fcta__btn { width: 100%; box-sizing: border-box; height: 52px; }
}
@media (max-width: 380px) { .fcta__title { font-size: 30px; } .fcta__content { padding-top: calc(min(100svh, 760px) * .18); } }

@media (prefers-reduced-motion: reduce) {
  .fq__a, .fq__plus { transition: none; }
  .fcta__badge, .fcta__title, .fcta__lead, .fcta__btn { transition: none; }
  .fcta__underline path { transition: none; }
}

/* ======================================================================
   Квиз «Подбор за 48 часов» (ТЗ cc-task-quiz, макет quiz-interactive.html)
   ====================================================================== */
html.qz-lock, html.qz-lock body { overflow: hidden; }
.qz { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; }
.qz[hidden] { display: none; }
.qz__backdrop { position: absolute; inset: 0; background: rgba(20, 16, 12, .55); animation: qzFade .25s ease both; }
.qz__dialog {
  position: relative; width: min(1320px, 100%); height: min(800px, calc(100vh - 48px)); border-radius: 10px; overflow: hidden;
  display: grid; grid-template-columns: 440px 1fr; background: #F4EFE7; color: #2B241F;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .45); outline: none; animation: qzIn .35s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes qzFade { from { opacity: 0; } }
@keyframes qzIn { from { opacity: 0; transform: translateY(16px) scale(.98); } }

/* левая панель: фото, «Ваш запрос», приписка о приватности */
.qz__side { position: relative; overflow: hidden; color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: 36px 36px 32px; }
.qz__photo, .qz__photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.qz__photo img { object-fit: cover; object-position: 55% 40%; display: block; }
/* затемнение только под логотипом сверху и под «Ваш запрос» снизу — семья в тенях посередине видна целиком */
.qz__side-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 16, 12, .3) 0%, rgba(20, 16, 12, 0) 20%, rgba(20, 16, 12, 0) 58%, rgba(20, 16, 12, .55) 78%, rgba(20, 16, 12, .85) 100%); }
.qz__brand { position: relative; display: flex; align-items: center; gap: 14px; color: #fff; }
.qz__brand .logo { width: 64px; height: 64px; }
.qz__eyebrow { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; opacity: .85; }
.qz__summary { position: relative; display: flex; flex-direction: column; gap: 14px; }
.qz__summary-title { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: #E8C2AE; }
.qz__srow { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .22); }
.qz__sk { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.qz__sv { font-size: 21px; line-height: 1.25; color: #fff; }
.qz__sv.is-empty { opacity: .4; }
.qz__privacy { margin-top: 6px; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .7); }

/* правая панель */
.qz__main { position: relative; display: flex; flex-direction: column; min-height: 0; padding: 36px 56px 40px 64px; }
.qz__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.qz__step { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: #6B5F55; }
.qz__close {
  flex: none; width: 44px; height: 44px; border-radius: 22px; border: 1px solid rgba(43, 36, 31, .3); background: transparent;
  color: #2B241F; cursor: pointer; font-size: 16px; transition: background-color .2s;
}
.qz__close:hover { background: rgba(43, 36, 31, .06); }
.qz__progress { position: relative; height: 26px; margin-top: 14px; }
.qz__progress svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.qz__wave-bg, .qz__wave { fill: none; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.qz__wave-bg { stroke: #E3D9CB; }
.qz__wave { stroke: #B4654A; stroke-dasharray: 0 100; transition: stroke-dasharray .4s ease; }
.qz__msum { display: none; }

.qz__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.qz__stepbox { display: flex; flex-direction: column; gap: 22px; padding-top: 40px; animation: qzStep .35s ease-out both; }
/* шаг перерисован после выбора варианта — без повторной анимации */
.qz__stepbox.is-same { animation: none; }
@keyframes qzStep { from { opacity: 0; transform: translateY(10px); } }
.qz__q { margin: 0; font: 600 46px/1.08 var(--font-sans); letter-spacing: -.025em; color: #1F1A17; outline: none; }
.qz__q .accent { color: #B4654A; }
.qz__hint { margin: 0; font-size: 16px; color: #6B5F55; }
/* варианты — ровная сетка одинаковой ширины (раньше ширина по тексту, ряды выходили неровными) */
.qz__opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 8px; max-width: 760px; }
.qz__opt {
  display: inline-flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 22px 0 18px; border-radius: 999px;
  border: 1.5px solid #E3D9CB; background: #FBF8F3; color: #2B241F; font: 500 16px var(--font-sans); cursor: pointer; text-align: left;
  transition: background-color .2s, border-color .2s, color .2s;
}
.qz__opt:hover { border-color: #B4654A; }
.qz__opt:focus-visible, .qz__ch:focus-visible { outline: 2px solid #1F1A17; outline-offset: 2px; }
.qz__mark {
  flex: none; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid #CDBFAE; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; transition: background-color .2s, border-color .2s;
}
.qz__opt.is-radio .qz__mark { border-radius: 11px; }
.qz__mark svg path { fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.qz__mark svg { opacity: 0; }
.qz__opt[aria-pressed="true"] { background: #B4654A; border-color: #B4654A; color: #fff; }
.qz__opt[aria-pressed="true"] .qz__mark { border-color: #fff; background: rgba(255, 255, 255, .25); }
.qz__opt[aria-pressed="true"] .qz__mark svg { opacity: 1; }

/* контакты */
.qz__contact { max-width: 620px; }
.qz__chs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.qz__ch {
  height: 48px; padding: 0 22px; border-radius: 999px; border: 1.5px solid #E3D9CB; background: transparent; color: #2B241F;
  font: 600 15px var(--font-sans); cursor: pointer; transition: background-color .2s, border-color .2s, color .2s;
}
.qz__ch:hover { border-color: #1F1A17; }
.qz__ch[aria-checked="true"] { background: #1F1A17; border-color: #1F1A17; color: #fff; }
.qz__field { display: flex; flex-direction: column; gap: 8px; }
.qz__field > span { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #6B5F55; }
.qz__field input {
  height: 56px; padding: 0; border: 0; border-bottom: 1.5px solid #CDBFAE; border-radius: 0; background: transparent;
  color: #1F1A17; font: 20px var(--font-sans); outline: none; transition: border-color .2s;
}
.qz__field input::placeholder { color: #A3968A; }
.qz__field input:focus { border-bottom-color: #1F1A17; }
.qz__field input.is-invalid { border-bottom-color: #B4654A; }
.qz__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.qz__consent { margin: 0; font-size: 12px; line-height: 1.5; color: #A3968A; }
.qz__consent a { color: #6B5F55; }

/* «Спасибо» */
.qz__q--done { font-size: 52px; letter-spacing: -.03em; }
.qz__u { position: relative; display: inline-block; }
.qz__u svg { position: absolute; left: 0; bottom: -10px; width: 100%; height: 18px; overflow: visible; }
.qz__u path { fill: none; stroke: #B4654A; stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: qzDraw .9s ease .3s forwards; }
@keyframes qzDraw { to { stroke-dashoffset: 0; } }
.qz__dsteps { display: flex; flex-direction: column; margin-top: 18px; max-width: 640px; border-bottom: 1px solid #E3D9CB; }
.qz__drow { display: grid; grid-template-columns: 110px 1fr; gap: 18px; padding: 18px 0; border-top: 1px solid #E3D9CB; }
.qz__drow .accent { font-size: 30px; color: #B4654A; }
.qz__drow span:last-child { font-size: 16px; line-height: 1.5; color: #2B241F; }
.qz__dcta {
  display: inline-flex; align-self: flex-start; align-items: center; height: 54px; padding: 0 28px; margin-top: 8px; border-radius: 999px;
  border: 1px solid rgba(43, 36, 31, .45); color: #2B241F; text-decoration: none; font-size: 15px; font-weight: 600; transition: background-color .2s;
}
.qz__dcta:hover { color: #2B241F; background: rgba(43, 36, 31, .06); }

/* навигация */
.qz__nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; }
.qz__nav[hidden] { display: none; }
.qz__back { height: 52px; padding: 0 8px; border: 0; background: transparent; color: #2B241F; font: 600 15px var(--font-sans); cursor: pointer; }
.qz__nav-r { display: flex; align-items: center; gap: 18px; }
.qz__skip { font-size: 13px; color: #A3968A; }
.qz__next {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 34px; border-radius: 999px; border: 0;
  background: #1F1A17; color: #fff; font: 600 16px var(--font-sans); cursor: pointer; transition: background-color .2s, opacity .2s;
}
.qz__next.is-muted { background: #A3968A; }
.qz__next:disabled { cursor: progress; opacity: .85; }
.qz__spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: qzSpin .8s linear infinite; }
@keyframes qzSpin { to { transform: rotate(360deg); } }
.qz__error { margin: 10px 0 0; font-size: 14px; line-height: 1.4; color: #B4654A; text-align: right; }

/* средние экраны: левая панель уже */
@media (max-width: 1279px) and (min-width: 1024px) {
  .qz__dialog { grid-template-columns: 360px 1fr; }
  .qz__main { padding: 32px 40px 32px 44px; }
  .qz__q { font-size: 40px; }
}

/* мобильная (< 1024): на весь экран, сверху полоса 120px с фото, «Ваш запрос» — свёрнутая строка,
   варианты — во всю ширину, навигация прилипает к низу */
@media (max-width: 1023px) {
  .qz { padding: 0; }
  .qz__dialog { width: 100%; height: 100vh; height: 100svh; border-radius: 0; display: flex; flex-direction: column; animation-name: qzFade; }
  /* горизонтальное фото (quiz-photo-wide.jpg, 3:2) на всю ширину — семья в тенях видна целиком */
  .qz__side { flex: none; height: clamp(180px, 30svh, 260px); padding: 16px 16px; justify-content: flex-start; }
  .qz__photo img { object-fit: cover; object-position: 50% 35%; }
  .qz__side-shade { background: linear-gradient(180deg, rgba(20, 16, 12, .35) 0%, rgba(20, 16, 12, 0) 35%); }
  .qz__brand .logo { width: 52px; height: 52px; }
  .qz__eyebrow, .qz__summary { display: none; }
  .qz__main { position: static; flex: 1 1 auto; padding: 16px 16px 0; }
  .qz__top { position: absolute; top: 0; left: 0; right: 0; height: 84px; padding: 0 16px 0 84px; z-index: 2; }
  .qz__step { color: rgba(255, 255, 255, .9); }
  .qz__close { border-color: rgba(255, 255, 255, .5); color: #fff; background: rgba(20, 16, 12, .25); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .qz__progress { margin-top: 0; }
  .qz__msum { display: block; margin-top: 8px; }
  .qz__msum-btn {
    width: 100%; display: flex; justify-content: space-between; align-items: center; height: 40px; padding: 0; border: 0;
    border-bottom: 1px solid #E3D9CB; background: transparent; color: #6B5F55; font: 600 12px var(--font-sans);
    letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  }
  .qz__msum-list { padding: 4px 0 8px; }
  .qz__msum-list .qz__srow { flex-direction: row; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 0; }
  .qz__msum-list .qz__sk { color: #6B5F55; }
  .qz__msum-list .qz__sv { font-size: 16px; color: #2B241F; text-align: right; }
  .qz__stepbox { padding-top: 22px; gap: 16px; padding-bottom: 16px; }
  .qz__q { font-size: 32px; }
  .qz__q--done { font-size: 36px; }
  .qz__hint { font-size: 15px; }
  .qz__opts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 4px; }
  .qz__opts.is-short { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qz__opt { min-height: 54px; padding: 10px 14px; font-size: 15px; }
  .qz__chs { flex-wrap: nowrap; }
  .qz__ch { flex: 1 1 0; padding: 0 10px; }
  .qz__drow { grid-template-columns: 80px 1fr; gap: 12px; }
  .qz__drow .accent { font-size: 24px; }
  .qz__dcta { align-self: stretch; justify-content: center; }
  .qz__nav {
    flex: none; gap: 10px; margin: 0 -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: #F4EFE7; border-top: 1px solid #E3D9CB;
  }
  /* «Назад» и «Далее» — на одной высоте (подпись «можно пропустить» — под «Далее», ряд кнопок не сдвигает) */
  .qz__nav { align-items: flex-start; }
  /* прокрутка шага — на всю ширину экрана: полоса прокрутки у края экрана, а не поверх правого края вариантов */
  .qz__body { margin: 0 -16px; padding: 0 16px; }
  .qz__back { flex: 1 1 0; height: 52px; border: 1.5px solid #CDBFAE; border-radius: 999px; }
  .qz__back[style*="hidden"] { display: none; }
  .qz__nav-r { flex: 2 1 0; flex-direction: column-reverse; align-items: stretch; gap: 4px; }
  .qz__next { width: 100%; height: 52px; padding: 0 16px; }
  .qz__skip { text-align: center; font-size: 12px; }
  .qz__skip:empty { display: none; }
  .qz__error { position: absolute; left: 16px; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); margin: 0; padding: 10px 12px; text-align: left; background: #FBF8F3; border: 1px solid #E3D9CB; border-radius: 6px; }
}

/* подтверждение закрытия */
.qz__confirm {
  position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(20, 16, 12, .45); animation: qzFade .2s ease both;
}
.qz__confirm[hidden] { display: none; }
.qz__confirm-box {
  width: min(420px, 100%); box-sizing: border-box; padding: 28px 28px 24px; border-radius: 10px;
  background: #FBF8F3; border: 1px solid #E3D9CB; box-shadow: 0 24px 60px rgba(31, 26, 23, .3);
  display: flex; flex-direction: column; gap: 22px; animation: qzStep .25s ease-out both;
}
.qz__confirm-text { margin: 0; font: 600 24px/1.2 var(--font-sans); letter-spacing: -.015em; color: #1F1A17; }
.qz__confirm-text span { display: block; margin-top: 8px; font-size: 15px; font-weight: 400; line-height: 1.5; letter-spacing: 0; color: #6B5F55; }
.qz__confirm-btns { display: flex; gap: 10px; }
.qz__confirm-btns button {
  flex: 1 1 0; height: 52px; border-radius: 999px; font: 600 15px var(--font-sans); cursor: pointer; transition: background-color .2s, opacity .2s;
}
.qz__confirm-stay { border: 0; background: #1F1A17; color: #fff; }
.qz__confirm-stay:hover { opacity: .9; }
.qz__confirm-close { border: 1.5px solid #CDBFAE; background: transparent; color: #2B241F; }
.qz__confirm-close:hover { background: rgba(43, 36, 31, .06); }

@media (prefers-reduced-motion: reduce) {
  .qz__backdrop, .qz__dialog, .qz__stepbox, .qz__u path { animation: none; }
  .qz__confirm, .qz__confirm-box { animation: none; }
  .qz__u path { stroke-dashoffset: 0; }
  .qz__wave { transition: none; }
}