/* Шрифты: локальные файлы (те же, что в site/fonts/) */
/* Локальные шрифты сайта (те же файлы, что в site/fonts/, вариативные: один файл на семейство и подсеть).
   Скопировано из site/css/tokens.css, чтобы прототипы не зависели от остального CSS редизайна. */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/source-serif-4-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/source-serif-4-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Главная целиком — рабочее направление. Сетка и типографика варианта Б,
   тёплый светлый фон, настоящие фото из вариантов А и Б в естественных пропорциях.
   Один акцент — кирпичный, только на основных кнопках действия. */
:root {
  --paper: #f6f1e8;
  --paper-2: #eee6d8;
  --card: #fcfaf6;
  --ink: #17140f;
  --muted: #5b554c;          /* 6.5:1 на фоне, 6:1 на тёплой полосе */
  --rule: #17140f;
  --hair: #d6cbb8;           /* тонкие декоративные линии */
  --field: #7a7266;          /* границы полей, 4.5:1 на карточке */
  --accent: #8f2f1d;         /* кнопки действия: белый текст 8.1:1 */
  --accent-hover: #75251a;
  --on-dark: #f6f1e8;
  --on-dark-muted: #c9bfae;  /* 10:1 на тёмном */
  --error: #a3261b;
  --on-accent: #fff;         /* текст на кирпичной кнопке и красной плашке */
  --field-bg: #fff;          /* фон полей ввода */
  --ok: #3d6b3a;             /* «всё получилось» (рамка заметки в чате) */
  --shadow-float: 0 6px 18px rgba(23, 20, 15, 0.18);     /* плавающие плашки: баннер cookie, облачко чата */
  --shadow-launcher: 0 6px 18px rgba(23, 20, 15, 0.22);  /* кнопка чата */
  --shadow-panel: 0 12px 36px rgba(23, 20, 15, 0.28);    /* окно чата */
  --serif: 'Source Serif 4', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wrap: 1280px;
  --pad: 20px;
  --gap: 24px;
}
@media (min-width: 700px) { :root { --pad: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--serif); }
@media (min-width: 1024px) { body { font-size: 18px; } }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nowrap { white-space: nowrap; }   /* номер телефона в подписи кнопки не рвётся: перенос только перед ним */
.skip { position: absolute; top: -80px; left: 12px; z-index: 50; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; background: var(--ink); color: var(--paper); font: 600 15px/1.2 var(--sans); }
.skip:focus { top: 12px; color: var(--paper); }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; stroke-linejoin: miter; }

/* Кнопки: прямые углы; основная — кирпичная, вторичная — чёрная рамка */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border: 2px solid transparent; border-radius: 0; font: 600 16px/1.2 var(--sans); text-align: center; text-decoration: none; cursor: pointer; }
.btn--lg { min-height: 56px; padding: 8px 16px; font-size: 16px; text-wrap: balance; }
.btn--accent { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.btn--accent:hover { border-color: var(--accent-hover); background: var(--accent-hover); color: var(--on-accent); }
.btn--line { border-color: var(--ink); background: transparent; color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--paper); }
@media (min-width: 700px) { .btn--lg { padding: 8px 28px; font-size: 17px; } }

/* 1. Шапка */
.header { position: sticky; top: 0; z-index: 20; border-bottom: 2px solid var(--rule); background: var(--paper); }
.header__row { display: flex; align-items: center; gap: 8px; min-height: 60px; }
.brand { display: flex; align-items: center; gap: 12px; min-height: 44px; margin-right: auto; text-decoration: none; white-space: nowrap; }
.brand:hover { color: var(--ink); }
.brand__name { font: 700 15px/1.2 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
.brand__role { display: none; padding-left: 12px; border-left: 1px solid var(--hair); font: 400 14px/1.2 var(--sans); color: var(--muted); }
.header .nav, .header .header__phone, .header .header__cta { display: none; }
.phone { display: inline-flex; align-items: center; min-height: 44px; font: 600 16px/1.3 var(--sans); white-space: nowrap; }
.icon-btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--ink); }
.icon-btn svg { width: 22px; height: 22px; }
.menu { padding: 0 var(--pad) 20px; border-top: 1px solid var(--hair); }
.menu nav { display: flex; flex-direction: column; }
.menu nav a { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--hair); font: 600 18px/1.3 var(--sans); text-decoration: none; }
.menu .phone { margin: 6px 0 10px; }
.menu .btn { width: 100%; }
@media (min-width: 700px) { .brand__role { display: inline; } }
@media (min-width: 1180px) {
  .header__row { gap: 20px; min-height: 72px; }
  .brand__role { display: none; }
  .header .nav { display: flex; gap: 18px; }
  .nav a { display: inline-flex; align-items: center; min-height: 44px; font: 500 15px/1.2 var(--sans); text-decoration: none; white-space: nowrap; }
  .nav a:hover { color: var(--ink); text-decoration: underline; }
  .header .header__cta { display: inline-flex; flex-shrink: 0; white-space: nowrap; }
  .header__burger, .menu { display: none !important; }
}
@media (min-width: 1320px) { .header .header__phone { display: inline-flex; } .header__call { display: none; } }

/* Общие правила заголовка страницы и кнопок записи (внутренние страницы) */
h1 { font: 700 clamp(32px, 2.6vw + 22px, 58px)/1.05 var(--sans); letter-spacing: -0.03em; text-wrap: balance; overflow-wrap: break-word; }
/* overflow-wrap: слово длиннее строки переносится, а не выталкивает страницу за край («конфиденциальности» на 320 px
   делало /privacy шире экрана на 37 px; найдено проверкой всех страниц 28.10.2026). Обычные заголовки не меняются. */
.lead { max-width: 36em; margin-top: 18px; font-size: clamp(17px, 0.3vw + 16px, 20px); line-height: 1.55; text-wrap: pretty; }
.actions { margin-top: 26px; }
.actions .btn { width: 100%; }
.cta-note { margin-top: 10px; font: 400 15px/1.45 var(--sans); color: var(--muted); }
@media (min-width: 700px) {
  .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
  .actions .btn { width: auto; }
  .cta-note { max-width: 17em; margin: 0; }
}

/* 2. Первый экран главной: заголовок «Роман Устинов — юрист в Тюмени», одна фраза, одна кнопка и настоящее фото
   (решение Романа 28.10.2026, второй круг). Заголовок — общий h1, только крупнее. */
.hero { padding: 28px 0 44px; }
.hero__grid { display: grid; gap: 32px; }
.hero__id { display: flex; align-items: center; gap: 16px; }
.hero__face { flex-shrink: 0; width: 76px; height: 76px; }
.hero__title { font-size: clamp(28px, 3.6vw + 16px, 68px); line-height: 1.04; letter-spacing: -0.035em; }
.hero__lead { max-width: 30em; margin-top: 18px; font-size: clamp(18px, 0.5vw + 16px, 23px); line-height: 1.5; text-wrap: pretty; }
.hero__actions { margin-top: 28px; }
.hero__actions .btn { width: 100%; }
.hero__photo { display: none; }
.hero__photo img { width: 100%; height: auto; }
@media (min-width: 700px) {
  .hero { padding: 44px 0 60px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr) 240px; align-items: center; column-gap: 40px; }
  .hero__photo { display: block; }
  .hero__face { display: none; }
  .hero__actions .btn { width: auto; }
}
@media (min-width: 1024px) {
  .hero { padding: 56px 0 72px; }
  .hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .hero__text { grid-column: 1 / span 7; }
  .hero__photo { grid-column: 9 / span 4; }
}

/* Общее для разделов */
.section { padding: 56px 0 64px; border-top: 2px solid var(--rule); }
.section--warm { background: var(--paper-2); }
h2 { font: 700 clamp(28px, 1.6vw + 20px, 44px)/1.08 var(--sans); letter-spacing: -0.025em; text-wrap: balance; }
h3 { font: 600 19px/1.3 var(--sans); }
.section__head p { max-width: 34em; margin-top: 14px; color: var(--muted); text-wrap: pretty; }
@media (min-width: 1024px) {
  .section { padding: 80px 0 96px; }
  .section__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; column-gap: var(--gap); }
  .section__head h2 { grid-column: 1 / span 6; }
  .section__head p { grid-column: 8 / span 5; margin: 0; }
}

/* Списки ситуаций на страницах направлений и услуг */
.group__cases li { position: relative; padding: 9px 0 9px 22px; border-bottom: 1px solid var(--hair); text-wrap: pretty; }
.group__cases li:first-child { border-top: 1px solid var(--hair); }
.group__cases li::before { content: '—'; position: absolute; left: 0; color: var(--muted); }

/* 3. Главная: три равнозначных направления — карточки на тёплой полосе */
.dir-cards { display: grid; gap: 16px; margin-top: 28px; }
.dir-cards > li { display: flex; }
.dir-card { display: flex; flex: 1; flex-direction: column; padding: 24px 22px 14px; background: var(--card); }
.dir-card__title { font: 700 21px/1.25 var(--sans); letter-spacing: -0.01em; text-wrap: balance; }
.dir-card__lead { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.dir-card__cases { margin: 14px 0 12px; }
.dir-card__cases li { position: relative; padding: 6px 0 6px 18px; font-size: 16px; line-height: 1.45; text-wrap: pretty; }
.dir-card__cases li::before { content: ''; position: absolute; top: 17px; left: 0; width: 8px; height: 2px; background: var(--ink); }
.dir-card__more { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; margin-top: auto; font: 600 16px/1.3 var(--sans); }
.dir-card__more::after { content: '→'; content: '→' / ''; margin-left: 8px; }
/* В ряду карточек названия в одну и две строки — резерв двух строк выравнивает пояснения и списки */
@media (min-width: 900px) { .dir-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); } .dir-card__title { min-height: 2.5em; } }

/* Обо мне (главная): фото у окна и короткий текст сразу после направлений */
.h-about__grid { display: grid; gap: 24px; align-items: center; }
.h-about__photo { max-width: 200px; }
.h-about__photo img { width: 100%; height: auto; }
.h-about__lead { margin-top: 14px; font-size: clamp(18px, 0.4vw + 16.5px, 21px); line-height: 1.5; text-wrap: pretty; }
.h-about__pubs { margin-top: 14px; font-size: 16px; color: var(--muted); text-wrap: pretty; }
.h-about__text .more { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; }
@media (min-width: 700px) {
  .h-about__grid { grid-template-columns: 220px minmax(0, 1fr); column-gap: 40px; }
  .h-about__photo { max-width: none; }
}
@media (min-width: 1024px) {
  .h-about__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .h-about__photo { grid-column: 2 / span 3; }
  .h-about__text { grid-column: 6 / span 6; }
}

/* 4. Как я работаю — три шага (общий блок главной, направлений, услуг и «О юристе») */
.steps { display: grid; margin-top: 28px; }
.steps li { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-content: start; column-gap: 12px; padding: 18px 0; border-top: 1px solid var(--hair); }
.steps li:first-child { border-top: 0; padding-top: 4px; }
.steps__n { grid-row: span 2; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 2px solid var(--ink); border-radius: 50%; font: 700 17px/1 var(--sans); font-variant-numeric: tabular-nums; }
.steps h3 { align-self: center; font: 600 19px/1.3 var(--sans); }
.steps p { margin-top: 6px; color: var(--muted); text-wrap: pretty; }
/* Три колонки — только с 1024 px: на планшете в колонках по ~210 px текст шага вытягивался на 14 строк */
@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; margin-top: 36px; }
  .steps li, .steps li:first-child { grid-template-columns: 1fr; padding: 0; border: 0; }
  .steps__n { grid-row: auto; margin-bottom: 14px; }
}

/* 5. Стоимость — бесплатная консультация отдельно, платные услуги таблицей */
.price__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.free { margin-top: 24px; padding: 20px 22px; border: 2px solid var(--ink); background: var(--card); }
.free__name { font: 600 17px/1.3 var(--sans); }
.free__price { margin-top: 4px; font: 700 34px/1.1 var(--sans); letter-spacing: -0.02em; }
.free__text { margin-top: 8px; }
.price__aside { margin-top: 16px; color: var(--muted); text-wrap: pretty; }
.prices { width: 100%; border-collapse: collapse; font-family: var(--sans); }
.prices thead th { padding: 0 0 10px; border-bottom: 2px solid var(--rule); font: 600 14px/1.4 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); text-align: left; }
.prices thead th:last-child { text-align: right; }
.prices tbody th, .prices td { padding: 13px 0; border-bottom: 1px solid var(--hair); vertical-align: baseline; }
.prices tbody th { padding-right: 12px; font: 500 16px/1.4 var(--sans); text-align: left; }
.prices td { font: 600 16px/1.4 var(--sans); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
/* На самых узких экранах цена «15 000–25 000 ₽» может перейти на вторую строку после тире (внутри чисел — неразрывные
   пробелы), иначе таблица выходила за край на 3 px */
@media (max-width: 359px) { .prices td { white-space: normal; } }
.price__note { margin-top: 16px; color: var(--muted); text-wrap: pretty; }
.price__cta { width: 100%; margin-top: 20px; }
.price__deps-title { margin-top: 36px; padding-bottom: 10px; border-bottom: 2px solid var(--rule); }
.ticks li { position: relative; padding: 10px 0 10px 28px; border-bottom: 1px solid var(--hair); text-wrap: pretty; }
.ticks li::before { content: ''; position: absolute; top: 22px; left: 2px; width: 12px; height: 2px; background: var(--ink); }
@media (min-width: 700px) {
  .price__cta { width: auto; }
  .prices tbody th, .prices td { font-size: 18px; }
}
@media (min-width: 1024px) {
  .price__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .price__head { grid-column: 1 / span 4; }
  .price__body { grid-column: 6 / -1; }
  .free { margin-top: 32px; }
}

/* 6. Обо мне — фото у окна и текст */
.about__grid { display: grid; gap: 28px; }
.about__photo { max-width: 300px; }
@media (max-width: 699px) { .about__grid--page .about__photo { order: 2; max-width: 260px; } }
.about__cta { margin-top: 22px; }
.about__photo img { width: 100%; height: auto; }
.about__lead { margin-top: 18px; font-size: clamp(19px, 0.4vw + 17.5px, 22px); line-height: 1.5; text-wrap: pretty; }
.about__text p + p { margin-top: 14px; }
.about__sub { margin-top: 28px; padding-bottom: 10px; border-bottom: 2px solid var(--rule); font: 600 14px/1.4 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; }
.pubs li { padding: 12px 0; border-bottom: 1px solid var(--hair); text-wrap: pretty; }
.pubs b { font: 600 1em/1.4 var(--sans); }
@media (min-width: 700px) {
  .about__grid { grid-template-columns: 260px minmax(0, 1fr); align-items: start; column-gap: 40px; }
  .about__photo { max-width: none; }
}
@media (min-width: 1024px) {
  .about__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .about__photo { grid-column: 1 / span 4; }
  .about__text { grid-column: 6 / span 6; align-self: center; }
}

/* 7. Отзывы — одна крупная цитата и две обычные */
.reviews__grid { display: grid; gap: 28px; }
.reviews__head p { margin-top: 14px; font-size: 16px; color: var(--muted); }
.reviews__list { display: grid; gap: 32px; }
.quote { padding-top: 18px; border-top: 2px solid var(--rule); }
.quote blockquote p { font-size: 18px; line-height: 1.55; text-wrap: pretty; }
.quote blockquote p::before { content: '«'; }
.quote blockquote p::after { content: '»'; }
.quote--main blockquote p { font-size: clamp(21px, 0.8vw + 18px, 28px); line-height: 1.45; }
.quote figcaption { margin-top: 12px; font: 400 15px/1.4 var(--sans); color: var(--muted); }
.quote figcaption b { font-weight: 600; color: var(--ink); }
@media (min-width: 1024px) {
  .reviews__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .reviews__head { grid-column: 1 / span 4; }
  .reviews__list { grid-column: 5 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 40px; }
  .quote--main { grid-column: 1 / -1; }
}

/* Главная: полосы чередуются фоном вместо линеек, заголовки разделов спокойнее */
.home .section { border-top: 0; }
.home .section h2 { font-size: clamp(26px, 1vw + 20px, 38px); }
.home .faq { background: var(--paper-2); }
.h-head p { max-width: 36em; margin-top: 12px; font-size: 16px; color: var(--muted); text-wrap: pretty; }
.h-more { margin-top: 20px; }
.h-more .more, .h-articles .more { display: inline-flex; align-items: center; min-height: 44px; }
.rev-cards { display: grid; gap: 16px; margin-top: 24px; }
.rev-cards > li { display: flex; }
.rev-card { display: flex; flex: 1; flex-direction: column; justify-content: space-between; padding: 22px 22px 18px; background: var(--card); }
.rev-card blockquote p { font-size: 17px; line-height: 1.55; text-wrap: pretty; }
.rev-card blockquote p::before { content: '«'; }
.rev-card blockquote p::after { content: '»'; }
.rev-card figcaption { margin-top: 14px; font: 400 15px/1.4 var(--sans); color: var(--muted); }
.rev-card figcaption b { font-weight: 600; color: var(--ink); }
@media (min-width: 900px) { .rev-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); } }
@media (min-width: 1024px) { .home .section__head, .h-head { display: block; } }

/* 8. Частые вопросы — раскрывающиеся ответы (работают и без JavaScript) */
.faq__grid { display: grid; gap: 24px; }
.faq__list { border-top: 2px solid var(--rule); }
.faq__list details { border-bottom: 1px solid var(--hair); }
.faq__list summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 0; font: 600 18px/1.35 var(--sans); cursor: pointer; list-style: none; }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after { content: '+'; flex-shrink: 0; font: 400 28px/1 var(--sans); }
.faq__list details[open] summary::after { content: '−'; }
.faq__list details p { max-width: 40em; padding-bottom: 18px; }
@media (min-width: 1024px) {
  .faq__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .faq__grid h2 { grid-column: 1 / span 4; }
  .faq__list { grid-column: 5 / -1; }
}

/* 9. Контакты и обращение — единственная тёмная полоса */
.contact { border-top-color: var(--ink); background: var(--ink); color: var(--on-dark); }
.contact :focus-visible { outline-color: var(--on-dark); }
.contact a:hover { color: var(--on-dark); }
.contact__grid { display: grid; gap: 32px; }
.contact__info > p { max-width: 30em; margin-top: 14px; color: var(--on-dark-muted); }
.contact__list { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 4px 20px; margin-top: 24px; }
.contact__list dt { font: 600 14px/1.4 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-muted); }
.contact__list dd { font: 500 18px/1.4 var(--sans); }
.contact__list a { display: inline-flex; align-items: center; min-height: 44px; }
.contact__list .contact__phone { font: 700 clamp(24px, 1.2vw + 18px, 32px)/1.2 var(--sans); letter-spacing: -0.01em; }
.form-card { padding: 24px 20px; background: var(--card); color: var(--ink); }
.form-card :focus-visible { outline-color: var(--ink); }
.form-card a:hover { color: var(--accent); }
.demo-note { padding: 10px 12px; border-left: 3px solid var(--ink); background: var(--paper-2); font: 500 15px/1.45 var(--sans); }
.form-card h3 { margin-top: 18px; font: 700 24px/1.2 var(--sans); }
.form-card__lead { margin-top: 6px; color: var(--muted); }
.form-card__note { margin-top: 10px; color: var(--muted); font: 400 13px/1.45 var(--sans); }
.form-captcha:empty { display: none; }
.field { display: grid; gap: 6px; margin-top: 16px; font: 600 15px/1.3 var(--sans); }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid var(--field); border-radius: 0; background: var(--field-bg); color: var(--ink); font: 400 17px/1.4 var(--sans); }
.field textarea { resize: vertical; }
.field__req, .field__opt { font-weight: 400; color: var(--muted); }
.field [aria-invalid="true"], .check input[aria-invalid="true"] { border-color: var(--error); outline: 2px solid var(--error); outline-offset: 1px; }
.error { display: block; margin-top: 6px; font: 500 14px/1.35 var(--sans); color: var(--error); }
.error:empty { display: none; }
.check { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 44px; margin-top: 14px; font: 400 15px/1.45 var(--sans); cursor: pointer; }
.check input { width: 24px; height: 24px; margin: 0; accent-color: var(--ink); }
.form-card__submit { width: 100%; margin-top: 20px; }
.form-done:focus { outline: none; } /* фокус переносится сюда для экранного диктора, это не элемент управления */
.form-done h3 { margin-top: 18px; }
.form-done p { margin: 8px 0 18px; color: var(--muted); }
@media (min-width: 1024px) {
  .contact__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .contact__info { grid-column: 1 / span 5; }
  .form-card { grid-column: 7 / -1; padding: 32px 36px; }
}

/* Подвал */
.footer { padding: 28px 0 40px; font: 400 15px/1.6 var(--sans); }
.footer__grid { display: grid; gap: 10px; }
.footer__nav, .footer__pages { display: flex; flex-wrap: wrap; align-items: center; column-gap: 20px; }
.footer__nav a, .footer__pages a, .footer__links a { display: inline-flex; align-items: center; min-height: 44px; }
.footer__label { color: var(--muted); }
.footer__proto { font-size: 14px; color: var(--muted); }

.toast { position: fixed; bottom: 20px; left: 50%; z-index: 60; max-width: calc(100% - 32px); padding: 12px 18px; background: var(--ink); color: var(--paper); font: 500 15px/1.4 var(--sans); transform: translateX(-50%); }

/* ===================== Расширение для всего сайта ===================== */

/* Меню на телефоне: не выходит за высоту окна */
.menu { max-height: calc(100dvh - 62px); overflow-y: auto; overscroll-behavior: contain; }
/* Зазор под подписью группы: иначе рамка фокуса первого пункта наезжает на подпись («Направления») */
.menu__label { margin-top: 14px; margin-bottom: 8px; font: 600 14px/1.4 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }

/* Хлебные крошки */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; padding-top: 14px; padding-bottom: 0; list-style: none; font: 400 14px/1.4 var(--sans); color: var(--muted); }
.crumbs li { display: inline-flex; align-items: center; min-height: 44px; }
.crumbs li + li::before { content: '/'; margin: 0 8px; color: var(--hair); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); }
.crumbs [aria-current] { color: var(--ink); }
/* На телефоне вместо цепочки, которая переносится с «/» в начале строки, — одна ссылка на родительский раздел
   («← Статьи»); текущая страница и так в заголовке, полная цепочка остаётся в разметке и JSON-LD */
@media (max-width: 699px) {
  .crumbs li { display: none; }
  .crumbs li:nth-last-child(2), .crumbs li:only-child { display: inline-flex; }
  .crumbs li:nth-last-child(2)::before { content: '←'; content: '←' / ''; margin: 0 8px 0 0; color: var(--muted); }
}

/* Заголовок внутренних страниц */
.page-head { padding: 28px 0 40px; }
.page-head h1 { max-width: 22em; }
.page-head .lead { margin-top: 16px; }
.page-head .actions { margin-top: 24px; }
.kicker { margin-bottom: 10px; font: 600 14px/1.4 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.kicker a { color: var(--muted); }
@media (min-width: 1024px) { .page-head { padding: 40px 0 56px; } }

.two-col { display: grid; gap: 20px; }
@media (min-width: 1024px) { .two-col { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); } .two-col > :first-child { grid-column: 1 / span 4; } .two-col > :last-child { grid-column: 6 / -1; } }
.muted { margin-top: 10px; color: var(--muted); font-size: 16px; }
.more { font: 600 16px/1.4 var(--sans); }
.section__more { margin-top: 24px; }
.empty { margin-top: 24px; padding: 18px 20px; border-left: 3px solid var(--ink); background: var(--card); color: var(--muted); }
.h-link { display: inline-block; padding: 6px 0; text-decoration-thickness: 1px; text-underline-offset: 6px; }

/* Карточки услуг */
.service-cards { display: grid; gap: 16px; margin-top: 24px; }
.service-card { display: grid; gap: 8px; height: 100%; padding: 22px 22px 24px; border-top: 2px solid var(--rule); background: var(--card); text-decoration: none; }
.service-card__title { font: 700 22px/1.2 var(--sans); letter-spacing: -0.01em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.service-card__text { color: var(--muted); font-size: 16px; }
.service-card:hover .service-card__title { color: var(--accent); }
@media (min-width: 700px) { .service-cards { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }

/* Правила со ссылкой на норму */
.rules { display: grid; gap: 0; border-top: 2px solid var(--rule); }
.rule { padding: 14px 0; border-bottom: 1px solid var(--hair); }
.rule dt { font-weight: 400; }
.rule dd { display: flex; flex-wrap: wrap; gap: 0 14px; margin: 2px 0 -8px; font: 600 14px/1.4 var(--sans); color: var(--muted); }
.rule dd a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); }
.rule dd a:hover { color: var(--ink); }

/* Карточки статей */
.cards { display: grid; gap: 20px; margin-top: 24px; }
.card { border-top: 2px solid var(--rule); }
.card__link { display: grid; gap: 8px; padding: 14px 0 6px; text-decoration: none; }
.card__img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--paper-2); }
.card__rubric { font: 600 14px/1.4 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.card__title { font: 700 20px/1.25 var(--sans); letter-spacing: -0.01em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-wrap: balance; }
.card__text { color: var(--muted); font-size: 16px; text-wrap: pretty; }
.card__link:hover .card__title { color: var(--accent); }
@media (min-width: 700px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Рубрики */
.rubrics { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 22px; font: 600 16px/1.3 var(--sans); }
.rubrics a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.rubrics a[aria-current="page"] { text-decoration-thickness: 3px; color: var(--ink); }

/* Цены — отдельная страница и ссылка «Все цены» */
.price__all { margin-top: 16px; font: 600 16px/1.4 var(--sans); }
.contact-big { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 4px 20px; margin-top: 28px; }
.contact-big dt { font: 600 14px/1.4 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.contact-big dd { margin: 0; font: 700 clamp(22px, 1vw + 18px, 30px)/1.25 var(--sans); }
.contact-big a { display: inline-flex; min-height: 44px; align-items: center; }

/* Полоса записи */
.cta-band { border-top: 2px solid var(--rule); background: var(--paper-2); }
.cta-band__row { display: grid; gap: 16px; padding-top: 32px; padding-bottom: 36px; }
.cta-band__text { font: 700 clamp(22px, 1vw + 18px, 30px)/1.2 var(--sans); letter-spacing: -0.02em; }
@media (min-width: 1024px) { .cta-band__row { grid-template-columns: 1fr auto; align-items: center; gap: 40px; } }

/* Форма: ловушка для ботов и статус отправки */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: 14px; padding: 10px 12px; border-left: 3px solid var(--ink); background: var(--paper-2); font: 500 15px/1.45 var(--sans); }
.form-status[data-kind="error"] { border-left-color: var(--error); }

/* Подвал */
.footer { padding: 36px 0 28px; border-top: 2px solid var(--rule); background: var(--paper); font: 400 15px/1.6 var(--sans); }
.footer__grid { display: grid; gap: 20px; }
.footer__name { font: 700 15px/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
.footer__h { margin: 14px 0 4px; font: 600 14px/1.4 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.footer__col .footer__h:first-child { margin-top: 0; }
.footer ul { list-style: none; }
.footer a { display: inline-flex; align-items: center; min-height: 44px; }
.footer__more { border-top: 1px solid var(--hair); }
.footer__group { border-bottom: 1px solid var(--hair); }
.footer__group ul { padding-bottom: 8px; }
/* Кнопка-раскрыватель (только на узком экране и только со скриптом) */
.footer__group .footer__h:has(.footer__toggle) { margin: 0; }
.footer__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-align: left; cursor: pointer; }
.footer__toggle::after { content: '+'; content: '+' / ''; font: 400 24px/1 var(--sans); letter-spacing: 0; color: var(--ink); }
.footer__toggle[aria-expanded="true"]::after { content: '−'; content: '−' / ''; }
.footer__bottom { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--hair); font-size: 14px; color: var(--muted); }
.footer__bottom p + p { margin-top: 8px; }
.footer__policy a { color: var(--ink); }
.footer__cookie { display: inline-flex; align-items: center; min-height: 44px; margin-left: 16px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.footer__cookie:hover { color: var(--accent); }

/* Согласие на cookie Яндекс Метрики (site.js). Не модальное: страница работает и без выбора. Внизу слева, чтобы не
   закрывать кнопку чата в правом углу; на телефоне справа оставлено место под неё. */
.cookie-bar { position: fixed; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 41;
  width: min(400px, calc(100vw - 32px)); padding: 14px 16px; border: 2px solid var(--ink); background: var(--card);
  box-shadow: var(--shadow-float); font: 400 15px/1.45 var(--sans); color: var(--ink); }
.cookie-bar p { margin: 0 0 10px; }
/* Пока баннер открыт, фокус с клавиатуры и переходы по якорям не уходят под него (WCAG 2.4.11) */
html.cookie-open { scroll-padding-bottom: 200px; }
/* …и низ страницы (подвал) можно прокрутить выше баннера */
html.cookie-open body { padding-bottom: 200px; }
.cookie-bar a { color: var(--ink); }
.cookie-bar__actions { display: flex; gap: 8px; }
.cookie-bar__actions .btn { flex: 1; min-height: 44px; padding: 0 12px; font-size: 15px; }
@media (max-width: 699px) {
  .cookie-bar { left: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: auto; right: 84px; padding: 12px; font-size: 14px; }
}
@media (min-width: 700px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
  .footer__more { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); border: 0; }
  .footer__group { border: 0; }
}
@media (min-width: 1024px) {
  .footer__grid { grid-template-columns: 3fr 3fr 6fr; }
  .footer__more { grid-column: auto; }
  .footer__group .footer__h { margin-top: 0; }
}

/* ===================== Статья ===================== */
.article__head { padding-top: 24px; padding-bottom: 20px; }
.article__head h1 { max-width: 22em; font-size: clamp(30px, 2.2vw + 20px, 50px); }
.article__meta { margin-top: 14px; font: 400 15px/1.45 var(--sans); color: var(--muted); }
.article__cover { margin: 8px 0 28px; }
.article__cover img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--paper-2); }
.article__cover figcaption { margin-top: 6px; font: 400 14px/1.4 var(--sans); color: var(--muted); }
.article__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.toc { padding: 16px 18px; border-top: 2px solid var(--rule); background: var(--card); font: 500 15px/1.45 var(--sans); }
.toc__title { margin-bottom: 6px; font: 600 14px/1.4 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.toc ol { padding-left: 20px; list-style: decimal; }
.toc a { display: inline-block; padding: 12px 0; }
/* Телефон и планшет: оглавление свёрнуто и стоит сразу после короткого ответа; на компьютере — сбоку */
.toc--inline { padding: 0 18px; }
.toc--inline summary { display: flex; align-items: center; min-height: 48px; cursor: pointer; font: 600 14px/1.4 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.toc--inline[open] { padding-bottom: 10px; }
.article__aside { display: none; }
@media (min-width: 1024px) {
  .toc--inline { display: none; }
  .article__aside { display: block; }
  .article__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .article__aside { grid-column: 1 / span 3; }
  .article__aside .toc { position: sticky; top: 96px; }
  .prose { grid-column: 4 / span 8; }
  .article__grid > .prose:first-child { grid-column: 3 / span 8; }
}

.prose { min-width: 0; max-width: min(44em, 100%); overflow-wrap: break-word; }
.prose > * + * { margin-top: 16px; }
.prose h2 { margin-top: 44px; padding-top: 14px; border-top: 2px solid var(--rule); font-size: clamp(24px, 1vw + 19px, 32px); }
.prose h3 { margin-top: 28px; font: 600 20px/1.3 var(--sans); }
.prose ul, .prose ol { padding-left: 24px; }
.prose ul { list-style: square; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 8px; }
.prose li::marker { color: var(--muted); }
.prose strong { font-weight: 700; }
.prose .ref { font-size: 14px; line-height: 1; vertical-align: 0.3em; }
.prose .ref a { padding: 0 3px; font: 600 14px/1 var(--sans); text-decoration: none; }
.answer { padding: 18px 20px; border: 2px solid var(--ink); background: var(--card); font-size: clamp(18px, 0.3vw + 17px, 20px); line-height: 1.55; }
.callout { padding: 14px 18px; border-left: 3px solid var(--ink); background: var(--paper-2); }
.callout--example { border-left-color: var(--muted); }
.table-wrap { max-width: 100%; overflow-x: auto; }
.md-table { width: 100%; border-collapse: collapse; font: 400 16px/1.45 var(--sans); }
.md-table th, .md-table td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--hair); text-align: left; vertical-align: top; }
.md-table thead th { border-bottom: 2px solid var(--rule); font-weight: 600; }
.md-table tbody th { font-weight: 600; }
.prose .sources { padding-left: 24px; font: 400 15px/1.5 var(--sans); }
/* Адрес вместо названия источника (433 px без пробелов) делал новость шире экрана на телефоне — переносится где угодно */
.prose .sources a { overflow-wrap: anywhere; }
.prose .sources li { padding-left: 4px; }
.prose .sources li:target { background: var(--paper-2); }
.article__service { margin-top: 40px; }
.article__service-box { padding: 24px 22px 26px; border-top: 2px solid var(--rule); background: var(--paper-2); }
.article__service-title { font: 700 clamp(22px, 1vw + 18px, 28px)/1.2 var(--sans); }
.article__service-box > p + p { margin-top: 8px; }
.article__service-box .btn { margin-top: 16px; }
/* На 320 px кнопке «Бесплатная консультация» (244 px) не хватало 8 px — поля плашки чуть уже, подпись в одну строку */
@media (max-width: 359px) { .article__service-box { padding-inline: 16px; } }
.article__related { margin-top: 32px; }
.draft-banner { padding: 10px 16px; background: var(--error); color: var(--on-accent); font: 600 15px/1.4 var(--sans); text-align: center; }
@media (min-width: 1024px) { .article__service-box { max-width: 860px; margin-left: calc((100% - 0px) * 0); padding: 32px 36px; } }

/* ===================== Инфографика ===================== */
.ig { margin: 28px 0; padding: 20px 18px 22px; border-top: 3px solid var(--rule); background: var(--card); font-family: var(--sans); }
.ig__title { display: grid; gap: 4px; margin-bottom: 16px; font: 700 19px/1.3 var(--sans); }
.ig__kind { font: 600 14px/1.4 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ig__note { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--hair); font: 400 14px/1.5 var(--sans); color: var(--muted); }
.ig__small { margin-top: 4px; font: 400 14px/1.45 var(--sans); color: var(--muted); }
.ig p { margin: 0; }
.ig__icon, .ig__arrow { flex-shrink: 0; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ig__steps { display: grid; gap: 0; padding: 0; list-style: none; }
.ig__steps > li { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 12px 0 14px; border-bottom: 1px solid var(--hair); }
.ig__steps > li:last-child { border-bottom: 0; }
.ig__n { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 2px solid var(--ink); font: 700 16px/1 var(--sans); font-variant-numeric: tabular-nums; }
.ig__steps b, .ig__timeline b { display: block; font-size: 17px; line-height: 1.35; }
.ig__steps p:not(.ig__small), .ig__timeline p:not(.ig__small):not(.ig__when) { margin-top: 4px; font-size: 16px; line-height: 1.5; color: var(--ink); }
.ig__groups { display: grid; gap: 14px; }
.ig__gtitle { margin-bottom: 6px; font: 600 15px/1.4 var(--sans); }
.ig__checks { display: grid; gap: 8px; padding: 0; list-style: none; }
.ig__checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.45; }
.ig__table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.ig__table th, .ig__table td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--hair); text-align: left; vertical-align: top; }
.ig__table thead th { border-bottom: 2px solid var(--rule); font-weight: 700; }
.ig__table tbody th { font-weight: 600; color: var(--muted); }
@media (max-width: 599px) {
  .ig__table, .ig__table tbody, .ig__table tr, .ig__table th, .ig__table td { display: block; width: 100%; }
  .ig__table thead { display: none; } /* подписи столбцов переходят в ячейки (td::before) */
  .ig__table tbody tr { padding: 12px 0 10px; border-bottom: 1px solid var(--hair); }
  .ig__table tbody tr:last-child { border-bottom: 0; }
  .ig__table tbody th { padding: 0 0 4px; border: 0; color: var(--ink); font-weight: 700; }
  .ig__table td { padding: 6px 0 0; border: 0; }
  .ig__table td::before { content: attr(data-label); display: block; font: 600 14px/1.4 var(--sans); color: var(--muted); }
}
.ig__tree { font-size: 16px; line-height: 1.45; }
.ig__question { padding: 10px 12px; border: 2px solid var(--ink); font-weight: 600; }
.ig__branches { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 10px 0 0 10px; padding: 0 0 0 12px; border-left: 2px solid var(--hair); list-style: none; }
.ig__branches > li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }
.ig__result > span, .ig__question { min-width: 0; overflow-wrap: break-word; }
.ig__tag { display: inline-flex; width: fit-content; padding: 2px 8px; font: 700 14px/1.4 var(--sans); letter-spacing: 0.04em; text-transform: uppercase; }
.ig__tag--yes { background: var(--ink); color: var(--paper); }
.ig__tag--no { border: 1px solid var(--ink); }
.ig__result { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; background: var(--paper-2); }
.ig__sides { display: grid; gap: 14px; }
.ig__side { padding: 14px; border: 1px solid var(--hair); }
.ig__who { margin-bottom: 8px; font: 700 16px/1.35 var(--sans); }
.ig__timeline { display: grid; gap: 0; padding: 0; list-style: none; }
.ig__timeline > li { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.ig__timeline > li:last-child { border-bottom: 0; }
.ig__when { font: 700 16px/1.35 var(--sans); }
@media (max-width: 559px) { .ig__timeline > li { grid-template-columns: 1fr; gap: 2px; } }
@media (min-width: 700px) {
  .ig { padding: 24px 26px 26px; }
  .ig__sides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ig__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Форма: поля выключены, пока не загрузился скрипт */
.form-fields { min-width: 0; margin: 0; padding: 0; border: 0; }
.form-fields:disabled { opacity: 0.6; }
.form-fallback { margin-top: 14px; padding: 12px 14px; border-left: 3px solid var(--ink); background: var(--paper-2); font: 400 15px/1.5 var(--sans); }