/* ════════════════════════════════════════════════════════════
   VIMOI — built from the approved design package.
   Palette is lifted from the graded site photography; the accent
   is the red of the barrier tape that is already in every frame.
   ════════════════════════════════════════════════════════════ */
:root{
  --canvas:#0D1114;
  --panel:#151B20;
  --accent:#E03A2F;
  --accent-hover:#F04A3E;
  --accent-muted:rgba(224,58,47,.28);
  --text-primary:#E8EDF1;
  --text-secondary:#8FA0AD;
  --hair:rgba(143,160,173,.22);
  --pad:clamp(20px,4vw,68px);
  --bar-h:86px;                        /* высота закреплённой шапки — постоянная: текст слайда начинается ровно под ней, якоря считают от неё */
  --slide:480px;                       /* шаг прокрутки между страницами слайдов — один для всех, ≈ 4–5 щелчков колеса; < 900px — экран (100svh) */
}
*{margin:0;padding:0;box-sizing:border-box}

/* A hidden tab freezes transitions and smooth scrolling: they start and never
   advance, stranding elements on their first frame. Kill motion while hidden. */
html.no-motion *,html.no-motion *::before,html.no-motion *::after{
  transition:none!important;animation:none!important}
html.no-motion{scroll-behavior:auto!important}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

body{background:var(--canvas);color:var(--text-secondary);
  font-family:'IBM Plex Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  font-size:16px;line-height:1.6}
img{max-width:100%;display:block}
/* <source> не рисуется никогда. Без этого правила display:contents у <picture> поднимает его
   в flex наравне с кадром: ширина нулевая, а gap считается — лента теряла по 6px на кадр (29.08) */
source{display:none}
.founderwrap picture{display:block}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--pad)}

/* ─────────── header ─────────── */
.mark{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none;white-space:nowrap}
.mark img{height:30px;width:auto;flex:none}
.mark .glyph{font-family:'Onest',sans-serif;font-weight:800;font-size:24px;
  letter-spacing:-.04em;color:var(--text-primary)}
.mark .tag{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-secondary)}
@media(max-width:680px){.mark .tag{display:none}}
.topbar{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--bar-h);display:flex;align-items:center;
  justify-content:space-between;gap:24px;padding:0 var(--pad);transition:background .2s}
/* после прокрутки шапка получает подложку: строки читаемого слайда уходят под неё, а не в пустоту */
html.scrolled .topbar,html:not(.js) .topbar{background:rgba(13,17,20,.92);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}   /* -webkit-: Safari и iOS без него подложку не размывают */
/* волосяная линия прогресса: сколько здания уже «возведено» прокруткой */
.topbar::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:var(--sp,0%);background:var(--accent);opacity:.75;transition:width .15s linear}
html.no-motion .topbar::after{transition:none}
.mnav{display:none;position:static}
.mnav summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-primary);border:1px solid var(--hair);border-radius:2px;padding:11px 14px;transition:border-color .2s}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary i{display:block;width:18px;height:9px;position:relative}
.mnav summary i::before,.mnav summary i::after{content:'';position:absolute;left:0;right:0;height:1px;background:currentColor;transition:transform .25s}
.mnav summary i::before{top:0}.mnav summary i::after{bottom:0}
.mnav[open] summary{border-color:var(--accent-muted)}
.mnav[open] summary i::before{transform:translateY(4px) rotate(45deg)}
.mnav[open] summary i::after{transform:translateY(-4px) rotate(-45deg)}
.mlist{position:absolute;left:0;right:0;top:100%;background:var(--panel);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  display:flex;flex-direction:column;padding:6px var(--pad) 22px;max-height:calc(100vh - var(--bar-h));overflow:auto}
.mlist a{padding:15px 0;border-bottom:1px solid var(--hair);font-size:17px;color:var(--text-primary)}
.mlist a.navcta{margin-top:16px;border:1px solid var(--accent-muted);text-align:center;padding:13px 17px}
/* только навигация ШАПКИ: рейка стадий (§4) — тоже <nav>, и `nav>a` гасил её засечки на всех
   экранах ниже 1180px вместе с доступностью для скринридера (аудит 29.08) */
@media(max-width:1180px){.topbar nav>a:not(.navcta){display:none}.mnav{display:block}}
@media(max-width:400px){.mnav summary span{display:none}.mnav summary{padding:12px 13px}}
nav{display:flex;flex-wrap:nowrap;align-items:center;min-width:0;gap:clamp(12px,1.7vw,26px);font-size:13.5px}
@media(max-width:1400px){nav{gap:clamp(10px,1.3vw,20px);font-size:13px}}
nav a{color:#9DACB8;text-decoration:none;white-space:nowrap;transition:color .2s}
nav a:hover{color:var(--text-primary)}

/* «Конструкции» — единственный пункт в крупном регистре (design-package §3) */
nav a.navlead{font-weight:500;font-size:15px;color:var(--text-primary)}
nav a.navcta{color:var(--text-primary);border:1px solid var(--accent-muted);
  padding:9px 17px;border-radius:2px}
nav a.navcta:hover{background:var(--accent);border-color:var(--accent);color:#fff}

.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);margin-bottom:clamp(16px,2.2vw,26px)}
h1{font-family:'Onest',sans-serif;font-weight:800;color:var(--text-primary);
  font-size:clamp(34px,5vw,74px);line-height:.98;letter-spacing:-.042em;
  margin-bottom:clamp(18px,2.2vw,28px)}
h1 em{font-style:normal;display:block}
h1 em:last-child{color:var(--text-secondary)}
.sub{font-size:clamp(15px,1.05vw,17px);line-height:1.56;max-width:50ch;
  color:#9DACB8;margin-bottom:clamp(24px,3vw,34px)}
.cta{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-size:14.5px;
  font-weight:500;padding:16px 26px;border-radius:2px;background:var(--accent);color:#fff;
  border:0;cursor:pointer;font-family:inherit;transition:background .2s,transform .2s,box-shadow .2s}
.cta:hover{background:var(--accent-hover);transform:translateY(-1px);
  box-shadow:0 12px 38px rgba(224,58,47,.34)}
.cta .arw{transition:transform .2s}.cta:hover .arw{transform:translateX(5px)}
.ctanote{font-family:'IBM Plex Mono',monospace;font-size:12.5px;line-height:1.5;
  margin-top:15px;max-width:42ch;color:#75838E}

/* ─────────── возведение ───────────
   Липкая сцена с пятью кадрами стоит за всей историей — на любой ширине экрана. Тексты разделов
   rise.js переносит внутрь сцены (.copies): виден ровно один, под шапкой. Разделы в потоке —
   распорки прокрутки: шаг --slide + остаток текста над экраном (+ перелёт свайпа, rise.js).
   Текст выше экрана читается прокруткой страницы и всегда начинается сверху.
   Без скрипта: слой 0 включён в разметке, тексты стоят в потоке поверх первого кадра. */
.rise{position:relative}
.rstage{position:sticky;top:0;height:100vh;overflow:hidden}
.layer{position:absolute;inset:0;z-index:10;opacity:0;transition:opacity .7s ease}
.layer.on{opacity:1}
.layer picture{display:block;position:absolute;inset:0}
/* кадры внутри слоя: листаются по таймеру (rise.js), входят справа, уходят влево */
.layer .frame{position:absolute;inset:0;opacity:0;transform:translateX(7%);transition:opacity .9s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.layer .frame.on{opacity:1;transform:none}
.layer .frame.out{opacity:0;transform:translateX(-7%)}
.layer img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.8s ease}
.layer.on img{transform:scale(1)}
.scrim{position:absolute;inset:0;z-index:30;pointer-events:none;
  background:linear-gradient(98deg,rgba(13,17,20,.94) 0%,rgba(13,17,20,.8) 36%,rgba(13,17,20,.32) 64%,rgba(13,17,20,.1) 100%),
             linear-gradient(0deg,rgba(13,17,20,.9) 0%,rgba(13,17,20,.35) 22%,transparent 46%)}
/* полоса разделов поверх сцены; сама прозрачна для мыши, чтобы рейка справа была кликабельна */
.rflow{position:relative;z-index:40;margin-top:-100vh;pointer-events:none}
/* без JS: разделы идут потоком поверх первого кадра */
.rsec{scroll-margin-top:0;padding:calc(var(--bar-h) + 6vh) var(--pad) 12vh}
.rcopy{max-width:min(680px,56vw)}
/* с JS (html.overlay): разделы — распорки, высоту ставит rise.js. Якорь раздела ведёт на точку
   смены слайда — за полшага до верха распорки. */
/* --step ставит rise.js: это экран, а не 480px. Якорь ведёт на точку смены слайда — за полшага
   до верха распорки; там же стоит точка прилипания. */
html.overlay .rsec{min-height:var(--slide);padding:0;
  scroll-margin-top:calc(var(--step, var(--slide)) / 2)}
/* Прилипания (scroll-snap) здесь НЕТ и быть не должно: оно перехватывает и программную прокрутку —
   любая позиция притягивается к границе слайда, и длинный текст становится нечитаемым, а зонд
   слепнет. Проверено и снято 30.08. Перескок лечится шагом в экран, а не прилипанием. */
html.overlay .rsec.hero{scroll-margin-top:0}
/* хвост сцены: она ещё стоит после последнего слайда (высоту ставит rise.js) */
html.overlay .rtail{pointer-events:none}
.copies{position:absolute;inset:0;z-index:40;pointer-events:none}
/* короб текста — от низа шапки до низа ВИДИМОГО экрана (svh: адресная строка телефона не прячет низ),
   минус cookie-строка. Воздух сверху и снизу — внутри короба (padding-top и ::after): при чтении он
   уезжает вместе с текстом, строки уходят под шапку, которую накрывает её подложка. */
.copies .rcopy{position:absolute;left:var(--pad);top:var(--bar-h);width:min(680px,56vw);padding-top:4vh;
  bottom:var(--ck,0px);
  bottom:calc(100vh - 100svh + var(--ck,0px) + env(safe-area-inset-bottom,0px));
  overflow:hidden;pointer-events:auto;                 /* вложенной прокрутки нет: остаток текста ведёт прокрутка страницы (rise.js) */
  opacity:0;visibility:hidden;transform:translateY(44px);
  transition:opacity .5s ease,transform .7s cubic-bezier(.2,.7,.2,1),visibility 0s linear .5s;
  /* низ чтения затухает, пока есть недочитанное (--mb ставит rise.js); верх режет шапка */
  -webkit-mask-image:linear-gradient(#000 calc(100% - var(--mb,0px)),transparent);
  mask-image:linear-gradient(#000 calc(100% - var(--mb,0px)),transparent)}
.copies .rcopy::after{content:'';display:block;height:10vh}
/* вход слайда — одним блоком, снизу вверх, после того как уходящий погас */
.copies .rcopy.on{opacity:1;visibility:visible;transform:none;transition-delay:.26s,.26s,0s}
.copies .rcopy.out{opacity:0;visibility:hidden;transform:translateY(-16px);
  transition:opacity .28s ease,transform .28s ease,visibility 0s linear .28s}
html.no-motion .copies .rcopy{transition:none}
/* набор внутри слайда: плотнее, и кегль привязан к высоте экрана — на низком экране текст мельче, а не длиннее */
.copies .rcopy h2{font-size:clamp(24px,min(2.7vw,4.6vh),40px)}
.copies .rcopy .lead{font-size:clamp(14px,2vh,15.5px);margin-bottom:clamp(16px,2.4vh,28px)}
.copies .rcopy .deliver li{font-size:clamp(12px,1.7vh,13px);padding:clamp(7px,1.1vh,10px) 0 clamp(7px,1.1vh,10px) 22px}
.copies .rcopy .dtable td{font-size:clamp(12.5px,1.8vh,14px);padding:clamp(8px,1.3vh,11px) 18px clamp(8px,1.3vh,11px) 0}
.copies .rcopy .dtable td:first-child{font-size:clamp(11.5px,1.6vh,12.5px)}
.copies .rcopy .fig b{font-size:clamp(34px,min(4vw,6.5vh),58px)}
.rcopy .n{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.2em;color:var(--accent);display:block;margin-bottom:14px}
.rcopy h2{font-family:'Onest',sans-serif;font-weight:700;font-size:clamp(26px,3.2vw,46px);line-height:1.06;
  letter-spacing:-.032em;color:var(--text-primary);margin-bottom:16px;max-width:20ch}
.rcopy .lead{margin-bottom:clamp(22px,3vw,36px)}
.rcopy .figs{margin-top:clamp(22px,3vw,34px)}
.rail{position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);z-index:45;
  display:flex;flex-direction:column;gap:11px;align-items:flex-end}
/* Текст рейки белый на любом кадре. Читаемость держит собственная тень строки, а не затемнение
   всего края: тень стоит ровно под буквами, её не видно, и она не трогает фотографию.
   Положение показывает засечка — она одна остаётся акцентной. */
.rail a{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;
  color:var(--text-primary);opacity:.6;font-weight:400;
  text-shadow:0 1px 3px rgba(13,17,20,.92),0 0 8px rgba(13,17,20,.75);
  text-decoration:none;display:flex;align-items:center;gap:9px;
  transition:opacity .25s,font-weight .25s,letter-spacing .25s}
.rail a i{display:block;width:24px;height:1px;background:currentColor;transition:width .3s,background .3s;
  box-shadow:0 0 4px rgba(13,17,20,.85)}
.rail a:hover{opacity:1;font-weight:500;letter-spacing:.17em}
.rail a.on{opacity:1;font-weight:500}
.rail a.on i{width:46px;background:var(--accent)}
.rail .bar{position:absolute;right:-16px;top:-6px;bottom:-6px;width:1px;background:var(--hair)}
.rail .bar i{position:absolute;left:0;right:0;top:0;height:var(--p,0%);background:var(--accent);transition:height .2s linear}
/* ── Телефон и планшет (< 900px): та же сцена во весь экран; текст под шапкой во всю ширину
   минус рейка, кегль — от высоты экрана (vh); скрим вертикальный; рейка — засечки без подписей. ── */
@media(max-width:899px){
  :root{--bar-h:72px}
  .rcopy{max-width:none}
  .scrim{background:linear-gradient(180deg,rgba(13,17,20,.92) 0%,rgba(13,17,20,.8) 40%,rgba(13,17,20,.62) 78%,rgba(13,17,20,.74) 100%)}
  .copies .rcopy{left:var(--pad);right:calc(var(--pad) + 22px);width:auto;padding-top:3vh}
  .copies .rcopy::after{height:8vh}
  .rail{right:10px;gap:12px}
  .rail a{padding:4px 0}
  .rail a span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .rail a i{width:12px}
  .rail a.on i{width:22px}
  .rail .bar{right:-6px}
  h1{font-size:clamp(28px,min(8.6vw,5.2vh),40px)}
  .sub{font-size:clamp(13.5px,1.9vh,15px);margin-bottom:clamp(14px,2.4vh,22px)}
  .eyebrow{font-size:10px;margin-bottom:clamp(10px,1.6vh,16px)}
  .rise .rcopy .n{font-size:10px;margin-bottom:clamp(8px,1.4vh,14px)}
  .rise .rcopy h2{font-size:clamp(20px,min(6.2vw,3.6vh),28px);margin-bottom:clamp(10px,1.4vh,16px)}
  .rise .rcopy .lead{font-size:clamp(13px,1.9vh,15px);line-height:1.5;margin-bottom:clamp(12px,2vh,20px)}
  .rise .rcopy .deliver{margin-top:clamp(12px,2vh,22px)}
  .rise .rcopy .deliver li{font-size:clamp(11px,1.6vh,12.5px);padding:clamp(6px,1.1vh,10px) 0 clamp(6px,1.1vh,10px) 18px}
  .rise .rcopy .dtable{margin-top:clamp(12px,2vh,22px)}
  .rise .rcopy .dtable td{font-size:clamp(12px,1.7vh,14px)}
  .rise .rcopy .figs{margin:clamp(14px,2vh,26px) 0}
  .rise .rcopy .fig b{font-size:clamp(28px,4.6vh,40px)}
  .rise .rcopy .quiet{padding-top:14px;margin-top:16px}
  .cta{padding:13px 20px;font-size:14px}
  .ctanote{font-size:12px;margin-top:12px}}
@media(prefers-reduced-motion:reduce){.layer,.layer img,.layer .frame,.copies .rcopy,.shots img{transition:none}}
/* печать: шапка статична, кадры и рейка не печатаются, тексты слайдов идут подряд обычным текстом */
@media print{.topbar{position:static;background:none;padding:0 0 18px}.mnav,.cookie,.topbar::after{display:none}
  .rstage{position:static;height:auto;overflow:visible}.layer,.scrim,.rail,.rflow{display:none}
  .copies{position:static}.copies .rcopy{position:static;width:auto;max-width:none;overflow:visible;
    opacity:1;visibility:visible;transform:none;-webkit-mask-image:none;mask-image:none;margin:0 0 28px;padding-top:0}
  .copies .rcopy::after{display:none}}

/* внутри разделов возведения: текст лежит на фотографии, поэтому светлее, чем на графите —
   серый второго плана (#8FA0AD) на кадре тонет (замечание владельца 28.08) */
.rise .rcopy .sub,.rise .rcopy .lead,.rise .rcopy .quiet .lead{color:#E3E9EE}
.rise .rcopy .deliver li,.rise .rcopy .dtable td{color:#DCE3E8}
.rise .rcopy .dtable td:first-child{color:#EDF1F4}
.rise .rcopy .deliver li b{color:#fff}
.rise .rcopy .deliver h4,.rise .rcopy .dtable th,.rise .rcopy .fig span,.rise .rcopy .ctanote{color:#B8C4CE}
.rise .rcopy .nda{color:#C9D2D9;border-left-color:rgba(224,58,47,.5)}
.rise .rcopy .quiet{border-top-color:rgba(232,237,241,.28)}
.rise .rcopy .deliver li,.rise .rcopy .deliver h4,.rise .rcopy .dtable td,.rise .rcopy .dtable th{border-bottom-color:rgba(232,237,241,.22)}
/* внутри разделов возведения */
.deliver li b{color:var(--text-primary);font-weight:500;margin-right:6px}
.rcopy .quiet{border-top:1px solid var(--hair);padding-top:22px;margin-top:26px}
.rcopy .quiet .lead{margin-bottom:0}

/* ─────────── bands below ─────────── */
.band{padding:clamp(64px,10vh,132px) 0;position:relative;scroll-margin-top:calc(var(--bar-h) + 8px)}
.bandh{font-family:'Onest',sans-serif;font-weight:700;color:var(--text-primary);
  font-size:clamp(24px,3vw,44px);line-height:1.08;letter-spacing:-.032em;
  max-width:22ch;margin-bottom:clamp(20px,2.4vw,32px)}
.lead{font-size:17px;line-height:1.6;max-width:60ch;color:#9DACB8;
  margin-bottom:clamp(28px,4vw,52px)}

/* trust component — a block, never a footer line (brief §8a) */
.trustband{background:var(--panel);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  padding:clamp(40px,6vh,72px) 0}
.trust{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,72px);align-items:start}
@media(max-width:820px){.trust{grid-template-columns:1fr;gap:26px}}
.trust h4{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:400;margin-bottom:13px;color:var(--text-secondary)}
.engine{font-family:'Onest',sans-serif;font-weight:700;color:#DDE5EB;
  font-size:clamp(22px,2vw,32px);letter-spacing:-.025em;line-height:1.15}
.engine .lesser{opacity:.38;font-size:.52em;letter-spacing:0;font-weight:500;
  font-family:'IBM Plex Sans',sans-serif}
.codes{display:flex;flex-wrap:wrap;gap:8px}
.codes span{font-family:'IBM Plex Mono',monospace;font-size:12.5px;padding:8px 14px;
  border-radius:2px;white-space:nowrap;color:#B0BEC9;border:1px solid var(--hair)}

/* work — a filmstrip, deliberately not a card grid */
/* minmax(0,…): колонка ленты не растёт до суммы натуральных ширин кадров (min-content flex-контейнера) */
.proj{padding:clamp(28px,4vw,44px) 0;border-top:1px solid var(--hair);
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,3vw,54px);align-items:center}
/* лента кадров: наведённый кадр разрастается по ширине, соседи сжимаются, полоса не меняет размера.
   Высота кадра постоянна, а ширина не может стать больше, чем у снимка при этой высоте
   (--ar = ширина/высота файла, в разметке; site.js досчитывает из width/height): кадр открывает
   больше снимка, но никогда не растягивает его — портретные кадры не «разъезжаются» */
.shots{--sh:clamp(240px,30vw,440px);display:flex;gap:6px;height:var(--sh);min-width:0}
/* <picture> — обёртка формата, а не элемент раскладки: display:contents оставляет
   flex-элементом сам <img>, поэтому вся механика аккордеона ниже не меняется */
.shots picture{display:contents}
.shots img{flex:1 1 0;min-width:0;width:auto;height:100%;max-width:calc(var(--sh) * var(--ar,1.78));object-fit:cover;filter:saturate(.85);
  transition:flex .65s cubic-bezier(.2,.7,.2,1),filter .5s}
@media(hover:hover){.shots:hover img{flex:.55}.shots img:hover{flex:2.8;filter:none}}
@media(max-width:900px){.proj{grid-template-columns:minmax(0,1fr)}
  .shots{--sh:clamp(220px,52vw,320px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .shots::-webkit-scrollbar{display:none}
  .shots img{flex:0 0 78%;scroll-snap-align:start;filter:none}}
.proj h3{font-family:'Onest',sans-serif;font-weight:700;font-size:clamp(19px,1.7vw,26px);
  color:var(--text-primary);letter-spacing:-.02em;margin-bottom:8px}
.spec{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--text-secondary);
  margin-bottom:14px}
.proj p:last-child{font-size:15.5px;line-height:1.6;color:#9DACB8}

/* founder */
.founder{border-top:1px solid var(--hair)}
.founderwrap{display:grid;grid-template-columns:.85fr 1fr;gap:clamp(28px,4vw,68px);align-items:center}
@media(max-width:900px){.founderwrap{grid-template-columns:1fr}}
.founderwrap figure{margin:0}
.founderwrap img{width:100%;border-radius:2px}
.name{font-family:'Onest',sans-serif;font-weight:700;font-size:clamp(20px,1.8vw,28px);
  color:var(--text-primary);letter-spacing:-.02em}
.role{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--accent);margin:6px 0 0}
.cred{font-family:'IBM Plex Mono',monospace;font-size:12.5px;line-height:1.55;
  color:var(--text-secondary);margin:14px 0 20px;max-width:48ch;
  border-left:2px solid var(--hair);padding-left:16px}
.founderwrap p:last-child{font-size:16px;line-height:1.65;color:#9DACB8;max-width:52ch}

/* the single action */
.send{border-top:1px solid var(--hair);background:var(--panel)}
.sendwrap{display:grid;grid-template-columns:1fr .8fr;gap:clamp(28px,4vw,72px);align-items:start}
@media(max-width:900px){.sendwrap{grid-template-columns:1fr}}
.nda{font-family:'IBM Plex Mono',monospace;font-size:12.5px;line-height:1.55;
  color:#75838E;max-width:46ch;border-left:2px solid var(--accent-muted);padding-left:16px}
form{display:flex;flex-direction:column;gap:16px}
label{display:flex;flex-direction:column;gap:7px;font-family:'IBM Plex Mono',monospace;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
input{background:transparent;border:0;border-bottom:1px solid var(--hair);padding:11px 0;
  color:var(--text-primary);font-family:'IBM Plex Sans',sans-serif;font-size:16px;
  transition:border-color .2s}
input:focus{outline:0;border-bottom-color:var(--accent)}
form .cta{align-self:flex-start;margin-top:8px}

footer{border-top:1px solid var(--hair);padding:26px 0 34px;
  /* cookie-строка стоит поверх низа экрана: пока она видна, подвал отдаёт ей свою высоту,
     иначе последние строки (реквизиты, примечание рассылки) читаются из-под неё */
  padding-bottom:calc(34px + var(--ck,0px));
  font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--text-secondary)}
.footwrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.fl{display:flex;gap:22px}
footer a{color:var(--text-secondary);text-decoration:none}
footer a:hover{color:var(--text-primary)}


/* explicit width/height on every <img> reserves the box before the bytes land;
   these two rules keep that from freezing the real aspect ratio in the layout */
.layer img{height:100%}
.founderwrap img{height:auto}

/* ─────────── inner pages ─────────── */
.pagehead{padding:calc(var(--bar-top,120px) + 4vh) 0 clamp(40px,6vh,80px);
  border-bottom:1px solid var(--hair)}
.pagehead .eyebrow{margin-bottom:18px}
.pagetitle{font-family:'Onest',sans-serif;font-weight:800;color:var(--text-primary);
  font-size:clamp(30px,4.2vw,62px);line-height:1.02;letter-spacing:-.038em;
  max-width:18ch;margin-bottom:clamp(18px,2.4vw,30px)}

.figs{display:flex;gap:clamp(24px,4vw,54px);margin:clamp(26px,3vw,38px) 0;flex-wrap:wrap}
.fig b{display:block;font-family:'Onest',sans-serif;font-weight:800;
  font-size:clamp(42px,5vw,76px);line-height:1;letter-spacing:-.05em;color:var(--accent)}
.fig span{display:block;font-family:'IBM Plex Mono',monospace;font-size:12px;
  line-height:1.5;color:var(--text-secondary);margin-top:10px;max-width:22ch}
.quiet{border-top:1px solid var(--hair)}
.ca{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:14px;
  letter-spacing:.1em;color:var(--text-primary);margin-bottom:14px}

/* список «стадия → что получаете» — линейками, не прозой */
.deliver{margin-top:clamp(22px,3vw,34px);max-width:66ch}
.deliver h4{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:400;color:var(--text-secondary);
  padding-bottom:12px;border-bottom:1px solid var(--hair)}
.deliver ul{list-style:none}
.deliver li{font-family:'IBM Plex Mono',monospace;font-size:13.5px;line-height:1.5;
  color:#B0BEC9;padding:13px 0 13px 22px;border-bottom:1px solid var(--hair);position:relative}
.deliver li::before{content:'';position:absolute;left:0;top:21px;width:8px;height:1px;
  background:var(--accent)}

/* таблица «что считаем → что возвращаем» */
.dtable{width:100%;border-collapse:collapse;margin-top:clamp(22px,3vw,34px)}
.dtable th{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:400;color:var(--text-secondary);text-align:left;
  padding:0 24px 12px 0;border-bottom:1px solid var(--hair)}
.dtable td{font-size:15px;line-height:1.55;color:#9DACB8;padding:16px 24px 16px 0;
  border-bottom:1px solid var(--hair);vertical-align:top}
.dtable td:first-child{font-family:'IBM Plex Mono',monospace;font-size:13px;
  color:#B0BEC9;width:42%}
@media(max-width:760px){
  .dtable,.dtable tbody,.dtable tr,.dtable td{display:block;width:auto}
  .dtable thead{display:none}
  .dtable tr{border-bottom:1px solid var(--hair);padding:14px 0}
  .dtable td{border:0;padding:3px 0}
  .dtable td:first-child{width:auto;color:var(--accent)}}

/* the active page in the top bar, so the visitor knows where they are standing */
.topbar nav>a[aria-current="page"]{color:var(--text-primary)}   /* только шапка: см. правило пряток выше */

/* Draft mode. Every claim still waiting on the owner's confirmation is underlined
   on screen. Drop class="draft" from <body> and the page reads finished — the
   markers stay in the markup as a record of what was checked and when. */
body.draft [data-unconfirmed]{border-bottom:1px dashed var(--accent)}
body.draft .dtable td[data-unconfirmed]{border-bottom-style:solid;
  box-shadow:inset 0 -1px 0 var(--accent-muted)}
@media(max-width:760px){body.draft .dtable td[data-unconfirmed]{border:0;box-shadow:none;
  text-decoration:underline dashed var(--accent-muted);text-underline-offset:4px}}

/* ─────────── форма, контакты, подвал, cookie ─────────── */
textarea{background:transparent;border:0;border-bottom:1px solid var(--hair);padding:11px 0;color:var(--text-primary);
  font-family:'IBM Plex Sans',sans-serif;font-size:16px;resize:vertical;transition:border-color .2s}
textarea:focus{outline:0;border-bottom-color:var(--accent)}
input[type=file]{border:0;padding:8px 0;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--text-secondary)}
/* кнопка выбора файла — единственное место, где иначе виден интерфейс операционной системы:
   белая системная кнопка посреди графитовой панели (аудит 29.08). -webkit-: Safari до 14.1 */
input[type=file]::-webkit-file-upload-button,
input[type=file]::file-selector-button{font:inherit;letter-spacing:.14em;text-transform:uppercase;
  background:transparent;color:var(--text-primary);border:1px solid var(--hair);border-radius:2px;
  padding:9px 15px;margin:0 14px 0 0;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
input[type=file]::-webkit-file-upload-button:hover,
input[type=file]::file-selector-button:hover{border-color:var(--accent-muted);color:#fff;background:rgba(224,58,47,.08)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{flex-direction:row;align-items:flex-start;gap:10px;text-transform:none;letter-spacing:0;font-size:12.5px;line-height:1.5;color:#75838E}
.consent input{margin-top:3px;accent-color:var(--accent)}
.consent a{color:var(--text-secondary)}
.cta:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.fstate{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--text-secondary);min-height:1.5em}
form.sent label,form.sent button{display:none}
.contacts{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin-top:26px;font-family:'IBM Plex Mono',monospace;font-size:12.5px}
.contacts div{display:contents}
.contacts dt{letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);font-size:10px;padding-top:3px}
.contacts dd{margin:0}
.contacts a{color:var(--text-primary);text-decoration:none}
.contacts a:hover{color:var(--accent)}
.footwrap{align-items:flex-start}
.req{color:#5F6C77}
.subscribe{flex-direction:row;align-items:flex-end;gap:8px}
.subscribe label{font-size:10px}
.subscribe input{width:180px;font-size:13px;padding:6px 0}
.subscribe button{background:none;border:0;color:var(--text-secondary);font-size:16px;cursor:pointer;padding:4px}
/* форме нужна своя ширина: без неё flex-basis:100% у примечания не от чего считать,
   и строка вставала рядом с полем, а не под ним */
.subscribe{flex-wrap:wrap;max-width:300px}
.subnote{flex:1 0 100%;font-size:10.5px;line-height:1.45;color:#5F6C77;max-width:34ch;margin-top:8px;
  text-transform:none;letter-spacing:0}
.subnote a{color:var(--text-secondary)}
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;justify-content:center;gap:18px;align-items:center;flex-wrap:wrap;
  padding:10px var(--pad);background:rgba(21,27,32,.96);border-top:1px solid var(--hair);font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--text-secondary)}
.cookie a{color:var(--text-primary)}
.cookie button{background:none;border:1px solid var(--hair);color:var(--text-primary);font:inherit;padding:5px 12px;border-radius:2px;cursor:pointer}
@media(max-width:600px){.cookie{padding:8px var(--pad);gap:8px 14px;font-size:11px;line-height:1.4}.cookie button{padding:4px 10px}}

/* ─────────── документы ─────────── */
.docs{border-top:1px solid var(--hair);scroll-margin-top:calc(var(--bar-h) + 8px)}
.docwrap{max-width:calc(72ch + 2 * var(--pad))}
.docs .ca{margin-top:26px}
.docs p{font-size:15.5px;line-height:1.65;color:#9DACB8;max-width:72ch}
.req-list{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;font-size:15px}
.req-list div{display:contents}
.req-list dt{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-secondary);padding-top:4px}
.req-list dd{margin:0;color:#B0BEC9}