/*
 * Рекламная страница «Подать на развод в Москве» — стили поверх Bootstrap 5.3.8.
 * Порядок подключения в razvod_v_moskve.html: сначала css/bootstrap.min.css, потом этот файл.
 *
 * Все цвета и размеры — в переменных ниже (как на сайте gorelikoff.ru, src/styles/tokens.css).
 * Поменять цвет — меняйте переменную, а не каждое место.
 */

/* ---------- Шрифт Golos Text: лежит в папке fonts, чужие серверы не нужны ---------- */
@font-face {
  font-family: "Golos Text Variable";
  font-style: normal; font-display: swap; font-weight: 400 900;
  src: url("../fonts/golos-text-cyrillic-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Golos Text Variable";
  font-style: normal; font-display: swap; font-weight: 400 900;
  src: url("../fonts/golos-text-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Цвета */
  --paper: #FBFAF6;        /* фон страницы */
  --surface: #FFFFFF;      /* карточки */
  --sage: #E4E8DC;         /* светло-зелёные подложки */
  --sage-deep: #4A5347;    /* текст на светло-зелёном */
  --sage-line: #A9B2A0;
  --navy: #17263F;         /* тёмно-синий: заголовки, кнопки, тёмные блоки */
  --navy-hover: #22375A;
  --ink: #3D4653;          /* обычный текст */
  --muted: #5B6577;        /* подписи */
  --faint: #6B707A;        /* самый светлый допустимый серый для текста */
  --on-navy: #E9E4DA;      /* текст на тёмно-синем */
  --on-navy-muted: #939AA6;
  --brass: #8A6A2F;        /* латунь: значки, акценты */
  --brass-lite: #C9A45C;   /* латунь на тёмном */
  --line: #E6E2D6;
  --line-strong: #CFCBBE;
  --line-on-navy: rgba(233, 228, 218, .14);
  --icon-soft: #A8A393;
  --warn-bg: #F4EDE2;
  --warn-text: #5B4F3A;
  /* Карточка первого экрана — как на старой странице */
  --gold-old: #E2C076;     /* золото старой страницы: первый экран и подвал */
  --gold-btn-1: #F7D262;   /* яркое золото кнопки «Получить консультацию» — верх (владелец 04.10.2026) */
  --gold-btn-2: #E6A92E;   /* …и низ: переход сверху вниз, как золотая фольга */
  --gold-btn-glow: rgba(230, 169, 46, .45); /* мягкое свечение кнопки: цвет низа, 45 % (без color-mix — понятно всем браузерам) */
  /* Тёмно-синяя дымка поверх панорамы Москвы на первом экране (компьютер): сверху и снизу гуще, в середине реже */
  --hero-ten-verh: rgba(23, 38, 63, .84);      /* 12.10.2026 владелец: «заставку чуть светлее» — было .94 / .74 / .90 */
  --hero-ten-seredina: rgba(23, 38, 63, .58);
  --hero-ten-niz: rgba(23, 38, 63, .78);
  --wa: #25D366;           /* WhatsApp — круг значка */
  --tg: #2AABEE;           /* Telegram */
  --max-1: #3F83FF;        /* MAX — перелив, начало */
  --max-2: #9B3DF5;        /* MAX — перелив, конец */
  --tint-old: rgba(0, 51, 51, .4);
  --navy-old: #1B395A;

  /* Шрифты */
  --font: "Golos Text Variable", "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-palatino: "Palatino Linotype", "Book Antiqua", Palatino, serif;

  /* Размеры шрифта */
  --fs-1: 12px; --fs-2: 14px; --fs-3: 16px; --fs-4: 19px;
  --fs-5: clamp(22px, 1.2vw + 17px, 28px);
  --fs-h2: clamp(20px, .8vw + 17px, 24px);   /* заголовок раздела: 20 → 24 */
  --fs-6: clamp(30px, 2.4vw + 21px, 44px);

  --r: 10px; --r-lg: 16px;
  --fw-medium: 500;        /* средняя жирность (анкета: ссылки в согласии) */
  --sh-1: 0 1px 2px rgba(23, 38, 63, .06);
  --sh-3: 0 16px 40px rgba(23, 38, 63, .12);

  /* Bootstrap: свои цвета и шрифт */
  --bs-body-font-family: var(--font);
  --bs-body-font-size: 16px;
  --bs-body-line-height: 1.6;
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--paper);
  --bs-link-color: var(--navy);
  --bs-link-color-rgb: 23, 38, 63;
  --bs-link-hover-color: var(--brass);
  --bs-link-hover-color-rgb: 138, 106, 47;
  --bs-border-color: var(--line);
  --bs-heading-color: var(--navy);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { -webkit-font-smoothing: antialiased; }
/* У картинок в разметке есть width и height (sborka.mjs) — место под них оставляется заранее.
   Здесь они ужимаются по ширине колонки, сохраняя пропорции */
img { max-width: 100%; height: auto; }
/* Цвета печати-знака в шапке — классами (sborka.mjs, PECHAT_KLASSY) */
.pch-f-navy { fill: var(--navy); }   .pch-s-navy { stroke: var(--navy); }
.pch-f-brass { fill: var(--brass); } .pch-s-brass { stroke: var(--brass); }
.pch-f-paper { fill: var(--paper); } .pch-s-paper { stroke: var(--paper); }
[id] { scroll-margin-top: 84px; }
h1, h2, h3 { font-weight: 700; letter-spacing: -.02em; color: var(--navy); }
h2 { font-size: var(--fs-h2); line-height: 1.25; }
.nw { white-space: nowrap; }
.eyebrow { margin-bottom: .5rem; font-size: var(--fs-1); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sec { margin-top: 48px; }
.sec-x { max-width: 62ch; font-size: var(--fs-2); color: var(--muted); }
.ico { width: 1em; height: 1em; flex-shrink: 0; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

/* ---------- Кнопки ---------- */
.btn { --bs-btn-font-weight: 600; --bs-btn-font-size: var(--fs-2); --bs-btn-border-radius: var(--r);
       --bs-btn-padding-y: .75rem; --bs-btn-padding-x: 1.5rem; min-height: 48px;
       display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.btn-navy { --bs-btn-bg: var(--navy); --bs-btn-color: var(--paper); --bs-btn-border-color: var(--navy);
            --bs-btn-hover-bg: var(--navy-hover); --bs-btn-hover-color: var(--paper); --bs-btn-hover-border-color: var(--navy-hover);
            --bs-btn-active-bg: var(--navy-hover); --bs-btn-active-color: var(--paper); }
/* «Получить консультацию» — яркое золото, заметнее текста над ней, чтобы брала внимание на себя
   (владелец 04.10.2026): переход сверху вниз и мягкое золотое свечение на тёмном фоне.
   При наведении — светлая, как раньше */
.btn-brass { --bs-btn-bg: var(--gold-btn-2); --bs-btn-color: var(--navy); --bs-btn-border-color: var(--gold-btn-2);
             --bs-btn-hover-bg: var(--paper); --bs-btn-hover-color: var(--navy); --bs-btn-hover-border-color: var(--paper);
             --bs-btn-active-bg: var(--paper); --bs-btn-active-color: var(--navy);
             background-image: linear-gradient(180deg, var(--gold-btn-1), var(--gold-btn-2));
             box-shadow: 0 4px 18px var(--gold-btn-glow); }
.btn-brass:hover, .btn-brass:active, .btn-brass:focus-visible { background-image: none; }
.btn-light-call { --bs-btn-bg: var(--surface); --bs-btn-color: var(--navy); --bs-btn-border-color: var(--line-strong);
                  --bs-btn-hover-bg: var(--surface); --bs-btn-hover-color: var(--navy); --bs-btn-hover-border-color: var(--navy); }
.btn-light-call .ico { color: var(--brass); }

/* ---------- Шапка ---------- */
.shapka { background: var(--paper); border-bottom: 1px solid var(--line); }
.shapka .container { min-height: 64px; }
.lock { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; }
.lock b { display: block; max-width: 9.5em; font-size: var(--fs-3); line-height: 1.12; color: var(--navy); }
.lock i { display: block; margin-top: 4px; font-size: 9px; font-style: normal; font-weight: 500; letter-spacing: .09em;
          text-transform: uppercase; color: var(--muted); }
@media (min-width: 700px) { .lock b { max-width: none; } }
.shapka-tel { text-align: right; line-height: 1.2; }
.shapka-tel a { font-weight: 600; color: var(--navy); text-decoration: none; }
.shapka-tel small { display: block; font-size: var(--fs-1); color: var(--muted); }
.kv { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
      border: 1px solid var(--line-strong); border-radius: var(--r); color: var(--navy); }
/* Тёмная шапка рекламной — как на страницах «Досье» (.shapka-lico в spory.css; владелец 15.10.2026: «как уже делали по подобию
   новых — полоску поменяем цвет, значок»): фирменный тёмно-синий, тонкая золотая черта снизу, эмблема «ЮСТ» в золотом кольце,
   золотая кнопка. Страница про нотариуса этого класса не ставит — её шапка прежняя */
.shapka-temnaya { background: var(--navy); border-bottom: 1px solid rgba(226, 192, 118, .45); }
.shapka-temnaya .emblema { display: block; flex-shrink: 0; color: var(--gold-old); }
.shapka-temnaya .lock b { max-width: none; font-size: 15px; line-height: 1.2; color: var(--paper); text-wrap: balance; }
.shapka-temnaya .lock i { margin-top: 5px; font-size: 10px; letter-spacing: .1em; color: var(--gold-old); }
.shapka-temnaya .kv { border-color: rgba(226, 192, 118, .7); background: transparent; color: var(--gold-old); }
.shapka-temnaya .shapka-tel a { color: var(--paper); }
.shapka-temnaya .shapka-tel a:hover { color: var(--gold-old); }
.shapka-temnaya .shapka-tel small { color: var(--on-navy-muted); }
.shapka-temnaya .btn-navy { --bs-btn-bg: var(--gold-btn-2); --bs-btn-border-color: var(--gold-btn-2); --bs-btn-color: var(--navy);
                            --bs-btn-hover-bg: var(--paper); --bs-btn-hover-border-color: var(--paper); --bs-btn-hover-color: var(--navy); }
@media (min-width: 768px) {
  .shapka-temnaya .emblema { width: 48px; height: 48px; }
  .shapka-temnaya .lock b { font-size: 18px; }
  .shapka-temnaya .lock i { font-size: 11px; }
}
@media (max-width: 359.98px) { .shapka-temnaya .lock b { font-size: 14px; } .shapka-temnaya .lock { gap: .625rem; } }

/* ---------- Первый экран: карточка как на старой странице ---------- */
.hero { background: var(--navy); }
/* На компьютере — панорама Москвы из Зарядья силуэтом сквозь тёмно-синий (выбор владельца 04.10.2026):
   глубина и «Москва», но фон не спорит с фото и карточкой. На телефоне — чистый синий */
@media (min-width: 992px) {
  .hero { background: linear-gradient(180deg, var(--hero-ten-verh) 0%, var(--hero-ten-seredina) 50%, var(--hero-ten-niz) 100%),
                      url("../img/fon-moskva.webp?v=15552bf0") center 70% / cover no-repeat var(--navy); }
}
.hero-ramka { padding: 8px 8px 16px; border-radius: 32px; background: var(--navy-old); }
/* Вариант 1 «Чётко» (владелец 15.10.2026: «шрифт — всё сливается», выбрал вариант 1): заголовок — белый, жирный, обычными
   буквами; строки про реестр и адрес — мелко, светло-серым; «Работаем на всей территории РФ» — золотом; обещания — белые
   с золотыми галочками. Шрифт — сайта (Golos). Серый — на тон светлее --on-navy-muted: на фоне карточки тот даёт контраст
   4,5 впритык, этот — около 6 */
.hero-card { padding: 16px 12px; border: 4px solid var(--gold-old); border-radius: 32px; background: var(--tint-old);
             font-family: var(--font); text-align: center;
             /* второстепенный текст в карточке (контраст ≈ 6). Здесь, а не в :root — иначе меняются файлы оформления страниц «Досье» */
             --kartochka-sery: rgba(233, 228, 218, .72); }
.hero-reestr { margin: 16px 0 0; font-size: 13px; line-height: 1.45; color: var(--kartochka-sery); }
.hero-reestr:first-child { margin-top: 14px; }
.hero-zag { margin: 18px 0 0; font-size: clamp(22px, 5.8vw, 30px); font-weight: 700; line-height: 1.25; color: var(--paper); }
.hero-it { margin: 16px 0 0; font-size: clamp(16px, 4.4vw, 19px); font-weight: 600; line-height: 1.4; text-wrap: balance; color: var(--gold-old); }
.hero-it::before { content: ''; display: block; width: 48px; height: 1px; margin: 0 auto 12px; background: var(--gold-old); opacity: .7; }
.hero-adr { margin: 16px 0 0; font-size: 14px; line-height: 1.5; color: var(--kartochka-sery); }
.hero-ob { display: inline-grid; gap: 12px; margin: 24px auto 0; padding: 0; list-style: none; text-align: left; font-family: var(--font); }
.hero-ob li { display: flex; align-items: center; gap: 12px; font-size: var(--fs-4); font-weight: 500; line-height: 1.35; color: var(--paper); }
.hero-ok { width: 30px; height: 30px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
           border-radius: 50%; background: var(--brass-lite); color: var(--navy); }
.hero-foto img { border-radius: var(--r-lg); box-shadow: var(--sh-3); }
@media (min-width: 992px) {
  .hero-ramka { padding: 12px 12px 24px; }
  .hero-card { padding: 16px 48px; }
  .hero-ob li { font-size: 21px; }   /* на ПК — 21 px, как «Работаем на всей территории РФ» (владелец 15.10.2026: «шрифт на ПК поменьше, на телефоне нормально») */
}

/* ---------- Полоса «Подать заявление…» с кнопками и мессенджерами ---------- */
.deystviya { background: var(--navy); border-top: 1px solid var(--line-on-navy); }
.deystviya h1 { font-size: clamp(20px, 1vw + 16px, 24px); font-weight: 500; line-height: 1.35;
                text-transform: uppercase; color: var(--gold-old); }
.deystviya-note { font-size: var(--fs-1); color: var(--on-navy-muted); }
/* Телефон: номер под заголовком (владелец 12.10.2026) */
.deystviya-tel { display: inline-block; margin-top: .5rem; padding: .25rem .5rem; font-size: 17px; font-weight: 600;   /* «помельче» — было 20 px */
                 color: var(--on-navy); text-decoration: none; white-space: nowrap; }
.deystviya-tel:hover { color: var(--brass-lite); }

/* Мессенджеры */
.mess-h { font-size: var(--fs-2); color: var(--muted); }
.mess-h b { color: var(--navy); white-space: nowrap; }
.mess-b { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem 1rem;
          border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface);
          font-size: var(--fs-2); font-weight: 600; color: var(--navy); text-decoration: none; }
/* Цветные значки мессенджеров */
.mz { display: inline-block; flex-shrink: 0; width: var(--mz); height: var(--mz); padding: calc(var(--mz) * .08); border-radius: 50%; line-height: 0; }
.mz-wa { background: var(--wa); }
.mz-tg { background: var(--tg); }
.mz-max { background: linear-gradient(135deg, var(--max-1), var(--max-2)); }
.mess-pl-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .25rem .75rem; border-radius: 999px; background: var(--surface); box-shadow: var(--sh-1); }
.mess-pl-a { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; border-radius: 50%; transition: transform .15s; }
a.mess-pl-a:hover { transform: scale(1.08); }
.fl .mess-pl-n, .mess-pl-n { margin: .5rem 0 0; font-size: var(--fs-1); color: var(--on-navy-muted); }
a.mess-b:hover { border-color: var(--navy); }
.mess-dark .mess-h { color: var(--on-navy-muted); }
.mess-dark .mess-h b { color: var(--on-navy); }
.mess-dark .mess-b { background: transparent; border-color: var(--line-on-navy); color: var(--on-navy); }
.mess-dark .mess-b .ico { color: var(--brass-lite); }
.mess-dark a.mess-b:hover { border-color: var(--brass-lite); color: var(--brass-lite); }
/* Телефон: мессенджеры в тёмной полосе под номером — две кнопки поровну на всю ширину (владелец 12.10.2026) */
.mess-ryad .mess-b { flex: 1 1 0; justify-content: center; }
/* Тёмная полоса под первым экраном, с 768 px: мессенджеры в одном ряду с «Получить консультацию» — той же высоты */
.deystviya-ryad .mess-b { min-height: 48px; padding: .5rem 1.25rem; }

/* ---------- Строка быстрых переходов ---------- */
.yakorya { scrollbar-width: none; }
.yakorya::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .yakorya { flex-wrap: wrap; overflow: visible !important; } }  /* на компьютере — все кнопки видны */
/* Вид — как на странице о наследстве (владелец 12.10.2026: «там мне лучше понравилось»): прямые углы, тёмная рамка, тень */
.yakorya a { flex-shrink: 0; min-height: 40px; display: inline-flex; align-items: center; padding: 0 .75rem;
             border: 1.5px solid var(--navy); border-radius: 0; background: #fff; box-shadow: 0 8px 14px -10px rgba(23, 38, 63, .45);
             font-size: var(--fs-2); font-weight: 600; color: var(--navy); text-decoration: none; white-space: nowrap; }
.yakorya a:hover, .yakorya a:focus-visible { background: var(--navy); color: var(--paper); }

/* ---------- Карточки Bootstrap — белые, как на сайте ---------- */
.card { --bs-card-bg: var(--surface); --bs-card-border-color: var(--line); --bs-card-border-radius: var(--r-lg); }

/* ---------- Карточки «Оформление развода» ---------- */
/* Семь преимуществ — вид «Главное + шесть» */
/* «Два визита — и всё». Телефон (владелец 12.10.2026: «сделай красивее, читаемее»): значок в одну строку
   с заголовком, текст ниже — на всю ширину плашки. С 768 px — значок слева, текст рядом, как было */
.pgl-glav { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; padding: 24px;
  border-radius: var(--r-lg); background: var(--navy); color: var(--on-navy); }
.pgl-glav-ico { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border-radius: 50%; border: 1px solid var(--line-on-navy); color: var(--brass-lite); }
.pgl-glav h3 { grid-column: 2; margin: 0; font-size: var(--fs-5); line-height: 1.3; color: var(--paper); }
.pgl-glav p { grid-column: 1 / -1; margin-top: 14px; font-size: var(--fs-3); line-height: 1.6; color: var(--on-navy); }
@media (min-width: 768px) {
  .pgl-glav { align-items: start; }
  .pgl-glav-ico { grid-row: 1 / span 2; width: 56px; height: 56px; }
  .pgl-glav p { grid-column: 2; margin-top: .5rem; }
}
.pgl-i { padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.pgl-h { display: flex; gap: 12px; align-items: center; }
.pgl-ico { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 50%; background: var(--sage); color: var(--brass); }
.pgl-h h3 { margin: 0; font-size: var(--fs-4); line-height: 1.35; }
.pgl-i p { margin-top: 12px; font-size: var(--fs-3); line-height: 1.6; color: var(--ink); }
.pgl-glav-ico .ico { font-size: 28px; }
.pgl-ico .ico { font-size: 20px; }
@media (min-width: 700px) { .pgl-glav { padding: 32px; column-gap: 24px; } }
/* Шесть карточек под главной плашкой: виден заголовок, пояснение — по нажатию (владелец 15.10.2026: «оставь заголовок,
   а разъяснение спрячь, чтобы легко можно было прочитать, если захотят; красиво, с 3D и с тенью, как ранее делали»).
   Вид — как карточки споров на страницах «Досье»: прямые углы, тёмная рамка, мягкая тень снизу; при наведении
   приподнимается. Закрытые в одном ряду — одной высоты, заголовок посередине; пока одна открыта, соседние не растягиваются */
.pgl-raskr { padding: 0; border: 1.5px solid var(--navy); border-radius: 0; background: var(--surface);
             box-shadow: 0 22px 34px -18px rgba(13, 26, 46, .45); transition: transform .2s, box-shadow .2s; }
.pgl-raskr > summary { padding: 18px 20px; cursor: pointer; list-style: none; }
.pgl-raskr > summary::-webkit-details-marker { display: none; }
.pgl-raskr > summary:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
.pgl-raskr .pgl-str { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
                      margin-left: auto; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--navy); transition: transform .2s; }
.pgl-raskr[open] .pgl-str { transform: rotate(180deg); }
.pgl-raskr > p { margin: 0; padding: 0 20px 20px; }
.pgl-raskr[open] { box-shadow: 0 30px 44px -20px rgba(13, 26, 46, .55); }
.pgl-raskr { height: 100%; }
.pgl-raskr:not([open]) > summary { height: 100%; }
.pgl-raskr-ryad:has(.pgl-raskr[open]) { align-items: flex-start; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pgl-raskr:hover { transform: translateY(-4px); box-shadow: 0 30px 44px -20px rgba(13, 26, 46, .55); }
}
@media (prefers-reduced-motion: reduce) { .pgl-raskr, .pgl-raskr .pgl-str { transition: none; } }
.kart { border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.kart-ico { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
            border-radius: var(--r-lg); background: var(--sage); color: var(--brass); font-size: 22px; }
.kart h3 { margin-top: .75rem; font-size: var(--fs-4); line-height: 1.35; }
.kart p { font-size: var(--fs-2); }

/* ---------- «Выберите вашу ситуацию»: тёмный блок, аккордеон Bootstrap ---------- */
.sit { background: var(--navy); border-radius: var(--r-lg); color: var(--on-navy); }
.sit h2 { color: var(--on-navy); }
.sit-x { margin-top: .75rem; font-size: var(--fs-2); font-weight: 500; color: var(--brass-lite); }
.sit .accordion { --bs-accordion-bg: transparent; --bs-accordion-border-color: var(--line-on-navy);
                  --bs-accordion-border-radius: var(--r-lg); --bs-accordion-inner-border-radius: var(--r-lg);
                  --bs-accordion-btn-color: var(--on-navy); --bs-accordion-active-color: var(--on-navy);
                  --bs-accordion-active-bg: transparent; --bs-accordion-btn-focus-box-shadow: 0 0 0 2px var(--brass-lite);
                  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23C9A45C' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
                  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23C9A45C' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.sit .accordion-item { margin-bottom: .5rem; border: 1px solid var(--line-on-navy); border-radius: var(--r-lg) !important; }
.sit .accordion-item:has(.accordion-collapse.show) { border-color: var(--brass-lite); }
.sit .accordion-button { font-size: var(--fs-3); font-weight: 500; border-radius: var(--r-lg) !important; }
.sit-txt { max-width: 80ch; padding: 1rem; border-radius: var(--r); background: var(--paper); color: var(--ink); font-size: var(--fs-2); }
.sit-txt h3 { font-size: var(--fs-4); line-height: 1.35; }
.sit-txt ul { padding-left: 1.5rem; }
.sit-txt li + li { margin-top: .5rem; }

/* ---------- Опросник ---------- */
.kviz { padding: 24px; border-radius: var(--r-lg); background: var(--sage); }
.kviz-lead { font-size: var(--fs-2); color: var(--sage-deep); }
.kviz-box { margin-top: 24px; padding: 24px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-1); min-height: 220px; }
.kviz-step { font-size: var(--fs-1); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.kviz-q { margin-top: .5rem; font-size: var(--fs-5); line-height: 1.35; outline: none; }
.kviz-ch, .kviz-answers { display: grid; gap: .5rem; margin-top: 1rem; }
.kviz-chi { display: flex; align-items: center; gap: .75rem; min-height: 48px; padding: .75rem 1rem; margin: 0;
            background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--r); cursor: pointer;
            font-weight: 500; color: var(--navy); }
.kviz-chi:hover, .kviz-chi:has(input:checked) { border-color: var(--navy); }
.kviz-chi:has(input:checked) { background: var(--sage); }
.kviz-chi input { width: 22px; height: 22px; margin: 0; flex-shrink: 0; accent-color: var(--navy); }
.kviz-a { min-height: 48px; padding: .75rem 1rem; text-align: left; font-weight: 500; color: var(--navy);
          background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--r); }
.kviz-a:hover { border-color: var(--navy); background: var(--surface); }
.kviz-back { margin-top: 1rem; min-height: 48px; padding: 0 4px; border: 0; background: none; font-size: var(--fs-2); color: var(--muted); }
.kviz-back:hover { color: var(--navy); }
.kviz-text { margin-top: .75rem; }
.kviz-extra { margin-top: .75rem; padding-left: .75rem; border-left: 3px solid var(--brass); font-size: var(--fs-2); }
.kviz-link { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: .75rem; min-height: 48px;
             margin-top: 1rem; padding: .75rem 1rem; border: 1px solid var(--line); border-radius: var(--r);
             background: var(--paper); font-weight: 600; color: var(--navy); text-align: left; }
.kviz-link:hover { border-color: var(--navy); }
.kviz-link .ico { color: var(--brass); }
.kviz-act { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.5rem; }
.kviz-act .kviz-back { margin-top: 0; }
.kviz-sent { margin-bottom: 1rem; padding: .5rem .75rem; border-radius: var(--r); background: var(--sage); color: var(--navy);
             font-size: var(--fs-2); font-weight: 500; }
.kviz-note { margin-top: .5rem; font-size: var(--fs-1); color: var(--faint); }
@media (min-width: 768px) {
  .kviz { padding: 32px 48px; }
  .kviz-box { padding: 32px; }
  .kviz-ch, .kviz-answers { grid-template-columns: 1fr 1fr; }
}

/* ---------- Направления: номер в кружке ---------- */
.napr { border: 1px solid var(--line); border-radius: var(--r-lg); }
.napr-n { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
          background: var(--navy); color: var(--brass-lite); font-size: var(--fs-2); font-weight: 700; }
.napr h3 { margin-top: .75rem; font-size: var(--fs-3); line-height: 1.35; }
.napr p { margin-bottom: .5rem; font-size: var(--fs-2); }
/* «Основные направления» — объёмные карточки, как карточки споров страниц «Досье» и «Тихо, спокойно» выше (владелец 15.10.2026:
   «основные направления тоже сделай 3D, с тенями, красиво»): прямые углы, тёмная рамка, мягкая тень снизу, при наведении приподнимается */
.napr-3d { --bs-card-border-radius: 0; --bs-card-inner-border-radius: 0; border: 1.5px solid var(--navy); border-radius: 0;
           box-shadow: 0 22px 34px -18px rgba(13, 26, 46, .45); transition: transform .2s, box-shadow .2s; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .napr-3d:hover { transform: translateY(-6px); box-shadow: 0 30px 44px -20px rgba(13, 26, 46, .55); }
}
@media (prefers-reduced-motion: reduce) { .napr-3d { transition: none; } }
/* …и текст по нажатию, как «Тихо, спокойно, без стресса» (владелец 15.10.2026: «основные направления тоже сделай по подобию —
   спрячь текст»). Карточки узкие (по четыре в ряд), поэтому номер и стрелка — сверху, заголовок — под ними на всю ширину.
   Закрытые в ряду — одной высоты; пока одна открыта, соседние не растягиваются */
.napr-raskr { height: 100%; background: var(--surface); }
.napr-raskr > summary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px 10px; padding: 20px;
                        cursor: pointer; list-style: none; }
.napr-raskr:not([open]) > summary { height: 100%; align-content: start; }
.napr-raskr > summary::-webkit-details-marker { display: none; }
.napr-raskr > summary:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
.napr-raskr > summary .napr-n { grid-column: 1; }
/* Заголовок — того же размера, что в «Тихо, спокойно» (19 px): пока карточка закрыта, виден только он (владелец 15.10.2026:
   «шрифт внутри блока мелкий — сделай идентичный», после выкладки: «как был, так и есть») */
.napr-raskr > summary h3 { grid-column: 1 / -1; margin: 0; font-size: var(--fs-4); line-height: 1.35; }
.napr-raskr .napr-str { grid-column: 3; grid-row: 1; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
                        border: 1px solid var(--line-strong); border-radius: 50%; color: var(--navy); transition: transform .2s; }
.napr-raskr[open] .napr-str { transform: rotate(180deg); }
.napr-raskr .napr-tekst { padding: 0 20px 12px; }
/* Текст внутри — как в карточках «Тихо, спокойно» (владелец 15.10.2026: «шрифт внутри блока мелкий — сделай идентичный») */
.napr-raskr .napr-tekst p { margin-bottom: .75rem; font-size: var(--fs-3); line-height: 1.6; color: var(--ink); }
.napr-raskr-ryad:has(.napr-raskr[open]) { align-items: flex-start; }
@media (prefers-reduced-motion: reduce) { .napr-raskr .napr-str { transition: none; } }

/* ---------- Команда ---------- */
.kom img { width: 100%; aspect-ratio: 7 / 9; object-fit: cover; border-radius: var(--r-lg); background: var(--sage); }
.kom figcaption { margin-top: .5rem; font-size: var(--fs-2); line-height: 1.35; }
.kom b { display: block; color: var(--navy); }
.kom span { color: var(--muted); }

/* ---------- Цены ---------- */
.ceny { background: var(--sage); border-radius: var(--r-lg); }
.ceny .table { --bs-table-bg: transparent; --bs-table-border-color: var(--sage-line); --bs-table-color: var(--navy); font-size: var(--fs-2); }
.ceny th { font-size: var(--fs-1); font-weight: 600; color: var(--sage-deep); }
.ceny td small { display: block; font-size: var(--fs-1); color: var(--sage-deep); }
.ceny .cena { white-space: nowrap; text-align: right; font-weight: 600; }
.ceny tr.glavnaya td { font-weight: 700; }
.ceny-n { font-size: var(--fs-1); color: var(--sage-deep); }
.ceny-foto img { border-radius: var(--r-lg); }

/* ---------- Развод онлайн ---------- */
.onlajn { border: 2px solid var(--sage-line); border-radius: var(--r-lg); background: var(--surface); }
.onlajn-geo { margin-top: -.25rem; font-size: var(--fs-3); font-weight: 500; color: var(--navy); }
.onlajn-shagi { list-style: none; counter-reset: sh; display: grid; gap: .5rem; margin: 1rem 0 0; padding: 0; }
.onlajn-shagi li { counter-increment: sh; position: relative; padding-left: 40px; font-size: var(--fs-2); line-height: 1.55; color: var(--ink); }
.onlajn-shagi li::before { content: counter(sh); position: absolute; left: 0; top: 0; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: var(--paper); font-size: var(--fs-1); font-weight: 600; }
.onlajn-shagi b { color: var(--navy); }
/* Шаги на телефоне свёрнуты под кнопкой «Как это работает: 5 шагов» (сворачивает скрипт в странице); на ПК открыты, кнопки нет */
.onlajn-kak { margin-top: 1rem; }
.onlajn-kak .onlajn-shagi { margin-top: 0; }
.onlajn-kak summary { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 16px; border: 1px solid var(--line-strong);
                      border-radius: var(--r); background: var(--paper); font-size: var(--fs-2); font-weight: 600; color: var(--navy); cursor: pointer; list-style: none; }
.onlajn-kak summary::-webkit-details-marker { display: none; }
.onlajn-kak summary::after { content: ""; flex: 0 0 auto; width: 10px; height: 10px; margin-left: auto; border-right: 2px solid var(--navy);
                             border-bottom: 2px solid var(--navy); transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.onlajn-kak[open] summary { margin-bottom: 1rem; }
.onlajn-kak[open] summary::after { transform: translateY(2px) rotate(-135deg); }
@media (min-width: 768px) { .onlajn-kak summary { display: none; } }
@media (prefers-reduced-motion: reduce) { .onlajn-kak summary::after { transition: none; } }
.onlajn-podhodit { margin: 1rem 0 0; padding: .75rem 1rem; border-radius: var(--r); background: var(--sage); font-size: var(--fs-2); color: var(--ink); }
.onlajn-ch { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; padding: 0; }
.onlajn-ch li { padding: .25rem .75rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: var(--fs-2); font-weight: 500; color: var(--navy); }
.onlajn-cena { padding: 24px; border-radius: var(--r-lg); background: var(--sage); }
.onlajn-x { font-size: var(--fs-2); color: var(--sage-deep); }
.onlajn-sum { color: var(--navy); }
.onlajn-sum s { color: var(--muted); }
.onlajn-skidka { display: inline-block; padding: 0 .5rem; border-radius: var(--r); background: var(--navy); color: var(--paper); font-size: var(--fs-2); font-weight: 600; }
.onlajn-sum b { font-size: var(--fs-5); }
.onlajn .btn .ico { color: var(--brass-lite); }
.onlajn-n { margin-top: .75rem; margin-bottom: 0; font-size: var(--fs-1); color: var(--sage-deep); }

/* ---------- Сроки: врезка ---------- */
.srok { display: flex; gap: .75rem; padding: 1rem 1.25rem; border-radius: var(--r-lg); background: var(--sage); color: var(--ink); }
.srok .ico { margin-top: 3px; color: var(--brass); font-size: 20px; }
.srok b { display: block; color: var(--navy); }

/* ---------- «Как подать»: аккордеон Bootstrap ---------- */
.kak .accordion { --bs-accordion-bg: var(--surface); --bs-accordion-border-color: var(--line);
                  --bs-accordion-border-radius: var(--r-lg); --bs-accordion-inner-border-radius: var(--r-lg);
                  --bs-accordion-btn-color: var(--navy); --bs-accordion-active-color: var(--navy);
                  --bs-accordion-active-bg: var(--surface); --bs-accordion-btn-focus-box-shadow: 0 0 0 2px var(--brass); }
.kak .accordion-item { margin-bottom: .5rem; border-radius: var(--r-lg) !important; border: 1px solid var(--line) !important; }
.kak .accordion-button { font-weight: 600; border-radius: var(--r-lg) !important; }
.kak .accordion-body ul { padding-left: 1.5rem; }
.kak .accordion-body a { font-weight: 600; }
/* Карточка справа на ПК рядом с «Как подать» и «Частыми вопросами» — едет вместе со страницей, пока читаете левую колонку */
.bok-zayavka { position: sticky; top: 96px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.bok-zayavka p { font-size: var(--fs-2); color: var(--ink); }
.bok-zayavka .bok-zayavka-h { margin-bottom: .5rem; font-size: var(--fs-4); font-weight: 700; line-height: 1.3; color: var(--navy); }
.bok-zayavka .bok-zayavka-cena { color: var(--navy); }
.bok-zayavka-cena b { font-size: var(--fs-4); }
.bok-zayavka hr { margin: 1.25rem 0; border-color: var(--line); opacity: 1; }
.bok-zayavka-a { display: inline-flex; align-items: center; gap: .375rem; font-weight: 600; color: var(--navy); }
.bok-zayavka .mess { margin-top: 1rem; }
/* Образец иска текстом — как лист документа */
.kak__obrazec { margin: 1rem 0 .75rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper);
                font-size: var(--fs-2); line-height: 1.55; color: var(--ink); }
.kak__obrazec p { margin-bottom: .5rem; }
.kak__obrazec p:last-child { margin-bottom: 0; }
.kak__obrazec-z { text-align: center; }

/* ---------- Товарный знак ---------- */
.znak { background: var(--navy); border-radius: var(--r-lg); color: var(--on-navy-muted); }
.znak .eyebrow { color: var(--brass-lite); }
.znak h2 { color: var(--on-navy); }
.znak b { color: var(--on-navy); }
.znak p { font-size: var(--fs-2); }
.znak-n { font-size: var(--fs-1) !important; }
.znak img { background: var(--paper); border-radius: var(--r); }

/* ---------- Отзывы: скриншоты «кирпичиками» + виджет Яндекса по нажатию ---------- */
.otz { columns: 1; column-gap: 1rem; }
.otz img { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto 1rem; break-inside: avoid;
           border-radius: var(--r-lg); box-shadow: var(--sh-1); }
@media (min-width: 768px) { .otz { columns: 2; } }
@media (min-width: 992px) { .otz { columns: 3; } }
.otz-ya { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.otz-ya-ico { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
              border-radius: var(--r-lg); background: var(--sage); color: var(--brass); font-size: 28px; }
.otz-ya-box { width: 100%; max-width: 760px; height: 640px; margin-top: 1rem; border-radius: var(--r-lg); overflow: hidden; background: var(--sage); }
.otz-ya-box iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---------- Форма заявки ---------- */
.forma { padding: 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-1); }
.forma-t { font-size: var(--fs-4); font-weight: 700; color: var(--navy); }
.forma .form-label { font-size: var(--fs-2); font-weight: 500; color: var(--navy); }
.forma .form-label i, .forma legend i { font-style: normal; font-weight: 400; color: var(--faint); }
.forma .form-control { min-height: 48px; border-color: var(--line-strong); border-radius: var(--r); background: var(--paper); color: var(--navy); }
.forma .form-control:focus { border-color: var(--brass); box-shadow: 0 0 0 2px rgba(138, 106, 47, .25); }
.forma legend { font-size: var(--fs-2); font-weight: 500; color: var(--navy); }
.forma .btn-check + .btn { --bs-btn-padding-y: .4rem; --bs-btn-padding-x: .9rem; min-height: 40px; --bs-btn-font-weight: 500;
                           --bs-btn-border-radius: 999px; --bs-btn-color: var(--navy); --bs-btn-border-color: var(--line-strong);
                           --bs-btn-hover-bg: var(--paper); --bs-btn-hover-color: var(--navy); --bs-btn-hover-border-color: var(--navy);
                           --bs-btn-active-bg: var(--navy); --bs-btn-active-color: var(--paper); --bs-btn-active-border-color: var(--navy); }
.forma .form-check-input:checked { background-color: var(--navy); border-color: var(--navy); }
.forma .form-check-label { font-size: var(--fs-1); color: var(--muted); }
.forma-hint { font-size: var(--fs-1); color: var(--faint); }
.pole-err { margin-top: .25rem; font-size: var(--fs-1); color: var(--warn-text); }
[aria-invalid="true"] { border-color: var(--warn-text) !important; }
.forma-err { padding: .5rem .75rem; border-radius: var(--r); background: var(--warn-bg); color: var(--warn-text); font-size: var(--fs-2); }
.lovushka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.kont-tel { font-size: var(--fs-5); font-weight: 700; color: var(--navy); text-decoration: none; }
.kont-p { font-size: var(--fs-2); }
.kont-p a { font-weight: 600; }
.kont-rek { font-size: var(--fs-1); color: var(--faint); }

/* ---------- Подвал ---------- */
/* Подвал — как на боевом сайте */
.fl { margin-top: 64px; padding: 24px 0 32px; background: var(--navy); color: var(--on-navy); }
.fl-rule { height: 3px; border-radius: 2px; background: var(--on-navy); opacity: .75; }
.fl-rule-in { height: 2px; margin: 16px 0; }
.fl p { margin: 0; font-size: var(--fs-3); line-height: 1.6; }
.fl p + p { margin-top: 12px; }
.fl .fl-h { margin-bottom: 16px; font-size: var(--fs-4); font-weight: 500; color: var(--gold-old); }
.fl .fl-h2 { margin-top: 16px; font-weight: 500; color: var(--gold-old); }
.fl a { color: var(--on-navy); text-decoration: none; }
.fl a:hover { color: var(--gold-old); }
.fl-line { display: flex; align-items: center; gap: .5rem; }
.fl-line a { color: var(--gold-old); }
.fl-line a:hover { color: var(--on-navy); }
.fl-line .ico { color: var(--gold-old); }
.fl .fl-docs { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 12px; }
.fl-docs a { padding: 4px 0; font-size: var(--fs-2); color: var(--on-navy-muted); text-decoration: underline; text-decoration-color: var(--line-on-navy); text-underline-offset: 3px; }
.fl .fl-copy { margin-top: 16px; font-size: var(--fs-2); text-align: center; color: var(--on-navy-muted); }
.fl .fl-disc { margin-top: 4px; font-size: var(--fs-1); text-align: center; color: var(--on-navy-muted); }

/* ---------- Нижняя полоса на телефоне ---------- */
.sticky-niz { background: var(--paper); border-top: 1px solid var(--line); z-index: 1030; }
.sticky-niz .kv { color: var(--brass); background: var(--surface); }
@media (max-width: 991.98px) { body { padding-bottom: 76px; } }

/* ---------- Плашка про cookie — только в боевом варианте (sborka.mjs --boevoj), как на сайте ---------- */
/* На телефоне — над нижней полосой «Описать ситуацию / Позвонить», на компьютере — у края экрана */
.ck { position: fixed; z-index: 1040; left: 16px; right: 16px; bottom: 84px; display: flex; align-items: center; gap: 12px;
      padding: 12px 12px 12px 16px; border: 1px solid var(--line-strong); border-radius: var(--r-lg);
      background: var(--surface); box-shadow: var(--sh-1); }
.ck[hidden] { display: none; }
.ck p { flex: 1 1 auto; margin: 0; font-size: var(--fs-1); line-height: 1.5; color: var(--ink); }
.ck a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.ck-ok { flex-shrink: 0; min-height: 44px; padding: 8px 16px; border: 0; border-radius: var(--r);
         background: var(--navy); color: var(--paper); font-size: var(--fs-2); font-weight: 600; cursor: pointer; }
.ck-ok:hover { background: var(--navy-hover); }
@media (min-width: 700px) { .ck { right: auto; max-width: 440px; } }
@media (min-width: 992px) { .ck { bottom: 16px; } }