/* =========================================================================
   СИСТЕМЫ ПОРЯДОК — дизайн-система
   Тема: инженерная документация. Бумага, сетка, штамп листа, выносные линии.
   ========================================================================= */

/* ---------- Шрифты ----------
   IBM Plex, подрезанный до нужных символов: кириллица, латиница, цифры,
   типографские знаки, ₽ и стрелки. Пять файлов, около 50 КБ на всё.
   Лицензия SIL OFL 1.1 — текст лежит рядом, в fonts/LICENSE.txt.
   ---------------------------------------------------------------------- */
@font-face{font-family:'Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/PlexSans-400.7e574719fd12.woff2") format('woff2');}
@font-face{font-family:'Plex Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/PlexSans-500.657eb7e57c72.woff2") format('woff2');}
@font-face{font-family:'Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/PlexSans-600.e6f5631e10ca.woff2") format('woff2');}
@font-face{font-family:'Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/PlexMono-400.11292ff48f41.woff2") format('woff2');}
@font-face{font-family:'Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/PlexMono-500.5f8e66adaeb1.woff2") format('woff2');}

/* ---------- Токены ---------- */
:root{
  /* Палитра */
  --graphite:#0D0F0E;   /* графит — текст, линии, кнопки, «карандаш» */
  --paper:#F2F2EE;      /* бумага — фон страницы */
  --sheet:#FFFFFF;      /* лист — карточки, поля, наложенные панели */
  --line:#C7CBC3;       /* линия — рамки, разделители, штриховка */
  --muted:#5E635C;      /* серый текст — вторичный уровень */
  --ink:#1F3EC8;        /* чернила — акцент: активное, ссылки, фокус */

  --grid-minor:rgba(13,15,14,.035);
  --grid-major:rgba(13,15,14,.075);
  --ink-wash:rgba(31,62,200,.07);
  --graphite-wash:rgba(13,15,14,.045);

  /* Сетка */
  --wrap:1240px;
  --pad:clamp(18px,5vw,48px);
  --gut:clamp(16px,2.2vw,28px);
  --u:8px;                       /* базовый модуль вертикального ритма */
  --sec:clamp(60px,7vw,104px);   /* вертикальный отступ секции */

  /* Типографика */
  --f-sans:'Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-mono:'Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --t-h1:clamp(2.05rem,1.15rem + 3.7vw,4.25rem);
  --t-h2:clamp(1.6rem,1.05rem + 2.1vw,2.75rem);
  --t-h3:clamp(1.12rem,1.02rem + .4vw,1.375rem);
  --t-lede:clamp(1.02rem,.97rem + .3vw,1.25rem);
  --t-body:1rem;
  --t-small:.875rem;
  --t-tag:.6875rem;   /* mono-надписи чертежа */
}

/* ---------- База ---------- */
*,*::before,*::after{box-sizing:border-box}
/* Атрибут hidden должен побеждать любые display из компонентов */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;
  font-family:var(--f-sans);
  font-size:var(--t-body);
  line-height:1.6;
  color:var(--graphite);
  background-color:var(--paper);
  /* Миллиметровка: модуль 8px, крупная клетка 80px */
  background-image:
    linear-gradient(var(--grid-minor) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-minor) 1px,transparent 1px),
    linear-gradient(var(--grid-major) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-major) 1px,transparent 1px);
  background-size:8px 8px,8px 8px,80px 80px,80px 80px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}

/* Фокус — виден всегда, толщиной в чертёжную линию */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:1px}
.on-graphite :focus-visible{outline-color:var(--paper)}

.skip{
  position:absolute;left:var(--pad);top:-100px;z-index:100;
  background:var(--graphite);color:var(--paper);
  padding:12px 18px;font:500 var(--t-small)/1 var(--f-mono);
  text-decoration:none;transition:top .15s;
}
.skip:focus{top:12px}

/* ---------- Раскладка ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.sheet{position:relative;padding-block:var(--sec) calc(var(--sec) * .78)}
.sheet + .sheet{border-top:1px solid var(--line)}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut)}
@media (max-width:860px){.grid{grid-template-columns:repeat(6,1fr)}}

/* ---------- Типографика ---------- */
h1,.h1{font-size:var(--t-h1);font-weight:600;line-height:1.02;letter-spacing:-.025em;text-wrap:balance}
h2,.h2{font-size:var(--t-h2);font-weight:600;line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
h3,.h3{font-size:var(--t-h3);font-weight:600;line-height:1.25;letter-spacing:-.01em}
.lede{font-size:var(--t-lede);line-height:1.55;color:var(--muted);max-width:62ch}
.small{font-size:var(--t-small);line-height:1.55;color:var(--muted)}
.mono{font-family:var(--f-mono)}

/* Выносная надпись — «язык чертежа» */
.tag{
  font:500 var(--t-tag)/1.2 var(--f-mono);
  text-transform:uppercase;letter-spacing:.14em;color:var(--muted);
  display:inline-flex;align-items:center;gap:.6em;
}
.tag::before{
  content:"";width:24px;height:1px;background:var(--graphite);flex:none;
}
.tag--ink{color:var(--ink)}
.tag--ink::before{background:var(--ink)}
.tag--plain::before{display:none}

.sec-head{max-width:70ch;margin-bottom:clamp(32px,4.5vw,64px)}
.sec-head .tag{margin-bottom:calc(var(--u)*3)}
.sec-head h1,.sec-head h2{margin-bottom:calc(var(--u)*2)}

/* ---------- Фирменная деталь: штамп листа (основная надпись) ---------- */
.stamp{
  display:flex;margin-top:clamp(28px,3.5vw,48px);margin-left:auto;
  width:max-content;max-width:100%;
  border:1px solid var(--graphite);background:var(--sheet);
}
.stamp span{
  padding:7px 12px;
  font:500 var(--t-tag)/1.2 var(--f-mono);
  text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;
}
.stamp span + span{border-left:1px solid var(--graphite)}
.stamp .s-num{background:var(--graphite);color:var(--paper)}
.stamp .s-org{color:var(--ink)}
/* Штамп на графитовом листе — инверсия */
.cta .stamp{border-color:var(--paper);background:transparent;color:var(--paper)}
.cta .stamp span + span{border-left-color:var(--paper)}
.cta .stamp .s-num{background:var(--paper);color:var(--graphite)}
.cta .stamp .s-org{color:var(--paper)}
@media (max-width:600px){
  .stamp{width:100%}
  .stamp .s-scale{display:none}
  .stamp span{padding:6px 8px;letter-spacing:.06em;overflow:hidden;text-overflow:ellipsis}
  .stamp .s-name{flex:1;min-width:0}
}

/* Крестики привязки к сетке (уголки листа) */
.tick{position:absolute;width:9px;height:9px;pointer-events:none}
.tick::before,.tick::after{content:"";position:absolute;background:var(--graphite);opacity:.45}
.tick::before{left:0;top:4px;width:9px;height:1px}
.tick::after{top:0;left:4px;width:1px;height:9px}
.tick--tl{left:calc(var(--pad) - 4px);top:calc(var(--sec) * .38)}
.tick--tr{right:calc(var(--pad) - 4px);top:calc(var(--sec) * .38)}

/* ---------- Кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.75em;
  padding:16px 26px;border:1px solid var(--graphite);background:var(--graphite);color:var(--paper);
  font:500 var(--t-small)/1 var(--f-sans);letter-spacing:.005em;
  text-decoration:none;cursor:pointer;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.btn .arrow{font-family:var(--f-mono);transition:transform .16s ease}
.btn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
@media (prefers-reduced-motion:no-preference){.btn:hover .arrow{transform:translateX(4px)}}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:transparent;color:var(--graphite)}
.btn--ghost:hover{background:var(--graphite);border-color:var(--graphite);color:var(--paper)}
.btn--block{width:100%;justify-content:center;padding-block:18px}
.btn--sm{padding:11px 16px;font-size:var(--t-tag);font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.1em}

/* ---------- Шапка ---------- */
.head{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
@supports not (backdrop-filter:blur(8px)){.head{background:var(--paper)}}
.head__in{display:flex;align-items:center;gap:var(--gut);min-height:64px}
.logo{
  display:flex;align-items:center;gap:10px;text-decoration:none;
  margin-right:auto;color:var(--graphite);
}
.logo__mark{width:26px;height:26px;flex:none;display:block}
.logo__word{display:flex;flex-direction:column;line-height:1}
.logo__word i{
  font:500 .625rem/1 var(--f-mono);font-style:normal;color:var(--ink);
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:3px;
}
.logo__word b{font:600 1.0625rem/1 var(--f-sans);letter-spacing:-.02em}
.logo:hover .logo__mark{color:var(--ink)}
@media (max-width:400px){
  .logo__mark{width:22px;height:22px}
  .logo__word b{font-size:.9375rem}
}
.nav{display:flex;gap:clamp(14px,1.6vw,26px)}
.nav a{
  font:400 var(--t-tag)/1 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);text-decoration:none;padding:6px 0;position:relative;
}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .16s}
.nav a:hover{color:var(--graphite)}
.nav a:hover::after{transform:scaleX(1)}
.head .btn--sm{flex:none}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:1px solid var(--line);cursor:pointer}
.burger span{display:block;width:18px;height:1px;background:var(--graphite);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:1px;background:var(--graphite)}
.burger span::before{top:-5px}.burger span::after{top:5px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* Меню, телефон и кнопка живут в одной обёртке: на широком экране — строка,
   на телефоне — выпадающая панель под шапкой. Отдельно позиционировать их
   нельзя: absolute считается от самой шапки высотой 64px, и кнопка садилась
   поверх крестика закрытия. */
.head__menu{display:flex;align-items:center;gap:clamp(14px,1.6vw,26px)}

@media (max-width:960px){
  .burger{display:flex}
  .head__menu{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);
    border-bottom:1px solid var(--graphite);
    padding:0 var(--pad) calc(var(--u)*3);
    max-height:calc(100vh - 64px);
    max-height:calc(100dvh - 64px);
    overflow-y:auto;
    box-shadow:0 14px 26px rgba(13,15,14,.10);
  }
  .head.is-open .head__menu{display:flex}
  .head__menu .nav{flex-direction:column;gap:0}
  .head__menu .nav a{padding:15px 0;border-top:1px solid var(--line);font-size:.8125rem}
  .head__menu .nav a::after{display:none}
  .head__menu .head__tel{
    display:block;padding:16px 0;
    border-top:1px solid var(--line);border-bottom:0;
    font-size:1.0625rem;
  }
  .head__menu .btn--sm{
    justify-content:center;margin-top:calc(var(--u)*2);
    padding-block:17px;font-size:var(--t-small);
  }
}

/* ---------- Первый экран ---------- */
.hero{padding-top:clamp(48px,7vw,96px);padding-bottom:var(--sec)}
.hero__text{grid-column:span 7}
.hero__vis{grid-column:9 / span 4;align-self:center}
@media (max-width:1080px){.hero__text{grid-column:span 12}.hero__vis{grid-column:span 12;margin-top:48px}}
@media (max-width:860px){.hero__text,.hero__vis{grid-column:span 6}}

.hero h1{margin-block:calc(var(--u)*3) calc(var(--u)*3)}
.hero .lede{max-width:52ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--u) calc(var(--u)*2);align-items:center;margin-top:calc(var(--u)*5)}
.hero__note{
  margin-top:calc(var(--u)*3);padding-left:14px;border-left:1px solid var(--line);
  font:400 var(--t-small)/1.5 var(--f-mono);color:var(--muted);max-width:44ch;
}

/* Хаос → порядок */
/* Бумажки — левая половина мысли «хаос → порядок». Раньше две из четырёх
   уходили под карточку системы и не читались: смысл терялся, оставалась
   просто фактура. Теперь все четыре лежат выше и читаются целиком. */
/* Бумажки торчат ИЗ-ЗА верхнего края карточки системы — веером, как
   листки, засунутые в коробку. Нижняя часть каждой уходит под карточку,
   наверху остаётся ровно столько, чтобы прочесть надпись.
   z-index ниже карточки (у неё 2), иначе они лягут поверх и всё закроют. */
.flow{position:relative;padding-top:74px}
.flow__slips{position:absolute;inset:0 0 auto 0;height:210px;pointer-events:none;z-index:1}
.slip{
  position:absolute;background:var(--paper);border:1px solid var(--line);
  padding:8px 10px;font:400 var(--t-tag)/1.3 var(--f-mono);color:var(--muted);
  box-shadow:2px 3px 0 rgba(13,15,14,.05);
  width:min(46%,152px);min-height:130px;
  /* Свой угол поворота у каждой — чтобы дрейф не сбивал наклон. */
  --tilt:0deg;
  /* Вращение вокруг нижнего края: тогда верхушки расходятся веером,
     а низ остаётся на месте — под карточкой, где его не видно. */
  transform-origin:50% 100%;
  transform:rotate(var(--tilt));
}
/* Веер: крайние наклонены сильнее и сидят ниже, средние стоят прямее и
   торчат выше. Порядок в разметке — не порядок на экране: длинной записке
   в две строки нужна средняя позиция, где видно больше. */
.slip:nth-child(1){left:21%;  top:0;   --tilt:-6deg}   /* Ира — две строки */
.slip:nth-child(2){left:0;    top:28px;--tilt:-15deg}
.slip:nth-child(3){right:22%; top:4px; --tilt:7deg}
.slip:nth-child(4){right:0;   top:32px;--tilt:16deg}

/* Лёгкий дрейф. Периоды нарочно разные и не кратные друг другу — иначе
   бумажки начинают качаться в такт, и вместо беспорядка получается
   маятник. Смещения крошечные: это фон, а не аттракцион. */
@keyframes slip-drift{
  0%   {transform:rotate(var(--tilt)) translate(0,0)}
  25%  {transform:rotate(calc(var(--tilt) + .8deg)) translate(2px,-3px)}
  50%  {transform:rotate(var(--tilt)) translate(-1px,-5px)}
  75%  {transform:rotate(calc(var(--tilt) - .7deg)) translate(-3px,-2px)}
  100% {transform:rotate(var(--tilt)) translate(0,0)}
}
.flow.is-set .slip{animation:slip-drift var(--dur,9s) ease-in-out var(--lag,0s) infinite}
.slip:nth-child(1){--dur:9.4s;  --lag:0s}
.slip:nth-child(2){--dur:11.7s; --lag:-2.3s}
.slip:nth-child(3){--dur:8.3s;  --lag:-4.1s}
.slip:nth-child(4){--dur:12.9s; --lag:-1.2s}

.order{
  position:relative;z-index:2;background:var(--sheet);border:1px solid var(--graphite);
  box-shadow:10px 12px 0 rgba(13,15,14,.06);
}
.order__bar{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px 14px;border-bottom:1px solid var(--graphite);
  font:500 var(--t-tag)/1 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;
}
.order__bar em{font-style:normal;color:var(--ink)}
.order__row{
  display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:baseline;
  padding:12px 14px;font:400 var(--t-tag)/1.4 var(--f-mono);
}
.order__row + .order__row{border-top:1px solid var(--line)}
.order__row b{font-weight:500;color:var(--muted)}
.order__row span{color:var(--graphite);font-family:var(--f-sans);font-size:.8125rem}
.order__row i{font-style:normal;justify-self:end;white-space:nowrap;letter-spacing:.04em}
.st-ok{color:var(--muted)}
.st-due{color:var(--ink);font-weight:500}
.order__foot{
  padding:11px 14px;border-top:1px solid var(--graphite);background:var(--graphite);color:var(--paper);
  font:400 var(--t-tag)/1.3 var(--f-mono);letter-spacing:.06em;
}

/* ---------- 02. Боли ---------- */
.pains{border-top:1px solid var(--line)}
.pain{
  display:grid;grid-template-columns:auto 1fr auto;gap:6px clamp(16px,3vw,40px);
  align-items:baseline;padding:clamp(18px,2.4vw,26px) 0;border-top:1px solid var(--line);
}
.pains ul li:last-child{border-bottom:1px solid var(--line)}
.pain__n{font:500 var(--t-tag)/1.6 var(--f-mono);color:var(--muted);letter-spacing:.1em}
.pain__t{font-size:clamp(1.02rem,.95rem + .5vw,1.375rem);line-height:1.35;letter-spacing:-.012em;max-width:52ch}
.pain__m{
  font:400 var(--t-tag)/1.6 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink);white-space:nowrap;justify-self:end;
}
@media (max-width:720px){
  .pain{grid-template-columns:auto 1fr}
  .pain__m{grid-column:2;justify-self:start;margin-top:4px}
}
.pains__after{
  margin-top:calc(var(--u)*5);padding:clamp(18px,2.6vw,28px);
  background:var(--graphite);color:var(--paper);max-width:64ch;
}
.pains__after p{font-size:var(--t-lede);line-height:1.5;text-wrap:balance}

/* ---------- 03. Что я делаю ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.card{background:var(--paper);padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;gap:calc(var(--u)*2);transition:background .18s}
.card:hover{background:var(--sheet)}
.card__n{font:500 var(--t-tag)/1 var(--f-mono);color:var(--ink);letter-spacing:.14em}
.card p{color:var(--muted);font-size:var(--t-small);line-height:1.6}
.card ul{display:flex;flex-direction:column;gap:6px;margin-top:auto;padding-top:calc(var(--u)*2);border-top:1px solid var(--line)}
.card li{font:400 var(--t-tag)/1.5 var(--f-mono);color:var(--muted);padding-left:16px;position:relative}
.card li::before{content:"—";position:absolute;left:0;color:var(--graphite)}
.card--stat h3{font-size:clamp(1.75rem,1.2rem + 1.8vw,2.5rem);line-height:1;letter-spacing:-.03em}

/* ---------- 04. Работы ----------
   На главной — вывеска: снимок, кто, срок, две кнопки. Подробное живёт
   на своей странице. Раньше всё стояло на главной и растягивало её
   на пять экранов: человек, который хотел понять «а что он вообще
   делал», был вынужден пролистывать чужие боли целиком. */

.works{display:grid;gap:var(--gut)}
@media (min-width:820px){.works{grid-template-columns:1fr 1fr}}

.work{
  background:var(--sheet);border:1px solid var(--line);
  display:flex;flex-direction:column;
}
.work__shot{
  display:block;line-height:0;border-bottom:1px solid var(--line);
  overflow:hidden;background:var(--paper);
}
.work__shot img{
  width:100%;height:auto;display:block;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion:no-preference){
  .work__shot:hover img{transform:scale(1.02)}
}
.work__shot:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}

.work__body{padding:clamp(18px,2.6vw,26px);display:grid;gap:14px;
  align-content:start;flex:1}
.work__body h3{font-size:var(--t-h3);letter-spacing:-.01em}
.work__lede{font-size:var(--t-small);color:var(--muted);line-height:1.6}

.work__facts{
  list-style:none;padding:0;margin:0;
  display:flex;flex-wrap:wrap;gap:14px clamp(18px,3vw,32px);
  padding-top:14px;border-top:1px solid var(--line);
}
.work__facts li{display:grid;gap:3px}
.work__facts span{font:400 var(--t-tag)/1 var(--f-mono);text-transform:uppercase;
  letter-spacing:.12em;color:var(--muted)}
.work__facts b{font:500 .9375rem/1.3 var(--f-sans)}
.work__facts a{color:var(--ink);text-decoration:none}
.work__facts a:hover{text-decoration:underline}
.work__facts .arrow{font-family:var(--f-mono);margin-left:4px}

/* На странице работы те же факты стоят крупнее и с пояснением: «две
   недели» звучит долго, пока не сказано, что сайт открылся на третий
   день, а остальное время его доводили под человека. */
.work__facts--wide{margin-top:clamp(24px,3vw,36px);gap:18px clamp(24px,4vw,48px)}
.work__facts--wide b{font-size:1.25rem}
.work__facts--wide em{
  font:400 var(--t-tag)/1.4 var(--f-mono);color:var(--muted);
  font-style:normal;max-width:32ch;
}

.work__go{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:4px}

/* ---------- Окно «было и стало» ---------- */

.ba-box{
  border:0;padding:0;background:transparent;
  max-width:min(900px,94vw);max-height:92vh;
}
.ba-box::backdrop{background:rgba(13,15,14,.86)}
.ba-box__in{
  background:var(--sheet);border:1px solid var(--graphite);
  color:var(--graphite);max-height:92vh;overflow-y:auto;
}
.ba-box__head{
  display:flex;gap:16px;align-items:center;justify-content:space-between;
  padding:clamp(16px,2.4vw,22px) clamp(18px,2.6vw,28px);
  border-bottom:1px solid var(--graphite);
  position:sticky;top:0;background:var(--sheet);z-index:1;
}
.ba-box__head h2{font-size:var(--t-h3)}
.ba-box__close{
  flex:none;width:36px;height:36px;line-height:1;font-size:1.4rem;
  background:transparent;border:1px solid var(--line);color:var(--graphite);
  cursor:pointer;
}
.ba-box__close:hover{background:var(--graphite);color:var(--paper)}
.ba-box__foot{padding:0 clamp(18px,2.6vw,28px) clamp(18px,2.6vw,28px)}
@media (prefers-reduced-motion:no-preference){
  .ba-box[open]{animation:lightbox-in .2s ease both}
}

/* ---------- Было / стало ----------
   Две колонки, а не «до» над «после»: сравнение работает, только когда
   оба столбца видны одновременно. На узком экране они всё равно встают
   друг под друга — там сравнивать приходится памятью, деваться некуда. */

.work__ba{display:grid;gap:0;border-top:1px solid var(--line)}
@media (min-width:860px){
  .work__ba{grid-template-columns:1fr 1fr}
  .work__ba .ba--now{border-left:1px solid var(--line);border-top:0}
}
.ba{padding:clamp(18px,2.6vw,28px)}
.ba--now{border-top:1px solid var(--line)}
.ba h4{
  font:500 var(--t-tag)/1 var(--f-mono);text-transform:uppercase;letter-spacing:.14em;
  color:var(--muted);margin-bottom:16px;
}
.ba ul{list-style:none;padding:0;display:grid;gap:14px}
.ba li{font-size:var(--t-small);line-height:1.6;position:relative;padding-left:18px}
.ba li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:8px;height:1px;background:var(--line);
}
.ba--was{background:var(--graphite-wash)}
.ba--was li{color:var(--muted)}
.ba--now li::before{background:var(--ink);height:2px;top:.5em}

/* ---------- Снимки экрана ---------- */

.shots{display:grid;gap:var(--gut)}
@media (min-width:700px){.shots{grid-template-columns:1fr 1fr}}
.shot{margin:0;display:grid;gap:10px}
.shot__open{
  display:block;position:relative;line-height:0;
  border:1px solid var(--line);background:var(--paper);
  overflow:hidden;
  transition:border-color .2s ease,transform .2s ease;
}
.shot__open img{width:100%;height:auto;display:block}
.shot__open:hover,.shot__open:focus-visible{border-color:var(--ink)}
@media (prefers-reduced-motion:no-preference){
  .shot__open:hover{transform:translateY(-3px)}
}
/* Подсказка «крупно» появляется по наведению. На тач-экранах наведения
   нет, поэтому там она показана всегда: иначе про увеличение
   просто не узнают. */
.shot__zoom{
  position:absolute;right:8px;bottom:8px;
  font:500 var(--t-tag)/1 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;
  color:var(--paper);background:var(--graphite);padding:6px 9px;
  opacity:0;transition:opacity .2s ease;
}
.shot__open:hover .shot__zoom,.shot__open:focus-visible .shot__zoom{opacity:1}
@media (hover:none){.shot__zoom{opacity:.85}}
.shot figcaption{font-size:var(--t-small);color:var(--muted);line-height:1.5}
.shots__note{
  margin-top:clamp(18px,2.6vw,26px);
  font:400 var(--t-tag)/1.6 var(--f-mono);color:var(--muted);
}

/* ---------- Низ страницы работы ---------- */

.work__next{display:grid;gap:var(--gut);align-items:start}
@media (min-width:860px){
  .work__next{grid-template-columns:minmax(0,1.6fr) minmax(220px,1fr)}
}
.work__next h2{font-size:var(--t-h2);margin-bottom:14px}
.work__others h3{
  font:500 var(--t-tag)/1 var(--f-mono);text-transform:uppercase;
  letter-spacing:.14em;color:var(--muted);margin-bottom:14px;
}
.work__others ul{list-style:none;padding:0;display:grid;gap:10px}
.work__others a{color:var(--graphite);font-size:var(--t-small)}

/* ---------- Снимок во весь экран ---------- */

.lightbox{
  border:0;padding:0;background:transparent;
  max-width:min(1400px,94vw);max-height:94vh;
  color:var(--paper);
}
.lightbox::backdrop{background:rgba(13,15,14,.88)}
.lightbox__img{
  display:block;width:100%;height:auto;max-height:82vh;object-fit:contain;
  border:1px solid rgba(242,242,238,.25);background:var(--sheet);
}
.lightbox__cap{margin-top:12px;font-size:var(--t-small);line-height:1.5;text-align:center}
.lightbox__close{
  position:absolute;top:-6px;right:0;transform:translateY(-100%);
  width:40px;height:40px;line-height:1;
  font-size:1.5rem;color:var(--paper);
  background:transparent;border:1px solid rgba(242,242,238,.4);
  cursor:pointer;
}
.lightbox__close:hover{background:rgba(242,242,238,.15)}
/* На узком экране крестику некуда уехать вверх — он садится в угол снимка. */
@media (max-width:640px){
  .lightbox__close{top:8px;right:8px;transform:none;background:var(--graphite)}
}
@media (prefers-reduced-motion:no-preference){
  .lightbox[open]{animation:lightbox-in .22s ease both}
  @keyframes lightbox-in{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
}

/* ---------- 05. Как проходит работа ---------- */
.steps{counter-reset:s;display:grid;gap:0}
.step{
  display:grid;grid-template-columns:clamp(56px,7vw,96px) 1fr;
  gap:clamp(16px,3vw,40px);padding:clamp(22px,3vw,34px) 0;border-top:1px solid var(--line);
}
.steps .step:last-child{border-bottom:1px solid var(--line)}
.step__n{font:500 clamp(1.5rem,3.4vw,2.5rem)/1 var(--f-mono);color:var(--line);letter-spacing:-.02em}
.step h3{margin-bottom:10px}
.step p{color:var(--muted);max-width:58ch;font-size:var(--t-small);line-height:1.65}
.step__meta{margin-top:12px;font:400 var(--t-tag)/1 var(--f-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--ink)}

/* ---------- 06. Цена ---------- */
.price{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut);align-items:start}
.price__box{grid-column:span 5;background:var(--graphite);color:var(--paper);padding:clamp(26px,3.4vw,44px)}
.price__box .tag{color:rgba(242,242,238,.6)}
.price__box .tag::before{background:rgba(242,242,238,.6)}
.price__box .price__fig{
  font-family:var(--f-sans);font-weight:500;line-height:1;color:var(--paper);
  font-size:clamp(2.1rem,1.2rem + 3.4vw,3.75rem);
  letter-spacing:-.03em;margin:calc(var(--u)*2) 0 calc(var(--u)*1.5);
}
/* Кнопка в конструктор — единственное яркое место на листе цены.
   Вопрос «сколько стоит» человек хочет закрыть здесь и сейчас, а не
   назначить ради него встречу.

   Лист графитовый, а обычная кнопка тоже графитовая — на нём её просто
   не видно. Здесь она выворачивается: бумага на графите. */
.price__go{margin-top:clamp(20px,3vw,28px)}
.price__go .btn{
  background:var(--paper);border-color:var(--paper);color:var(--graphite);
}
.price__go .btn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.price__box .small{margin-top:10px;color:var(--muted)}
.price__box p{color:rgba(242,242,238,.72);font-size:var(--t-small);line-height:1.65}
.price__side{grid-column:7 / span 6;display:grid;gap:calc(var(--u)*3)}
@media (max-width:960px){.price{grid-template-columns:1fr}.price__box,.price__side{grid-column:1 / -1}}
.price__row{display:grid;grid-template-columns:auto 1fr;gap:14px;padding-bottom:calc(var(--u)*3);border-bottom:1px solid var(--line)}
.price__row:last-child{border-bottom:0;padding-bottom:0}
.price__row .k{font:500 var(--t-tag)/1.6 var(--f-mono);color:var(--ink);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.price__row .v{font-size:var(--t-small);line-height:1.65;color:var(--muted)}
.price__row .v strong{color:var(--graphite);font-weight:500}

/* ---------- 07. Экспресс-проверка (второстепенный блок) ---------- */
.tool{border:1px solid var(--graphite);background:var(--sheet)}
.tool__head{padding:clamp(22px,3vw,34px);border-bottom:1px solid var(--line)}
.tool__head h2{font-size:clamp(1.35rem,1.05rem + 1.2vw,1.875rem);margin:calc(var(--u)*2) 0 10px}
.tool__body{padding:clamp(22px,3vw,34px);display:grid;gap:calc(var(--u)*2)}
.tool__row{display:grid;grid-template-columns:1fr auto;gap:var(--u) calc(var(--u)*2);align-items:end}
@media (max-width:640px){.tool__row{grid-template-columns:1fr}}

/* ---------- 08. Обо мне ---------- */
.about{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut);align-items:start}
.about__photo{grid-column:span 4}
.about__text{grid-column:6 / span 7}
@media (max-width:960px){.about{grid-template-columns:1fr}.about__photo{grid-column:1 / -1;max-width:340px}.about__text{grid-column:1 / -1}}

.portrait{border:1px solid var(--graphite);background:var(--graphite)}
.portrait__img{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--graphite)}
.portrait__img img{
  width:100%;height:100%;object-fit:cover;object-position:50% 22%;
  filter:grayscale(1) contrast(1.06) brightness(1.02);
}
/* Тонировка под графит + едва заметная сетка поверх — фото становится частью чертежа */
.portrait__img::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:32px 32px;
  mix-blend-mode:overlay;
}
.portrait.is-empty .portrait__img{display:grid;place-items:center}
.portrait.is-empty .portrait__img img{display:none}
.portrait.is-empty .portrait__img::before{
  content:"ФОТО 4:5";position:absolute;inset:0;display:grid;place-items:center;
  font:400 var(--t-tag)/1 var(--f-mono);letter-spacing:.2em;color:rgba(242,242,238,.35);
}
.portrait__cap{
  display:flex;border-top:1px solid var(--line);background:var(--sheet);
}
.portrait__cap span{padding:8px 11px;font:500 var(--t-tag)/1.2 var(--f-mono);text-transform:uppercase;letter-spacing:.09em}
.portrait__cap span + span{border-left:1px solid var(--line);color:var(--muted)}

.about__text h2{margin-block:calc(var(--u)*2) calc(var(--u)*3)}
.facts{display:grid;gap:0;margin-top:calc(var(--u)*4)}
.facts li{display:grid;grid-template-columns:auto 1fr;gap:clamp(12px,2vw,28px);padding:18px 0;border-top:1px solid var(--line)}
.facts li:last-child{border-bottom:1px solid var(--line)}
.facts .k{font:500 var(--t-tag)/1.7 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--ink);white-space:nowrap}
.facts .v{font-size:var(--t-small);line-height:1.65;color:var(--muted);max-width:56ch}
@media (max-width:600px){.facts li{grid-template-columns:1fr;gap:6px}}

/* ---------- 09. Заявка ---------- */
.cta{background:var(--graphite);color:var(--paper);border-top:1px solid var(--graphite)}
.cta .lede{color:rgba(242,242,238,.72)}
.cta .tag{color:rgba(242,242,238,.6)}
.cta .tag::before{background:rgba(242,242,238,.6)}
.cta__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(32px,4vw,64px) var(--gut);align-items:start}
.cta__left{grid-column:span 6}
.cta__right{grid-column:8 / span 5}
@media (max-width:960px){.cta__grid{grid-template-columns:1fr}.cta__left,.cta__right{grid-column:1 / -1}}
.cta__list{margin-top:calc(var(--u)*4);display:grid;gap:0}
.cta__list li{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:14px 0;border-top:1px solid rgba(242,242,238,.18)}
.cta__list li:last-child{border-bottom:1px solid rgba(242,242,238,.18)}
.cta__list .n{font:500 var(--t-tag)/1.7 var(--f-mono);color:rgba(242,242,238,.5)}
.cta__list .v{font-size:var(--t-small);line-height:1.6;color:rgba(242,242,238,.85)}

/* ---------- Формы ---------- */
.form{display:grid;gap:calc(var(--u)*2)}
.field{display:grid;gap:8px}
.field > label{font:500 var(--t-tag)/1 var(--f-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.cta .field > label{color:rgba(242,242,238,.6)}
.input{
  width:100%;padding:15px 16px;background:var(--sheet);color:var(--graphite);
  border:1px solid var(--line);border-radius:0;
  font:400 var(--t-body)/1.3 var(--f-sans);
  transition:border-color .16s,box-shadow .16s;
}
.input::placeholder{color:#A6ABA3}
.input:hover{border-color:var(--muted)}
.input:focus{outline:none;border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.cta .input{background:transparent;color:var(--paper);border-color:rgba(242,242,238,.3)}
.cta .input::placeholder{color:rgba(242,242,238,.35)}
.cta .input:hover{border-color:rgba(242,242,238,.55)}
.cta .input:focus{border-color:var(--paper);box-shadow:inset 0 0 0 1px var(--paper)}
.cta .btn{background:var(--paper);color:var(--graphite);border-color:var(--paper)}
.cta .btn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.consent{font:400 var(--t-tag)/1.55 var(--f-mono);color:rgba(242,242,238,.55)}
.consent a{color:inherit}
.err{font:400 var(--t-tag)/1.5 var(--f-mono);color:var(--ink);display:none}
.cta .err{color:#FFD2CB}
.field.is-bad .err{display:block}
.field.is-bad .input{border-color:currentColor}
/* Подстановка сохранённых данных в браузере красит поле в голубой.
   Возвращаем бумажный фон, иначе форма выглядит чужой. */
.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--graphite);
  -webkit-box-shadow:0 0 0 40px var(--sheet) inset;
  box-shadow:0 0 0 40px var(--sheet) inset;
}

/* Сообщение об успехе */
.done{border:1px solid var(--paper);padding:22px;margin-bottom:calc(var(--u)*3)}
.done b{display:block;font:500 var(--t-small)/1.3 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}
.done--bad{border-style:dashed}
.done p{font-size:var(--t-small);color:rgba(242,242,238,.72)}
.note{border:1px solid var(--line);background:var(--sheet);padding:18px;font-size:var(--t-small);line-height:1.55}

/* ---------- Подвал ---------- */
.foot{border-top:1px solid var(--line);padding-block:calc(var(--u)*5)}
.foot__in{display:flex;flex-wrap:wrap;gap:var(--u) calc(var(--u)*3);justify-content:space-between;align-items:center}
.foot p,.foot a{font:400 var(--t-tag)/1.6 var(--f-mono);color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.foot a{text-decoration:none;border-bottom:1px solid var(--line)}
.foot a:hover{color:var(--ink);border-color:var(--ink)}

/* ---------- Появление блоков ---------- */
.js-anim .rv{opacity:0;transform:translateY(14px)}
.js-anim .rv.is-in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
.js-anim .rv-d1.is-in{transition-delay:.06s}
.js-anim .rv-d2.is-in{transition-delay:.12s}
.js-anim .rv-d3.is-in{transition-delay:.18s}

/* Первый экран: хаос собирается в порядок (один раз, при загрузке) */
/* Появление: бумажки сперва лежат ниже и криво, потом поднимаются на
   место и только тогда становятся читаемыми. Это и есть «поднимаются
   чуть вверх, чтобы стало видно надписи». */
.js-anim .slip{transition:transform .8s cubic-bezier(.2,.7,.25,1),opacity .5s ease}
.js-anim .flow:not(.is-set) .slip{opacity:0}
/* До появления записки утоплены в карточку и почти без наклона — потом
   выезжают вверх и расходятся веером. */
.js-anim .flow:not(.is-set) .slip{transform:rotate(0deg) translateY(64px)}
.js-anim .flow:not(.is-set) .order{opacity:0;transform:translateY(16px)}
.js-anim .order{transition:opacity .6s ease .25s,transform .6s cubic-bezier(.2,.7,.3,1) .25s}

@media (prefers-reduced-motion:reduce){
  .js-anim .rv,.js-anim .slip,.js-anim .order{opacity:1!important;transition:none!important}
  .js-anim .slip{transform:rotate(var(--tilt))!important}
  .flow.is-set .slip{animation:none}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---------- Узкие экраны (360px и ниже) ---------- */
@media (max-width:400px){
  :root{--pad:16px}
  /* На узком экране четыре веера не помещаются: крайняя убирается,
     остальные жмутся. Три записки читаются, четыре — превращаются в кашу. */
  .flow{padding-top:62px}
  .slip{width:min(52%,124px);min-height:112px;padding:6px 8px}
  .slip:nth-child(1){left:14%;  top:0}
  .slip:nth-child(2){left:0;    top:22px}
  .slip:nth-child(3){right:0;   top:6px}
  .slip:nth-child(4){display:none}
  .order__row{grid-template-columns:auto 1fr}
  .order__row i{grid-column:2;justify-self:start}
}

@media print{
  body{background:#fff}
  .head,.cta,.tool,.burger{display:none}
}

/* =========================================================================
   ДОБАВЛЕНИЯ: телефон в шапке, липкая кнопка, cookie, вопросы, клуб, документ
   ========================================================================= */

/* ---------- Телефон в шапке ---------- */
.head__tel{
  font:500 var(--t-small)/1 var(--f-mono);letter-spacing:.02em;
  text-decoration:none;white-space:nowrap;flex:none;
  border-bottom:1px solid var(--line);padding-bottom:2px;
}
.head__tel:hover{color:var(--ink);border-color:var(--ink)}
/* На узком десктопе телефон прячется, чтобы не ломать строку.
   На телефоне он снова появляется — уже внутри выпадающей панели. */
@media (max-width:1200px){.head__tel{display:none}}

/* ---------- Липкая кнопка на телефоне ---------- */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;
  border-top:1px solid var(--graphite);background:var(--paper);
}
.dock a{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:15px 12px;text-decoration:none;
  font:500 var(--t-small)/1 var(--f-sans);
}
.dock__tel{color:var(--graphite);border-right:1px solid var(--graphite);flex:0 0 40%}
.dock__cta{background:var(--graphite);color:var(--paper)}
@media (max-width:860px){
  .dock{display:flex}
  body{padding-bottom:52px}
  .cookie{bottom:52px}
}

/* ---------- Предупреждение о cookie ---------- */
.cookie{
  position:fixed;left:var(--pad);right:var(--pad);bottom:16px;z-index:50;
  max-width:640px;margin-inline:auto;
  display:flex;gap:var(--gut);align-items:center;flex-wrap:wrap;
  padding:16px 18px;background:var(--sheet);
  border:1px solid var(--graphite);box-shadow:6px 8px 0 rgba(13,15,14,.08);
}
.cookie__text{flex:1;min-width:220px;font:400 var(--t-tag)/1.6 var(--f-mono);color:var(--muted)}
.cookie__text a{color:var(--ink)}
.cookie .btn--sm{flex:none}
@media (max-width:520px){.cookie{left:8px;right:8px;bottom:8px;padding:14px}.cookie .btn--sm{width:100%;justify-content:center}}

/* ---------- Согласие рядом с формой ---------- */
.check{
  display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
  cursor:pointer;font:400 var(--t-tag)/1.55 var(--f-mono);color:var(--muted);
}
.check input{
  appearance:none;-webkit-appearance:none;margin:2px 0 0;
  width:16px;height:16px;flex:none;border:1px solid var(--line);
  background:var(--sheet);cursor:pointer;display:grid;place-items:center;
}
.check input:checked{background:var(--ink);border-color:var(--ink)}
.check input:checked::after{content:"";width:8px;height:4px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.check a{color:var(--ink)}
.cta .check{color:rgba(242,242,238,.6)}
.cta .check input{background:transparent;border-color:rgba(242,242,238,.4)}
.cta .check input:checked{background:var(--paper);border-color:var(--paper)}
.cta .check input:checked::after{border-color:var(--graphite)}
.cta .check a{color:var(--paper)}
.check.is-bad input{border-color:var(--ink)}
.cta .check.is-bad input{border-color:#FFD2CB}

/* Ошибка, пришедшая с сервера, показывается сразу */
.err--shown{display:block}

/* ---------- Выпадающий список ---------- */
select.input{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 18px) calc(50% + 2px),calc(100% - 13px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-right:40px;
}
.cta select.input option{background:var(--sheet);color:var(--graphite)}

/* ---------- Частые вопросы ---------- */
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{
  list-style:none;cursor:pointer;position:relative;
  padding:clamp(18px,2.4vw,24px) 44px clamp(18px,2.4vw,24px) 0;
  font-size:clamp(1rem,.95rem + .35vw,1.1875rem);font-weight:500;
  line-height:1.4;letter-spacing:-.01em;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"";position:absolute;right:14px;top:50%;width:13px;height:13px;
  border-right:1px solid var(--graphite);border-bottom:1px solid var(--graphite);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s ease;
}
.faq__item[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq__item summary:hover{color:var(--ink)}
.faq__item p{
  padding:0 clamp(0px,4vw,56px) clamp(20px,2.6vw,28px) 0;
  max-width:72ch;color:var(--muted);font-size:var(--t-small);line-height:1.7;
}

/* ---------- Тарифы клуба ---------- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:var(--gut)}
.plan{position:relative;background:var(--sheet);border:1px solid var(--line);padding:clamp(22px,2.8vw,32px)}
.plan__n{font:500 var(--t-tag)/1 var(--f-mono);text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.plan__fig{
  font-family:var(--f-sans);font-weight:500;line-height:1;letter-spacing:-.03em;
  font-size:clamp(1.75rem,1.2rem + 1.6vw,2.5rem);
  margin:calc(var(--u)*2) 0 calc(var(--u)*1.5);
}
.plan__note{color:var(--muted);font-size:var(--t-small);line-height:1.6}
.plan--best{border-color:var(--graphite);background:var(--graphite);color:var(--paper)}
.plan--best .plan__n{color:rgba(242,242,238,.6)}
.plan--best .plan__note{color:rgba(242,242,238,.72)}
.plan__flag{
  position:absolute;top:-1px;right:-1px;
  background:var(--ink);color:#fff;padding:5px 10px;
  font:500 var(--t-tag)/1 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;
}

/* ---------- Тизер клуба на главной ---------- */
.teaser{
  display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(28px,4vw,64px);
  border:1px solid var(--graphite);background:var(--sheet);padding:clamp(24px,3.4vw,48px);
}
@media (max-width:860px){.teaser{grid-template-columns:1fr}}
.teaser__text h2{margin-block:calc(var(--u)*2) calc(var(--u)*2)}
.teaser__side{display:grid;gap:0;align-content:start}
.teaser__row{
  display:grid;grid-template-columns:auto 1fr;gap:14px;
  padding:14px 0;border-top:1px solid var(--line);
}
.teaser__row:last-child{border-bottom:1px solid var(--line)}
.teaser__row b{font:500 var(--t-tag)/1.7 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--ink);white-space:nowrap}
.teaser__row span{font-size:var(--t-small);line-height:1.6;color:var(--muted)}

/* ---------- Телефон в блоке заявки ---------- */
.cta__phone{
  margin-top:calc(var(--u)*4);font:400 var(--t-small)/1.6 var(--f-mono);
  color:rgba(242,242,238,.6);
}
.cta__phone a{color:var(--paper);border-bottom:1px solid rgba(242,242,238,.4);text-decoration:none}
.cta__phone a:hover{border-color:var(--paper)}

/* ---------- Документ (политика) ---------- */
.doc__body{max-width:74ch}
.doc__meta{font:400 var(--t-tag)/1.6 var(--f-mono);color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:calc(var(--u)*4)}
.doc__body h3{margin-top:calc(var(--u)*5);margin-bottom:calc(var(--u)*1.5)}
.doc__body p{color:var(--muted);line-height:1.7;font-size:var(--t-small)}
.doc__body p + p{margin-top:calc(var(--u)*1.5)}
.doc__body a{color:var(--ink)}
.doc__list{margin-top:calc(var(--u)*1.5);display:grid;gap:8px}
.doc__list li{
  position:relative;padding-left:20px;color:var(--muted);
  font-size:var(--t-small);line-height:1.7;
}
.doc__list li::before{content:"—";position:absolute;left:0;color:var(--graphite)}
.note b{font-weight:500}


/* ---------- Разбор процессов: тест ---------- */
/* Логика такая же, как у чертежа: один вопрос — один лист, номер слева,
   выбранный вариант обведён синим. Без JS все листы просто идут подряд. */

.tool__list{display:grid;gap:10px;margin:0}
.tool__list li{
  position:relative;padding-left:22px;
  font-size:var(--t-small);line-height:1.6;color:var(--muted);
}
.tool__list li::before{
  content:"—";position:absolute;left:0;color:var(--ink);font-family:var(--f-mono);
}

.q-title{font-size:var(--t-h1);
  font-weight:600;line-height:1.04;letter-spacing:-.025em;margin-bottom:calc(var(--u)*3)}
.q-alert{
  border:1px solid var(--ink);background:var(--ink-wash);color:var(--ink);
  padding:14px 16px;font:400 var(--t-small)/1.5 var(--f-mono);
  margin-bottom:calc(var(--u)*3);
}
.err--on{display:block}

/* Полоса прогресса — прилипает под шапкой */
.q-bar{
  position:sticky;top:64px;z-index:40;
  background:var(--paper);border-bottom:1px solid var(--line);
  padding-block:12px;
}
.q-bar__in{display:flex;align-items:center;gap:calc(var(--u)*2)}
.q-bar__num{
  font:500 var(--t-tag)/1 var(--f-mono);text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted);white-space:nowrap;
}
.q-bar__num b{color:var(--graphite)}
.q-bar__track{flex:1;height:2px;background:var(--line);position:relative}
.q-bar__fill{
  position:absolute;inset:0 auto 0 0;width:0;background:var(--ink);
  transition:width .22s ease;
}

.q-steps{padding-block:calc(var(--u)*5) var(--sec)}
.q-step{border:0;padding:0;margin:0;max-width:62ch}
.q-step + .q-step{margin-top:calc(var(--u)*8);padding-top:calc(var(--u)*8);border-top:1px solid var(--line)}
.q-sprite{position:absolute;width:0;height:0;overflow:hidden}

.q-step__legend{display:grid;gap:8px;margin-bottom:calc(var(--u)*3);padding:0}
/* fill и stroke наследуются, поэтому доходят внутрь <use>. Если задать их
   селектором по самому набору значков, до копии они не дойдут, и значок
   зальётся чёрным — что и случилось в первой версии. */
.q-step__icon{
  width:34px;height:34px;color:var(--ink);
  fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:square;stroke-linejoin:miter;
  margin-bottom:calc(var(--u)*.5);
}
.q-step__num{
  font:500 var(--t-tag)/1 var(--f-mono);text-transform:uppercase;
  letter-spacing:.12em;color:var(--ink);
}
.q-step__title{font-size:clamp(1.25rem,1rem + 1.1vw,1.75rem);font-weight:600;
  line-height:1.2;letter-spacing:-.015em;display:block}
.q-step__hint{font:400 var(--t-small)/1.5 var(--f-sans);color:var(--muted);display:block}

.q-opts{display:grid;gap:10px}
@media (min-width:720px){
  /* На широком экране длинные списки идут в два столбца — иначе вопрос
     с семью вариантами выгоняет кнопку за нижний край экрана. */
  .q-opts{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .q-other{grid-column:1/-1}
}
.q-opt{
  display:flex;align-items:flex-start;gap:12px;cursor:pointer;
  border:1px solid var(--line);background:var(--sheet);
  padding:14px 16px;transition:border-color .14s ease,background .14s ease;
}
.q-opt:hover{border-color:var(--graphite)}
.q-opt input{
  appearance:none;-webkit-appearance:none;flex:0 0 auto;
  width:18px;height:18px;margin-top:1px;border:1px solid var(--graphite);
  background:var(--sheet);cursor:pointer;position:relative;
}
.q-opt input[type=radio]{border-radius:50%}
.q-opt input:checked{border-color:var(--ink)}
.q-opt input:checked::after{
  content:"";position:absolute;inset:3px;background:var(--ink);
}
.q-opt input[type=radio]:checked::after{border-radius:50%}
.q-opt input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.q-opt span{font-size:1rem;line-height:1.4}
.q-opt:has(input:checked){border-color:var(--ink);background:var(--ink-wash)}
.q-other{margin-top:2px}
.q-text{min-height:120px;resize:vertical;font-family:var(--f-sans)}

.q-nav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--u);margin-top:calc(var(--u)*3)}
.q-keys{
  font:400 var(--t-tag)/1.4 var(--f-mono);color:var(--muted);
  letter-spacing:.04em;
}
@media (max-width:640px){.q-keys{display:none}}

/* Номер варианта — как на чертеже, слева от подписи */
.q-opt__key{
  flex:0 0 auto;font:500 var(--t-tag)/1 var(--f-mono);color:var(--muted);
  min-width:1.1em;padding-top:3px;
}
.q-opt:has(input:checked) .q-opt__key{color:var(--ink)}
@media (max-width:640px){.q-opt__key{display:none}}
/* Столбцы прижимаются к верху. Иначе поле без подписи снизу растягивается
   на высоту соседнего, у которого подпись есть, — и съезжает вниз. */
.q-grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*2);align-items:start}
.q-grid > .field{align-content:start}
@media (max-width:640px){.q-grid{grid-template-columns:1fr}}
.q-step--last .check{margin-top:var(--u)}
.btn--lg{padding:17px 26px;font-size:1rem}

/* Со скриптом виден один лист за раз */
.q-js .q-step{display:none}
.q-js .q-step.is-now{display:block;animation:q-in .2s ease}
.q-js .q-step + .q-step{margin-top:0;padding-top:0;border-top:0}
@keyframes q-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .q-js .q-step.is-now{animation:none}
  .q-bar__fill{transition:none}
}

/* ---------- Разбор процессов: результат ---------- */
.res-money{border:1px solid var(--graphite);background:var(--sheet);padding:clamp(24px,4vw,44px)}
.res-money__label{
  font:500 var(--t-tag)/1 var(--f-mono);text-transform:uppercase;
  letter-spacing:.12em;color:var(--muted);
}
.res-money__fig{
  font-family:var(--f-sans);font-weight:600;letter-spacing:-.03em;line-height:1;
  font-size:clamp(2.2rem,1.2rem + 4.4vw,4.5rem);
  color:var(--ink);margin:calc(var(--u)*2) 0 calc(var(--u)*3);
}
.res-money__fig span{font-size:.3em;font-weight:400;color:var(--muted);letter-spacing:0}
.res-money__parts{display:grid;gap:10px;margin-bottom:calc(var(--u)*3)}
.res-money__parts li{
  position:relative;padding-left:22px;font-size:var(--t-small);
  line-height:1.6;color:var(--muted);
}
.res-money__parts li::before{content:"—";position:absolute;left:0;color:var(--graphite);font-family:var(--f-mono)}
.res-money__parts b{color:var(--graphite);font-weight:600}

.res-h{margin-bottom:calc(var(--u)*4)}
.res-list{display:grid;gap:calc(var(--u)*3);counter-reset:none;list-style:none}
.res-item{
  display:grid;grid-template-columns:auto 1fr;gap:calc(var(--u)*2);
  border-left:2px solid var(--ink);padding-left:calc(var(--u)*2);
}
.res-item__num{
  font:500 1.25rem/1 var(--f-mono);color:var(--ink);
}
.res-item h3{font-size:1.125rem;font-weight:600;margin-bottom:8px}
.res-item p{color:var(--muted);line-height:1.65;font-size:var(--t-small)}
.res-ok{margin-top:calc(var(--u)*4)}

.res-next{border:1px solid var(--graphite);background:var(--sheet);padding:clamp(24px,4vw,44px)}
.res-next h2{margin-bottom:calc(var(--u)*2)}
.res-next .btn{margin-top:calc(var(--u)*2);margin-right:var(--u)}

.res-dump summary{
  cursor:pointer;font:500 var(--t-tag)/1 var(--f-mono);
  text-transform:uppercase;letter-spacing:.12em;color:var(--ink);
  padding:14px 0;
}
.res-answers{margin-top:calc(var(--u)*2);max-width:74ch}
.res-answers dt{
  font:500 var(--t-tag)/1.4 var(--f-mono);text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted);margin-top:calc(var(--u)*2);
}
.res-answers dd{font-size:var(--t-small);line-height:1.6;margin-top:4px}


/* ---------- Вход через Telegram ---------- */
.tg-login{
  border:1px solid rgba(242,242,238,.25);padding:16px 18px;
  margin-bottom:calc(var(--u)*3);display:grid;gap:10px;justify-items:start;
}
.tg-login__label{
  font:500 var(--t-tag)/1 var(--f-mono);text-transform:uppercase;
  letter-spacing:.12em;color:rgba(242,242,238,.6);
}
.tg-login iframe{max-width:100%}