/* ═══════════════════════════════════════════════════════════
   Константин Кучугурин — Advisory / Interim CIO
   Executive register · Cambria + Inter · navy / black / light
   ═══════════════════════════════════════════════════════════ */

/* ─── Tokens ─────────────────────────────────────────────── */
:root{
    --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
    --serif:Cambria,Caladea,Georgia,'Times New Roman',serif;
    --gold:#c9a96e;
    --ease:cubic-bezier(.22,.85,.32,1);
    --t:.35s;
    --max:1180px;
    --pad:clamp(20px,4vw,48px);

    /* ─── Шкала. Одно место, где меняются размеры, интерлиньяж и ритм ───
       До неё в файле было 34 кегля, 21 интерлиньяж, 17 разрядок и 13 сеточных
       отступов. Каждое значение по отдельности было верным - подобранным под свой
       блок. Дрейф читался только при прокрутке, когда блоки идут подряд.

       Текст мелких размеров поднят на 0.5-1px, а строчный интерлиньяж с 1.5 до 1.6:
       на тёмном фоне светлая литера засвечивает просвет, и та же вёрстка,
       что комфортна на белом, читается плотной. */

    /* Кегли текста */
    --t-xs:11px;        /* капитель: надзаголовки, метки, даты */
    --t-sm:12.5px;      /* подписи, мета, служебное */
    --t-md:14px;        /* интерфейс: ссылки, кнопки, поля, служебные строки */
    --t-body:15px;      /* ВСЯ проза без исключений. Разный кегль в разных блоках
                           читался как скачок, а не как иерархия. */
    --t-card:13.5px;    /* карточки ленты: узкая колонка, должны влезать в экран */
    --t-lg:16px;        /* основной: статьи, акцентные строки */
    --t-xl:19px;        /* врезки-числа */

    /* Кегли заголовков */
    --h-display:clamp(34px,5.6vw,72px);
    --h-1:clamp(26px,3.2vw,46px);
    --h-2:clamp(19px,2.1vw,26px);
    --h-3:clamp(17px,1.6vw,21px);
    --h-lead:clamp(15.5px,1.15vw,17.5px);

    /* Интерлиньяж */
    --lh-display:1.05;
    --lh-head:1.2;
    --lh-sub:1.4;
    --lh-body:1.6;
    --lh-loose:1.75;    /* только длинная проза статей */

    /* Разрядка */
    --ls-display:-.02em;
    --ls-tight:-.01em;
    --ls-wide:.06em;
    --ls-caps:.14em;

    /* Сеточные отступы */
    --gap-xs:clamp(14px,1.6vw,20px);
    --gap-sm:clamp(18px,2.2vw,30px);
    --gap-md:clamp(24px,3.2vw,44px);
    --gap-lg:clamp(28px,4vw,58px);

    /* Вертикальный шаг внутри блоков. Был 18 значений margin-bottom,
       в том числе четыре разных отступа между пунктами списков. */
    --sp-1:6px;
    --sp-2:11px;
    --sp-3:16px;
    --sp-4:22px;

    /* Ритм секций: два значения вместо одного на всё */
    --sec-pad:clamp(52px,5.6vw,80px);
    --sec-pad-tight:clamp(38px,4vw,56px);
    --gut:var(--pad);
    --rail-gap:clamp(14px,1.6vw,22px);
}

/* когда макет шире контентной колонки — отступ ленты равен полю страницы */
@media(min-width:1276px){
    :root{--gut:calc((100vw - 1180px) / 2 + 48px)}
}

[data-theme="navy"]{
    --bg:#0a1526;
    --bg2:#0c1a2d;
    --bg3:#11223a;
    --surf:rgba(255,255,255,.032);
    --surf2:rgba(255,255,255,.06);
    --fg:#f2f5f9;
    --fg2:#aab7c8;
    --fg3:#93a3b8;
    --fg-lead:#cfd8e4;
    --line:rgba(255,255,255,.10);
    --line2:rgba(255,255,255,.20);
    --goldsoft:rgba(201,169,110,.12);
    --photo-f:grayscale(1) contrast(1.12) brightness(.92);
    --grain:.025;
}

[data-theme="dark"]{
    --bg:#15171a;
    --bg2:#191c20;
    --bg3:#20242a;
    --surf:rgba(255,255,255,.035);
    --surf2:rgba(255,255,255,.07);
    --fg:#f4f5f6;
    --fg2:#b2b8bf;
    --fg3:#8d959e;
    --fg-lead:#d3d7dc;
    --line:rgba(255,255,255,.10);
    --line2:rgba(255,255,255,.20);
    --goldsoft:rgba(201,169,110,.12);
    --photo-f:grayscale(1) contrast(1.15) brightness(.9);
    --grain:.03;
}

[data-theme="light"]{
    --bg:#ffffff;
    --bg2:#f7f6f3;
    --bg3:#efece6;
    --surf:rgba(0,0,0,.02);
    --surf2:rgba(0,0,0,.045);
    --fg:#111111;
    --fg2:#4a4a4a;
    --fg3:#6e6e6e;
    --fg-lead:#2b2b2b;
    --line:rgba(0,0,0,.12);
    --line2:rgba(0,0,0,.24);
    --goldsoft:rgba(201,169,110,.16);
    --photo-f:grayscale(1) contrast(1.05);
    --grain:.015;
}

/* ─── Reset ──────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
    font-family:var(--sans);
    font-size:var(--t-body);line-height:var(--lh-body);
    color:var(--fg2);background:var(--bg);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
    transition:background var(--t) var(--ease),color var(--t) var(--ease);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul,ol{list-style:none}
::selection{background:var(--gold);color:#0a0a0a}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

body::after{
    content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;
    opacity:var(--grain);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    transition:opacity var(--t);
}


/* ─── Курсор ────────────────────────────────────────────── */
/* Стрелка везде. Указатель только там, где действительно кликают:
   когда он мигает на каждом абзаце, он перестаёт что-либо значить.
   Поля ввода - исключение, печатать со стрелкой неудобно. */
body{cursor:default}
a[href],button:not(:disabled),summary,select,label[for],[role="button"]{cursor:pointer}
input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
textarea{cursor:text}
button:disabled{cursor:default}

/* ─── Layout ─────────────────────────────────────────────── */
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.sec{padding-block:var(--sec-pad);position:relative}
.sec--alt{background:var(--bg2)}
#cases{padding-block:var(--sec-pad-tight)}
.sec,.sec--alt{transition:background var(--t) var(--ease)}

/* ─── Типографика ────────────────────────────────────────── */
h1,h2,h3,h4{
    font-family:var(--serif);color:var(--fg);
    font-weight:400;line-height:var(--lh-head);letter-spacing:var(--ls-tight);
}
h1{font-size:var(--h-display);line-height:var(--lh-display);letter-spacing:var(--ls-display)}
h2{font-size:var(--h-1);letter-spacing:var(--ls-tight)}
h3{font-size:var(--h-3);line-height:var(--lh-head)}
/* Лид - тот же кегль, что проза. Он и так узнаётся: одна фраза сразу под
   заголовком. Разный размер читался как скачок между блоками, а не как иерархия. */
/* Кегль у подводки тот же, что у прозы - разный размер читался как скачок.
   Роль держит цвет: на полтона светлее основного текста, но не в уровень заголовка. */
.lead{font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg-lead)}
strong,b{color:var(--fg);font-weight:600}
em{font-style:italic}

.eyebrow{
    display:inline-flex;align-items:center;gap:10px;
    font-family:var(--sans);
    font-size:var(--t-xs);font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;
    color:var(--gold);margin-bottom:var(--sp-3);
}

.sec-head{max-width:680px;margin-bottom:clamp(26px,3vw,40px)}
.sec-head p{margin-top:var(--sp-3)}
/* В блоке 02 лид - это всё содержимое, а не подводка под заголовком.
   Поэтому он идёт кеглем прозы: иначе один блок на странице крупнее остальных. */
#about .lead{font-size:var(--t-body)}

/* ─── Кнопки ─────────────────────────────────────────────── */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    padding:12px 24px;border-radius:2px;
    font-family:var(--sans);font-size:var(--t-md);font-weight:600;letter-spacing:0;
    background:var(--fg);color:var(--bg);
    transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.btn:hover{opacity:.86;transform:translateY(-1px)}
.btn svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(3px)}

.btn-ghost{
    display:inline-flex;align-items:center;gap:10px;
    padding:11px 22px;border-radius:2px;
    border:1px solid var(--line2);color:var(--fg);
    font-size:var(--t-md);font-weight:500;
    transition:border-color .3s,color .3s;
}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}

/* ─── Шапка ──────────────────────────────────────────────── */
.hdr{
    position:fixed;top:0;left:0;right:0;z-index:500;
    display:flex;align-items:center;height:62px;
    border-bottom:1px solid transparent;
    transition:background .4s var(--ease),border-color .4s;
}
.hdr.stuck{
    background:color-mix(in srgb,var(--bg) 90%,transparent);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-bottom-color:var(--line);
}
.hdr-in{display:flex;align-items:center;gap:22px;width:100%;max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.mark{font-family:var(--serif);font-size:var(--t-lg);color:var(--fg);white-space:nowrap}
.mark b{font-weight:400;color:var(--gold)}
/* Имя целиком помещается только на широком экране. Когда меню рядом - сжимаем
   до фамилии, иначе пункты навигации переносятся, а кнопка уезжает за край. */
.mark-dot{display:none}
@media(max-width:1100px){
    .mark-x{display:none}
    .mark-dot{display:inline}
}
.hdr-nav{display:flex;gap:24px;margin-left:auto}
.hdr-nav a{font-size:var(--t-md);color:var(--fg2);position:relative;padding-block:4px;transition:color .3s}
.hdr-nav a::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--gold);transition:width .3s var(--ease)}
.hdr-nav a:hover{color:var(--fg)}
.hdr-nav a:hover::after{width:100%}
.hdr-act{display:flex;align-items:center;gap:10px}
.icon-btn{
    width:34px;height:34px;display:grid;place-items:center;border-radius:2px;
    border:1px solid var(--line);color:var(--fg2);
    transition:border-color .3s,color .3s;
}
.icon-btn:hover{border-color:var(--gold);color:var(--gold)}
.icon-btn svg{width:15px;height:15px}
.icon-btn.lang{width:auto;padding:0 10px;font-size:var(--t-xs);font-weight:600;letter-spacing:var(--ls-wide)}
.hdr .btn{padding:9px 18px;font-size:var(--t-sm)}
.burger{display:none}

.prog{position:fixed;top:0;left:0;height:1.5px;background:var(--gold);z-index:600;width:0;transition:width .12s linear}

.mnav{
    position:fixed;inset:0;z-index:490;background:var(--bg);
    display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 var(--pad);
    opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;
}
.mnav.open{opacity:1;visibility:visible}
.mnav a{font-family:var(--serif);font-size:clamp(22px,6vw,32px);color:var(--fg);padding-block:15px}
.mnav a:last-child{border:0}

/* ─── Hero ───────────────────────────────────────────────── */
.intro{padding-top:clamp(120px,17vw,210px);padding-bottom:clamp(56px,7vw,96px);position:relative}
.intro-lede{max-width:1080px}
.intro-lede .intro-sub{max-width:620px}
.intro h1{margin-bottom:var(--sp-4);overflow-wrap:break-word}
.intro h1 em{color:var(--gold);font-style:italic}
.intro-sub{font-size:var(--h-lead);line-height:var(--lh-body);max-width:540px}
.intro-cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:28px}
.intro-note{font-size:var(--t-md);color:var(--fg3);margin-top:var(--sp-3);display:flex;gap:8px;max-width:520px;line-height:var(--lh-body)}
.intro-note svg{width:13px;height:13px;color:var(--gold);flex:0 0 auto;margin-top:var(--sp-1)}

.founder-photo{position:relative;width:100%;max-width:320px;margin-top:30px;overflow:hidden}
.founder-photo img{
    width:100%;height:auto;aspect-ratio:3/4;max-height:430px;
    object-fit:cover;object-position:50% 6%;
    /* кадр уже поясной, приближать нечего - оставляем лёгкое движение на наведении */
    transform:scale(1.02);transform-origin:50% 20%;
    transition:transform .6s var(--ease);
    /* Портрет должен висеть в воздухе, без рамки. Одного наложения мало:
       фон снимка неоднороден — слева стеллаж, справа световой рефлекс.
       Поэтому края ещё и растворяются маской, она от фона не зависит. */
    mix-blend-mode:lighten;
    filter:grayscale(1) contrast(1.14) brightness(.98);
    -webkit-mask-image:radial-gradient(118% 96% at 50% 32%,#000 52%,transparent 100%);
    mask-image:radial-gradient(118% 96% at 50% 32%,#000 52%,transparent 100%);
}
.founder-photo:hover img{transform:scale(1.06)}
/* на светлой теме приём не работает: белый фон светлее всего, снимок исчез бы целиком */
[data-theme="light"] .founder-photo{border:none}
[data-theme="light"] .founder-photo img{mix-blend-mode:normal;filter:grayscale(1) contrast(1.04) brightness(1.02)}
.intro-photo{position:relative;justify-self:end;width:100%;max-width:430px}
.intro-photo img{
    width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 14%;
    filter:var(--photo-f);transition:filter var(--t);
}
.intro-photo::after{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(to top,var(--bg) 0%,transparent 26%);opacity:.5;
}

/* стат-полоса */
.stats{
    display:grid;grid-template-columns:repeat(4,1fr);
    gap:clamp(26px,3.4vw,56px);
    margin-top:clamp(56px,7vw,96px);
}
.stat{padding:32px 0 0}
.stat-n{
    font-family:var(--serif);font-size:clamp(38px,5.4vw,68px);
    color:var(--fg);line-height:.95;display:block;margin-bottom:var(--sp-3);letter-spacing:var(--ls-display);
}
.stat-n i{font-style:normal;font-size:.36em;color:var(--gold);margin-left:3px;letter-spacing:0}
.stat-l{font-size:var(--t-sm);line-height:var(--lh-sub);color:var(--fg3);display:block;max-width:180px}

/* ─── Переключатель аудитории ────────────────────────────── */
.aud-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;scrollbar-width:none;margin-bottom:clamp(28px,3vw,38px)}
.aud-tabs::-webkit-scrollbar{display:none}
/* Вкладки - это выбор, а не фильтр: их дважды не заметили при внешнем разборе.
   Поэтому крупнее, контрастнее в неактивном состоянии и с золотой засечкой у активной. */
.aud-tab{
    position:relative;flex:0 0 auto;padding:11px 21px;border:1px solid var(--line2);border-radius:2px;
    font-size:var(--t-md);font-weight:500;color:var(--fg2);white-space:nowrap;
    transition:all .3s var(--ease);
}
.aud-tab:hover{color:var(--fg);border-color:var(--fg3)}
.aud-tab.on{background:var(--fg);border-color:var(--fg);color:var(--bg);font-weight:600}
.aud-tab.on::after{
    content:'';position:absolute;left:50%;bottom:-7px;width:16px;height:2px;
    margin-left:-8px;background:var(--gold);
}

.aud-panel{display:none}
.aud-panel.on{display:block;animation:fade .45s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.aud-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-lg);align-items:start}
.aud-col h3{margin-bottom:var(--sp-3)}
.aud-col h3 span{
    display:block;font-family:var(--sans);font-size:var(--t-xs);font-weight:600;
    letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--gold);margin-bottom:var(--sp-2);
}
.aud-list li{position:relative;padding-left:22px;margin-bottom:var(--sp-2);font-size:var(--t-body);line-height:var(--lh-body)}
.aud-list li::before{content:'';position:absolute;left:0;top:10px;width:9px;height:1px;background:var(--gold)}
.aud-list--pain li{color:var(--fg3)}
.aud-list--pain li::before{background:var(--fg3);opacity:.6}
/* строка под колонками вкладки; сейчас ни на одной вкладке не используется */
.aud-foot{
    margin-top:clamp(22px,2.6vw,34px);padding-top:17px;border-top:1px solid var(--line);
    font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg3);
}

/* ─── Горизонтальные ленты ───────────────────────────────── */
.rail-wrap{position:relative;margin-top:var(--sp-2)}
.rail-wrap::after{
    content:'';position:absolute;top:0;right:0;bottom:26px;width:clamp(40px,7vw,110px);
    pointer-events:none;z-index:2;
    background:linear-gradient(to left,var(--bg) 8%,transparent);
    transition:background var(--t);
}
.sec--alt .rail-wrap::after{background:linear-gradient(to left,var(--bg2) 8%,transparent)}
.rail{
    display:flex;gap:var(--rail-gap);
    overflow-x:auto;scroll-snap-type:x proximity;
    padding-block:4px 22px;
    scrollbar-width:none;scroll-behavior:smooth;position:relative;
}
/* отступы делаем распорками, а не padding: у flex-скроллеров он ненадёжен */
.rail::before,.rail::after{content:'';flex:0 0 calc(var(--gut) - var(--rail-gap))}
/* Ленту можно тянуть мышью - и это должно быть видно до того, как человек
   попробует. Ровно тот же принцип, что и с указателем выше: курсор меняется
   там, где действительно есть действие. */
.rail{cursor:grab}
.rail.drag{scroll-behavior:auto;scroll-snap-type:none;cursor:grabbing}
/* пока идёт своя анимация, браузерное сглаживание и притягивание только мешают */
.rail.glide{scroll-behavior:auto;scroll-snap-type:none}
.rail::-webkit-scrollbar{display:none}
.rail>article{flex:0 0 clamp(272px,31vw,470px);scroll-snap-align:start}

.rail-nav{
    display:flex;gap:16px;justify-content:flex-end;align-items:center;
    max-width:var(--max);margin:0 auto;padding-inline:var(--pad);
}
.rail-prog{position:relative;height:1px;background:var(--line);flex:1 1 auto;max-width:300px}
.rail-prog i{position:absolute;inset:0 auto 0 0;height:1px;background:var(--gold);width:12%;transition:width .25s var(--ease)}
.rnav{
    width:36px;height:36px;display:grid;place-items:center;
    border:1px solid var(--line);border-radius:50%;color:var(--fg2);transition:all .3s;
}
.rnav:hover{border-color:var(--gold);color:var(--gold)}
.rnav:disabled{opacity:.25;cursor:default;border-color:var(--line);color:var(--fg2)}
.rnav svg{width:13px;height:13px}

/* ─── Карточка услуги ────────────────────────────────────── */
.svc{
    display:flex;flex-direction:column;padding:26px 24px 24px;
    background:var(--surf);
    position:relative;overflow:hidden;
    transition:background .4s var(--ease);
}
.svc::before{
    content:'';position:absolute;top:0;left:0;right:0;height:1.5px;background:var(--gold);
    transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.svc:hover{background:var(--surf2)}
.svc:hover::before{transform:scaleX(1)}
.svc h3{margin-bottom:var(--sp-2)}
.svc-for{
    font-size:var(--t-sm);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--fg3);
    margin-bottom:var(--sp-4);line-height:var(--lh-body);
}
.svc-out{margin-bottom:var(--sp-4)}
.svc-out li{position:relative;padding-left:18px;margin-bottom:var(--sp-2);font-size:var(--t-body);line-height:var(--lh-body)}
.svc-out li::before{content:'';position:absolute;left:0;top:8px;width:5px;height:5px;border:1px solid var(--gold);transform:rotate(45deg)}
.svc-meta{
    margin-top:auto;padding-top:22px;
    display:flex;justify-content:space-between;gap:12px;font-size:var(--t-sm);color:var(--fg3);line-height:var(--lh-body);
}
.svc-meta b{color:var(--fg);font-weight:600;font-size:var(--t-sm)}

/* ─── Кейс ───────────────────────────────────────────────── */
.case{
    display:flex;flex-direction:column;
    background:var(--surf);overflow:hidden;transition:background .4s;
}
.case:hover{background:var(--surf2)}
/* Высота по самой длинной шапке: без этого "Ситуация" в соседних
   карточках начинается на разной высоте и вертикаль прыгает. */
.case-top{padding:20px 22px 10px;min-height:146px}
.case-when{font-size:var(--t-xs);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--gold);margin-bottom:var(--sp-2);display:block}
.case-top h3{margin-bottom:var(--sp-1)}
.case-mkt{font-size:var(--t-sm);color:var(--fg2);margin-bottom:var(--sp-1);line-height:var(--lh-sub)}
.case-role{font-size:var(--t-sm);color:var(--fg3);line-height:var(--lh-sub)}
.case-body{padding:10px 22px 16px;flex:1}
.case-body dt{font-size:var(--t-xs);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--fg3);margin-bottom:var(--sp-1)}
.case-body dd{font-size:var(--t-card);line-height:var(--lh-body);margin-bottom:var(--sp-3)}
.case-body dd:first-of-type:not(:last-child){min-height:calc(5 * var(--lh-body) * 1em)}
.case-body dd:last-child{margin-bottom:0}
.case-res{display:grid;grid-template-columns:1fr 1fr;gap:0}
.case-res--one{grid-template-columns:1fr}
/* Плитки с цифрами не заливаем: заливка цветом секции делала их темнее карточки,
   и они читались провалами в ней. Хуже всего это было видно там, где цифра одна
   и второй ряд добирается пустышкой - получалась дырка без содержимого.
   Разделяет их волосяная линия, тем же приёмом, что компетенции в блоке 02. */
.case-res div{padding:11px 16px 12px;border-top:1px solid var(--line)}
/* У пустышки линии нет: она вела бы в пустоту под последней цифрой. */
.case-res-fill{border-top:0}
.case-res b{
    display:block;font-family:var(--serif);font-size:var(--h-2);
    color:var(--gold);line-height:var(--lh-display);margin-bottom:var(--sp-1);font-weight:400;
}
/* Подпись всегда в две строки, даже если текст короткий. Иначе ряды
   получаются разной высоты, и цифры в соседних карточках ленты стоят
   на разных уровнях - глаз идёт вдоль и спотыкается. */
.case-res span{
    font-size:var(--t-sm);line-height:var(--lh-sub);color:var(--fg3);display:block;
    /* Ровно две строки при текущем интерлиньяже: 2 x --lh-sub. Было 2.7em под
       прежние 1.35 - после сведения шкалы однострочные подписи вставали на 1.25px выше. */
    min-height:calc(2 * var(--lh-sub) * 1em);
}

/* Пустышка добирает второй ряд, когда цифра в карточке одна: иначе верхний
   край блока цифр в этой карточке уезжает ниже соседних. */
.case-res-fill b{visibility:hidden}
.go{display:inline-flex;align-items:center;gap:9px;color:var(--gold);font-size:var(--t-md);white-space:nowrap}
.go svg{width:17px;height:17px;flex:0 0 auto}

.fine{font-size:var(--t-sm);color:var(--fg3);line-height:var(--lh-body);max-width:600px;margin-top:var(--sp-1)}

/* ─── Процесс ────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-md)}
.step{padding:28px 0 0;position:relative}
.step::before{content:'';position:absolute;top:-1px;left:0;width:0;height:1px;background:var(--gold);transition:width .9s var(--ease)}
.step.in::before{width:100%}
.step h3{margin-bottom:var(--sp-2)}
.step p{font-size:var(--t-body);line-height:var(--lh-body)}
.step-when{display:block;margin-top:var(--sp-2);font-size:var(--t-sm);color:var(--fg);font-weight:600;letter-spacing:var(--ls-wide)}

/* ─── Рекомендации ───────────────────────────────────────── */
.refs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0}
/* Рекомендации лентой: карточка тут уже, чем кейс - это имя и должность, не рассказ. */
/* Карточка рекомендации теперь несёт отзыв целиком, а не имя с должностью,
   поэтому она шире кейсовой по тексту, но уже по смыслу: одна цитата. */
/* Три карточки в ширину экрана: отзыв идёт целиком, и узкая колонка его калечит.
   25vw даёт ровно три на типичном ноутбуке и на широком мониторе. */
.rail--refs>article{flex:0 0 clamp(300px,25vw,500px)}
.ref{background:var(--bg);padding:18px 20px;transition:background .3s}
.sec--alt .ref{background:var(--bg2)}
.ref:hover{background:var(--surf2)}
.ref b{display:block;font-size:var(--t-body);color:var(--fg);font-weight:600;margin-bottom:var(--sp-1)}
.ref span{font-size:var(--t-sm);color:var(--fg3);line-height:var(--lh-sub)}
/* Короткая цитата в карточке. Полный текст в ленте не помещается, поэтому
   в базе для карточки лежит отдельное короткое поле - дословный кусок, а не
   обрезанный автоматом хвост. Кавычки браузера снимаем: они тут лишние. */
/* pre-line: в длинных отзывах есть абзацы, и без него HTML схлопнул бы их
   в сплошную стену. */
.ref q{
    display:block;margin-top:var(--sp-2);quotes:none;white-space:pre-line;
    font-size:var(--t-card);line-height:var(--lh-body);color:var(--fg2);
    max-height:340px;overflow:hidden;
}
.ref.open q{max-height:none}
/* Растворяем последние строки, чтобы обрез не выглядел обрывом на полуслове.
   Класс clip ставит скрипт - только там, где текст действительно не поместился. */
.ref.clip:not(.open) q{
    -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 52px),transparent);
    mask-image:linear-gradient(180deg,#000 calc(100% - 52px),transparent);
}
.ref-more{
    display:flex;align-items:center;gap:8px;margin-top:var(--sp-2);
    font-size:var(--t-xs);letter-spacing:var(--ls-caps);text-transform:uppercase;
    color:var(--fg3);transition:color .3s var(--ease);
}
.ref-more:hover{color:var(--gold)}
.ref-more svg{width:14px;height:14px;transition:transform .35s var(--ease)}
.ref.open .ref-more svg{transform:rotate(180deg)}
.ref q::before,.ref q::after{content:""}

/* ─── Кому подхожу ───────────────────────────────────────── */
/* ─── Честно на входе ─────────────────────────────────────
   Камертон страницы: если новый текст ему противоречит, неправильный текст,
   а не раздел. При этом набран он был мельче всего остального - 14,5px против
   15,5px в основном тексте - и стоял единственным нетонированным разделом
   между тонированными соседями. Самое важное место читалось как примечание.

   Отдельно про правую колонку. Она была приглушена в --fg3, как сноска.
   Это была ошибка по существу, а не по оформлению: отказ здесь и есть главный
   аргумент, "скажу сразу, если не моя задача" сильнее любого обещания пользы.
   Подавать его вполсилы - гасить самое сильное, что есть на странице. Теперь
   обе колонки читаются одинаково, а различает их маркер и заголовок,
   не яркость текста.

   Вес добран воздухом и кеглем, без рамок и подложки: рамки на этой странице
   запрещены, а подложка слиплась бы с тонированными рекомендациями следом. */
#fit{padding-block:var(--sec-pad)}
/* Короткие блоки идут плотным ритмом: воздух по весу содержимого, а не поровну. */
#about,#refs,#cv{padding-block:var(--sec-pad-tight)}
#fit .sec-head{max-width:740px}
#fit .lead{
    font-family:var(--serif);font-size:var(--h-3);
    line-height:var(--lh-sub);color:var(--fg);
}

.fit{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-lg)}
.fit-col{border-top:1.5px solid var(--gold);padding-top:26px}
.fit-col--no{border-top-color:var(--line2)}
.fit-col h3{margin-bottom:var(--sp-4);font-size:var(--h-3)}
.fit-col--no h3{color:var(--fg2)}
.fit-col li{
    position:relative;padding-left:30px;margin-bottom:var(--sp-3);
    font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg2);
}
.fit-col li::before{
    content:'';position:absolute;left:0;top:10px;width:12px;height:6.5px;
    border-left:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(-45deg);
}
/* Текст равный, тише только сам знак: различие несёт он, а не серый шрифт. */
.fit-col--no li::before{
    width:11px;height:11px;top:8px;border:0;transform:none;opacity:.6;
    background:
        linear-gradient(45deg,transparent 44%,var(--fg3) 44%,var(--fg3) 56%,transparent 56%),
        linear-gradient(-45deg,transparent 44%,var(--fg3) 44%,var(--fg3) 56%,transparent 56%);
}

/* ─── FAQ ────────────────────────────────────────────────── */
.faq{max-width:760px}
/* С 900px вопросы идут в две колонки: в одну колонку они съедали экран целиком.
   align-items:start - чтобы открытый ответ тянул вниз только свою колонку. */
@media(min-width:900px){
    .faq{
        max-width:none;display:grid;grid-template-columns:1fr 1fr;
        column-gap:clamp(30px,4vw,64px);align-items:start;
    }
}
.qa{padding-bottom:4px}
.qa summary{
    display:flex;align-items:center;gap:18px;padding:20px 0;cursor:pointer;list-style:none;
    font-family:var(--serif);font-size:var(--h-3);color:var(--fg);transition:color .3s;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--gold)}
.qa summary::after{
    content:'';margin-left:auto;flex:0 0 auto;width:9px;height:9px;
    border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
    transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--ease);
}
.qa[open] summary::after{transform:rotate(225deg) translateY(-2px)}
.qa-a{padding:0 0 20px;max-width:680px;font-size:var(--t-body)}

/* ─── Профиль ────────────────────────────────────────────── */
/* Колоночный отступ и строчный тут разные. gap задавал оба сразу, и когда под
   заголовком появилась подводка, блок получил два полных межколоночных отступа
   по вертикали вместо одного - между h2 и лидом, и между лидом и текстом.
   Вертикаль теперь держат margin, как в .sec-head у всех остальных блоков. */
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--gap-lg);row-gap:0;align-items:start}
/* Оптическое выравнивание с левой колонкой. Плитки набраны 12.5px с интерлиньяжем 2,
   абзац слева - 15px с 1.6; полуинтерлиньяж сверху отличается на ~1.4px, и плитки
   визуально проваливались ниже первой строки текста. Отступа сверху здесь быть не должно. */
.tags{display:flex;flex-wrap:wrap;gap:0 26px;margin-top:-1px}
/* Без разделителей-палочек: они рисовались на каждой плитке и повисали
   у правого края всякий раз, когда плитка заканчивала строку. Перечисление
   держится разрядкой. */
.tags span{font-size:var(--t-sm);color:var(--fg3);line-height:2}
.tags b{color:var(--fg2);font-weight:600}
/* Компетенции и аккредитации стоят в одном месте: это ответ на один вопрос -
   что человек знает и чем это подтверждено. Разделяет их волосяная линия. */
.tags-l{
    margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--line);
    margin-bottom:var(--sp-2);
    font-size:var(--t-xs);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--gold);
}
.cv-list li{display:flex;gap:16px;padding:9px 0;font-size:var(--t-body);align-items:baseline;line-height:var(--lh-body)}
.cv-list li:last-child{padding-bottom:0}
.cv-list em{font-family:var(--sans);font-style:normal;font-size:var(--t-xs);color:var(--gold);flex:0 0 40px;letter-spacing:var(--ls-wide)}
.cv-list b{color:var(--fg);font-weight:600}
.cv-note{margin-top:var(--sp-3);font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg3)}

/* ─── Статьи ─────────────────────────────────────────────── */
/* Фильтр по темам на /articles/. Тема лежит в базе, в поле topic, чипы
   собираются из того, что реально стоит у статей. Кегли и разрядка - те же,
   что у вкладок аудиторий в блоке 01: это один и тот же орган управления,
   и выглядеть он должен одинаково. */
.ix-filter{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4)}
.ix-chip{
    display:inline-flex;align-items:center;gap:7px;
    padding:8px 14px;border:1px solid var(--line);
    font-size:var(--t-md);color:var(--fg2);
    transition:border-color var(--t),color var(--t),background var(--t);
}
.ix-chip i{font-style:normal;font-size:var(--t-xs);color:var(--fg3);letter-spacing:var(--ls-wide)}
.ix-chip:hover{border-color:var(--line2);color:var(--fg)}
.ix-chip.on{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.ix-chip.on i{color:var(--bg);opacity:.6}

.posts{margin-top:var(--sp-1)}
.post{
    display:grid;grid-template-columns:1fr auto;gap:var(--gap-sm);
    align-items:baseline;padding:22px 0;
    transition:background .3s,padding-inline .3s var(--ease);
}
/* Своё правило обязательно: браузерное [hidden]{display:none} лежит в UA-стилях,
   а авторский display:grid выше него по приоритету. Без этой строки фильтр
   проставляет hidden, а карточки остаются на экране. */
.post[hidden]{display:none}
.post:hover{background:var(--surf);padding-inline:14px}
.post-main{min-width:0}
.post-tag{display:inline-block;font-size:var(--t-xs);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--fg3);margin-bottom:var(--sp-1)}
.post h3{margin-bottom:var(--sp-1);transition:color .3s}
.post:hover h3{color:var(--gold)}
.post p{font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg3);max-width:580px}
.post-go{
    flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;
    border:1px solid var(--line);border-radius:50%;color:var(--fg3);
    transition:all .3s var(--ease);align-self:center;
}
.post:hover .post-go{border-color:var(--gold);color:var(--gold);transform:translateX(3px)}
.post-go svg{width:12px;height:12px}

/* ─── Собственник ────────────────────────────────────────── */
.founder{background:var(--bg3);transition:background var(--t)}
.founder-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--gap-lg);align-items:start;align-content:start}
/* Сноска про совмещение стоит под портретом: она объясняет даты, а не рассказ справа. */
.founder-main{grid-column:2;grid-row:1}
/* Строка про совмещение стоит внутри правой колонки, под прозой: она про тот же
   отрезок жизни, что и текст над ней. В левой колонке, под фотографией, она висела
   отдельным островом. Отделена волосяной линией - той же, что в блоке 02. */
.founder-note{
    margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--line);
    font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg2);
}
.founder-when{
    display:inline-flex;align-items:center;gap:10px;margin-top:var(--sp-3);
    font-size:var(--t-xs);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--gold);
}
.founder-kicker{font-family:var(--serif);font-size:var(--h-3);line-height:var(--lh-sub);color:var(--fg);margin-bottom:var(--sp-3)}
.founder-kicker em{color:var(--gold)}

/* ─── Контакты ───────────────────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:var(--gap-lg)}
.big-mail{
    font-family:var(--serif);font-size:var(--h-2);color:var(--fg);
    display:inline-flex;align-items:center;border-bottom:1px solid var(--line2);
    padding-bottom:8px;margin-block:6px 24px;transition:color .3s,border-color .3s;word-break:break-word;
}
.big-mail:hover{color:var(--gold);border-color:var(--gold)}
.chans{display:flex;flex-wrap:wrap;gap:8px}
.chan{
    display:inline-flex;align-items:center;gap:9px;padding:10px 16px;
    border:1px solid var(--line);border-radius:2px;font-size:var(--t-md);color:var(--fg2);transition:all .3s;
}
.chan:hover{border-color:var(--gold);color:var(--gold)}
.chan svg{width:14px;height:14px}

.form{padding:clamp(20px,2.4vw,28px);background:var(--surf)}
.form label{display:block;font-size:var(--t-xs);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--fg3);margin-bottom:var(--sp-2)}
.form input,.form textarea{
    width:100%;background:transparent;border:1px solid var(--line);border-radius:2px;
    padding:11px 13px;color:var(--fg);font:inherit;font-size:var(--t-md);margin-bottom:var(--sp-3);transition:border-color .3s;
}
.form textarea{resize:vertical;min-height:110px;line-height:var(--lh-body)}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--gold)}
.form input::placeholder,.form textarea::placeholder{color:var(--fg3);opacity:.75}
.form .btn{width:100%}
.form-note{font-size:var(--t-sm);color:var(--fg3);margin-top:var(--sp-3);line-height:var(--lh-body)}

/* ─── Подвал ─────────────────────────────────────────────── */
.ftr{padding-block:30px}
.ftr-in{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:var(--t-sm);color:var(--fg3)}
.ftr-in nav{margin-left:auto;display:flex;gap:20px}
.ftr-in a:hover{color:var(--gold)}
/* строка про курс, только в EN-версии: своя строка под подвалом */
.ftr-note{flex-basis:100%;margin:0}

/* ─── Появление ──────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
    html{scroll-behavior:auto}
    .rv{opacity:1;transform:none}
}

/* ─── Страница статьи ────────────────────────────────────── */
.art-hdr{
    position:sticky;top:0;z-index:100;display:flex;align-items:center;height:56px;
    /* граница липкой панели, как у шапки лендинга: отделяет её от текста
       при прокрутке, а не размечает страницу */
    border-bottom:1px solid var(--line);
    background:color-mix(in srgb,var(--bg) 90%,transparent);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.art-back{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-md);color:var(--fg2);transition:color .3s}
.art-back:hover{color:var(--gold)}
.art-back svg{width:13px;height:13px}
.art-hdr .mark{margin-left:auto}
.art-hdr .icon-btn{margin-left:16px}

.art{max-width:680px;margin:0 auto;padding:clamp(38px,5vw,64px) var(--pad) clamp(48px,6vw,84px)}
.art-tag{display:inline-block;font-size:var(--t-xs);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--gold);margin-bottom:var(--sp-3)}
.art h1{font-size:var(--h-1);line-height:var(--lh-head);margin-bottom:var(--sp-3)}
.art-deck{font-size:var(--h-lead);line-height:var(--lh-body);color:var(--fg2);margin-bottom:var(--sp-4)}
.art-date{font-size:var(--t-sm);color:var(--fg3);letter-spacing:var(--ls-wide);padding-bottom:26px;display:block}
.art-body{margin-top:32px;font-size:var(--t-lg);line-height:var(--lh-loose)}
.art-body h2{font-size:var(--h-2);margin:40px 0 14px}
.art-body h3{font-size:var(--h-3);margin:30px 0 11px}
.art-body p{margin-bottom:var(--sp-3)}
.art-body ul{margin:0 0 20px}
.art-body li{position:relative;padding-left:22px;margin-bottom:var(--sp-2)}
.art-body li::before{content:'';position:absolute;left:0;top:12px;width:9px;height:1px;background:var(--gold)}
.art-body blockquote{
    font-family:var(--serif);font-size:var(--h-3);line-height:var(--lh-sub);color:var(--fg);
    border-left:2px solid var(--gold);padding:4px 0 4px 22px;margin:28px 0;
}
.art-body table{width:100%;border-collapse:collapse;margin:24px 0;font-size:var(--t-md)}
.art-body th,.art-body td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line)}
.art-body th{font-size:var(--t-xs);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--fg3);font-weight:600}
.art-body td b{color:var(--gold);font-weight:600}
.art-cta{margin-top:52px;padding-top:28px}
.art-cta h3{margin-bottom:var(--sp-2)}
.art-cta p{margin-bottom:var(--sp-4);color:var(--fg2)}

/* ─── Что остаётся после мандата (блок 08) ───────────────── */
.stays{margin-top:clamp(34px,3.6vw,54px);padding-top:26px;border-top:1px solid var(--line)}
.stays h3{margin-bottom:var(--sp-2);font-size:var(--h-3)}
.stays-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-md)}
.stays-grid p{font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg2)}
.stays-grid b{display:block;margin-bottom:var(--sp-1);color:var(--fg);font-weight:600}

/* ─── Как я работаю внутри компании (блок 10) ────────────── */
.inside{margin-top:clamp(30px,3.4vw,48px);padding-top:26px;border-top:1px solid var(--line)}
.inside h3{margin-bottom:var(--sp-3);font-size:var(--h-3)}
/* Колонки, а не сетка: пункты разной длины, сетка оставляла дыры. */
.inside ul{columns:2;column-gap:var(--gap-lg)}
.inside li{
    position:relative;padding-left:22px;margin-bottom:var(--sp-2);break-inside:avoid;
    font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg2);
}
.inside li::before{content:'';position:absolute;left:0;top:11px;width:9px;height:1px;background:var(--gold)}

/* ─── Адаптив ────────────────────────────────────────────── */
@media(max-width:1000px){
    .intro-lede{max-width:none}
    .stats{grid-template-columns:1fr 1fr}
    .steps{grid-template-columns:1fr 1fr}
    .step{padding-bottom:26px}
    .step:nth-child(n+3){padding-top:28px}
    .step:nth-child(n+3)::before{content:none}
    .about-grid,.contact-grid,.founder-grid{grid-template-columns:1fr}
    .founder-main{grid-column:auto;grid-row:auto}
}
@media(max-width:860px){
    .hdr-nav,.hdr .btn{display:none}
    .burger{display:grid}
    .hdr-act{margin-left:auto}
    .aud-grid,.fit{grid-template-columns:1fr;gap:28px}
    .stays-grid{grid-template-columns:1fr 1fr}
    .inside ul{columns:1}
    .case-plus{grid-template-columns:1fr}
    .rail>article{flex:0 0 min(86vw,380px)}
    .rail-nav .rnav{display:none}
}
@media(max-width:560px){
    .stats{grid-template-columns:1fr;gap:0}
    .stat{padding:22px 0 18px}
    .stat:last-child{padding-bottom:0}
    .steps{grid-template-columns:1fr;gap:0}
    .stays-grid{grid-template-columns:1fr;gap:16px}
    .step{padding:26px 0 22px}
    .step:first-child{padding-top:0}
    .step::before{content:none}
    .post{grid-template-columns:1fr auto;gap:12px 16px}
    .intro-cta{flex-direction:column;align-items:stretch}
    .intro-cta .btn,.intro-cta .btn-ghost{justify-content:center}
}

/* ─── Печать ─────────────────────────────────────────────── */
@media print{
    .hdr,.prog,.mnav,.rail-nav,.form,body::after{display:none}
    .rail{overflow:visible;flex-wrap:wrap}
    .rv{opacity:1;transform:none}
    body{background:#fff;color:#000}
}

/* ─── Форма: поля, состояния, ответ ──────────────────────── */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.form select{
    width:100%;background:transparent;border:1px solid var(--line);border-radius:2px;
    padding:11px 13px;color:var(--fg);font:inherit;font-size:var(--t-md);margin-bottom:var(--sp-3);
    transition:border-color .3s;appearance:none;cursor:pointer;
    background-image:linear-gradient(45deg,transparent 50%,var(--fg3) 50%),linear-gradient(135deg,var(--fg3) 50%,transparent 50%);
    background-position:calc(100% - 16px) 19px,calc(100% - 11px) 19px;
    background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.form select:focus{outline:none;border-color:var(--gold)}
.form select option{background:var(--bg);color:var(--fg)}
.req{color:var(--gold)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.form .btn[disabled]{opacity:.5;cursor:progress;transform:none}
.form-msg{
    margin-top:var(--sp-3);padding:12px 14px;border-radius:2px;font-size:var(--t-md);line-height:var(--lh-body);
    display:none;border:1px solid transparent;
}
.form-msg.on{display:block}
.form-msg.ok{border-color:var(--gold);background:var(--goldsoft);color:var(--fg)}
.form-msg.err{border-color:rgba(200,90,80,.55);background:rgba(200,90,80,.1);color:var(--fg)}

/* ─── Каналы связи ───────────────────────────────────────── */
.chans{gap:9px}
.chan--primary{
    background:var(--fg);color:var(--bg);border-color:var(--fg);
    font-weight:600;padding:12px 20px;
}
.chan--primary:hover{background:var(--fg);color:var(--bg);border-color:var(--fg);opacity:.86}
.chan-or{
    display:block;font-size:var(--t-sm);color:var(--fg3);
    margin:20px 0 10px;letter-spacing:0;
}
@media(max-width:560px){.form-row{grid-template-columns:1fr}}

/* ─── Профиль клиента ────────────────────────────────────── */
/* Признаки над плитками: они отвечают на "нужен ли мне человек такого уровня",
   плитки под ними - на "мой ли это масштаб". */
.fit-signs{margin:clamp(24px,3vw,38px) 0 clamp(4px,1vw,12px);max-width:860px}
.fit-signs li{margin-bottom:var(--sp-3)}
.fitbox{
    display:grid;grid-template-columns:repeat(4,1fr);
    gap:var(--gap-md);

}
.fitbox > div{padding:24px 0 22px}
.fitbox-l{
    display:block;font-size:var(--t-xs);letter-spacing:var(--ls-caps);text-transform:uppercase;
    color:var(--gold);margin-bottom:var(--sp-2);
}
.fitbox b{
    display:block;font-family:var(--serif);font-size:var(--h-3);
    color:var(--fg);font-weight:400;line-height:var(--lh-head);margin-bottom:var(--sp-1);
}
.fitbox i{display:block;font-style:normal;font-size:var(--t-sm);color:var(--fg3);line-height:var(--lh-sub)}
.fitbox-note{margin-top:var(--sp-4);font-size:var(--t-body);color:var(--fg3);max-width:720px;line-height:var(--lh-body)}
.fitbox-note b{color:var(--fg2);font-weight:600}
@media(max-width:1000px){
    .fitbox{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
    .fitbox{grid-template-columns:1fr;gap:0}
    .fitbox > div{padding:20px 0 18px}
    .fitbox > div:last-child{padding-bottom:0}
}

/* список источников в конце статьи */
.art-body ul.src li{font-size:var(--t-md);color:var(--fg3);margin-bottom:var(--sp-1)}
.art-body ul.src li::before{top:10px;opacity:.6}

/* ─── PlayBook: листы и врезка на лендинге ───────────────── */
.pb-sheets{display:flex;flex-direction:column;gap:var(--gap-sm);margin-top:34px}
.pb-sheet{
    background:#fdfdfb;border:1px solid var(--line);border-radius:3px;
    padding:clamp(8px,1.4vw,16px);box-shadow:0 18px 50px -30px rgba(0,0,0,.55);
}
.pb-sheet img{width:100%;height:auto;display:block;border-radius:2px}
.pb-note{font-size:var(--t-body);color:var(--fg3);line-height:var(--lh-body);margin-top:var(--sp-2)}

.pb-band{background:var(--bg3);transition:background var(--t)}
.pb-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--gap-lg);align-items:center}
.pb-stack{position:relative;width:100%;aspect-ratio:16/10.5}
.pb-stack .sheet{
    position:absolute;inset:0;
    background:#fdfdfb;border:1px solid rgba(0,0,0,.14);border-radius:3px;padding:8px;
    box-shadow:0 26px 64px -34px rgba(0,0,0,.7);
    transition:transform .55s var(--ease);
}
.pb-stack .sheet img{width:100%;height:100%;object-fit:contain;border-radius:2px;display:block}
.pb-stack .s3{transform:rotate(-5deg) translate(-4%,3.5%)}
.pb-stack .s2{transform:rotate(2.6deg) translate(3.5%,-1.5%)}
.pb-stack:hover .s3{transform:rotate(-8.5deg) translate(-8%,5%)}
.pb-stack:hover .s2{transform:rotate(5deg) translate(6%,-3%)}
.pb-stack:hover .s1{transform:translateY(-4px)}
@media(max-width:1000px){.pb-stack{max-width:480px}}

.pb-cover{
    background:#fdfdfb;border:1px solid var(--line);border-radius:3px;padding:10px;
    box-shadow:0 22px 60px -34px rgba(0,0,0,.6);
    transition:transform .45s var(--ease);
}
.pb-cover:hover{transform:translateY(-4px)}
.pb-cover img{width:100%;height:auto;display:block;border-radius:2px}
.pb-meta{display:flex;gap:22px;flex-wrap:wrap;margin:20px 0 26px;font-size:var(--t-sm);color:var(--fg3)}
.pb-meta b{display:block;color:var(--fg);font-family:var(--serif);font-size:var(--t-xl);font-weight:400;margin-bottom:var(--sp-1)}
@media(max-width:1000px){.pb-grid{grid-template-columns:1fr;gap:26px}.pb-cover{max-width:420px}}

/* ─── Семь линз аудита ───────────────────────────────────── */
.lenses-head{
    display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
    margin:clamp(44px,5vw,72px) 0 22px;
}
.lenses-head h3{font-size:var(--h-3)}
.lenses-head span{font-size:var(--t-body);color:var(--fg3);line-height:var(--lh-body)}
.lenses{
    display:grid;grid-template-columns:repeat(4,1fr);
    gap:clamp(20px,2.6vw,40px);
    padding-top:26px;
}
.lens{position:relative}
.lens b{
    display:block;font-family:var(--serif);font-size:var(--t-lg);color:var(--fg);
    font-weight:400;margin-bottom:var(--sp-1);
}
.lens p{font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg3)}
@media(max-width:1000px){.lenses{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.lenses{grid-template-columns:1fr;gap:22px}}

/* ═══════════════════════════════════════════════════════════
   Крупные номера секций и свет на первом экране
   Приём из разобранных референсов: цифра работает фоном,
   а не подписью, и в кадре живёт ровно один источник света.
   ═══════════════════════════════════════════════════════════ */

.sec-n{
    position:absolute;
    top:clamp(10px,1.4vw,26px);
    right:var(--gut);
    z-index:0;
    font-family:var(--serif);
    font-size:clamp(92px,14vw,230px);
    line-height:.78;
    letter-spacing:-.035em;
    color:var(--fg);
    opacity:.05;
    pointer-events:none;
    user-select:none;
    -webkit-user-select:none;
}
[data-theme="light"] .sec-n{opacity:.055}

/* Содержимое всегда поверх цифры */
.sec > .wrap,.sec--alt > .wrap{position:relative;z-index:1}

@media(max-width:720px){
    .case-top{min-height:auto}
    .sec-n{font-size:clamp(64px,20vw,110px);opacity:.038;right:var(--pad)}
}

/* ─── Первый экран ───────────────────────────────────────── */
.intro{overflow:hidden}
.intro > .wrap{position:relative;z-index:1}

.intro-fx{
    position:absolute;inset:0;z-index:0;
    width:100%;height:100%;
    pointer-events:none;
    opacity:0;
    animation:fx-in 1.6s var(--ease) .25s forwards;
}
@keyframes fx-in{to{opacity:1}}

.intro-glow{
    position:absolute;inset:0;z-index:0;
    pointer-events:none;opacity:0;
    transition:opacity .55s var(--ease);
    background:radial-gradient(340px circle at var(--gx,50%) var(--gy,50%),
        rgba(201,169,110,.14),transparent 68%);
}
[data-theme="light"] .intro-glow{
    background:radial-gradient(340px circle at var(--gx,50%) var(--gy,50%),
        rgba(201,169,110,.20),transparent 68%);
}

@media(prefers-reduced-motion:reduce){
    .intro-fx{display:none}
    .intro-glow{display:none}
}