/* ==========================================================================
   KOPYTKO — _layout.css
   Каркас страницы: контейнер, шапка, секции, сетки, футер.
   Перенос из эталона mockups/home-v1.html 1:1 (D29). Отличия — только там,
   где D28 разрешает технический фикс, не меняющий ни пикселя облика:
     • бареметровые селекторы header/footer заменены на .site-header/.site-footer
       (в теме есть <header> карточек и <footer> статьи — бареметр их бы задел);
     • .nav .btn получает min-height 44px площадью нажатия (A3 §6.8).
   ========================================================================== */

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

/* --------------------------------------------------------------------------
   Шапка (эталон, строки 42–49, 58; navigation-linking-map.md §2.3)
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(242, 238, 230, .82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}

.brand {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: .02em;
}

.brand small {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-top: 2px;
}

.menu {
  display: flex;
  gap: 30px;
  font-size: 14.5px;
  font-weight: 500;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu a {
  position: relative;
  padding: 4px 0;
  color: var(--graphite);
}

.menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1.5px;
  background: var(--brass);
  transition: width .25s ease;
}

.menu a:hover::after { width: 100%; }

/* Зона нажатия пункта меню доводится до ≥44px псевдоэлементом,
   визуальная высота строки не меняется (A3 §6.8). */
.menu a::before {
  content: "";
  position: absolute;
  inset: -11px -8px;
  z-index: 0;
}

/* --------------------------------------------------------------------------
   Бургер ≤900px (команда владельца 30.07.2026): кнопка .nav-toggle +
   выпадающая .nav-panel (меню + CTA шапки). На десктопе панель прозрачна
   для flex-раскладки шапки (display: contents), кнопка скрыта — раскладка
   эталонная. Вся мобильная логика — в адаптиве внизу файла.
   -------------------------------------------------------------------------- */
.nav-panel { display: contents; }

.nav-toggle { display: none; }

/* --------------------------------------------------------------------------
   Hero (эталон, строки 61–84)
   -------------------------------------------------------------------------- */
.hero {
  background: var(--green);
  color: var(--paper);
  position: relative;
  overflow: hidden;
  /* Фикс V-1 (аудит 24.07.2026): section{padding:96px 0} давал hero двойной
     верхний отступ 96+96=192px пустоты до контента. Оставляем один отступ —
     96px от .hero-inner (на ≤900px оба эталонных значения 64px, правило
     padding-top:0 работает и там). */
  padding-top: 0;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 85% -10%, rgba(176, 138, 79, .18), transparent 55%);
  pointer-events: none;
}

.hero-inner {
  padding: 96px 0 0;
  position: relative;
}

.hero h1 {
  font-size: clamp(40px, 5.6vw, 76px);
  max-width: 15ch;
  font-weight: 600;
}

/* Фикс V-1: на вьюпортах ≤1400px потолок 76px (5.6vw) разгонял длинный H1
   оффера (D19) в 5 строк по 71.6px — 372px высоты. Дожато по команде владельца
   (24.07.2026): потолок 54px + 19ch → 3 строки. */
@media (max-width: 1400px) {
  .hero h1 { font-size: clamp(30px, 4vw, 50px); max-width: 19ch; }
}

.hero h1 em {
  font-style: italic;
  color: var(--brass-soft);
}

.hero p.lead {
  font-size: clamp(17px, 2.1vw, 21px);
  max-width: 52ch;
  color: rgba(242, 238, 230, .82);
  margin: 26px 0 34px;
}

.hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 70px;
}

.hero .eyebrow { margin-bottom: 22px; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  padding-bottom: 14px;
}

.hero-copy { min-width: 0; }

.hero-figure {
  position: relative;
  padding: 10px;
  border: 1px solid rgba(199, 164, 104, .42);
  border-radius: 8px;
  background: linear-gradient(155deg, rgba(199, 164, 104, .14), rgba(199, 164, 104, 0) 62%);
}

.hero-figure::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(242, 238, 230, .16);
  border-radius: 4px;
  pointer-events: none;
  z-index: 2;
}

.hero-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  /* Фикс 30.07.2026 (прямая команда владельца): фото в рамке ПОЛНОСТЬЮ.
     Ранее стоял max-height: 60vh (фикс V-1 от 24.07 против «двух экранов») —
     он обрезал портрет по подбородок (object-fit: cover при cap < высоты 4:5).
     Фото 960x1200 = ровно 4:5, поэтому без cap'а cover == contain, кропа нет.
     Жертва: на низких окнах hero выходит за 1 экран — принято владельцем. */
  object-fit: cover;
  object-position: center 16%;
  border-radius: 5px;
  box-shadow: 0 34px 70px -28px rgba(0, 0, 0, .65);
}

/* Фикс по команде владельца (26.07.2026): плашка живёт ЗА нижней рамкой
   (.hero-figure обрамляет только фото), по центру — текст лицо не перекрывает. */
.hero-figure-caption {
  display: table;
  margin: 12px auto 0;
  background: rgba(20, 38, 31, .72);
  border: 1px solid rgba(199, 164, 104, .42);
  color: var(--brass-soft);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 3px;
}

/* Answer-абзац hero (page-content-pack.md §2.1). Кегль и цвет — те же, что
   у .lead эталона; собственных значений не вводит. */
.hero-body {
  max-width: 52ch;
  color: rgba(242, 238, 230, .82);
  margin: 0 0 30px;
  font-size: 16.5px;
}

/* Группа CTA в hero занимает место .hero-cta эталона (те же 70px снизу). */
.cta-group--hero { margin-bottom: 70px; }

/* Низкие окна (команда владельца 24.07.2026: «hero на 1 экран при 100%»):
   при высоте ≤720px вертикальный ритм hero ужимается — эталонные 96/70px
   сохраняются только на высоких окнах. Мобильные (≤900px) не трогаем.
   Блок стоит ПОСЛЕ базовых правил hero: медиа не повышает специфичность,
   каскад решает порядок. */
@media (max-height: 720px) and (min-width: 901px) {
  .hero { padding-bottom: 24px; }
  .hero-inner { padding-top: 28px; }
  .hero .eyebrow { margin-bottom: 8px; }
  .hero p.lead { margin: 10px 0 14px; }
  .hero-body { margin-bottom: 12px; }
  .hero-grid { padding-bottom: 0; }
  .cta-group--hero { margin-bottom: 16px; }
}

/* --------------------------------------------------------------------------
   Signature: индекс радикалов (эталон, строки 86–95)
   -------------------------------------------------------------------------- */
.radicals {
  border-top: 1px solid var(--line-on-green);
  margin-top: 8px;
}

.radicals .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.radical {
  flex: 1 1 14%;
  min-width: 120px;
  padding: 20px 16px 22px;
  border-right: 1px solid var(--line-on-green);
  position: relative;
  transition: background .25s;
}

.radical:last-child { border-right: 0; }
.radical:hover { background: rgba(242, 238, 230, .05); }

.radical .num {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--brass-soft);
  font-weight: 600;
}

.radical .name {
  font-family: var(--serif);
  font-size: 19px;
  margin-top: 8px;
  font-weight: 500;
}

/* ФИКС A3 §6.3: подпись 12,5px на тёмном — .6 → .78 (4,92 → 7,15 : 1). */
.radical .tag {
  font-size: 12.5px;
  color: rgba(242, 238, 230, .78);
  margin-top: 4px;
}

/* ФИКС A3 §6.3 (23): .55 → .72 (4,39 → 6,39 : 1). */
.radicals-cap {
  padding: 16px 0 0;
  font-size: 12.5px;
  letter-spacing: .04em;
  color: rgba(242, 238, 230, .72);
}

.radicals-wrapouter { padding-bottom: 34px; }

/* Фикс по команде владельца (26.07.2026): индекс радикалов вынесен из
   section.hero в отдельный блок — на hero-экране не маячит. Зелень и бумага
   раньше давал .hero; базовый section{padding:96px 0} здесь не нужен —
   ритм полосы задают .radicals (margin-top:8px) и .radicals-wrapouter. */
.radicals-band {
  background: var(--green);
  color: var(--paper);
  padding: 0;
  /* margin-top:8px у .radicals схлопывался сквозь секцию и показывал
     белый фон body между hero и полосой — запираем margins внутри. */
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Proof-rail (page-content-pack.md §1.8 / §2.2).
   Геометрия повторяет .radicals эталона: та же зелень, та же волосяная
   разлиновка, тот же ритм ячеек. Ни одного нового цвета (D29).
   Цвет подписи .pl задан в _components.css (фикс A3 §6.3).
   -------------------------------------------------------------------------- */
.proof {
  background: var(--green);
  color: var(--paper);
  border-top: 1px solid var(--line-on-green);
  padding: 0;
}

.proof ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.proof li {
  flex: 1 1 18%;
  min-width: 150px;
  padding: 22px 18px 24px;
  border-right: 1px solid var(--line-on-green);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}

.proof li:last-child { border-right: 0; }

.proof .pv {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--brass-soft);
}

.proof .pl {
  font-size: 12.5px;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Секции и их шапки (эталон, строки 98–102)
   -------------------------------------------------------------------------- */
section { padding: 96px 0; }

.sec-head {
  max-width: 56ch;
  margin-bottom: 48px;
}

.sec-head h2 { font-size: clamp(30px, 4.4vw, 50px); }

.sec-head p {
  color: var(--muted);
  font-size: 18px;
  margin: 18px 0 0;
}

.sec-head .eyebrow { margin-bottom: 16px; }

/* Целевые секции якорей: sticky-шапка не должна перекрывать заголовок
   (navigation-linking-map.md §4.3). */
[id] { scroll-margin-top: 140px; }

/* Фикс по команде владельца (26.07.2026): переход «Посмотреть направления»
   недокручивал — над секцией висел хвост proof-rail (140px margin), карточки
   с кнопками уходили за сгиб. У #directions свой padding-top 96px, поэтому
   общий margin избыточен: 20px + 96px паддинга держат заголовок под шапкой,
   а кнопки карточек попадают в первый экран. */
#directions { scroll-margin-top: 20px; }

/* --------------------------------------------------------------------------
   Тёмная секция «Система радикалов» (эталон, строки 116–126)
   -------------------------------------------------------------------------- */
.system {
  background: var(--green-deep);
  color: var(--paper);
}

.system .sec-head p { color: rgba(242, 238, 230, .72); }

.sys-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-on-green);
  border: 1px solid var(--line-on-green);
}

.sys-cell {
  background: var(--green-deep);
  padding: 26px 22px;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: background .25s;
}

.sys-cell:hover { background: #182c24; }

.sys-cell .n {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--brass-soft);
  font-weight: 600;
}

.sys-cell h3 {
  font-size: 24px;
  font-weight: 500;
}

/* ФИКС A3 §6.3: .6 → .78 (5,79 → 8,81 : 1). */
.sys-cell p {
  font-size: 13.5px;
  color: rgba(242, 238, 230, .78);
  margin: 8px 0 0;
}

.sys-cell.more {
  background: var(--brass);
  color: #1a140a;
  justify-content: center;
}

.sys-cell.more h3 { color: #1a140a; }

.sys-cell.more span {
  font-size: 14px;
  font-weight: 600;
  margin-top: 8px;
}

/* Латунная ячейка-CTA. Кнопка встаёт на место <span> эталона; на латуни
   у выключенной кнопки возвращается тёмная надпись базового правила
   .btn.is-disabled — те же значения, что уже есть в _components.css. */
.system .sys-cell.more .btn.is-disabled {
  color: rgba(26, 20, 10, .62);
  border-color: transparent;
  margin-top: 8px;
  padding-left: 0;
}

/* Атрибуция метода (§1.7): латунная вертикаль слева.
   Цвет текста — в _components.css (фикс A3 §6.3). */
.method-attr {
  border-left: 2px solid var(--brass);
  padding-left: 20px;
  margin: 0 0 40px;
  max-width: 62ch;
  font-size: 14.5px;
  line-height: 1.55;
}

/* Подпись под сеткой радикалов стоит на тёмном — отступ сверху вместо
   стандартного padding: 16px 0 0 у версии под hero. */
.system .radicals-cap { padding-top: 24px; }
.system .radicals-cap a { border-bottom: 1px solid var(--brass); }

/* --------------------------------------------------------------------------
   Тизер «Об эксперте» (эталон, строки 129–143)
   -------------------------------------------------------------------------- */
.about {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: center;
}

.portrait {
  aspect-ratio: 4 / 5;
  background: var(--paper-2);
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(176, 138, 79, .5);
  box-shadow: 0 26px 54px -30px rgba(20, 38, 31, .55);
}

.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
}

.portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(242, 238, 230, .22);
}

.about h2 { font-size: clamp(28px, 4vw, 44px); }

.about p {
  color: var(--muted);
  margin: 20px 0;
}

/* --------------------------------------------------------------------------
   Цитата с фоном под зелёной вуалью (эталон, строки 146–156)
   -------------------------------------------------------------------------- */
.quote {
  background: var(--green-deep);
  color: var(--paper);
  text-align: left;
  position: relative;
  overflow: hidden;
  min-height: clamp(380px, 46vh, 540px);
  display: flex;
  align-items: center;
}

.quote .quote-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  z-index: 0;
}

.quote .quote-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(20, 38, 31, .97) 0%, rgba(20, 38, 31, .9) 32%, rgba(20, 38, 31, .62) 62%, rgba(27, 58, 50, .34) 100%),
    linear-gradient(180deg, rgba(20, 38, 31, .4), rgba(20, 38, 31, .62));
}

.quote .wrap {
  position: relative;
  z-index: 2;
  width: 100%;
}

.quote blockquote {
  font-family: var(--serif);
  font-size: clamp(26px, 4.2vw, 46px);
  line-height: 1.18;
  max-width: 24ch;
  margin: 0;
  font-weight: 500;
  padding-left: 26px;
  border-left: 2px solid var(--brass);
}

.quote blockquote em {
  font-style: italic;
  color: var(--brass-soft);
}

/* Автор цитаты — <cite> вместо <div class="who"> (A3 §6.7),
   вид сохранён полностью. */
.quote .who {
  display: block;
  margin-top: 26px;
  padding-left: 26px;
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-style: normal;
  color: rgba(242, 238, 230, .72);
}

/* --------------------------------------------------------------------------
   Полоса корпоративного обучения (§2.7). Фон — --paper-2 эталона.
   ⛔ Растровые логотипы: прав на знаки нет, только текст.
   Цвет .logos li задан в _components.css (фикс A3 §6.3).
   -------------------------------------------------------------------------- */
.clients {
  background: var(--paper-2);
  padding: 56px 0;
}

.clients h2 {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass);          /* 2,75 : 1 — принято владельцем, D30 */
  font-weight: 600;
  line-height: 1.4;
}

.clients p {
  color: var(--muted);
  font-size: 15.5px;
  margin: 14px 0 22px;
  max-width: 56ch;
}

.logos {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 34px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Стрелка-указатель ссылок «дальше по разделу» (эталон, .card .arrow).
   Символ печатается псевдоэлементом; его гарнитура задана в _components.css.
   -------------------------------------------------------------------------- */
.arrow::after { content: "\2192"; }

.champ-badge {
  position: relative;
  margin: 14px 0 0;
  padding-left: 20px;
  font-size: 12.5px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--brass);          /* 2,75 : 1 — принято владельцем, D30 */
}

.champ-badge::before {
  content: "\2605";
  position: absolute;
  left: 0;
  top: 0;
}

/* --------------------------------------------------------------------------
   Финальный CTA (эталон, строки 166–168)
   -------------------------------------------------------------------------- */
.final {
  background: var(--green-deep);
  color: var(--paper);
  text-align: center;
}

.final .eyebrow { margin-bottom: 16px; }

.final h2 {
  font-size: clamp(30px, 5vw, 56px);
  max-width: 18ch;
  margin: 0 auto;
}

.final p {
  color: rgba(242, 238, 230, .75);
  max-width: 46ch;
  margin: 22px auto 34px;
  font-size: 18px;
}

/* --------------------------------------------------------------------------
   Футер (эталон, строки 171–178; navigation-linking-map.md §5)
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: rgba(242, 238, 230, .7);
  padding: 56px 0 40px;
  font-size: 14.5px;
}

.foot {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.foot .brand { color: var(--paper); }

.foot a { color: rgba(242, 238, 230, .7); }
.foot a:hover { color: var(--brass-soft); }

.foot-col h4 {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass-soft);
  margin: 0 0 14px;
  font-weight: 600;
  font-family: var(--sans);
}

.foot-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.foot-col div,
.foot-col li { padding: 5px 0; }

/* Ссылки футера — площадь нажатия до 44px, кегль не меняется (A3 §6.8). */
.foot-col a {
  display: inline-block;
  padding: 6px 0;
  min-height: 44px;
  line-height: 32px;
}

/* Фикс 30.07.2026: живая CTA-кнопка — это <a class="btn">, правило выше
   (0-1-1) перебивало .btn{padding:12px 22px} (0-1-0) и сплющивало её рядом
   с disabled-<button>. Возвращаем кнопке её геометрию. */
.foot-col a.btn {
  padding: 12px 22px;
  line-height: normal;
}

.foot-brand-note {
  margin-top: 10px;
  max-width: 34ch;
  color: rgba(242, 238, 230, .6);
}

.foot-note {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: rgba(242, 238, 230, .72);
}

/* ФИКС A3 §6.3 (31): .50 → .72 (4,48 → 7,70 : 1). */
.foot-bottom {
  border-top: 1px solid rgba(242, 238, 230, .14);
  margin-top: 40px;
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(242, 238, 230, .72);
}

.foot-bottom ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   Адаптив (эталон, строки 189–200)
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* --- Бургер: панель с меню и CTA — выпадайка под шапкой -----------------
     С JS: закрыта (visibility/opacity/transform), открывает .nav-toggle.
     Без JS: кнопка мертва → прячем её, панель статична и видима (ниже). */
  .nav-panel {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - 72px);
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    padding: 6px 24px 20px;
    background: var(--paper); /* сплошной, не blur: читаемость поверх тёмного hero */
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -20px rgba(26, 20, 10, .28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .nav-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .2s ease, transform .2s ease;
  }

  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 -10px 0 0; /* минус-поле: иконка визуально у правого края контента */
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .nav-toggle-lines { display: block; width: 24px; }
  .nav-toggle-lines span {
    display: block;
    height: 2px;
    background: var(--graphite);
    border-radius: 1px;
    transition: transform .2s ease, opacity .2s ease;
  }
  .nav-toggle-lines span + span { margin-top: 5px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-lines span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-lines span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-lines span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Меню в панели: столбец, строка пункта — зона нажатия ≥44px. */
  .menu {
    flex-direction: column;
    gap: 0;
    font-size: 16.5px;
  }
  .menu li { border-top: 1px solid var(--line); }
  .menu li:first-child { border-top: 0; }
  .menu a { display: block; padding: 12px 2px; }
  .menu a::before { inset: 0; }
  .menu .current-menu-item > a { color: var(--brass); }

  .nav-panel .cta-group { margin-top: 16px; }
  .nav-panel .cta-group .btn { width: 100%; }

  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .nav { flex-wrap: wrap; height: auto; padding: 12px 0; }
  html:not(.js) .nav-panel {
    position: static;
    flex: 0 0 100%;
    max-height: none;
    padding: 4px 0 6px;
    border-bottom: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  /* --- /бургер ------------------------------------------------------------ */

  /* .cards, .posts → 1fr: правило живёт в конце _components.css (F2 addendum) —
     там оно идёт после базовых .cards/.posts и побеждает каскад; _components.css
     подключён позже этого файла, отсюда правило проигрывало. */
  .sys-grid { grid-template-columns: repeat(2, 1fr); }
  .about {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  section { padding: 64px 0; }
  .hero-inner { padding: 64px 0 0; }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .hero-figure-wrap {
    max-width: 380px;
    margin: 6px auto 0;
  }
  .quote { min-height: 0; }
  .proof li { flex: 1 1 44%; }
  .clients { padding: 48px 0; }
}

@media (max-width: 560px) {
  .proof li {
    flex: 1 1 100%;
    border-right: 0;
    border-bottom: 1px solid var(--line-on-green);
  }
  .proof li:last-child { border-bottom: 0; }
}

@media (max-width: 620px) {
  .nav { height: 64px; }
}

/* ≤374px: бренд ужимается — «Александр Копытько» 234px @20px + бургер 44px
   не влезают в контент 272px @320; при 17px бренд ≈199px — помещается.
   (До бургер-панели здесь прятался CTA шапки, P1-6: «бренд + кнопка 117px
   не влезали». CTA переехал в .nav-panel ≤900px — правило снято.)
   Здесь же #about-title: «Александр&nbsp;Копытько» — неразрывный блок 313px,
   раздувает min-content трека .about и даёт overflow 17px @320.
   И .title-rail__table на /about/: th-слова неразрывны, min-content 339px
   (overflow 43/19/4 @320/344/359) — разрешаем перенос с расстановкой переносов. */
@media (max-width: 374px) {
  .brand { font-size: 17px; }
  .brand small { font-size: 9px; }
  #about-title { overflow-wrap: anywhere; }
  .title-rail__table th,
  .title-rail__table td { overflow-wrap: anywhere; hyphens: auto; }
}

@media (max-width: 560px) {
  .sys-grid { grid-template-columns: 1fr; }
}