/* =====================================================================
   ЭМОС, сайт-визитка. Общий лист стилей, версия 2 от 26.10.2026.
   Значения из КАНОН.md §2, палитра замером картинок Ольги, тёмный вариант
   по её слову 26.10 19.54. Устройство блоков механикой Kestrel Law и Chancery,
   пропорции замером Kestrel на 1440 (ref/РАЗБОР.md).
   Подключается главной, consent.html и privacy.html. Источник значений один, :root ниже.
   ===================================================================== */

/* =====================================================================
   0. ШРИФТЫ. Локально, внешних запросов со страниц нет.

   Вариант Б, выбор Ольги 27.10.2026 19.08 «Шрифт Б.», сравнение в ref/shrifty.
   Literata 72pt для заголовков, цен и цифр шагов. Это крупная версия гарнитуры
   для заголовков, три начертания 300, 400 и 500 отдельными файлами, урезаны
   до латиницы, кириллицы и знака ₽ (WordPress twentytwentyfive, OFL).
   Onest для текста, переменный 100 до 900, три набора по алфавитам, знак ₽
   отдельным файлом (из проекта EI Tempo, OFL). Всего 106 КБ, было 198 КБ.
   Прежние Source Serif 4 и Commissioner в docs/архив-шрифтов-2026-10-27.
   ===================================================================== */

@font-face {
  font-family: "Literata"; src: url("assets/fonts/literata-300.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Literata"; src: url("assets/fonts/literata-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Literata"; src: url("assets/fonts/literata-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

@font-face {
  font-family: "Onest"; src: url("assets/fonts/onest-cyrillic.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest"; src: url("assets/fonts/onest-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Onest"; src: url("assets/fonts/onest-ruble.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+20BD;
}

/* =====================================================================
   1. ТОКЕНЫ. Копия из КАНОН.md §2, 27.10.2026. Новый цвет сначала туда.
   ===================================================================== */
:root {
  --bg: #ece2f9;
  --surface: #e1d1f5;
  --paper: #ffffff;
  --ink: #120732;
  --text: #3a3650;
  --muted: #5c5873;
  --line: #d4c4e9;
  --accent: #5c30a0;
  --accent-deep: #4a2584;
  --on-accent: #ffffff;
  --dark: #1f1736;
  --dark-2: #2d2250;
  --line-dark: #3a3458;
  --on-dark: #f3f1fa;
  --on-dark-muted: #aaa5c4;
  --accent-soft: #c9aaeb;
  --danger: #b42318;
  --success: #1f7a4d;

  --r: 12px;
  --r-pill: 999px;

  /* Блеск первого экрана, Ольга 27.10.2026 18.14 и 18.15, КАНОН §2 и §5 */
  --shadow-glow: 0 0 16px 2px color-mix(in srgb, var(--accent-soft) 60%, transparent);
  --glow-sky: radial-gradient(70% 55% at 72% 18%, color-mix(in srgb, var(--accent-soft) 40%, transparent), transparent 70%);
  --shadow-sheet: 0 12px 40px color-mix(in srgb, var(--ink) 18%, transparent);
  --halo-dark: 0 0 18px color-mix(in srgb, var(--dark) 85%, transparent), 0 0 4px color-mix(in srgb, var(--dark) 70%, transparent);
  --scrim-hero: linear-gradient(90deg, color-mix(in srgb, var(--dark) 58%, transparent) 0%, color-mix(in srgb, var(--dark) 30%, transparent) 42%, color-mix(in srgb, var(--dark) 6%, transparent) 68%);

  --font-display: "Literata", Georgia, "Times New Roman", serif;
  --font-text: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1360px;
  --gutter: 20px;
  --hdr: 64px;
  --sect: clamp(72px, 9vw, 136px);
}
@media (min-width: 1000px) {
  :root { --gutter: 40px; --hdr: 72px; }
}

/* =====================================================================
   2. ОСНОВА
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.6;
  font-variant-numeric: lining-nums;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 400;
  text-wrap: balance;
}
h2 { font-size: clamp(36px, 3vw + 14px, 64px); line-height: 1.04; }
h3 { font-size: 22px; line-height: 1.25; font-weight: 500; }
p, ul, ol, dl, dd { margin: 0; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-deep); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* липкая шапка не закрывает начало блока при переходе по ссылке */
[id] { scroll-margin-top: calc(var(--hdr) + 16px); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* =====================================================================
   3. КНОПКИ. Капсулой, как на всех трёх картинках Ольги (КАНОН §5)
   ===================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 12px 28px;
  border: 1px solid transparent; border-radius: var(--r-pill);
  font-family: var(--font-text); font-size: 16px; font-weight: 600; line-height: 1.2;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-deep); color: var(--on-accent); }
.btn--ghost { background: transparent; color: var(--accent); border-color: var(--accent); }
.btn--ghost:hover { background: var(--paper); color: var(--accent-deep); border-color: var(--accent-deep); }
/* Контурная кнопка на тёмном, шапка */
.btn--on-dark { color: var(--on-dark); border-color: var(--on-dark-muted); }
.btn--on-dark:hover { background: var(--dark-2); color: var(--on-dark); border-color: var(--on-dark); }

/* =====================================================================
   4. ШАПКА. Тёмная и липкая, телефон и заявка всегда на виду (Kestrel)
   ===================================================================== */
.hdr {
  position: sticky; top: 0; z-index: 10;
  background: var(--dark); border-bottom: 1px solid var(--line-dark);
}
.hdr :focus-visible { outline-color: var(--on-dark); }
.hdr__in { display: flex; align-items: center; gap: 32px; min-height: var(--hdr); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; line-height: 1; }
.brand__text { display: flex; flex-direction: column; }
/* Знак из логотипа Ольги, её файл 27.10.2026. Не перекрашивается, на тёмном
   стоит на светлой подложке (ВКУС Ш4), радиус из словаря */
.brand__mark {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: var(--r); background: var(--paper);
}
.brand__mark img { width: 34px; height: auto; }
.brand__name { font-family: var(--font-display); font-size: 28px; font-weight: 500; color: var(--on-dark); letter-spacing: .02em; }
.brand__kind { margin-top: 4px; font-size: 12px; color: var(--on-dark-muted); letter-spacing: .04em; }
.hdr__nav { display: flex; gap: 28px; margin-left: auto; }
.hdr__nav a { color: var(--on-dark-muted); text-decoration: none; font-size: 15px; }
.hdr__nav a:hover { color: var(--on-dark); }
/* Пункт раздела, который сейчас на экране, подчёркнут, как на первой и второй картинке Ольги */
.hdr__nav a.is-active {
  color: var(--on-dark);
  text-decoration: underline; text-decoration-color: var(--accent-soft);
  text-decoration-thickness: 2px; text-underline-offset: 10px;
}
.hdr__contact { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.hdr__tel { color: var(--on-dark); font-weight: 600; text-decoration: none; white-space: nowrap; }
.hdr__mail { color: var(--on-dark-muted); font-size: 13px; text-decoration: none; white-space: nowrap; }
.hdr__mail:hover { color: var(--on-dark); }
.hdr__tel:hover { color: var(--on-dark-muted); }
.hdr__btn, .hdr__call { min-height: 44px; padding: 8px 22px; font-size: 15px; }
.hdr__call { display: none; }

@media (max-width: 999px) {
  .hdr__nav, .hdr__btn, .hdr__contact { display: none; }
  .hdr__in { justify-content: space-between; gap: 16px; }
  .brand__name { font-size: 24px; }
  .brand { gap: 10px; }
  .brand__mark { width: 40px; height: 40px; }
  .brand__mark img { width: 31px; }
  .hdr__call { display: inline-flex; padding: 8px 20px; }
}

/* =====================================================================
   5. ПЕРВЫЙ ЭКРАН. Тёмный, её слово 26.10 19.54 «Нам нравится более темный вариант».
   Механика Kestrel. Фото во весь экран, заголовок крупно, внизу полоса фактов.
   Белый текст на самом светлом участке неба 7,1. Затемнение сплошным слоем,
   без градиента. На телефоне сильнее, там под текстом здания с окнами.
   Высота через svh, не 100vh, иначе на iPhone низ уходит под панель.
   ===================================================================== */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex;
  min-height: clamp(560px, calc(100svh - var(--hdr)), 860px);
  background: var(--dark); color: var(--on-dark);
}
.hero { --x: 58%; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media picture { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
/* Фото и чертёж ближе к лиловому тону третьей картинки Ольги, её слова 27.10.2026 17.40
   «ближе к этому цвету пойдем» и 18.14 «цвет - ещё ярче можно», «Блеска что ли».
   Тон 242 стал 264, первый экран светлее на треть и насыщеннее */
.hero__media img { filter: hue-rotate(24deg) saturate(1.85) brightness(1.3) contrast(1.1); }
/* Чертёж справа от линии скана. Линия над затемнением, чтобы оставалась чёткой */
.hero__xray { clip-path: inset(0 0 0 var(--x)); }
/* чертёж чуть темнее фото, чтобы цифра и подписи поверх линий читались */
.hero__xray img { filter: hue-rotate(24deg) saturate(1.85) brightness(1.02) contrast(1.1); }
.hero__scan {
  position: absolute; top: 0; bottom: 0; left: var(--x); z-index: -1;
  width: 2px; margin-left: -1px; background: var(--accent-soft); pointer-events: none;
  /* Блеск по слову Ольги 18.15, линия светится */
  box-shadow: var(--shadow-glow);
}
.js .hero { --x: 100%; }
.hero.is-drag { cursor: ew-resize; }
[data-scan] { touch-action: pan-y; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--dark) 52%, transparent);
}
/* Свет в небе справа, «Блеска что ли», Ольга 27.10.2026 18.15. Исключение из КАНОН §1
   «не берём свечения», её слова и третья картинка, КАНОН §5 */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--glow-sky); mix-blend-mode: screen;
}
.hero :focus-visible { outline-color: var(--on-dark); }
.hero__in {
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: clamp(56px, 10vh, 140px); padding-bottom: 28px;
}
.hero__title { color: var(--on-dark); font-size: clamp(48px, 6vw + 8px, 112px); line-height: .98; }
/* Окно строки пропускает хвосты у, р, д, ф. У Literata они уходят на .23 ниже строки, правка Ольги 28.10.2026 11.15 */
.hero__line { display: block; overflow: hidden; padding-bottom: .24em; margin-bottom: -.24em; }
.hero__line > span { display: inline-block; }
.hero__accent { color: var(--accent-soft); }
/* Слоган Ольги прописными, 27.10.2026. На телефоне строкой под заголовком,
   на десктопе в правом нижнем углу столбцом, на месте прежней цифры «10» */
.hero__top { display: grid; gap: 28px; }
.hero__slogan {
  font-family: var(--font-display); font-size: 24px; font-weight: 400; line-height: 1.2;
  letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark);
  /* Слоган стоит на линиях чертежа, подложка под буквами держит чтение */
  text-shadow: var(--halo-dark);
}
.hero__bar {
  display: flex; flex-direction: column; gap: 24px;
  margin-top: clamp(40px, 9vh, 104px); padding-top: 22px;
  border-top: 1px solid var(--line-dark);
}
.hero__facts { display: flex; flex-direction: column; gap: 10px; list-style: none; padding: 0; }
.hero__facts li { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--on-dark); }
.hero__facts a { color: var(--on-dark); }
.hero__facts a:hover { color: var(--on-dark-muted); }
.hero__btn { align-self: stretch; }

@media (min-width: 1000px) {
  /* Фото ярче, поэтому затемнение только под текстом слева, справа небо и чертёж светлые */
  .hero::before { background: var(--scrim-hero); }
  .hero__media img { object-position: 70% 50%; }
  .hero__bar { flex-direction: row; align-items: center; justify-content: space-between; }
  .hero__facts { flex-direction: row; gap: 48px; }
  .hero__top { grid-template-columns: 1fr auto; align-items: end; gap: 48px; }
  .hero__slogan { font-size: clamp(30px, 1.6vw + 12px, 44px); line-height: 1.15; text-align: right; }
  .hero__slogan span { display: block; }
  .hero__btn { align-self: auto; }
}

/* Заголовок встаёт строками из-под маски, один раз при загрузке (WOW_LAB №11, R10) */
.js .hero__line > span { transform: translateY(140%); animation: rise .9s cubic-bezier(.2, .7, .2, 1) forwards; }
.js .hero__line:nth-child(2) > span { animation-delay: .08s; }
.js .hero__line:nth-child(3) > span { animation-delay: .16s; }
@keyframes rise { to { transform: translateY(0); } }

/* =====================================================================
   6. СЕКЦИИ. Направления и цены строками прейскуранта (Kestrel),
   заголовок блока слева и липнет (Chancery)
   ===================================================================== */
.sect { padding: var(--sect) 0; }

.prices__in { display: grid; gap: 40px; }
.prices__note { margin-top: 20px; max-width: 28em; font-size: 16px; color: var(--muted); }
.prices__ask { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); }
.prices__q { font-family: var(--font-display); font-size: 22px; line-height: 1.3; color: var(--ink); }
.prices__ask p + p { margin-top: 8px; font-size: 16px; }
.prices__ask .btn { margin-top: 20px; }
@media (min-width: 1100px) {
  /* Колонка заголовка растёт с экраном, чтобы «Направления» оставались одного размера с другими заголовками */
  .prices__in { grid-template-columns: clamp(340px, 24vw, 460px) 1fr; gap: 80px; align-items: start; }
  .prices__side { position: sticky; top: calc(var(--hdr) + 40px); container-type: inline-size; }
  /* «Направления» одним словом не шире своей колонки на любом мониторе,
     правка Ольги 28.10.2026 11.15 «Здесь шрифт залезает на столбец» */
  .prices__side h2 { font-size: min(clamp(36px, 3vw + 14px, 64px), 14cqi); }
}

.prices__list { list-style: none; padding: 0; border-top: 1px solid var(--line); }
/* Номера строк убраны, правка Ольги 27.10.2026 19.08 «Убрать нумерацию» */
.row {
  display: grid; grid-template-columns: 1fr; column-gap: 16px;
  padding: 28px 0; border-bottom: 1px solid var(--line);
}
.row__name { font-size: clamp(21px, .8vw + 14px, 28px); line-height: 1.2; }
.row__text { margin-top: 10px; padding: 0; list-style: none; font-size: 16px; line-height: 1.55; color: var(--text); }
ul.row__text li + li { margin-top: 4px; }
.row__cost { margin-top: 18px; }
.row__sum {
  font-family: var(--font-display); font-size: clamp(32px, 2.6vw + 12px, 56px);
  font-weight: 400; line-height: 1; color: var(--ink); white-space: nowrap;
}
/* Верх вилки Ольги строкой под ценой, длинные числа не ломают колонку */
.row__to { margin-top: 6px; font-family: var(--font-display); font-size: 20px; line-height: 1.2; color: var(--text); white-space: nowrap; }
.row__term { margin-top: 8px; font-size: 14px; color: var(--muted); }
/* Фото направления. На компьютере в левой колонке, на меньших экранах в строке */
.prices__photo { display: none; }
@media (min-width: 1100px) {
  .prices__photo.has-photo {
    display: block; position: relative; overflow: hidden;
    margin: 28px 0 0; aspect-ratio: 4 / 3; max-height: 34vh;
    border-radius: var(--r); background: var(--dark);
  }
  .prices__photo img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity .5s ease;
  }
  .prices__photo img.is-on { opacity: 1; }
}
/* Маленькое фото слева от строки, как на карточке дела, верх по верху названия.
   Длинные слова вроде «Почерковедческая» колонку не распирают, 375 px */
.row__thumb {
  grid-column: 1; grid-row: 1 / 3; align-self: start;
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  margin-top: 4px; border-radius: var(--r);
}
.row.has-thumb { grid-template-columns: 64px 1fr; grid-template-rows: auto 1fr; }
.row.has-thumb .row__body { grid-column: 2; grid-row: 1; }
.row.has-thumb .row__cost { grid-column: 2; grid-row: 2; }
@media (min-width: 700px) {
  .row { grid-template-columns: 1fr auto; column-gap: 24px; align-items: start; padding: 32px 0; }
  .row__cost { grid-column: 2; margin-top: 0; text-align: right; }
  .row.has-thumb { grid-template-columns: 80px 1fr auto; grid-template-rows: auto; }
  .row.has-thumb .row__thumb { grid-row: 1; }
  .row.has-thumb .row__body { grid-column: 2; grid-row: 1; }
  .row.has-thumb .row__cost { grid-column: 3; grid-row: 1; }
}

/* =====================================================================
   7. КАК МЫ РАБОТАЕМ. Тёмная полоса, шаги столбцом с огромной цифрой
   (Kestrel, Principal из реестра), слева заголовок и фото, липнут
   ===================================================================== */
.band { background: var(--dark); color: var(--on-dark); padding: var(--sect) 0; }
.band h2, .band h3 { color: var(--on-dark); }
.band :focus-visible { outline-color: var(--on-dark); }
.band__in { display: grid; gap: 32px; }
.band__lead { max-width: 26em; color: var(--on-dark-muted); }
/* Слова, которые Ольга выделила прописными, 27.10.2026 */
.band__em { color: var(--on-dark); text-transform: uppercase; letter-spacing: .04em; }

/* На телефоне порядок заголовок, пояснение, шаги, кнопка */
@media (max-width: 1099px) {
  .band__side { display: contents; }
  .band__side h2 { order: 1; }
  .band__lead { order: 2; margin-top: -12px; }
  .steps { order: 3; }
  .band__side .btn { order: 4; justify-self: start; }
}
@media (min-width: 1100px) {
  .band__in { grid-template-columns: 420px 1fr; gap: 96px; align-items: start; }
  .band__side { position: sticky; top: calc(var(--hdr) + 40px); }
  .band__lead { margin: 20px 0 28px; }
}

.steps { list-style: none; padding: 0; border-top: 1px solid var(--line-dark); }
.step {
  display: grid; grid-template-columns: 64px 1fr; column-gap: 20px; align-items: start;
  padding: 28px 0; border-bottom: 1px solid var(--line-dark);
}
.step__num {
  font-family: var(--font-display); font-size: 72px; font-weight: 300; line-height: .8;
  color: var(--on-dark);
}
.step h3 { font-size: clamp(22px, 1vw + 14px, 32px); line-height: 1.15; }
.step p { margin-top: 10px; max-width: 30em; color: var(--on-dark-muted); }
/* Фото шага и цифра, которая загорается посередине экрана */
.step__num { transition: color .4s ease; }
.step.is-now .step__num { color: var(--accent-soft); }
.step__img {
  grid-column: 2; margin-top: 18px; width: 100%; height: auto;
  aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r);
}
@media (min-width: 700px) {
  .step { grid-template-columns: 150px 1fr; column-gap: 40px; padding: 40px 0; }
  .step.has-photo { grid-template-columns: 150px 1fr 200px; }
  .step__img { grid-column: 3; grid-row: 1; margin-top: 0; aspect-ratio: 4 / 5; }
  .step__num { font-size: clamp(96px, 8vw + 20px, 160px); }
}

/* =====================================================================
   8. ЗАЯВКА И КОНТАКТЫ одним блоком (Kestrel). Форма с двумя галочками
   по _правила-сайтов/КУКИ.md раздел 5
   ===================================================================== */
.contact__in { display: grid; gap: 48px; }
@media (min-width: 1000px) { .contact__in { grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } }
.contact__lead { margin-top: 20px; max-width: 28em; }
.contact__rows { margin-top: 36px; border-top: 1px solid var(--line); }
.contact__rows > div {
  display: grid; grid-template-columns: 96px 1fr; gap: 16px;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.contact__rows dt { font-size: 15px; color: var(--muted); padding-top: 2px; }
.contact__rows dd { color: var(--ink); }
.contact__tels { display: grid; gap: 2px; }
.contact__tels a, .contact__rows dd a[href^="mailto"] {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-display); font-size: 24px; font-weight: 500; color: var(--ink); text-decoration: none;
}
.contact__rows dd a[href^="mailto"] { font-family: var(--font-text); font-size: 18px; font-weight: 400; color: var(--accent); text-decoration: underline; }
.contact__tels a:hover { color: var(--accent); }
@media (max-width: 480px) {
  .contact__rows > div { grid-template-columns: 1fr; gap: 4px; }
}

.form { display: grid; gap: 20px; padding: 32px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); }
@media (max-width: 480px) { .form { padding: 24px 20px; } }
/* Форма скрыта, пока не решено, куда уходят заявки (Тимур 29.10.2026 «форму пока спрячь»).
   На широком экране контакты встают в две колонки, текст слева, строки справа */
.form[hidden] { display: none; }
@media (min-width: 1000px) {
  .contact__in:has(> .form[hidden]) { grid-template-columns: 1fr; }
  .contact__in:has(> .form[hidden]) .contact__side { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; column-gap: 80px; align-items: start; }
  .contact__in:has(> .form[hidden]) .contact__side > h2,
  .contact__in:has(> .form[hidden]) .contact__lead { grid-column: 1; }
  .contact__in:has(> .form[hidden]) .contact__rows { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}
.field { display: grid; gap: 8px; }
.field label { font-size: 15px; font-weight: 600; color: var(--ink); }
.field__opt { font-weight: 400; color: var(--muted); }
.field input, .field textarea {
  width: 100%; min-height: 52px; padding: 12px 16px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg); color: var(--ink);
  font: inherit; font-size: 16px;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline-offset: 0; border-color: var(--accent); }
.field.is-bad input { border-color: var(--danger); }
.field__err { font-size: 14px; color: var(--danger); }

.check { display: grid; grid-template-columns: 24px 1fr; gap: 4px 12px; align-items: start; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; }
.check label { font-size: 14px; line-height: 1.5; color: var(--text); cursor: pointer; }
.check .field__err { grid-column: 2; }
.check.is-bad input { outline: 2px solid var(--danger); outline-offset: 2px; }

.form__send { justify-self: start; min-width: 200px; }
@media (max-width: 480px) { .form__send { justify-self: stretch; } }
.form__privacy { font-size: 14px; color: var(--muted); }
.form__ok { font-weight: 600; color: var(--success); }

/* Карта Яндекса полосой во всю ширину, только по клику */
.map {
  position: relative; overflow: hidden; margin-top: clamp(48px, 6vw, 80px);
  aspect-ratio: 21 / 8; border-radius: var(--r); background: var(--surface);
}
@media (max-width: 999px) { .map { aspect-ratio: auto; height: 380px; } }
.map__cover {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 24px; text-align: center;
}
.map__addr { max-width: 26em; margin-bottom: 8px; font-family: var(--font-display); font-size: 20px; line-height: 1.35; color: var(--ink); }
.map__note { max-width: 24em; font-size: 14px; color: var(--muted); }
.map__link { font-size: 14px; display: inline-flex; align-items: center; min-height: 44px; }
.map__frame { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border: 0; }
.map.is-ready .map__cover { display: none; }

/* =====================================================================
   9. ПОДВАЛ. Тёмный, четыре колонки (Kestrel)
   ===================================================================== */
.foot { background: var(--dark); color: var(--on-dark-muted); padding: 64px 0 72px; font-size: 14px; line-height: 1.6; }
.foot :focus-visible { outline-color: var(--on-dark); }
.foot__in { display: grid; gap: 36px; }
@media (min-width: 700px) { .foot__in { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .foot__in { grid-template-columns: 1.1fr 1.2fr .8fr 1.3fr; gap: 48px; } }
.foot__col { display: flex; flex-direction: column; align-items: flex-start; }
.foot__col .brand__name { line-height: 1; }
.foot__brand { display: flex; align-items: center; gap: 14px; }
.foot__brand .brand__mark { width: 52px; height: 52px; }
.foot__brand .brand__mark img { width: 40px; }
.foot__legal { margin-top: 16px; max-width: 22em; }
.foot__h { margin-bottom: 8px; color: var(--on-dark); font-weight: 600; }
.foot__links { display: grid; margin-top: 4px; }
.foot__links a { display: inline-flex; align-items: center; min-height: 40px; color: var(--on-dark); text-decoration: none; }
.foot__links a:hover { color: var(--on-dark-muted); text-decoration: underline; }
.foot__req { margin-top: 16px; }

/* =====================================================================
   10. ПРОЯВЛЕНИЕ ПРИ ПРОКРУТКЕ. Строки цен и шаги, один раз.
   Без скрипта класса .js нет, и всё видно сразу
   ===================================================================== */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .hero { --x: 58%; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .hero__line > span { transform: none; animation: none; }
}

/* =====================================================================
   11. ДОКУМЕНТЫ, consent.html и privacy.html
   ===================================================================== */
.doc { padding: 56px 0 var(--sect); }
.doc__in { max-width: 760px; }
.doc h1 { font-size: clamp(32px, 2vw + 20px, 44px); line-height: 1.12; }
.doc__date { margin-top: 12px; color: var(--muted); font-size: 15px; }
.doc h2 { font-size: 22px; font-weight: 500; margin-top: 36px; }
.doc code { font-family: inherit; font-size: inherit; color: var(--ink); }
.doc p, .doc ul { margin-top: 12px; }
.doc ul { padding-left: 20px; }
.doc__back { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 24px; }

/* =====================================================================
   11. COOKIE. Свой баннер по эталону _правила-сайтов/куки/banner-standalone.html,
   редакция 24.09.2026, решение Тимура 28.10.2026 «баннер ставим». Счётчиков нет,
   тексты «счётчиков нет» из куки/ТЕКСТЫ.md 1.1 и 1.3. Цвета ролями проекта,
   радиусы и тень из словаря КАНОН §2. Угол левый, справа на первом экране кнопка заявки
   ===================================================================== */
  #cc-site{
    /* Роли цвета проекта. Значения из файла токенов, по умолчанию системные цвета браузера */
    --cc-surface:var(--paper);
    --cc-text:var(--text);
    --cc-hairline:var(--line);
    --cc-accent:var(--accent);
    /* Кнопки как на сайте (Мебель 25.08). «Принять все» сплошная цветом акцента, «Отклонить все» контурная того же размера.
       Если акцент на фоне карточки не читается, здесь поставить --cc-accept-bg:var(--cc-text) */
    --cc-accept-bg:var(--cc-accent);
    --cc-accept-text:var(--on-accent);
    --cc-width:420px;
    --cc-gap:20px;
    --cc-z:9990;
    --cc-shadow:var(--shadow-sheet);
  }
  #cc-site,#cc-site *{box-sizing:border-box;margin:0;padding:0}
  #cc-site [hidden]{display:none!important}

  /* Без скрипта карточка стоит в потоке и видна целиком */
  #cc-site{font-family:var(--cc-font,inherit);font-size:14px;line-height:1.55;color:var(--cc-text);
    text-align:left;max-width:var(--cc-width);margin:24px auto}
  #cc-site:not(.js) .cc-view + .cc-view{margin-top:24px;padding-top:24px;border-top:1px solid var(--cc-hairline)}
  #cc-site:not(.js) .cc-back{display:none}
  #cc-site:not(.js) .cc-box{max-height:none}

  /* Со скриптом карточка в нижнем углу. Не по центру и не полосой, первый экран не перекрывается */
  #cc-site.js{position:fixed;z-index:var(--cc-z);left:var(--cc-gap);right:auto;margin:0;max-width:none;
    bottom:calc(var(--cc-gap) + var(--cc-lift,0px) + env(safe-area-inset-bottom,0px));
    width:min(var(--cc-width),calc(100vw - 2 * var(--cc-gap)))}
  #cc-site.js.cc--right{left:auto;right:var(--cc-gap)}
  #cc-site.js:not(.is-shown){pointer-events:none}
  #cc-site.js:not(.is-shown) .cc-box{display:none}
  #cc-site.js .cc-view{display:none}
  #cc-site.js .cc-view.is-on{display:block}

  #cc-site .cc-box{background:var(--cc-surface);color:var(--cc-text);border:1px solid var(--cc-hairline);
    border-radius:var(--r);box-shadow:var(--shadow-sheet);padding:24px;
    max-height:min(80vh,640px);overflow-y:auto;
    /* иначе прокрутка описаний докручивается до страницы под окном */
    overscroll-behavior:contain}
  #cc-site .cc-title{font-family:inherit;font-size:18px;line-height:1.3;font-weight:600;color:var(--cc-text);
    letter-spacing:normal;text-transform:none;margin:0 0 8px}
  #cc-site .cc-title:focus{outline-color:transparent}
  #cc-site .cc-text{font-family:inherit;font-size:14px;line-height:1.55;font-weight:400;color:var(--cc-text);margin:0 0 16px}
  #cc-site .cc-a{color:var(--cc-text);text-decoration:underline;text-underline-offset:3px}

  #cc-site .cc-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  #cc-site .cc-row--end{grid-template-columns:1fr;margin-top:16px}
  #cc-site .cc-btn{font-family:inherit;font-size:14px;font-weight:600;line-height:1.2;min-height:44px;padding:12px 16px;
    border:1px solid var(--cc-accept-bg);border-radius:var(--r-pill);background:var(--cc-accept-bg);color:var(--cc-accept-text);
    cursor:pointer;text-align:center;text-transform:none;letter-spacing:normal;transition:opacity .15s ease}
  /* «Отклонить все». Тот же размер и ряд, контур и текст цветом текста, читается на любом фоне карточки */
  #cc-site .cc-btn--ghost{background:transparent;border-color:var(--cc-text);color:var(--cc-text)}
  /* Наведение не меняет цвет текста, кнопка остаётся читаемой (урок Банкротства 19.07) */
  #cc-site .cc-btn:hover{opacity:.86}
  #cc-site .cc-btn:active{opacity:.76}
  #cc-site .cc-link{display:block;width:100%;min-height:44px;margin-top:8px;padding:8px;background:none;border:0;
    font-family:inherit;font-size:14px;font-weight:500;color:var(--cc-text);text-align:center;
    text-decoration:underline;text-underline-offset:3px;cursor:pointer}
  #cc-site .cc-link:hover{text-decoration-thickness:2px}
  #cc-site button:focus-visible,#cc-site a:focus-visible,
  #cc-site .cc-sw input:focus-visible + .cc-sw__ui{outline:2px solid var(--cc-accent);outline-offset:2px}

  #cc-site .cc-head{display:flex;align-items:center;gap:4px;margin:0 0 8px}
  #cc-site .cc-head .cc-title{margin:0}
  #cc-site .cc-back{display:grid;place-items:center;flex:none;width:44px;height:44px;margin-left:-12px;background:none;
    border:0;border-radius:var(--r-pill);color:var(--cc-text);cursor:pointer}

  #cc-site .cc-cat{border-top:1px solid var(--cc-hairline)}
  #cc-site .cc-cat__row{display:flex;align-items:center;gap:12px;min-height:52px}
  #cc-site .cc-cat__name{flex:1;display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 0;background:none;
    border:0;font-family:inherit;font-size:15px;font-weight:600;line-height:1.3;color:var(--cc-text);text-align:left;cursor:pointer}
  #cc-site .cc-pm{position:relative;flex:none;width:12px;height:12px}
  #cc-site .cc-pm::before,#cc-site .cc-pm::after{content:"";position:absolute;background:currentColor;border-radius:0}
  #cc-site .cc-pm::before{left:0;top:5px;width:12px;height:2px}
  #cc-site .cc-pm::after{left:5px;top:0;width:2px;height:12px;transition:transform .18s ease}
  #cc-site .cc-cat.is-open .cc-pm::after{transform:scaleY(0)}
  #cc-site .cc-cat__state{flex:none;font-size:13px;color:var(--cc-text)}
  #cc-site .cc-cat__desc{font-size:13px;line-height:1.55;color:var(--cc-text);margin:0 0 16px;padding-left:24px}
  #cc-site.js .cc-cat__desc{display:none}
  #cc-site.js .cc-cat.is-open .cc-cat__desc{display:block}

  /* Переключатель. Настоящая галочка внутри подписи, видна клавиатуре и читалке */
  #cc-site .cc-sw{position:relative;display:inline-flex;flex:none;cursor:pointer}
  #cc-site .cc-sw input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;margin:0}
  #cc-site .cc-sw__ui{position:relative;display:block;width:46px;height:26px;border-radius:var(--r-pill);
    background:var(--cc-hairline);transition:background .18s ease}
  #cc-site .cc-sw__ui::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:var(--r-pill);
    background:var(--cc-surface);transition:transform .18s ease}
  #cc-site .cc-sw input:checked + .cc-sw__ui{background:var(--cc-accent)}
  #cc-site .cc-sw input:checked + .cc-sw__ui::after{transform:translateX(20px)}

  #cc-site .cc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
    white-space:nowrap;border:0}

  /* На телефоне угол не спасает, окно во всю ширину и прижато к низу */
  @media (max-width:560px){
    #cc-site.js,#cc-site.js.cc--right{left:10px;right:10px;width:auto;
      bottom:calc(10px + var(--cc-lift,0px) + env(safe-area-inset-bottom,0px))}
    #cc-site .cc-box{padding:16px;max-height:min(75vh,640px)}
    #cc-site .cc-title{font-size:16px;margin-bottom:4px}
    #cc-site .cc-text{margin-bottom:12px}
    #cc-site .cc-link{margin-top:4px}
  }
  @media (prefers-reduced-motion:no-preference){
    #cc-site.js.is-shown .cc-box{animation:ccSiteIn .24s ease-out}
  }
  @keyframes ccSiteIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}