/* BestDPO — стили сайта. Перенос brand/bestdpo.css (эталон 2026-09-03).
   Блок :root вынесен в tokens.css и подключается раньше этого файла.
   Селекторы дополнены :is()-алиасами для классов блочного редактора —
   см. wp/tools/alias-block-styles.py. Правку CSS вести здесь, алиасы прогонять заново. */
/* BestDPO — единый стиль сайта («Dossier · Harvard Navy», утверждён 2026-09-03).
   Источник: concept-a-dossier-harvard-navy.html. Подключение: <link rel="stylesheet" href="/brand/bestdpo.css">
   Шрифты (в продакшене self-host): https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,500;6..72,600&family=Source+Sans+3:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap */

/* =====================================================================
   DESIGN TOKENS  (см. CLAUDE.md → Дизайн-система)
   Один hue = одна функция: бордо — действие, navy — авторитет, чёрный — текст, sage — статус.
   Страница намеренно одно-темная (маркетинговая), все фоны заданы явно.
   ===================================================================== */


*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-500);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--font-display);font-weight:600;line-height:1.1;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}
:is(.on-navy,.is-style-on-navy) :focus-visible{outline-color:var(--on-navy)}
.skip-link{position:absolute;left:16px;top:-100px;background:var(--accent);color:var(--on-accent);padding:10px 16px;border-radius:var(--r-sm);font-weight:600;z-index:100}
.skip-link:focus{top:16px}

.container{width:100%;max-width:var(--container);margin:0 auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
:is(.section--tight,.is-style-section-tight){padding-block:clamp(48px,6vw,88px)}
:is(.section--alt,.is-style-section-alt){background:var(--paper-2);border-block:1px solid var(--line)}
.section-head__title{display:grid;gap:16px}

/* ---------- Заголовочный паттерн секции: eyebrow → h2 → lead ---------- */
:is(.eyebrow,.is-style-eyebrow){
  display:inline-flex;align-items:center;gap:10px;
  font-size:var(--fs-300);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);
}
:is(.eyebrow,.is-style-eyebrow)::before{content:"";width:22px;height:2px;background:currentColor;border-radius:1px}
:is(.on-navy,.is-style-on-navy) :is(.eyebrow,.is-style-eyebrow){color:var(--on-navy-2)}
.section-head{display:grid;gap:16px;max-width:760px;margin-bottom:var(--section-head-gap)}
.section-head h2{font-size:var(--fs-800)}
.section-head :is(.lead,.is-style-lead){font-size:var(--fs-600);line-height:1.5;color:var(--ink-2);max-width:62ch}
:is(.on-navy,.is-style-on-navy) .section-head :is(.lead,.is-style-lead){color:var(--on-navy-2)}
.section-head--split{max-width:none;grid-template-columns:1fr;align-items:end}
@media(min-width:900px){
  .section-head--split{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px}
  .section-head--split :is(.lead,.is-style-lead){margin-bottom:6px}
}

/* ---------- Кнопки: одна система на всю страницу ---------- */
:is(.btn,.wp-block-button__link,.wp-block-read-more){
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:12px 22px;border-radius:var(--r-sm);
  font-family:var(--font-body);font-size:var(--fs-400);font-weight:600;line-height:1.2;
  text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
  white-space:nowrap;
}
:is(.btn,.wp-block-button__link,.wp-block-read-more) svg{width:18px;height:18px;flex:none;transition:transform .2s var(--ease)}
:is(.btn,.wp-block-button__link,.wp-block-read-more):hover svg{transform:translateX(3px)}
:is(.btn--primary,.is-style-primary){background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
:is(.btn--primary,.is-style-primary):hover{background:var(--accent-2);border-color:var(--accent-2);color:#fff}
:is(.on-navy,.is-style-on-navy) :is(.btn--primary,.is-style-primary){border-color:rgba(246,241,231,.35)}
:is(.on-navy,.is-style-on-navy) :is(.btn--primary,.is-style-primary):hover{border-color:rgba(246,241,231,.6)}
:is(.btn--secondary,.is-style-secondary){background:transparent;color:var(--navy);border-color:var(--navy)}
:is(.btn--secondary,.is-style-secondary):hover{background:var(--navy);color:var(--on-navy)}
:is(.on-navy,.is-style-on-navy) :is(.btn--secondary,.is-style-secondary){color:var(--on-navy);border-color:rgba(242,239,232,.55)}
:is(.on-navy,.is-style-on-navy) :is(.btn--secondary,.is-style-secondary):hover{background:var(--on-navy);color:var(--navy);border-color:var(--on-navy)}
:is(.btn--ghost,.is-style-ghost){background:transparent;color:var(--accent);border-color:transparent;padding-inline:0;min-height:auto}
:is(.btn--ghost,.is-style-ghost):hover{color:var(--ink)}
:is(.on-navy,.is-style-on-navy) :is(.btn--ghost,.is-style-ghost){color:var(--on-navy)}
:is(.on-navy,.is-style-on-navy) :is(.btn--ghost,.is-style-ghost):hover{color:var(--on-navy)}
:is(.btn-row,.wp-block-buttons.btn-row){display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center}
.section__cta{margin-top:clamp(32px,4vw,48px)}
.why__head :is(.btn-row,.wp-block-buttons.btn-row){margin-top:8px}
.difference__quote :is(.btn-row,.wp-block-buttons.btn-row){margin-top:12px}

/* ---------- Плейсхолдер-ссылки: тонкая пунктирная пометка, чтобы клиент видел, что это заглушка ---------- */
a[data-placeholder]{position:relative}
a[data-placeholder]:is(.btn,.wp-block-button__link,.wp-block-read-more)::after,
a[data-placeholder].card-link::after{content:none}

:is(.on-navy,.is-style-on-navy){background:var(--navy);color:var(--on-navy)}

/* =====================================================================
   01 · HEADER
   ===================================================================== */
.header{
  position:sticky;top:0;z-index:50;
  background:rgba(246,241,231,.92);
  backdrop-filter:saturate(1.2) blur(10px);
  -webkit-backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--line);
}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);white-space:nowrap}
.brand__mark{font-family:var(--font-display);font-weight:700;font-size:1.5rem;letter-spacing:-.02em;line-height:1}
.brand__mark em{font-style:normal;color:var(--accent)}
/* Подпись «Privacy & AI Governance School» убрана из шапки 18.09 по решению клиента.
   Правила оставлены: если подпись вернут, оформление восстановится само. */
.brand__tag{font-size:var(--fs-300);color:var(--ink-3);letter-spacing:.02em;display:none;white-space:nowrap;padding-top:2px}
@media(min-width:1400px){.brand__tag{display:inline}}
.nav{display:none}
.nav ul{display:flex;gap:4px}
.nav a{display:inline-flex;align-items:center;height:44px;padding:0 10px;border-radius:var(--r-sm);text-decoration:none;font-size:.9rem;font-weight:500;color:var(--ink-2);white-space:nowrap}
.nav a:hover{color:var(--ink);background:var(--paper-2)}
.header__cta{display:none}
.menu-btn{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);cursor:pointer
}
.menu-btn svg{width:22px;height:22px}
.menu-btn .icon-close{display:none}
.menu-btn[aria-expanded="true"] .icon-menu{display:none}
.menu-btn[aria-expanded="true"] .icon-close{display:block}
@media(min-width:1140px){
  .nav{display:block}
  .header__cta{display:inline-flex}
  .menu-btn{display:none}
}
.mobile-nav{
  display:none;border-top:1px solid var(--line);background:var(--surface);
}
.mobile-nav[data-open="true"]{display:block}
.mobile-nav ul{display:grid;padding:8px 0}
.mobile-nav a{display:flex;align-items:center;min-height:48px;padding:0 var(--gutter);text-decoration:none;font-weight:500;color:var(--ink)}
.mobile-nav a:hover{background:var(--paper)}
.mobile-nav :is(.btn,.wp-block-button__link,.wp-block-read-more){margin:8px var(--gutter) 16px}

/* =====================================================================
   02 · HERO
   ===================================================================== */
.hero{
  background:var(--navy);color:var(--on-navy);
  position:relative;overflow:hidden;
}
.hero::before{
  /* тонкая «сетка регистра»: намёк на документ/реестр, без картинок */
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(var(--line-navy) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-navy) 1px,transparent 1px);
  background-size:96px 96px;
  mask-image:radial-gradient(ellipse at 85% 30%,rgba(0,0,0,.55),transparent 65%);
  -webkit-mask-image:radial-gradient(ellipse at 85% 30%,rgba(0,0,0,.55),transparent 65%);
}
.hero__inner{
  position:relative;
  display:grid;gap:48px;
  padding-block:clamp(56px,8vw,112px) clamp(56px,7vw,96px);
}
@media(min-width:960px){
  .hero__inner{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;gap:64px}
}
.hero__copy{display:grid;gap:24px;max-width:640px}
.hero h1{font-size:var(--fs-900);font-weight:600;line-height:1.05;letter-spacing:-.02em;color:#fff}
.hero :is(.lead,.is-style-lead){font-size:var(--fs-600);line-height:1.55;color:var(--on-navy-2);max-width:56ch}
.hero :is(.btn-row,.wp-block-buttons.btn-row){margin-top:8px}

/* Fact sheet — светлая карточка на navy, тот же язык, что у карточек программ ниже */
.facts{
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-md);
  padding:clamp(20px,3vw,28px);
  display:grid;gap:0;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.15);
}
.facts__title{
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:4px;
}
.facts__title :is(span,p):first-child{font-size:var(--fs-300);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.facts__group{padding:16px 0;border-bottom:1px solid var(--line);display:grid;gap:10px}
.facts__group:last-child{border-bottom:0;padding-bottom:4px}
.facts__name{font-family:var(--font-display);font-size:var(--fs-600);color:var(--navy);line-height:1.2}
.facts dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0;font-size:var(--fs-400)}
.facts dt{color:var(--ink-3)}
.facts dd{margin:0;color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600}
:is(.on-navy,.is-style-on-navy) .facts :is(.btn--ghost,.is-style-ghost){color:var(--accent);justify-self:start;font-size:var(--fs-300)}
:is(.on-navy,.is-style-on-navy) .facts :is(.btn--ghost,.is-style-ghost):hover{color:var(--ink)}
:is(.on-navy,.is-style-on-navy) .facts :focus-visible{outline-color:var(--accent)}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:4px 10px;border-radius:var(--r-pill);
  font-size:var(--fs-300);font-weight:600;letter-spacing:.02em;white-space:nowrap;line-height:1.4;
}
.badge::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.badge--open{background:var(--sage-soft);color:var(--sage)}

/* =====================================================================
   03 · WHY NOW  — заголовок слева (sticky), чек-лист компетенций справа
   ===================================================================== */
.why{display:grid;gap:40px}
@media(min-width:960px){
  .why{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}
  .why__head{position:sticky;top:96px}
}
.why__head{display:grid;gap:16px}
.why__head h2{font-size:var(--fs-800)}
.why__head :is(.lead,.is-style-lead){font-size:var(--fs-600);color:var(--ink-2);line-height:1.5;max-width:52ch}
/* аргументы — в одной скруглённой карточке-подложке, внутри плитки в 2 колонки */
.checklist{
  display:grid;gap:8px;
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-md);
  padding:12px;
}
@media(min-width:640px){
  .checklist{grid-template-columns:1fr 1fr}
  .checklist li:last-child{grid-column:1/-1}
}
.checklist li{
  display:flex;gap:14px;align-items:flex-start;
  padding:16px 18px;border-radius:10px;
  background:var(--surface);border:1px solid var(--line);
  font-size:var(--fs-400);line-height:1.5;color:var(--ink);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.checklist li:hover{transform:translateY(-1px);box-shadow:var(--shadow-1)}
.checklist li svg{flex:none;width:22px;height:22px;margin-top:1px;color:var(--accent)}

/* =====================================================================
   04 · HOW YOU LEARN  — три метода, один объект ×3
   ===================================================================== */
.methods{display:grid;gap:20px}
@media(min-width:720px){.methods{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}
.method{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:28px 26px 30px;display:grid;gap:14px;align-content:start;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.method:hover{transform:translateY(-2px);box-shadow:var(--shadow-1)}
.method__icon{
  width:48px;height:48px;border-radius:var(--r-sm);
  background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;
}
.method__icon svg{width:24px;height:24px}
.method h3{font-size:var(--fs-700);font-weight:600}
.method p{color:var(--ink-2);line-height:1.55}

/* =====================================================================
   05 · THE BESTDPO DIFFERENCE  — основатели (тексты со страницы About)
   ===================================================================== */
.founders__eyebrow{margin-bottom:20px}
.founders__title{font-size:var(--fs-700);margin-bottom:28px;max-width:28ch;color:#fff}
.founders{display:grid;gap:20px;margin-top:8px}
@media(min-width:900px){.founders{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
.founder{
  background:var(--navy-2);border:1px solid var(--line-navy);border-radius:var(--r-md);
  padding:clamp(20px,3vw,28px);display:flex;flex-direction:column;gap:16px;
}
/* Ссылка «LinkedIn profile» — на одном уровне во всех карточках ряда (правка клиента 16.09).
   Биографии разной длины разводили ссылки на 200 px по высоте.
   Колонка именно flex, а не grid: в гриде авто-отступ выравнивает элемент внутри его
   собственного ряда, где свободного места нет, и низ карточки так не поймать.
   Отступ ставится на саму ссылку: и .btn-bare, и .wp-block-button объявлены
   display:contents (см. blocks-compat.css), коробки у них нет, и элемент колонки —
   именно <a>. Карточки без ссылки (Julia Prodius) правило не трогает. */
.founder .btn-bare .wp-block-button__link{margin-block-start:auto;align-self:start}
.founder__top{display:flex;gap:18px;align-items:center}
.founder__avatar{
  flex:none;width:72px;height:72px;border-radius:50%;
  background:var(--navy-3);border:1px solid var(--line-navy);
  display:grid;place-items:center;
  overflow:hidden;
  font-family:var(--font-display);font-size:1.4rem;font-weight:600;color:var(--on-navy);letter-spacing:.02em;
}
.founder__avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.founder__role{font-size:var(--fs-300);letter-spacing:.06em;text-transform:uppercase;color:var(--on-navy-2);font-weight:600;margin-bottom:6px}
/* Под должность резервируются две строки — столько занимает самая длинная из
   имеющихся. Иначе должность в одну строку поднимает имя, и имена в соседних
   карточках стоят на разной высоте (правка клиента 16.09).
   Только там, где карточек больше одной: у одиночного эксперта на страницах
   программ выравнивать не с чем, и резерв дал бы пустую строку
   (проверено: European Privacy Foundations вырастала на 21px).
   Запасное значение в em — для браузеров без единицы lh. */
.founders:has(.founder+.founder) .founder__role{min-height:3.2em;min-height:2lh}
.founder h3,.founder h4{font-size:var(--fs-700);color:#fff} /* имя основателя: h4 на главной, h3 на внутренних */
.founder__title{color:var(--on-navy-2);font-size:var(--fs-400);margin-top:4px}
.founder__bio{color:var(--on-navy);line-height:1.6;font-size:var(--fs-400)}
.founder :is(.btn--ghost,.is-style-ghost){justify-self:start}

.difference__bottom{margin-top:clamp(40px,5vw,64px);display:grid;gap:40px}
@media(min-width:900px){
  .difference__bottom{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:start}
  .principles{border-left:1px solid var(--line-navy);padding-left:32px}
}
.principles{display:grid;gap:0}
.principle{
  padding:18px 0;border-bottom:1px solid var(--line-navy);
  display:grid;gap:6px;
}
.principle:first-child{padding-top:0}
.principle:last-child{border-bottom:0;padding-bottom:0}
.principle__label{font-size:var(--fs-300);letter-spacing:.08em;text-transform:uppercase;color:var(--on-navy-2);font-weight:600}
.principle__text{font-family:var(--font-display);font-size:var(--fs-600);color:#fff;line-height:1.3}
.principle__label{margin-top:0}
.difference__quote{display:grid;gap:12px;max-width:640px}
.difference__quote p{font-size:var(--fs-600);line-height:1.5;color:var(--on-navy)}
.difference__quote p+p{color:var(--on-navy-2);font-size:var(--fs-500)}

/* =====================================================================
   06 · WHERE DO YOU WANT TO GO NEXT  — 4 направления
   ===================================================================== */
.paths{display:grid;gap:20px}
@media(min-width:640px){.paths{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
@media(min-width:1100px){.paths{grid-template-columns:repeat(4,minmax(0,1fr))}}
.path{
  position:relative;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:26px 24px 24px;display:grid;gap:12px;align-content:start;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.path:hover{transform:translateY(-2px);box-shadow:var(--shadow-1);border-color:#D8CDBB}
.path :is(.eyebrow,.is-style-eyebrow){font-size:.75rem}
.path :is(.eyebrow,.is-style-eyebrow)::before{width:14px}
.path h3{font-size:var(--fs-600);font-weight:600;line-height:1.25}
.path p{color:var(--ink-2);font-size:var(--fs-400);line-height:1.55;flex:1}
.path :is(.btn--ghost,.is-style-ghost){margin-top:auto;padding-top:8px;justify-self:start}
.card-link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.path>*{min-width:0}
.path :is(.btn--ghost,.is-style-ghost){white-space:normal;text-align:left} /* длинные ghost-лейблы («Request corporate training») не должны вылезать из карточки */

/* =====================================================================
   07 · CURRENT FLAGSHIP PROGRAMMES  — два «досье»
   ===================================================================== */
.programmes{display:grid;gap:24px}
@media(min-width:900px){.programmes{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}}
.programme{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-1);
  display:grid;grid-template-rows:auto 1fr auto;
  overflow:hidden;
}
.programme__head{
  padding:26px 28px 22px;border-bottom:1px solid var(--line);
  display:grid;gap:14px;
}
.programme__head-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.programme__track{font-size:var(--fs-300);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.programme h3{font-size:var(--fs-700);font-weight:600}
.programme__body{padding:22px 28px 26px;display:grid;gap:22px}
.programme__body>p{color:var(--ink-2);line-height:1.6}
.programme dl{
  display:grid;grid-template-columns:auto 1fr;gap:0 24px;margin:0;
  border-top:1px solid var(--line);
}
.programme dt,.programme dd{padding:12px 0;border-bottom:1px solid var(--line);font-size:var(--fs-400)}
.programme dt{color:var(--ink-3)}
.programme dd{margin:0;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
.programme__foot{padding:20px 28px 26px;background:var(--paper);border-top:1px solid var(--line)}
.programme--secondary .programme__foot{background:var(--surface)}
/* Подвал со статусом: кнопка слева, плашка справа по центру её высоты.
   Правка клиента 16.09 для блока Flagship programmes на главной.
   Модификатор, а не голый .programme__foot: на страницах треков, каталога
   и Insights подвал остаётся рядом кнопок и space-between развёл бы их по краям.
   Отступы по краям задаёт padding самого подвала — он одинаков в обеих карточках. */
.programme__foot--status{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;
}
.programme__foot--status>*{margin-block:0}
/* Именно auto-отступ, а не justify-content:space-between: когда карточка узкая
   и плашка переносится на свою строку, space-between прижимает её к левому краю,
   а auto-отступ держит правый край на любой ширине. */
.programme__foot--status>.badge{margin-inline-start:auto}

/* =====================================================================
   ОДИНОЧНАЯ ПРОГРАММА В КАРТОЧКЕ (правка клиента 16.09)
   Разделы Advanced management (privacy-track) и Specialised lab
   (ai-governance-track) были простым текстом на фоне страницы, правая половина
   секции пустовала. Клиент: «оформить в белый, квадратный блок по аналогии
   как оформлен блок Exam preparation, только по левому краю».
   ===================================================================== */

/* Заголовок секции остаётся h2 (иначе у секции пропадает заголовок),
   но в карточке набирается как заголовок карточки — размер тот же, что у h3. */
.programme--standalone .programme__head h2{font-size:var(--fs-700);font-weight:600;line-height:1.2}

/* Вертикальный ритм внутри карточки задаёт сетка .programme__body.
   Страничные правила .prose+.meta и .meta+.status добавляют к нему свои отступы
   и разрывают карточку. Перебить их можно только селектором специфичнее (0,3,1):
   именно столько у их копий в margin-fix.css, а тот подключается последним.
   Отсюда и «:root body», и перечисление классов вместо «*» — :is() берёт
   специфичность самого весомого аргумента, что даёт нужные (0,4,1). */
:root body .programme--standalone .programme__body>:is(.prose,.meta,.status){margin-block:0}

@media(min-width:900px){
  /* Ширина — как у левой колонки раздела Certification support (7 из 12 при gap 48px).
     Карточка прижата влево, строка текста остаётся читаемой. */
  .programme--standalone{max-width:calc((100% - 48px) * 7 / 12);margin-inline-end:auto}
}

/* =====================================================================
   08 · NOT SURE WHERE TO START — финальный CTA
   ===================================================================== */
.cta-final{
  border:1px solid var(--line);background:var(--surface);border-radius:var(--r-md);
  padding:clamp(32px,5vw,56px);
  display:grid;gap:24px;
  box-shadow:var(--shadow-1);
}
@media(min-width:900px){
  .cta-final{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;gap:48px}
  .cta-final :is(.btn-row,.wp-block-buttons.btn-row){justify-content:flex-end}
}
.cta-final h2{font-size:var(--fs-800);margin-top:14px}
.cta-final p{color:var(--ink-2);font-size:var(--fs-600);line-height:1.5;max-width:52ch;margin-top:12px}
.cta-final__meta{font-size:var(--fs-300);color:var(--ink-3);margin-top:12px}
.cta-final__meta a{color:var(--ink-2)}

/* =====================================================================
   09 · FOOTER
   ===================================================================== */
.footer{background:var(--navy-2);color:var(--on-navy-2);padding-block:clamp(48px,6vw,72px) 32px}
.footer__grid{display:grid;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--line-navy)}
@media(min-width:900px){.footer__grid{grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,2fr));gap:48px}}
.footer .brand{color:#fff}
.footer .brand__mark em{color:var(--on-navy-2)}
.footer__about{display:grid;gap:14px;align-content:start;max-width:34ch}
.footer__about p{font-size:var(--fs-400);line-height:1.55}
.footer h3{font-family:var(--font-body);font-size:var(--fs-300);letter-spacing:.08em;text-transform:uppercase;color:var(--on-navy);font-weight:600;margin-bottom:14px}
.footer ul{display:grid;gap:8px}
.footer a{color:var(--on-navy-2);text-decoration:none;font-size:var(--fs-400);display:inline-flex;min-height:28px;align-items:center}
.footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding-top:24px;font-size:var(--fs-300)}
.footer__bottom ul{display:flex;flex-wrap:wrap;gap:6px 20px}
.footer__bottom a{font-size:var(--fs-300)}

/* ---------- Motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .method:hover,.path:hover,.checklist li:hover{transform:none}
}

/* Концепт A · DOSSIER. Язык юридического досье: бумага, чернила, линейки, моно-метки, никаких скруглений.
   Токены цвета/типографики/скруглений уже заданы в основном :root выше — здесь только точечные правки элементов. */
h1,h2,h3,h4{font-weight:500;letter-spacing:-.015em}
:is(.eyebrow,.is-style-eyebrow){font-family:var(--font-mono);font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:var(--fs-eyebrow)}
:is(.eyebrow,.is-style-eyebrow)::before{content:"§";width:auto;height:auto;background:none;border-radius:0;font-family:var(--font-mono);font-size:.9rem;line-height:1}
:is(.btn,.wp-block-button__link,.wp-block-read-more){font-family:var(--font-mono);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;border-width:1px;padding:13px 20px}
:is(.btn--ghost,.is-style-ghost){font-size:.78rem}
.method,.path,.programme,.founder,.facts,.cta-final,.checklist,.checklist li{border-color:var(--line);box-shadow:none}
.method:hover,.path:hover,.checklist li:hover{transform:none;box-shadow:none;border-color:var(--ink)}
.method__icon{border:1px solid var(--line);background:transparent;color:var(--accent)}
.badge{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:5px 9px}
.hero::before{display:none}
.hero{background:var(--paper);color:var(--ink);border-bottom:1px solid var(--ink)}
.hero h1{color:var(--ink)} .hero :is(.lead,.is-style-lead){color:var(--ink-2)}
.hero :is(.btn--secondary,.is-style-secondary){color:var(--ink);border-color:var(--ink)}
.hero :is(.btn--secondary,.is-style-secondary):hover{background:var(--ink);color:var(--paper)}
.hero :is(.btn--primary,.is-style-primary){border-color:var(--accent)}
.hero :is(.eyebrow,.is-style-eyebrow){color:var(--accent)}
.facts{background:var(--surface);border:1px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.facts__title :is(span,p):first-child{font-family:var(--font-mono)}
.facts dt,.programme dt{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.02em;text-transform:uppercase}
.programme{border:1px solid var(--ink);box-shadow:none}
.programme__head,.programme__foot{border-color:var(--ink)}
.programme__foot{background:var(--paper-2)}
.programme__track{font-family:var(--font-mono)}
:is(.section--alt,.is-style-section-alt){background:var(--paper-2);border-color:var(--ink)}
.header{background:rgba(251,250,246,.94);border-bottom:1px solid var(--ink)}
.nav a{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.04em;text-transform:uppercase}
.brand__mark{font-weight:600}
.founder{background:transparent;border:1px solid var(--line-navy)}
.founder__avatar{border-radius:0}
.cta-final{border:1px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.footer{background:var(--navy-2);border-top:1px solid var(--ink)} /* Deep Navy — по брендбуку */
.footer h3{font-family:var(--font-mono);letter-spacing:.06em}

/* ---------- Компоненты этапа правок 2026-09-05 ---------- */
/* Статусная строка над CTA: <p class="status status--open">Status: <b>Applications open</b></p> */
.status{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
/* В карточках каталога строка статуса стоит между телом и подвалом, прямым потомком
   карточки, и боковых отступов у неё нет — текст прилипал к рамке (правка клиента 16.09).
   Даём те же 28px, что у .programme__body и .programme__foot, чтобы статус вставал
   по одной вертикали с описанием и кнопкой. */
.programme>.status{margin-inline:28px}
.status :is(b,strong){font-weight:600;color:var(--ink-2)}
.status--open :is(b,strong){color:var(--sage)}
.status--interest :is(b,strong){color:var(--navy-3)}
.status--soon :is(b,strong){color:var(--ink-3)}
:is(.on-navy,.is-style-on-navy) .status,:is(.on-navy,.is-style-on-navy) .status :is(b,strong){color:var(--on-navy-2)} :is(.on-navy,.is-style-on-navy) .status--open :is(b,strong){color:#9FD1B3}
/* Цена: <p class="price"><span class="price__label">Founding cohort price</span><s>€2,200</s><b>€1,800</b></p><p class="price__note">Special price for the first cohort.</p> */
/* Цены в одной строке с заметным горизонтальным отступом; пояснение — отдельной
   строкой под ними. Интервалы заданы явно, чтобы элементы не наезжали друг на друга
   на промежуточных разрешениях (правка клиента Final_edits_2 § A4). */
.price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;margin:0;line-height:1.3}
.price__label{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);width:100%}
.price s{color:var(--ink-3);font-size:var(--fs-500)}
.price :is(b,strong){font-family:var(--font-display);font-size:var(--fs-700);font-weight:500;color:var(--ink);line-height:1}
.price__note{font-style:italic;color:var(--ink-2);font-size:var(--fs-400);margin:8px 0 0;line-height:1.5}
:is(.on-navy,.is-style-on-navy) .price :is(b,strong){color:#fff} :is(.on-navy,.is-style-on-navy) .price s,:is(.on-navy,.is-style-on-navy) .price__label,:is(.on-navy,.is-style-on-navy) .price__note{color:var(--on-navy-2)}
/* FAQ: <div class="faq"><details><summary>Вопрос</summary><p>Ответ</p></details>…</div> */
.faq{border-top:1px solid var(--line);max-width:80ch}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:18px 0;font-family:var(--font-display);font-size:var(--fs-600);font-weight:500;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-mono);color:var(--accent);flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p,.faq details ul{color:var(--ink-2);padding-bottom:18px;margin:0;line-height:1.6}
.faq details ul{padding-left:20px;list-style:disc}
/* Модальное окно: <dialog class="modal" id="request-programme">…</dialog>; открыть кнопкой [data-modal-open="request-programme"] */
dialog.modal{border:1px solid var(--ink);padding:0;max-width:520px;width:calc(100% - 32px);background:var(--surface);color:var(--ink);box-shadow:8px 8px 0 var(--ink)}
dialog.modal::backdrop{background:rgba(21,24,29,.55)}
.modal__body{padding:28px;margin:0}
.modal__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:8px}
.modal__head h2{font-size:var(--fs-700)}
.modal__close{background:none;border:1px solid var(--line);width:40px;height:40px;cursor:pointer;font-family:var(--font-mono);font-size:1.1rem;color:var(--ink)}
.modal__close:hover{border-color:var(--ink)}
.modal p:is(.lead,.is-style-lead){font-size:var(--fs-400);color:var(--ink-2);margin-bottom:18px}
/* Поля форм (contact и модальное окно) */
.field{display:grid;gap:6px;margin-bottom:16px}
.field label,.field legend{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
/* Рамка поля — единственный признак элемента управления, поэтому контраст не ниже 3:1 (WCAG 2.2 SC 1.4.11);
   var(--line) даёт лишь 1.5:1, поэтому используем чернильный вторичный тон. */
.field input,.field select,.field textarea{font:inherit;font-size:var(--fs-400);padding:12px 14px;border:1px solid var(--ink-3);background:var(--surface);color:var(--ink);width:100%;border-radius:0}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.field textarea{min-height:120px;resize:vertical}
.field--check{grid-template-columns:auto 1fr;align-items:start;gap:10px}
.field--check label{font-family:var(--font-body);font-size:var(--fs-400);text-transform:none;letter-spacing:0;color:var(--ink-2)}
.field--check input{width:18px;height:18px;margin-top:3px;accent-color:var(--accent)}
.field .req{color:var(--accent)}
fieldset.field{border:0;padding:0;margin:0 0 16px;min-width:0}
.field .choices{display:grid;gap:8px}
.field .choices label{font-family:var(--font-body);text-transform:none;letter-spacing:0;font-size:var(--fs-400);color:var(--ink);display:flex;gap:10px;align-items:flex-start}
.field .choices input{width:18px;height:18px;margin-top:3px;accent-color:var(--accent)}
[hidden]{display:none!important}
/* Карточки экспертов на светлом фоне: <div class="founders experts"> */
.experts .founder{background:var(--surface);border-color:var(--line)}
.experts .founder h3,.experts .founder h4{color:var(--ink)}
.experts .founder__role{color:var(--ink-3)} .experts .founder__title{color:var(--ink-2)} .experts .founder__bio{color:var(--ink-2)}
.experts .founder__avatar{border-color:var(--line);background:var(--paper-2);color:var(--ink)}
.experts :is(.btn--ghost,.is-style-ghost){color:var(--accent)} .experts :is(.btn--ghost,.is-style-ghost):hover{color:var(--ink)}
.founder__creds{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
:is(.on-navy,.is-style-on-navy) .founder__creds{color:var(--on-navy-2)}
/* Нумерованные шаги (How corporate training works, learning journey): <ol class="steps"><li>…</li></ol> */
.steps{counter-reset:step;display:grid;gap:0;border-top:1px solid var(--line);max-width:80ch}
.steps li{counter-increment:step;display:grid;grid-template-columns:auto 1fr;gap:18px;padding:16px 0;border-bottom:1px solid var(--line);color:var(--ink);line-height:1.55}
.steps li::before{content:counter(step,decimal-leading-zero);font-family:var(--font-mono);color:var(--accent);font-size:var(--fs-300);padding-top:3px}

/* ---------- Финальный CTA на navy (решение 2026-09-05: единый тёмный аккорд перед футером на всех страницах) ---------- */
:is(.on-navy,.is-style-on-navy) .cta-final{background:var(--navy-2);border-color:var(--line-navy);box-shadow:8px 8px 0 var(--navy-3)}
:is(.on-navy,.is-style-on-navy) .cta-final h2{color:#fff}
:is(.on-navy,.is-style-on-navy) .cta-final p{color:var(--on-navy-2)}
:is(.on-navy,.is-style-on-navy) .cta-final :is(.eyebrow,.is-style-eyebrow){color:var(--on-navy-2)}
:is(.on-navy,.is-style-on-navy) .cta-final__meta{color:var(--on-navy-2)}
:is(.on-navy,.is-style-on-navy) .cta-final__meta a{color:var(--on-navy)}

/* ---------- Узкие экраны: таблицы фактов в одну колонку ----------
   На 390px пара «длинная метка | значение» сжимает значение до одного слова в строку
   («26 / October / 2026»). Ниже 560px метка и значение идут друг под другом. */
@media(max-width:560px){
  .facts dl,.programme dl,.contact-card dl,.cohort__card dl,.meta dl{grid-template-columns:1fr;gap:0}
  .facts dl>*,.programme dl>*,.contact-card dl>*,.cohort__card dl>*,.meta dl>*{text-align:left}
  .facts dt,.contact-card dt,.cohort__card dt,.meta dt{padding-top:12px}
  .facts dd,.contact-card dd,.cohort__card dd,.meta dd{padding-bottom:2px}
  .programme dt{padding:12px 0 2px;border-bottom:0}
  .programme dd{padding:0 0 12px}
}

/* =====================================================================
   ПЕРЕНЕСЕНО ИЗ PAGE-CSS ПРОТОТИПА (tier 1: общие компоненты)
   ===================================================================== */

/* thank-you.html, contact.html, european-privacy-foundations.html и др. (8 страниц):
   одноколоночный hero для внутренних страниц — на главной hero двухколоночный. */
.hero--single .hero__inner{grid-template-columns:minmax(0,1fr)}
.hero--single .hero__copy{max-width:760px}

/* =====================================================================
   ИКОНКИ КАК МАСКИ (перенос на блочный редактор)
   В прототипе иконки — инлайновые <svg> внутри разметки. Ядро не даёт вложить SVG
   ни в core/list, ни в core/group, поэтому те же path вынесены в assets/icons/*.svg
   и подключаются через mask-image. Начертание идентично: файл содержит тот же path.
   Побочная выгода — списки становятся обычными core/list, и клиент правит их без кода.
   ===================================================================== */

/* Галочка в списках .checklist и .tiles — один и тот же path на 81 пункт. */
.checklist li::before,
.tiles li::before{
  content:"";
  flex:none;width:22px;height:22px;margin-top:1px;
  background:var(--accent);
  -webkit-mask:url("../icons/tick.svg") no-repeat center/contain;
          mask:url("../icons/tick.svg") no-repeat center/contain;
}

/* Иконка карточки метода. Класс ставится в паттерне: выбор иконки — часть дизайна,
   а не контент, поэтому клиенту он не предлагается. */
.method__icon::before{
  content:"";
  width:24px;height:24px;display:block;
  background:currentColor;
  -webkit-mask:var(--method-icon) no-repeat center/contain;
          mask:var(--method-icon) no-repeat center/contain;
}
.method__icon--document{--method-icon:url("../icons/method-document.svg")}
.method__icon--people{--method-icon:url("../icons/method-people.svg")}
.method__icon--growth{--method-icon:url("../icons/method-growth.svg")}
.method__icon--institution{--method-icon:url("../icons/method-institution.svg")}
.method__icon--balance{--method-icon:url("../icons/method-balance.svg")}
.method__icon--award{--method-icon:url("../icons/method-award.svg")}
.method__icon--shield{--method-icon:url("../icons/method-shield.svg")}
.method__icon--chip{--method-icon:url("../icons/method-chip.svg")}

/* ---------- Перенесено из page-CSS index.html (tier 1) ----------
   Модификаторы сеток на четыре элемента и вид карточки программы внутри navy-секции.
   Последнее особенно важно вынести в общий файл: паттерн «карточка программы», вставленный
   клиентом в navy-секцию на любой другой странице, иначе отрисуется неправильно. */
@media(min-width:720px){
  .checklist--four li:last-child{grid-column:auto}
  .methods--four{grid-template-columns:repeat(2,minmax(0,1fr))}
}
:is(.on-navy,.is-style-on-navy) .programme{color:var(--ink);border-color:var(--line-navy);box-shadow:8px 8px 0 var(--navy-3)}
:is(.on-navy,.is-style-on-navy) .programme__head,:is(.on-navy,.is-style-on-navy) .programme__foot{border-color:var(--line)}
:is(.on-navy,.is-style-on-navy) .programme :is(.btn--primary,.is-style-primary){border-color:var(--accent)}

/* =====================================================================
   МОДИФИКАТОРЫ СЕТОК ДЛЯ ПЕРЕСТРОЕННОЙ СТРАНИЦЫ PROGRAMMES
   (правка клиента Final_edits_2 § F: «сетка 2 × 2 на desktop и одна колонка на mobile»)
   ===================================================================== */

/* Четыре направления: 2 × 2 на десктопе, а не в одну строку из четырёх —
   карточки равнозначны и не должны сжиматься до узких колонок. */
@media(min-width:1100px){
  .paths--two{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Ссылки «Explore…» в четырёх карточках направлений — на одной высоте (правка
   клиента 16.09). Базовый .path пакует ряды вверх (align-content:start), поэтому
   в карточке без строки статуса ссылка висела на 45 px выше соседней.
   Свободную высоту забирает описание, ссылка прижата к низу карточки. */
.paths--two .path{align-content:stretch;grid-template-rows:auto 1fr}

/* Карточки Flagship programmes на главной: таблица фактов начинается с одной высоты
   в обеих карточках (правка клиента 16.09). Описания разной длины — 3 строки против 2 —
   сдвигали «First cohort» на 28 px.
   Свободную высоту забирает ряд описания, а таблица прижата к низу тела карточки.
   Это устойчиво к любому тексту выше, включая заголовок в две строки: низ тела задают
   высота карточки и высота подвала, а они у карточек в строке одинаковы. */
.programmes--flagship .programme__body{grid-template-rows:1fr auto}

/* Компактный каталог: две колонки с 640px, одна на телефоне. */
@media(min-width:640px){
  .programmes--two{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Карточки каталога в строке одинаковой высоты: слой .programme--compact задаёт
   сетку из двух рядов, а карточка каталога состоит из трёх (шапка, тело, подвал).
   Без явного указания свободная высота растекается по шапке и подвалу, и подвалы
   соседних карточек начинаются на разной высоте. «1fr» отдаёт весь запас телу. */
.programmes--two .programme{grid-template-rows:auto 1fr auto}

/* =====================================================================
   БЛОК «WHY NOW» — КОМПОЗИЦИЯ (правка клиента Final_edits_2 § B1)
   Клиент: «опустить блок карточек и лучше сбалансировать его по вертикали
   с левой колонкой», «сократить пустое пространство под контентом».

   Левая колонка заметно выше правой (заголовок + лид против четырёх карточек),
   а обе были прижаты к верху — под карточками оставалась большая пустота.
   Центрирование по вертикали опускает карточки и уравновешивает блок.

   Модификатор, а не голый .why: класс .why используется ещё на academy,
   programmes, european-privacy-foundations и privacy-career-bootcamp, где
   колонки уравновешены и центрирование сдвигало бы контент (на academy —
   на 74px). Центрируем только там, где клиент это просил.
   ===================================================================== */
@media(min-width:960px){
  .why--centred{align-items:center}
  /* Липкое позиционирование левой колонки при центрировании больше не нужно:
     оно конфликтует с выравниванием и возвращает блок к верхнему краю. */
  .why--centred .why__head{position:static}
}

/* =====================================================================
   Оптическое выравнивание логотипа в открытом мобильном меню (22.09.2026)
   ---------------------------------------------------------------------
   Измерение показало, что по координатам логотип и пункты меню стоят на
   одном краю (расхождение 0,33 px). Расходятся они оптически: «B» набрана
   серифом в 24 px, пункты — гротеском в 17 px, и крупная буква с засечкой
   читается как выступающая влево.

   Сдвиг включается ТОЛЬКО когда меню раскрыто: в закрытом состоянии
   логотип обязан совпадать с левым краем контента страницы. Правка клиента
   от 22.09: «Move BestDPO slightly to the right so that it aligns visually
   with the other items in the vertical menu».
   ===================================================================== */
.header:has(.mobile-nav[data-open="true"]) .brand__mark{transform:translateX(2px)}