/* =============================================================
   VANTA — digital studio · общая система витрины

   Вынесена из index.html, когда витрина перестала быть одной
   страницей: теперь её делят главная, страницы услуг, квиз
   и юридические страницы. Один файл вместо восьми копий —
   и один кэш на весь сайт.

   Типографическая система: три голоса, у каждого своя работа.
     Manrope 800   — крупные заголовки, плотный трекинг
     Prata         — засечный контрапункт: имя студии и числа
     Golos Text    — основной текст, кириллица в первую очередь
     IBM Plex Mono — служебные подписи, индексы разделов, метаданные
   Палитра нарочно ахроматическая: цвет на витрину приносят сами работы.
   ============================================================= */
:root{
  --paper:#EFEDE8; --paper-2:#F6F5F1; --white:#FFFFFF;
  --ink:#0D0D0F; --ink-2:#33333A; --dim:#6A6861; /* 4,8:1 на бумаге: прежний #78766F давал 3,9 и не проходил для мелких подписей */
  --line:rgba(13,13,15,.17); --line-2:rgba(13,13,15,.08);
  --acc:#2A3BFF;
  --display:'Manrope',-apple-system,'Segoe UI',Arial,sans-serif;
  --serif:'Prata',Georgia,'Times New Roman',serif;
  --text:'Golos Text',-apple-system,'Segoe UI',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --pad:clamp(18px,4.4vw,64px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);
  font-size:16.5px;line-height:1.62;overflow-x:hidden;-webkit-font-smoothing:antialiased;
  font-feature-settings:'ss01','cv01'}
body.lock{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,figure{margin:0}ul{padding:0;list-style:none}
button{font:inherit;color:inherit}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

.shell{width:100%;max-width:1360px;margin:0 auto;padding:0 var(--pad)}
.s{padding:clamp(64px,8vw,140px) 0;position:relative}
.s--ink{background:var(--ink);color:var(--paper)}
.s--ink .lead{color:rgba(239,237,232,.72)}
.s--ink .lbl{color:rgba(239,237,232,.55)}
.s--paper2{background:var(--paper-2)}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- голоса ---------- */
.lbl{display:inline-flex;align-items:baseline;gap:10px;font-family:var(--mono);font-size:12.5px;
  font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.lbl i{font-style:normal;color:var(--acc)}
.s--ink .lbl i{color:#8FA0FF}

.d1{font-family:var(--display);font-weight:800;font-size:clamp(42px,9.4vw,132px);
  line-height:.9;letter-spacing:-.045em}
.d1 .ser{font-family:var(--serif);font-weight:400;letter-spacing:-.015em}
.d2{font-family:var(--display);font-weight:800;font-size:clamp(29px,5vw,64px);
  line-height:.98;letter-spacing:-.038em}
.d3{font-family:var(--display);font-weight:700;font-size:clamp(20px,2.3vw,30px);
  line-height:1.12;letter-spacing:-.025em}
.d4{font-family:var(--display);font-weight:700;font-size:19px;line-height:1.2;letter-spacing:-.015em}
.lead{font-size:clamp(16.5px,1.35vw,20px);line-height:1.56;color:var(--ink-2);max-width:56ch}
.note{font-size:13.5px;line-height:1.6;color:var(--dim)}
.num{font-family:var(--serif);font-variant-numeric:tabular-nums}

/* ---------- кнопки: прямоугольные, с заливкой на наведении ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:11px;padding:16px 26px;
  min-height:54px;border:1px solid var(--ink);border-radius:3px;background:var(--ink);color:var(--paper);
  font-family:var(--display);font-weight:700;font-size:14.5px;letter-spacing:-.01em;cursor:pointer;
  overflow:hidden;isolation:isolate;transition:color .3s var(--ease),border-color .3s var(--ease)}
.btn::after{content:'';position:absolute;inset:0;z-index:-1;background:var(--paper);
  transform:translateY(101%);transition:transform .42s var(--ease)}
.btn:hover{color:var(--ink)}
.btn:hover::after{transform:none}
.btn--line{background:transparent;color:var(--ink)}
.btn--line::after{background:var(--ink)}
.btn--line:hover{color:var(--paper)}
.btn--sm{min-height:44px;padding:11px 19px;font-size:13.5px}
/* единственная синяя кнопка на странице — главный переход */
.btn--acc{background:var(--acc);border-color:var(--acc);color:#fff}
.btn--acc::after{background:#1A28C9}
.btn--acc:hover{color:#fff;border-color:#1A28C9}
.s--ink .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.s--ink .btn::after{background:var(--ink)}
.s--ink .btn:hover{color:var(--paper)}
.s--ink .btn--line{background:transparent;color:var(--paper);border-color:rgba(239,237,232,.34)}
.s--ink .btn--line::after{background:var(--paper)}
.s--ink .btn--line:hover{color:var(--ink);border-color:var(--paper)}
/* Ценовая карточка тёмная, но лежит в светлой секции — класса .s--ink
   у неё нет, поэтому кнопка внутри получала чернильный цвет на
   чернильном фоне и была не видна вовсе. */
.price__big .btn--line{color:var(--paper);border-color:rgba(239,237,232,.34)}
.price__big .btn--line::after{background:var(--paper)}
.price__big .btn--line:hover{color:var(--ink);border-color:var(--paper)}
/* скачать PDF — отдельная заметная кнопка, а не текстовая ссылка в общем ряду */
.btn--pdf{background:transparent;color:var(--acc);border-color:var(--acc)}
.btn--pdf::after{background:var(--acc)}
.btn--pdf:hover{color:var(--paper)}
.s--ink .btn--pdf{background:transparent;color:#8E99FF;border-color:rgba(142,153,255,.55)}
.s--ink .btn--pdf::after{background:var(--acc)}
.s--ink .btn--pdf:hover{color:var(--paper);border-color:var(--acc)}
.btn__ar{font-family:var(--mono);font-size:13px;transition:transform .35s var(--ease)}
.btn:hover .btn__ar{transform:translateX(3px)}

/* подчёркивание-стрелка для текстовых ссылок */
.lnk{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;
  font-size:15px;padding-bottom:3px;background-image:linear-gradient(var(--acc),var(--acc));
  background-size:0 1.5px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .38s var(--ease),color .25s}
.lnk:hover{color:var(--acc);background-size:100% 1.5px}
.lnk span{font-family:var(--mono);font-size:12.5px}
/* на телефоне текстовая ссылка ростом 27px — мимо пальца. Расширяем область нажатия
   невидимой подложкой, чтобы не двигать подчёркивание отступами. */
@media(max-width:640px){
  .lnk{position:relative}
  .lnk::after{content:'';position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px}
}

/* ---------- шапка ---------- */
.top{position:fixed;inset:0 0 auto;z-index:60;transition:background .35s var(--ease),border-color .35s;
  border-bottom:1px solid transparent}
/* Шапка при прокрутке — плотная, а не полупрозрачная. 0,86 паперного
   поверх синей секции давало сиреневый смыв: полоса переставала читаться
   как слой над контентом и выглядела сломанной. Тень отделяет её от
   страницы мягче, чем это делала размытая подложка. */
.top.stuck{background:var(--paper);backdrop-filter:none;border-bottom-color:var(--line);
  box-shadow:0 6px 22px rgba(13,13,15,.07)}
/* padding-шортхенд перебивал боковые поля .shell (специфичность
   равная, правило ниже) — логотип упирался в самый край экрана. */
.top__in{display:flex;align-items:center;gap:clamp(16px,3vw,44px);padding:16px var(--pad);transition:padding .35s var(--ease)}
.top.stuck .top__in{padding:11px var(--pad)}
.mark{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.mark__g{position:relative;width:34px;height:34px;background:var(--ink);border-radius:3px;overflow:hidden}
.mark__g::before,.mark__g::after{content:'';position:absolute;background:var(--paper)}
.mark__g::before{left:8px;top:9px;width:18px;height:5px}
.mark__g::after{left:8px;top:20px;width:11px;height:5px}
.mark__t{font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:-.02em;line-height:1}
.mark__t em{font-family:var(--serif);font-style:normal;font-weight:400;font-size:16px;color:var(--dim);
  letter-spacing:0;margin-left:6px}
.nav{display:none;gap:3px;margin-left:auto}
.nav a{padding:8px 13px;border-radius:3px;font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);transition:.22s var(--ease)}
.nav a:hover{background:var(--ink);color:var(--paper)}
.top__cta{display:none}
.burger{display:inline-flex;align-items:center;gap:9px;margin-left:auto;padding:10px 14px 10px 16px;
  border:1px solid var(--line);border-radius:3px;background:transparent;cursor:pointer;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase}
.burger i{display:grid;gap:4px;width:16px}
.burger i b{display:block;height:1.5px;background:var(--ink);transition:.32s var(--ease)}
.burger[aria-expanded="true"] i b:first-child{transform:translateY(2.75px) rotate(45deg)}
.burger[aria-expanded="true"] i b:last-child{transform:translateY(-2.75px) rotate(-45deg)}
@media(min-width:1040px){.nav{display:flex}.top__cta{display:inline-flex}.burger{display:none}}

.sheet{position:fixed;inset:0;z-index:55;background:var(--paper);padding:96px var(--pad) 40px;
  display:flex;flex-direction:column;gap:2px;overflow-y:auto;
  clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path .55s var(--ease),visibility 0s linear .55s}
/* visibility, а не только clip-path: иначе закрытое меню ловит фокус с клавиатуры */
.sheet.open{clip-path:inset(0);visibility:visible;transition:clip-path .55s var(--ease),visibility 0s}
.sheet a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:18px 0;border-bottom:1px solid var(--line);
  font-family:var(--display);font-weight:800;font-size:clamp(26px,7vw,40px);letter-spacing:-.035em}
.sheet a span{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--dim)}
.sheet__foot{margin-top:auto;padding-top:28px;display:grid;gap:6px;font-size:15px;color:var(--dim)}
.sheet__foot b{font-family:var(--display);font-size:20px;color:var(--ink)}

/* ---------- 1. герой ---------- */
.hero{padding:clamp(112px,15vw,190px) 0 0}
.hero__lbl{display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:clamp(24px,3.4vw,44px)}
.hero h1{margin:0}
.hero__sub{display:grid;gap:clamp(22px,3vw,48px);margin-top:clamp(28px,3.6vw,52px);
  padding-top:clamp(24px,3vw,38px);border-top:1px solid var(--line)}
@media(min-width:900px){.hero__sub{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start}}
.hero__act{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px}
.tag-price{display:grid;gap:4px;align-content:start}
.tag-price b{font-family:var(--serif);font-size:clamp(38px,5.4vw,68px);line-height:.94;letter-spacing:-.02em}
.tag-price span{font-size:14.5px;color:var(--dim)}
.tag-price .rowlets{display:grid;gap:0;margin-top:18px;border-top:1px solid var(--line)}
.tag-price .rowlets div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;
  border-bottom:1px solid var(--line-2);font-size:14.5px}
.tag-price .rowlets dt{color:var(--dim)}
.tag-price .rowlets dd{margin:0;font-weight:600}
.rowlets dd{white-space:nowrap}

/* полоса «зачем это бизнесу»: четыре колонки, разделённые линейками */
  background:var(--paper-2)}
@media(min-width:700px){
}
@media(min-width:1080px){
}
  letter-spacing:-.015em;margin-bottom:8px}

/* приглашение к следующему шагу — своё в каждом разделе, а не одна кнопка везде */
.cta-band{display:flex;flex-wrap:wrap;gap:18px 30px;align-items:center;justify-content:space-between;
  margin-top:clamp(28px,3.4vw,46px);padding-top:clamp(24px,2.8vw,36px);border-top:1px solid var(--line)}
.cta-band p{max-width:52ch;font-size:16px;line-height:1.55;color:var(--ink-2)}

/* ---------- заголовок раздела ---------- */
.head{display:grid;gap:18px;margin-bottom:clamp(34px,4.4vw,62px)}
@media(min-width:920px){.head--split{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  align-items:end;gap:clamp(30px,5vw,72px)}}
.head .lead{margin-bottom:2px}

/* ---------- 2. работы ---------- */
.projs{display:grid;gap:clamp(34px,4.4vw,64px)}
/* Строки сетки внутри карточки авторастягивались: если соседка по ряду выше,
   лишняя высота доставалась обложке, и она вырастала на десяток пикселей.
   Обложка по содержимому, весь запас забирает текст. */
.proj{display:grid;grid-template-rows:auto 1fr;gap:20px}
.proj__cov{display:block;position:relative;overflow:hidden;background:var(--paper-2);
  border:1px solid var(--line)}
.proj__cov img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;
  transition:transform .8s var(--ease),filter .6s}
.proj:hover .proj__cov img{transform:scale(1.035)}
.proj__b{display:grid;gap:11px;align-content:start}
.proj__top{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding-bottom:10px;border-bottom:1px solid var(--line)}
/* был порядковый номер, стал объёмная стрелка: номера заказчику не нравились */
.proj__i{width:30px;height:30px;flex:none;margin:-4px 0}
.proj__k{margin-left:auto;font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim)}
.proj p{font-size:15.5px;line-height:1.58;color:var(--ink-2);max-width:62ch}
.tags{display:flex;flex-wrap:wrap;gap:0 6px}
.tags li{font-size:13px;color:var(--dim)}
.tags li+li::before{content:"·";margin-right:6px;color:var(--dim)}
.proj__go{margin-top:4px;display:flex;flex-wrap:wrap;gap:18px;align-items:center}

.proj--lead{gap:clamp(22px,3vw,44px)}
@media(min-width:1000px){
  .proj--lead{grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);align-items:center}
  .proj--lead .proj__cov img{aspect-ratio:16/9.4}
}
.projs__grid{display:grid;gap:clamp(28px,3.4vw,48px)}
@media(min-width:760px){.projs__grid{grid-template-columns:repeat(2,1fr)}}
.projs__grid .proj__cov img{aspect-ratio:16/11}

/* ---------- 3. подход ---------- */
.steps{display:grid;border-top:1px solid var(--line)}
@media(min-width:900px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{padding:26px 0 30px;border-bottom:1px solid var(--line)}
@media(min-width:900px){.step{padding:28px clamp(18px,2vw,30px) 34px;border-right:1px solid var(--line)}
  .step:first-child{padding-left:0}.step:last-child{border-right:0;padding-right:0}}
/* был порядковый номер, стала объёмная стрелка */
/* приглушение осталось от одинаковой стрелки: у разных фигур оно
   съедало то самое различие, ради которого их и рисовали */
.step__n{width:clamp(38px,4vw,54px);height:auto;
  transition:transform .4s var(--ease)}
.step:hover .step__n{transform:translateY(-3px)}
.step h3{margin:14px 0 8px;font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.02em}
.step p{font-size:14.5px;line-height:1.55;color:var(--dim)}

.princ{display:grid;gap:0;margin-top:clamp(40px,5vw,74px);border-top:1px solid var(--line)}
@media(min-width:820px){.princ{grid-template-columns:repeat(3,1fr);column-gap:clamp(24px,3vw,54px)}
  /* пунктов пять, и последняя ячейка справа пустует — дочерчиваем линию,
     иначе нижний край сетки обрывается на две трети. При шести пунктах не сработает. */
  .princ:has(li:nth-child(5)):not(:has(li:nth-child(6)))::after{content:'';border-bottom:1px solid var(--line-2)}}
.princ li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  padding:20px 0;border-bottom:1px solid var(--line-2)}
.princ b{display:block;font-family:var(--display);font-weight:700;font-size:16.5px;margin-bottom:4px}
.princ p{font-size:14.5px;line-height:1.55;color:var(--dim)}
.princ .ix{font-family:var(--mono);font-size:15px;line-height:1;color:var(--acc);padding-top:2px}

/* ---------- 4. цена ---------- */
.price{display:grid;gap:clamp(26px,3.4vw,50px)}
/* ячейка сетки не ужимается меньше таблицы — без этого прокрутка таблицы не включается */
.price>*{min-width:0}
@media(min-width:1000px){.price{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);align-items:start}}
/* подарок: тёмная карточка с объёмной фигурой, единственное тёмное пятно раздела */
.gift{position:relative;display:grid;gap:12px;align-content:start;padding:clamp(24px,2.6vw,34px);
  background:var(--ink);color:var(--paper);border-radius:3px;overflow:hidden}
.gift__fig{width:clamp(84px,8vw,120px);height:auto;margin-bottom:6px;filter:drop-shadow(0 18px 30px rgba(42,59,255,.35))}
.gift .lbl{color:rgba(239,237,232,.6)}
.gift .lbl i{color:#8FA0FF}
.gift>b{font-family:var(--display);font-weight:800;font-size:clamp(24px,2.4vw,32px);line-height:1.05;letter-spacing:-.03em;text-wrap:balance}
.gift>p{font-size:14.5px;line-height:1.55;color:rgba(239,237,232,.66)}
.gift .incl{margin-top:6px;border-top-color:rgba(239,237,232,.22)}
.gift .incl li{border-bottom-color:rgba(239,237,232,.12);color:rgba(239,237,232,.86);font-size:14.5px}
.gift .incl li::before{background:#8FA0FF}
.links{display:flex;flex-wrap:wrap;gap:8px 22px}
/* сравнение со студиями: тихая рамка вместо повторной цены */
.price__cmp{display:grid;gap:12px;align-content:start;padding:clamp(22px,2.4vw,30px);
  border:1px solid var(--line);border-radius:3px}
.price__cmp>b{font-family:var(--serif);font-size:clamp(34px,4vw,48px);line-height:1;font-weight:400}
.price__cmp p{font-size:14.5px;line-height:1.55;color:var(--dim)}
.price__cmp .link{justify-self:start}
.price__big{position:sticky;top:96px;display:grid;gap:14px;align-content:start;
  padding:clamp(24px,2.6vw,34px);background:var(--ink);color:var(--paper);border-radius:3px}
@media(max-width:999px){.price__big{position:static}}
.price__big>b{font-family:var(--serif);font-size:clamp(42px,5.6vw,64px);line-height:.95}
.price__big .sub{font-size:14.5px;color:rgba(239,237,232,.66)}
.price__split{display:grid;gap:0;margin-top:6px;border-top:1px solid rgba(239,237,232,.2)}
.price__split b,.price__split dd{white-space:nowrap;margin:0}
.price__split div{display:flex;justify-content:space-between;gap:14px;padding:11px 0;
  border-bottom:1px solid rgba(239,237,232,.12);font-size:14.5px}
.price__split b,.price__split dd{font-weight:600}
.price__split span,.price__split dt{color:rgba(239,237,232,.6)}

.cols{display:grid;gap:clamp(26px,3vw,42px)}
@media(min-width:700px){.cols{grid-template-columns:repeat(2,1fr)}}
.incl{display:grid;border-top:1px solid var(--line)}
/* Маркер выведен из потока: раньше строка была гридом на две колонки,
   и любой <b> внутри становился третьим элементом — заголовок пункта
   уезжал вправо, а пояснение падало на следующую строку. */
.incl li{position:relative;padding:11px 0 11px 20px;
  border-bottom:1px solid var(--line-2);font-size:15px;line-height:1.45}
.incl li::before{content:'';position:absolute;left:0;top:18px;width:9px;height:9px;
  background:var(--ink);border-radius:1px}
.incl--out li::before{background:transparent;border:1px solid var(--dim)}
.incl--out li{color:var(--ink-2)}
.incl b{font-weight:600}
.incl .pin{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--acc);margin-top:3px}

.packs{display:grid;gap:16px;margin-top:clamp(30px,4vw,52px)}
@media(min-width:860px){.packs{grid-template-columns:repeat(2,1fr);gap:clamp(18px,2vw,28px)}}
/* объёмы — две карточки на белом: раньше они разделялись одной линией
   и сливались с надстройкой под ними в одно полотно */
.pack{display:grid;gap:12px;align-content:start;padding:clamp(22px,2.6vw,32px);
  background:var(--white);border:1px solid var(--line);border-radius:3px}
.pack__n{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.pack__p{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-family:var(--serif);font-size:clamp(34px,3.4vw,44px);line-height:1}
.pack__p--txt{font-size:clamp(26px,2.6vw,34px);padding:.12em 0}
.pack__p small{font-family:'Golos Text',-apple-system,'Segoe UI',Arial,sans-serif;font-size:13.5px;color:var(--dim)}
.pack__t{margin:0;font-size:14.5px;line-height:1.55;color:var(--dim)}
.pack .incl{margin-top:6px}

/* продвижение: отдельная услуга на тёмном, слева цена с фигурой, справа состав */
.promo{display:grid;gap:clamp(24px,3vw,44px);margin-top:clamp(30px,4vw,52px)}
@media(min-width:900px){.promo{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);align-items:start}}
.promo__card{display:grid;gap:14px;align-content:start;justify-items:start;padding:clamp(24px,2.6vw,34px);
  border:1px solid rgba(239,237,232,.2);border-radius:3px;background:rgba(239,237,232,.04)}
.promo__fig{width:clamp(84px,8vw,120px);height:auto;filter:drop-shadow(0 18px 30px rgba(42,59,255,.45))}
.promo__p{font-family:var(--serif);font-size:clamp(44px,5vw,64px);line-height:1}
.promo__p small{display:block;margin-top:8px;font-family:'Golos Text',-apple-system,'Segoe UI',Arial,sans-serif;
  font-size:14px;color:rgba(239,237,232,.6)}
.promo__t{margin:0;font-size:14.5px;line-height:1.55;color:rgba(239,237,232,.66)}
.promo__card .btn{margin-top:6px}
.s--ink .incl{border-top-color:rgba(239,237,232,.22)}
.s--ink .incl li{border-bottom-color:rgba(239,237,232,.12);color:rgba(239,237,232,.8)}
.s--ink .incl b{color:var(--paper)}
.s--ink .incl li::before{background:#8FA0FF}

/* ---------- 5. сравнение ---------- */
.cmp{width:100%;border-collapse:collapse;font-size:15px}
.cmp th{text-align:left;padding:12px 14px 12px 0;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:500;
  border-bottom:1px solid var(--ink)}
.cmp td{padding:15px 14px 15px 0;border-bottom:1px solid var(--line-2);vertical-align:top}
.cmp td:last-child,.cmp th:last-child{text-align:right;padding-right:0;white-space:nowrap;
  font-family:var(--serif);font-size:17px}
.cmp th:last-child{font-family:var(--mono);font-size:11px}
.cmp tr.me td{font-weight:600}
.cmp tr.me td:first-child{position:relative;padding-left:16px}
.cmp tr.me td:first-child::before{content:'';position:absolute;left:0;top:19px;width:7px;height:7px;
  background:var(--acc);border-radius:50%}
.cmpwrap{overflow-x:auto}
.why{display:grid;gap:clamp(26px,3.4vw,52px)}
@media(min-width:980px){.why{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}}
.whycard{align-self:start;padding:clamp(22px,2.4vw,30px);border:1px solid var(--line);border-radius:3px;
  background:var(--white)}
.whycard b{display:block;font-family:var(--display);font-weight:700;font-size:17px;margin-bottom:10px}
.whycard p{font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.whycard p+p{margin-top:10px}

/* ---------- 6. контакты ---------- */
.conts{display:grid;gap:0;border-top:1px solid rgba(239,237,232,.22)}
@media(min-width:760px){.conts{grid-template-columns:repeat(3,1fr);column-gap:clamp(22px,3vw,48px)}}
.cont{padding:22px 0;border-bottom:1px solid rgba(239,237,232,.12);display:grid;gap:6px}
.cont span{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(239,237,232,.5)}
.cont b{font-family:var(--display);font-weight:700;font-size:clamp(17px,1.7vw,21px);overflow-wrap:anywhere}
.cont a{background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;
  background-repeat:no-repeat;background-position:0 100%;transition:background-size .38s var(--ease)}
.cont a:hover{background-size:100% 1px}

.cta-row{display:flex;flex-wrap:wrap;gap:11px 20px;align-items:center;margin-top:clamp(26px,3vw,40px)}
.foot{padding:26px 0 34px;display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
/* в подвале стоит оговорка про демо-проекты — на телефоне её должно быть видно,
   поэтому там кегль крупнее и без разрядки прописными */
@media(max-width:640px){.foot{font-size:12.5px;letter-spacing:.04em;text-transform:none}}

/* ---------- появление ---------- */
/* Исходное состояние «спрятано» действует только когда в браузере включены
   скрипты: без них (и в старых браузерах, которые этого условия не знают)
   страница просто видна целиком. Раньше opacity:0 стояло безусловно, и без
   JavaScript между шапкой и подвалом оставалась пустота. */
[data-r]{transition:opacity .85s var(--ease),transform .85s var(--ease);transition-delay:var(--d,0ms)}
/* Маске нужен запас сверху: при line-height меньше единицы overflow:hidden
   срезал кратку у «Й» в главном заголовке. */
[data-mask]{display:block;overflow:hidden;padding-top:.18em;margin-top:-.18em}
[data-mask]>span{display:block;transition:transform .55s var(--ease);transition-delay:var(--d,0ms)}
@media(scripting:enabled){
  [data-r]:not(.in){opacity:0;transform:translateY(22px)}
  [data-mask]:not(.in)>span{transform:translateY(105%)}
}
/* На печати и в «Сохранить как PDF» видно всё, даже если страницу не прокручивали */
@media print{
  [data-r],[data-mask]>span,[data-a-in],[data-a-rise]{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .top{position:static}.sheet,.burger,.top__cta{display:none!important}
}
@media(prefers-reduced-motion:reduce){
  [data-r],[data-mask]>span{opacity:1;transform:none;transition:none}
  .qz__s.on{animation:none}
  html{scroll-behavior:auto}
  .proj:hover .proj__cov img{transform:none}
}

/* ---------- Объёмный знак на первом экране ----------
   Единственная картинка на витрине, которую не пришлось искать в стоке:
   тот же квадрат с двумя полосами, что и в шапке, только с толщиной.
   Лежит фоном и не мешает тексту: pointer-events нет, на узком экране
   уходит совсем. */
.hero{position:relative;overflow:hidden}
.hero__3d{position:absolute;right:-8vw;top:50%;translate:0 -50%;width:min(46vw,540px);
  opacity:.9;pointer-events:none;user-select:none;z-index:0}
.hero .shell{position:relative;z-index:1}
/* на средних ширинах значок наезжал на последнюю букву заголовка */
@media(max-width:1300px){.hero__3d{width:min(34vw,400px);right:-11vw}}
@media(max-width:1040px){.hero__3d{display:none}}

/* ---------- Услуги ----------
   Раньше на витрине студии не было написано, что студия делает:
   список услуг жил только в КП. Три плитки закрывают этот пробел. */
.svcs{display:grid;gap:14px}
@media(min-width:760px){.svcs{grid-template-columns:repeat(3,1fr)}}
.svc{display:flex;flex-direction:column;gap:12px;padding:26px 24px 22px;background:var(--white);
  border:1px solid var(--line-2);border-radius:4px;transition:border-color .22s var(--ease)}
.svc:hover{border-color:var(--ink)}
.svc__i{width:56px;height:56px}
.svc__n{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.01em}
/* две строки под заголовок — только когда карточки стоят в ряд и должны
   сойтись по цене; в столбик та же высота оставляла дыру */
@media(min-width:760px){.svc__n{min-height:3.24em}}
.svc__p{font-family:var(--serif);font-size:26px;line-height:1.1}
.svc__p small{display:block;margin-top:4px;font-family:var(--text);font-size:13px;color:var(--dim)}
.svc__d{font-size:14.5px;line-height:1.5;color:var(--ink-2);flex:1}
.svc__l{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--acc);border-bottom:1px solid transparent;align-self:flex-start;transition:.22s var(--ease)}
.svc:hover .svc__l{border-bottom-color:var(--acc)}

/* ---------- Форма ----------
   Полей на витрине не было ни одного: 37 ссылок и ноль способов
   написать, не звоня. */
.frm{display:grid;gap:14px;max-width:560px}
@media(min-width:720px){.frm{grid-template-columns:1fr 1fr}.frm__wide{grid-column:1/-1}}
.fld{display:grid;gap:7px}
.fld label{font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(239,237,232,.62)}
.fld input,.fld textarea{width:100%;padding:13px 14px;background:rgba(239,237,232,.06);
  border:1px solid rgba(239,237,232,.22);border-radius:3px;color:var(--paper);font-size:15.5px;
  font-family:var(--text);transition:border-color .2s var(--ease)}
.fld textarea{min-height:104px;resize:vertical}
.fld input::placeholder,.fld textarea::placeholder{color:rgba(239,237,232,.34)}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--paper)}
.frm__ok{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-size:13.5px;
  line-height:1.5;color:rgba(239,237,232,.62)}
.frm__ok input{margin-top:3px;accent-color:var(--acc);width:16px;height:16px;flex:none}
.frm__ok a{border-bottom:1px solid rgba(239,237,232,.4)}
.frm__st{grid-column:1/-1;display:none;padding:13px 15px;border-radius:3px;font-size:15px}
.frm__st.ok{display:block;background:rgba(239,237,232,.12);color:var(--paper)}
.frm__st.err{display:block;background:#7A1D12;color:#fff}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ---------- Подвал ----------
   Был одной строкой без лендмарка. Стал местом, где названы лицо,
   юридические страницы и оговорка про демо. */
.ftr{border-top:1px solid var(--line);padding:38px 0 30px;margin-top:10px}
.ftr__in{display:grid;gap:26px}
@media(min-width:860px){.ftr__in{grid-template-columns:1.4fr 1fr 1fr}}
.ftr__t{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);margin-bottom:12px}
.ftr__l{display:grid;gap:8px;font-size:14.5px}
.ftr__l a:hover{color:var(--acc)}
.ftr__law{margin-top:28px;padding-top:20px;border-top:1px solid var(--line-2);
  font-size:13px;line-height:1.55;color:var(--dim);max-width:96ch}
.ftr__law p{margin:0 0 8px}
.ftr__btm{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;
  margin-top:16px;font-size:12.5px;color:var(--dim)}

/* ---------- Квиз ----------
   Отдельный сценарий входа для тех, кто не готов звонить: вопрос
   на экран, ответы уезжают тем же POST /api/requests, что и форма.
   Без JS показываются все шаги подряд — страница остаётся рабочей
   анкетой, а не пустым экраном. */
.qz{max-width:760px;margin:0 auto}
.qz__bar{height:2px;background:var(--line-2);margin-bottom:clamp(26px,3vw,40px);overflow:hidden}
.qz__bar i{display:block;height:100%;width:0;background:var(--acc);transition:width .35s var(--ease)}
.qz__c{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);margin-bottom:14px}
.qz__s{display:none}
.qz__s.on{display:block;animation:qzIn .5s var(--ease) both}
@keyframes qzIn{from{opacity:0;transform:translateY(14px)}}
.qz.nojs .qz__s{display:block;margin-bottom:clamp(34px,4vw,56px)}
.qz h2{font-family:var(--display);font-weight:800;font-size:clamp(24px,3.2vw,40px);
  line-height:1.1;letter-spacing:-.02em}
.qz__hint{margin-top:10px;font-size:14.5px;color:var(--dim)}
.qz__opts{display:grid;gap:10px;margin-top:clamp(22px,2.6vw,32px)}
@media(min-width:640px){.qz__opts--2{grid-template-columns:1fr 1fr}}
.qz__o{display:flex;align-items:center;gap:13px;padding:17px 19px;background:var(--white);
  border:1px solid var(--line-2);border-radius:4px;cursor:pointer;font-size:15.5px;
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.qz__o:hover{border-color:var(--ink)}
.qz__o input{appearance:none;flex:none;width:18px;height:18px;border:1px solid var(--dim);
  border-radius:50%;transition:.2s var(--ease)}
.qz__o input[type=checkbox]{border-radius:3px}
.qz__o input:checked{border-color:var(--acc);border-width:5px}
.qz__o input[type=checkbox]:checked{border-width:1px;background:var(--acc);box-shadow:inset 0 0 0 3px var(--white)}
.qz__o:has(input:checked){border-color:var(--acc);background:var(--paper-2)}
.qz__in{width:100%;margin-top:22px;padding:15px 16px;background:var(--white);
  border:1px solid var(--line);border-radius:4px;font-size:16px;font-family:var(--text)}
.qz__in:focus{outline:none;border-color:var(--ink)}
.qz__nav{display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  margin-top:clamp(26px,3vw,38px);padding-top:22px;border-top:1px solid var(--line-2)}
.qz__back{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);background:none;border:0;cursor:pointer;padding:8px 0}
.qz__back:hover{color:var(--ink)}
.qz__st{display:none;margin-top:18px;padding:14px 16px;border-radius:4px;font-size:15px}
.qz__st.ok{display:block;background:var(--ink);color:var(--paper)}
.qz__st.err{display:block;background:#7A1D12;color:#fff}
.qz__ok{display:flex;gap:10px;align-items:flex-start;margin-top:18px;font-size:13.5px;
  line-height:1.5;color:var(--dim)}
.qz__ok input{margin-top:3px;accent-color:var(--acc);width:16px;height:16px;flex:none}
.qz__ok a{border-bottom:1px solid var(--line)}

/* ---------- Юридические страницы ----------
   Читают их редко, но читают внимательно: узкая мера строки
   и настоящие заголовки вместо сплошного полотна. */
.doc{max-width:74ch;margin-top:clamp(26px,3vw,42px)}
.doc h2{font-family:var(--display);font-weight:800;font-size:clamp(17px,1.7vw,21px);
  letter-spacing:-.01em;margin:clamp(28px,3vw,40px) 0 12px}
.doc h2:first-child{margin-top:0}
.doc p{margin:0 0 13px;font-size:15.5px;line-height:1.68;color:var(--ink-2)}
.doc .link{color:var(--acc)}
   бросаться в глаза и на макете, и на живой странице. */

/* Шапка фиксированная, и на внутренних страницах первый экран
   начинается сразу с секции — без запаса заголовок уезжал бы
   под неё. На главной этот запас уже зашит в .hero. */
main > .s:first-child{padding-top:clamp(112px,11vw,168px)}

/* ---------- Полоса «отдельные задачи» ----------
   Секция во всю ширину, залитая акцентом: единственное цветное
   пятно на ахроматической витрине. Стоит между услугами и работами
   и отвечает на вопрос «а если моей задачи нет в прайсе». */
.band-acc{background:var(--ink);color:#fff;padding:clamp(52px,7vw,110px) 0}
.band-acc .lbl{color:rgba(255,255,255,.62)}
.band-acc .lbl i{color:#8FA0FF}
.band-acc .d2{color:#fff}
.band-acc .lead{color:rgba(255,255,255,.78)}

/* Плитки-таблетки: короткая строка на подложке, ничего больше.
   Их задача — показать охват одним взглядом, а не рассказать. */
.pills{display:grid;gap:12px;margin-top:clamp(28px,3.4vw,46px)}
@media(min-width:680px){.pills{grid-template-columns:1fr 1fr}}
.pill{display:flex;align-items:center;min-height:74px;padding:18px 24px;
  background:rgba(239,237,232,.06);border:1px solid rgba(239,237,232,.16);
  border-radius:14px;font-size:16px;line-height:1.35;
  transition:background .22s var(--ease),border-color .22s var(--ease)}
.pill:hover{background:rgba(239,237,232,.12);border-color:rgba(239,237,232,.32)}
.band-acc .note{color:rgba(255,255,255,.66)}

/* ---------- Переход к услугам ----------
   Четыре ссылки, которые раньше жили только в подвале и там
   терялись. Здесь они в основном потоке и читаются как выбор,
   а не как список в служебной части. */
/* Светлые карточки на синем: их задача — быть замеченными.
   Той же краской, что фон, они сливались и повторяли ошибку
   подвала, откуда их сюда и подняли. */
.ways{display:grid;gap:16px;grid-auto-rows:1fr;margin-top:clamp(30px,3.6vw,50px)}
@media(min-width:760px){.ways{grid-template-columns:repeat(3,1fr)}}
/* Карточка-переход: фигура сверху, крупный заголовок, кнопка внизу.
   Кнопка вместо мелкой ссылки — карточка должна звать, а не сообщать. */
.way{position:relative;display:grid;grid-template-rows:auto auto 1fr auto;gap:10px;
  padding:26px 26px 26px;background:var(--paper);color:var(--ink);border-radius:18px;
  overflow:hidden;transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.way::after{content:'';position:absolute;right:-40px;bottom:-40px;width:160px;height:160px;
  border-radius:50%;background:var(--acc);opacity:0;transition:opacity .35s var(--ease)}
.way:hover{background:#fff;transform:translateY(-4px);box-shadow:0 18px 40px rgba(9,14,60,.28)}
.way:hover::after{opacity:.08}
.way__fig{width:clamp(72px,7vw,92px);height:auto;margin-bottom:6px;position:relative;z-index:1;
  transition:transform .35s var(--ease)}
.way:hover .way__fig{transform:translateY(-4px) rotate(-4deg)}
.way b{position:relative;z-index:1;font-family:var(--display);font-weight:800;font-size:20px;
  letter-spacing:-.015em;line-height:1.15}
.way span{position:relative;z-index:1;font-size:14px;line-height:1.5;color:var(--dim)}
.way i{position:relative;z-index:1;justify-self:start;font-style:normal;font-family:var(--display);
  font-weight:700;font-size:13px;letter-spacing:.01em;color:var(--paper);background:var(--ink);
  padding:10px 16px;border-radius:999px;margin-top:6px;display:inline-flex;align-items:center;gap:8px;
  transition:background .25s var(--ease),gap .25s var(--ease)}
.way i::after{content:'→'}
.way:hover i{background:var(--acc);gap:12px}

/* ---------- Сгруппированный состав работ ----------
   Одиннадцать пунктов подряд читаются как накладная. Разбитые
   на четыре смысловые группы — как ответ на вопрос «что я получу». */
.feat{display:grid;gap:14px;margin-top:clamp(26px,3vw,42px)}
@media(min-width:680px){.feat{grid-template-columns:1fr 1fr}}
.feat__c{padding:26px 24px 24px;background:var(--white);
  border:1px solid var(--line-2);border-radius:4px}
.feat__n{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--acc)}
.feat__t{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.015em;
  margin:10px 0 14px}
.feat__l{display:grid;gap:9px}
.feat__l li{position:relative;padding-left:18px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.feat__l li::before{content:'';position:absolute;left:0;top:9px;width:7px;height:7px;
  background:var(--acc);border-radius:1px}
.feat__l b{color:var(--ink);font-weight:600}

/* Во всю ширину состав работ разбивается на четыре колонки:
   в двухколоночном гриде карточки сжимались вдвое и рвали строки. */
@media(min-width:1000px){.feat--wide{grid-template-columns:repeat(4,1fr)}}

/* ---------- Шапка цветной полосы с фигурой ----------
   Крупная фигура слева от заголовка: она и метка раздела,
   и единственная «картинка» на странице, которую не пришлось
   искать в стоке. */
.bhead{display:grid;gap:18px;align-items:center;margin-bottom:clamp(28px,3.4vw,46px)}
@media(min-width:760px){.bhead{grid-template-columns:auto 1fr;gap:clamp(20px,2.6vw,38px)}}
.bhead__f{width:clamp(76px,9vw,132px);height:auto;flex:none;
  filter:drop-shadow(0 14px 28px rgba(9,14,60,.28))}
.bhead__t{font-family:var(--display);font-weight:800;line-height:1.02;letter-spacing:-.035em;
  font-size:clamp(28px,4.6vw,58px)}
.band-acc .bhead__t{color:#fff}
.bhead__s{margin-top:12px;font-size:clamp(15px,1.2vw,17.5px);line-height:1.55;max-width:62ch}
.band-acc .bhead__s{color:rgba(255,255,255,.76)}

/* Карточки состава внутри тёмной полосы: чуть светлее фона, с тонкой рамкой,
   как карточка продвижения. */
.band-acc .feat__c{background:rgba(239,237,232,.05);border-color:rgba(239,237,232,.16);
  border-radius:14px}
.band-acc .feat__n{color:rgba(255,255,255,.66)}
.band-acc .feat__t{color:#fff}
.band-acc .feat__l li{color:rgba(255,255,255,.8)}
.band-acc .feat__l li::before{background:rgba(255,255,255,.62)}
.band-acc .feat__l b{color:#fff}

/* Фигура в первом экране внутренних страниц: закрывает пустоту
   под заголовком, из-за которой страница выглядела недоделанной. */
.pfig{display:none}
@media(min-width:1000px){
  .pfig{display:block;width:min(30vw,300px);margin-left:auto;
    filter:drop-shadow(0 22px 44px rgba(9,14,60,.22))}
}

/* Список внутри цветной полосы: чернильные маркеры и серый текст
   на синем не читаются. */
.band-acc .incl{border-top-color:rgba(255,255,255,.24)}
.band-acc .incl li{color:rgba(255,255,255,.84);border-bottom-color:rgba(255,255,255,.18)}
.band-acc .incl li::before{background:#fff}
.band-acc .incl b{color:#fff}
.band-acc .incl .pin{color:rgba(255,255,255,.72)}
.band-acc .incl a,.band-acc .note a{color:#fff;border-bottom:1px solid rgba(255,255,255,.5)}

/* ---------- Область нажатия на телефоне ----------
   Ссылка-строка ростом 20 пикселей мимо пальца: рекомендованный
   минимум — 44. Расширяем невидимой подложкой, чтобы не двигать
   вёрстку отступами. Приём уже применён к .lnk выше — здесь тот же
   для остальных самостоятельных ссылок.
   Ссылки внутри абзацев (.doc .link) намеренно не трогаем: там
   подложка перекрывала бы соседние строки текста. */
@media(max-width:640px){
  .svc__l,.way i,.ftr__l a,.nav a,.sheet__value a,.listing__row{position:relative}
  .svc__l::after,.way i::after,.ftr__l a::after,.nav a::after,.sheet__value a::after{
    content:'';position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
    height:44px;min-width:44px}
  /* Строки печатного списка и так высокие, но на узком экране
     сжимаются — держим минимум. */
  .listing__row{min-height:56px}
}

/* =============================================================
   ВИТРИНА v2 — ПОРЯДОК КАК В ПРОДАЖЕ
   Раньше до работ приходилось пролистать четыре экрана текста, а у
   самих работ не было страниц. Теперь порядок разделов повторяет
   разговор с заказчиком: что стоит → как сайт приводит клиента →
   как идёт работа → что уже сделано → заявка → контакты. Текста
   на главной мало: подробности живут на страницах проектов и услуг.
   Система та же: Manrope / Prata / Golos / Plex Mono, бумага и чернила,
   один синий акцент.
   ============================================================= */

/* --- герой короче: один заголовок, одна строка, два действия --- */
.hero--v2{padding:clamp(108px,14vw,176px) 0 clamp(44px,5vw,72px)}
.hero--v2 .hero__sub{grid-template-columns:1fr;border-top:0;padding-top:0;margin-top:clamp(22px,3vw,40px)}
.hero__row{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;margin-top:26px;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.hero__row b{font-family:var(--serif);font-size:18px;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:400}

/* --- заголовок раздела по центру: короткая подпись, заголовок, строка --- */
.head--c{text-align:center;justify-items:center;max-width:64ch;margin-left:auto;margin-right:auto}
.head--c .lead{margin-left:auto;margin-right:auto}

/* --- расчётная стоимость: три карточки, у каждой вилка и пять пунктов --- */
.offers{display:grid;gap:14px}
@media(min-width:900px){.offers{grid-template-columns:repeat(3,1fr)}}
.offer{display:flex;flex-direction:column;gap:14px;padding:clamp(22px,2.4vw,30px);
  background:var(--white);border:1px solid var(--line-2);border-radius:6px;
  scroll-margin-top:96px}
.offer--acc{border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}
.offer__k{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.offer--acc .offer__k{color:var(--acc)}
.offer__n{font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:-.02em;line-height:1.15}
.offer__d{font-size:14.5px;line-height:1.5;color:var(--ink-2);margin-top:-6px}
.offer__p{font-family:var(--serif);font-size:clamp(30px,2.6vw,38px);line-height:1;letter-spacing:-.01em;
  padding-top:14px;border-top:1px solid var(--line-2);font-variant-numeric:tabular-nums}
.offer__p small{display:block;margin-top:6px;font-family:var(--text);font-size:13px;line-height:1.4;color:var(--dim);letter-spacing:0}
.offer__l{display:grid;gap:9px;margin:2px 0 6px;flex:1;align-content:start}
.offer__l li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.offer__l li::before{content:'';position:absolute;left:0;top:2px;width:16px;height:16px;border-radius:50%;
  background:var(--paper-2);border:1px solid var(--line)}
.offer__l li::after{content:'';position:absolute;left:5px;top:6px;width:5px;height:3px;
  border-left:1.6px solid var(--ink);border-bottom:1.6px solid var(--ink);transform:rotate(-45deg)}
.offer--acc .offer__l li::after{border-color:var(--acc)}
.offer .btn{width:100%;justify-content:center}
/* условия под тарифами — строкой фактов, без объяснений (ревью 21.09, VNT-15) */
.terms{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin-top:clamp(20px,2.4vw,30px);
  font-size:14.5px;line-height:1.4;color:var(--ink-2)}
.terms li{display:flex;align-items:center;gap:9px}
.terms li::before{content:'';width:7px;height:7px;border-radius:1px;background:var(--acc);flex:none}
.terms__more{margin-top:14px;text-align:center}

/* --- как сайт приводит клиента: карта пути слева, ожидания справа --- */
.flow{display:grid;gap:16px}
@media(min-width:960px){.flow{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.flow__map,.flow__want{padding:clamp(22px,2.6vw,34px);border-radius:6px;
  background:rgba(239,237,232,.05);border:1px solid rgba(239,237,232,.16)}
/* точечная сетка как на чертеже — только фон, сути не несёт */
.flow__map{position:relative;overflow:hidden;
  background-image:radial-gradient(rgba(239,237,232,.14) 1px,transparent 1.2px);background-size:18px 18px;
  background-color:rgba(239,237,232,.04)}
.flow__map .lbl{margin-bottom:22px}
.fnode{display:inline-flex;align-items:center;gap:9px;padding:10px 15px;border-radius:6px;
  background:var(--ink);border:1px solid rgba(239,237,232,.28);color:var(--paper);
  font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.01em;white-space:nowrap;max-width:100%}
.fnode i{font-style:normal;font-family:var(--mono);font-size:12px;color:#8FA0FF}
.fnode--acc{background:var(--acc);border-color:var(--acc)}
.fnode--acc i{color:#fff}
.fnode--you{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.fnode--you i{color:var(--acc)}
/* дерево: вертикальная линия слева от веток, горизонтальная — к каждой */
.ftree{list-style:none;margin:0;padding:0}
.ftree>li{position:relative;padding:0 0 18px 0}
.ftree>li:last-child{padding-bottom:0}
.ftree__from{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(239,237,232,.5);margin:8px 0 8px 14px;display:flex;align-items:center;gap:10px}
.ftree__from::before{content:'';width:1px;height:18px;background:rgba(239,237,232,.35);display:inline-block}
.fbranches{list-style:none;margin:14px 0 0 22px;padding:0 0 0 24px;border-left:1px solid rgba(239,237,232,.35);
  display:grid;gap:12px}
.fbranches li{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.fbranches li::before{content:'';position:absolute;left:-24px;top:50%;width:18px;height:1px;background:rgba(239,237,232,.35)}
.fbranches li:last-child{padding-bottom:0}
.fok{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:rgba(63,168,98,.18);border:1px solid rgba(63,168,98,.6);color:#7FD59B;font-size:13px;flex:none}
.fto{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:rgba(239,237,232,.6);display:inline-flex;gap:8px;align-items:center}
.fto::before{content:'→';color:#8FA0FF}
.ftree__end{margin-top:18px;padding-top:16px;border-top:1px dashed rgba(239,237,232,.28);
  display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.ftree__end span{font-size:13.5px;color:rgba(239,237,232,.7)}
/* правая карточка: что ищет человек */
.flow__want h3{font-family:var(--display);font-weight:800;font-size:clamp(21px,2vw,26px);letter-spacing:-.025em;line-height:1.1;color:#fff}
.flow__want>p{margin-top:8px;font-size:14.5px;color:rgba(239,237,232,.66)}
.wants{list-style:none;margin:22px 0 0;padding:0;display:grid}
.wants li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start;
  padding:16px 0;border-top:1px solid rgba(239,237,232,.14)}
.wants li:first-child{border-top:0;padding-top:0}
.wants i{display:grid;place-items:center;width:44px;height:44px;border-radius:8px;
  background:rgba(239,237,232,.08);border:1px solid rgba(239,237,232,.2);font-style:normal;color:#8FA0FF;font-size:18px}
.wants b{display:block;font-family:var(--display);font-weight:700;font-size:16px;color:#fff;letter-spacing:-.01em}
.wants span{display:block;margin-top:3px;font-size:14px;line-height:1.5;color:rgba(239,237,232,.66)}
.flow__sum{margin-top:18px;padding-top:16px;border-top:1px solid rgba(239,237,232,.14);
  display:flex;align-items:center;gap:10px;font-size:14.5px;color:#fff}
.flow__sum::before{content:'';width:9px;height:9px;border-radius:50%;background:#7FD59B;flex:none;
  box-shadow:0 0 0 4px rgba(127,213,155,.18)}

/* --- этапы: четыре карточки с долей времени --- */
.stages{display:grid;gap:14px}
@media(min-width:700px){.stages{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.stages{grid-template-columns:repeat(4,1fr)}}
.stage{position:relative;display:grid;gap:10px;align-content:start;padding:clamp(22px,2.2vw,28px);
  background:var(--white);border:1px solid var(--line-2);border-radius:6px;overflow:hidden}
.stage__n{position:absolute;right:16px;top:8px;font-family:var(--serif);font-size:74px;line-height:1;
  color:transparent;-webkit-text-stroke:1px var(--line);pointer-events:none}
.stage__i{width:44px;height:44px;display:grid;place-items:center;border-radius:8px;
  background:var(--paper-2);border:1px solid var(--line-2)}
.stage__i img{width:28px;height:28px}
.stage h3{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.02em;margin-top:6px}
.stage__t{display:inline-flex;align-items:baseline;gap:8px;font-family:var(--mono);font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.stage__t b{font-family:var(--serif);font-size:20px;letter-spacing:0;color:var(--ink);font-weight:400}
.stage__bar{height:3px;background:var(--line-2);border-radius:2px;overflow:hidden}
.stage__bar i{display:block;height:100%;background:var(--acc);width:var(--w,20%);transform-origin:0 50%;
  transform:scaleX(0);transition:transform 1s var(--ease) .2s}
.stage.in .stage__bar i,.stage:not(.pending) .stage__bar i{transform:none}
.stage p{font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.stage ul{display:grid;gap:7px;margin-top:4px;padding-top:12px;border-top:1px solid var(--line-2)}
.stage li{position:relative;padding-left:16px;font-size:14px;line-height:1.45;color:var(--ink-2)}
.stage li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;background:var(--acc);border-radius:1px}

/* --- портфолио: карточки проектов с обложкой в «окне» --- */
.cases{display:grid;gap:16px}
@media(min-width:720px){.cases{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.cases{grid-template-columns:repeat(3,1fr)}}
.case{display:flex;flex-direction:column;gap:12px;padding:20px 20px 20px;background:var(--white);
  border:1px solid var(--line-2);border-radius:6px;color:var(--ink);
  transition:border-color .22s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.case:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(13,13,15,.35)}
.case__k{align-self:flex-start;padding:5px 10px;border-radius:999px;background:var(--paper-2);border:1px solid var(--line-2);
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.case__n{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.025em;line-height:1.1}
.case__d{font-size:14.5px;line-height:1.5;color:var(--ink-2);flex:1}
.frame{position:relative;overflow:hidden;border-radius:6px;border:1px solid var(--line);background:var(--paper-2)}
.frame::before{content:'';display:block;height:18px;background:var(--paper-2);border-bottom:1px solid var(--line-2);
  background-image:radial-gradient(circle,rgba(13,13,15,.28) 2.2px,transparent 2.6px),
    radial-gradient(circle,rgba(13,13,15,.28) 2.2px,transparent 2.6px),
    radial-gradient(circle,rgba(13,13,15,.28) 2.2px,transparent 2.6px);
  background-size:12px 12px;background-repeat:no-repeat;background-position:8px 3px,20px 3px,32px 3px}
.frame img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;display:block;
  transition:transform .8s var(--ease)}
.case:hover .frame img{transform:scale(1.03)}
.case__go{display:inline-flex;align-items:center;justify-content:center;gap:9px;margin-top:4px;padding:12px 16px;
  border:1px solid var(--line);border-radius:4px;font-family:var(--display);font-weight:700;font-size:14px;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s}
.case:hover .case__go{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cases__all{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:center;margin-top:clamp(24px,3vw,40px)}

/* --- заявка: светлая форма на бумаге с полем почты --- */
.ask{display:grid;gap:clamp(24px,3vw,44px)}
@media(min-width:1000px){.ask{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:start}}
.ask__side{display:grid;gap:14px;align-content:start}
.ask__side .lead{max-width:44ch}
.ask__pts{display:grid;gap:10px;margin-top:6px}
.ask__pts li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.ask__pts li::before{content:'';position:absolute;left:0;top:9px;width:9px;height:9px;background:var(--acc);border-radius:1px}
.frm--paper{max-width:none;padding:clamp(22px,2.6vw,34px);background:var(--white);border:1px solid var(--line-2);border-radius:6px}
.frm--paper .fld label{color:var(--dim)}
.frm--paper .fld input,.frm--paper .fld textarea{background:var(--paper-2);border-color:var(--line);color:var(--ink)}
.frm--paper .fld input::placeholder,.frm--paper .fld textarea::placeholder{color:#737068}
.frm--paper .fld input:focus,.frm--paper .fld textarea:focus{border-color:var(--ink);background:#fff}
.frm--paper .frm__ok{color:var(--ink-2)}
.frm--paper .frm__ok a{border-bottom-color:var(--line)}
.frm--paper .frm__st.ok{background:var(--ink);color:var(--paper)}
.frm--paper .hint{grid-column:1/-1;font-size:13px;line-height:1.5;color:var(--dim)}
.fld--err input,.fld--err textarea{border-color:#B3241B!important}
.fld__e{font-size:12.5px;color:#B3241B;display:none}
.fld--err .fld__e{display:block}

/* --- контакты: четыре ячейки на главной, страница целиком --- */
.ct-grid{display:grid;gap:14px}
@media(min-width:720px){.ct-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.ct-grid{grid-template-columns:repeat(4,1fr)}}
.ct{display:grid;gap:8px;align-content:start;padding:22px 22px 20px;background:var(--white);
  border:1px solid var(--line-2);border-radius:6px;min-width:0}
.ct__k{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.ct__v{font-family:var(--display);font-weight:800;font-size:clamp(18px,1.6vw,21px);letter-spacing:-.02em;overflow-wrap:anywhere}
.ct__v a:hover{color:var(--acc)}
.ct__s{font-size:13.5px;line-height:1.5;color:var(--dim)}
.ct--acc{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ct--acc .ct__k{color:rgba(239,237,232,.55)}
.ct--acc .ct__s{color:rgba(239,237,232,.66)}
/* индикатор «сейчас отвечаем» считается скриптом по московскому времени */
.now{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
.now::before{content:'';width:8px;height:8px;border-radius:50%;background:#B3241B}
.now.on::before{background:#3FA862;box-shadow:0 0 0 4px rgba(63,168,98,.18)}
.now.on{color:#2E7D46}
.ct--acc .now.on{color:#7FD59B}

/* страница контактов */
.ct-hero{display:grid;gap:clamp(24px,3vw,44px);align-items:end}
@media(min-width:900px){.ct-hero{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}}
.ct-big{display:grid;gap:22px;padding:clamp(24px,3vw,40px);background:var(--ink);color:var(--paper);border-radius:8px}
.ct-big__row{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start;
  padding:18px 0;border-top:1px solid rgba(239,237,232,.14)}
.ct-big__row:first-of-type{border-top:0;padding-top:0}
.ct-big__row i{display:grid;place-items:center;width:44px;height:44px;border-radius:8px;
  background:rgba(239,237,232,.08);border:1px solid rgba(239,237,232,.2);font-style:normal;color:#8FA0FF}
.ct-big__row span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(239,237,232,.5)}
.ct-big__row b{display:block;margin-top:5px;font-family:var(--display);font-weight:800;font-size:clamp(20px,2.2vw,28px);letter-spacing:-.025em;overflow-wrap:anywhere}
.ct-big__row b a:hover{color:#8FA0FF}
.ct-big__row small{display:block;margin-top:6px;font-size:13.5px;line-height:1.5;color:rgba(239,237,232,.62)}
.ct-big__row .btn{margin-top:12px}
.hours{display:grid;gap:0;padding:clamp(22px,2.6vw,32px);background:var(--white);border:1px solid var(--line-2);border-radius:8px}
.hours h2{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.02em;margin-bottom:6px}
.hours dl{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;margin:18px 0 0;font-size:15.5px}
.hours dt{color:var(--dim)}.hours dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.hours .now{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2)}
.hours p{margin-top:12px;font-size:14px;line-height:1.55;color:var(--dim)}
.talk{display:grid;gap:14px;margin-top:clamp(26px,3vw,40px)}
@media(min-width:760px){.talk{grid-template-columns:repeat(3,1fr)}}
.talk div{padding:20px 22px;background:var(--white);border:1px solid var(--line-2);border-radius:6px}
.talk i{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.talk b{display:block;margin:8px 0 6px;font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.015em}
.talk p{font-size:14px;line-height:1.5;color:var(--ink-2)}

/* --- страница проекта --- */
.case-hero{display:grid;gap:clamp(26px,3.4vw,48px);align-items:center}
@media(min-width:1000px){.case-hero{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}}
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;background:var(--white);
  border:1px solid var(--line);font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-2)}
.chip i{font-style:normal;color:var(--acc)}
.case-hero h1{margin-top:18px}
.case-hero .lead{margin-top:16px}
.facts{display:grid;gap:10px;margin-top:clamp(20px,2.4vw,30px)}
@media(min-width:520px){.facts{grid-template-columns:repeat(2,1fr)}}
.fact{padding:14px 16px;background:var(--white);border:1px solid var(--line-2);border-radius:6px}
.fact b{display:block;font-family:var(--serif);font-size:clamp(24px,2.4vw,32px);line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.fact span{display:block;margin-top:6px;font-size:13px;line-height:1.4;color:var(--dim)}
.case-hero .hero__act{margin-top:clamp(20px,2.4vw,30px)}
.frame--big{box-shadow:0 30px 60px -30px rgba(13,13,15,.35)}
.frame--big img{aspect-ratio:16/10.5}
.frame--big::before{height:24px;background-position:10px 6px,24px 6px,38px 6px}
.case-hero .frame--big{align-self:start}
/* «что сделали»: три-четыре карточки причина → действие → результат */
.did{display:grid;gap:14px}
@media(min-width:760px){.did{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.did--3{grid-template-columns:repeat(3,1fr)}}
.did div{padding:22px 22px 20px;background:var(--white);border:1px solid var(--line-2);border-radius:6px}
.did i{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.did b{display:block;margin:8px 0 6px;font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:-.02em;line-height:1.15}
.did p{font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.inside{display:grid;gap:0 clamp(22px,3vw,48px);margin-top:clamp(22px,2.6vw,34px);border-top:1px solid var(--line)}
@media(min-width:760px){.inside{grid-template-columns:repeat(2,1fr)}}
.inside li{position:relative;padding:12px 0 12px 22px;border-bottom:1px solid var(--line-2);font-size:15px;line-height:1.45}
.inside li::before{content:'';position:absolute;left:0;top:19px;width:9px;height:9px;background:var(--ink);border-radius:1px}
.inside b{font-weight:600}
.inside span{display:block;font-size:13.5px;color:var(--dim);margin-top:2px}
.techs{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.techs li{padding:8px 13px;border-radius:999px;background:var(--white);border:1px solid var(--line-2);
  font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:var(--ink-2)}
.shots2{display:grid;gap:14px;margin-top:clamp(22px,2.6vw,34px)}
@media(min-width:760px){.shots2{grid-template-columns:repeat(2,1fr)}}
.shots2 figcaption{margin-top:8px;font-size:13px;color:var(--dim)}
.honest{margin-top:18px;padding:14px 16px;border:1px dashed var(--line);border-radius:6px;font-size:13.5px;line-height:1.5;color:var(--dim)}
.case-nav{display:grid;gap:14px;margin-top:clamp(30px,4vw,56px);padding-top:clamp(22px,2.6vw,34px);border-top:1px solid var(--line)}
@media(min-width:640px){.case-nav{grid-template-columns:1fr 1fr}}
.case-nav a{display:grid;gap:4px;padding:18px 20px;border:1px solid var(--line-2);border-radius:6px;background:var(--white);
  transition:border-color .22s var(--ease)}
.case-nav a:hover{border-color:var(--ink)}
.case-nav span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.case-nav b{font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:-.02em}
.case-nav a:last-child{text-align:right}
.cta-final{margin-top:clamp(30px,4vw,56px);padding:clamp(26px,3vw,44px);background:var(--ink);color:var(--paper);border-radius:8px;
  display:grid;gap:18px;align-items:center}
@media(min-width:860px){.cta-final{grid-template-columns:minmax(0,1fr) auto}}
.cta-final b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(22px,2.6vw,32px);letter-spacing:-.03em;line-height:1.1}
.cta-final p{margin-top:8px;font-size:15px;color:rgba(239,237,232,.7);max-width:50ch}
.cta-final .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.cta-final .btn::after{background:var(--acc)}
.cta-final .btn:hover{color:#fff;border-color:var(--acc)}

/* --- юридические страницы: содержание слева, разделы с номерами --- */
.law{display:grid;gap:clamp(22px,3vw,44px);align-items:start;margin-top:clamp(26px,3vw,42px)}
@media(min-width:960px){.law{grid-template-columns:240px minmax(0,1fr)}}
.law__toc{position:sticky;top:96px;padding:18px 20px;background:var(--white);border:1px solid var(--line-2);border-radius:6px}
.law__toc span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:10px}
.law__toc a{display:block;padding:6px 0;font-size:14px;color:var(--ink-2);border-bottom:1px solid var(--line-2)}
.law__toc a:last-child{border-bottom:0}
.law__toc a:hover{color:var(--acc)}
@media(max-width:959px){.law__toc{position:static}}
.law__body{padding:clamp(22px,3vw,40px);background:var(--white);border:1px solid var(--line-2);border-radius:6px;max-width:none}
.law__body .doc{max-width:74ch;margin-top:0}
.law__body h2{scroll-margin-top:100px}
.law__body .grid2{display:grid;gap:10px;margin:14px 0 18px}
@media(min-width:640px){.law__body .grid2{grid-template-columns:1fr 1fr}}
.law__body .grid2 div{padding:12px 14px;background:var(--paper-2);border:1px solid var(--line-2);border-radius:4px;font-size:14.5px;line-height:1.45}
.law__body table{width:100%;border-collapse:collapse;font-size:14.5px;margin:14px 0 18px}
.law__body th,.law__body td{padding:9px 10px;border-bottom:1px solid var(--line-2);text-align:left;vertical-align:top}
.law__body th{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:500}
.law__meta{margin-top:22px;padding-top:16px;border-top:1px solid var(--line-2);font-size:13px;color:var(--dim)}

/* --- подвал шире: проекты и контакты --- */
@media(min-width:860px){.ftr__in--5{grid-template-columns:1.3fr 1fr 1fr 1fr 1fr}}

/* --- фокус на тёмных секциях виден --- */
.s--ink :focus-visible,.cta-final :focus-visible,.ct-big :focus-visible{outline-color:#8FA0FF}

@media(prefers-reduced-motion:reduce){
  .offer:hover,.case:hover{transform:none}
  .case:hover .frame img{transform:none}
  .stage__bar i{transition:none;transform:none}
}

/* Обложка в «окне»: у картинки стоят width/height для запаса места до
   загрузки, и атрибут height перебивал aspect-ratio — снимок растягивался
   в высоту. Высота считается от ширины. */
.frame img{height:auto}
/* Контурная кнопка на тёмной карточке контактов: без этого текст был
   чернильным на чернильном. */
.ct-big .btn--line{color:var(--paper);border-color:rgba(239,237,232,.34)}
.ct-big .btn--line::after{background:var(--paper)}
.ct-big .btn--line:hover{color:var(--ink);border-color:var(--paper)}

/* Поля формы 16 px: при меньшем кегле iOS зумит страницу на фокусе.
   Ссылки подвала на десктопе были 23 px высотой — ниже порога 24 px. */
.fld input,.fld textarea,.qz__in{font-size:16px}
.ftr__l a{padding:2px 0}

/* Заголовок героя спокойнее: одна гарнитура, умеренный кегль, без
   контраста «гротеск + засечки», который читался как слайд презентации. */
.hero--v2 h1{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(38px,7.6vw,108px);line-height:.96;letter-spacing:-.025em;max-width:14ch;text-wrap:balance}
.hero--v2 h1 .ser{font-family:inherit;font-weight:inherit;letter-spacing:inherit;color:var(--ink-2)}
.hero--v2 .hero__3d{opacity:.55;width:min(34vw,420px)}

/* --- страница проекта: путь человека и экраны --- */
.journey{display:grid;gap:12px;list-style:none;margin:0;padding:0;counter-reset:none}
@media(min-width:760px){.journey{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.journey{grid-template-columns:repeat(4,1fr)}}
.journey li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;padding:20px 20px 18px;
  background:var(--white);border:1px solid var(--line-2);border-radius:6px;align-items:start}
.journey i{font-style:normal;font-family:var(--serif);font-size:26px;line-height:1;color:var(--acc);padding-top:2px}
.journey b{display:block;font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.02em;line-height:1.2}
.journey p{margin-top:6px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.screens{display:grid;gap:clamp(16px,2.2vw,28px);margin-top:clamp(28px,3.4vw,46px)}
@media(min-width:760px){.screens{grid-template-columns:repeat(2,1fr)}}
.screen{margin:0}
.screen .frame{box-shadow:0 24px 50px -30px rgba(13,13,15,.35)}
.screen .frame img{aspect-ratio:1440/980}
.screen figcaption{margin-top:10px;font-size:14px;line-height:1.5;color:var(--dim);padding-left:2px}
@media(min-width:1100px){.did--4{grid-template-columns:repeat(4,1fr)}}

/* --- экраны проекта вразнобой ---
   Не столбик одинаковых картинок, а разворот: широкий кадр, узкий со
   сдвигом вниз, узкий с отступом слева, снова широкий. Появляются
   пружиной Motion (data-a-rise-group), лёгкий параллакс у каждого
   второго даёт глубину. На узком экране — одна колонка без сдвигов. */
@media(min-width:900px){
  .screens--stagger{grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,44px) clamp(18px,2.4vw,36px);align-items:start}
  .screens--stagger .screen:nth-child(4n+1){grid-column:1/8}
  .screens--stagger .screen:nth-child(4n+2){grid-column:8/13;margin-top:clamp(48px,7vw,112px)}
  .screens--stagger .screen:nth-child(4n+3){grid-column:2/7;margin-top:clamp(-8px,-1vw,-24px)}
  .screens--stagger .screen:nth-child(4n+4){grid-column:7/13;margin-top:clamp(40px,5vw,80px)}
  /* один или три кадра — последний одинокий узкий кадр тянем шире */
  .screens--stagger .screen:nth-child(3):last-child,
  .screens--stagger .screen:only-child{grid-column:3/11}
}
.screens--stagger .screen .frame{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.screens--stagger .screen:hover .frame{transform:translateY(-6px);box-shadow:0 34px 60px -28px rgba(13,13,15,.42)}
.screens--stagger .screen figcaption{display:flex;gap:10px;align-items:baseline}
.screens--stagger .screen figcaption i{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--acc)}
@media(prefers-reduced-motion:reduce){.screens--stagger .screen:hover .frame{transform:none}}

/* На 320 px знак «VANTA digital studio» и кнопка меню не умещались в
   строку — кнопка вылезала за край. Подпись знака на самых узких экранах
   прячем, кнопке чуть меньше полей. */
@media(max-width:380px){.mark__t em{display:none}.burger{padding:10px 11px 10px 13px}.top__in{gap:12px}}


/* =============================================================
   Правки по пользовательскому аудиту, сентябрь 2026
   ============================================================= */
[hidden]{display:none!important}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* --- телефон в шапке: на широком экране номером, на узком — кнопкой вызова.
   Сайт сам советует клиентам держать телефон на первом экране. --- */
.top__tel{display:inline-flex;align-items:center;justify-content:center;gap:9px;flex:none;margin-left:auto;
  min-width:44px;height:44px;border:1px solid var(--line);border-radius:3px;white-space:nowrap;
  font-family:var(--display);font-weight:700;font-size:14.5px;letter-spacing:-.01em;transition:.22s var(--ease)}
.top__tel svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.top__tel span{display:none}
.top__tel:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.top__tel~.burger{margin-left:0}
@media(max-width:1039px){.top__in{gap:10px}}
@media(min-width:1040px){.top__tel{margin-left:0}.top__in{gap:clamp(12px,1.6vw,44px)}}
.nav a,.top__cta{white-space:nowrap}
/* между 1040 и 1180 пунктам меню тесно: подпись знака уступает место, иначе
   «Как это работает» и кнопка переносились на вторую строку */
@media(min-width:1040px) and (max-width:1179px){.mark__t em{display:none}}
@media(min-width:1280px){
  .top__tel{border-color:transparent;padding:0 6px}
  .top__tel span{display:inline}
  .top__tel:hover{background:transparent;color:var(--acc);border-color:transparent}
}

/* --- кнопки: отклик на нажатие и видимое «отправляется» --- */
.btn:active{transform:scale(.98)}
.btn:disabled,.btn[disabled]{opacity:.55;cursor:progress}
.btn:disabled::after{display:none}

/* --- тарифы: ежемесячный платёж наравне с ценой --- */
.offer__plus{display:block;margin-top:8px;font-family:var(--display);font-weight:800;font-size:17px;
  letter-spacing:-.015em;line-height:1.2;color:var(--ink)}


/* --- формы --- */
.fld label i,.qz__f label i{font-style:normal;text-transform:none;letter-spacing:0;font-family:var(--text);font-size:13px;color:var(--dim)}
.frm__ok--err{color:#B3241B!important}
.frm__ok--err input{outline:2px solid #B3241B;outline-offset:2px}
.frm__st a,.qz__st a{color:inherit;border-bottom:1px solid currentColor;white-space:nowrap}

/* квиз: счётчик шага не уезжает под шапку, у полей постоянные подписи */
#qz{scroll-margin-top:96px}
.qz__f{display:grid;gap:7px;margin-top:18px}
.qz__f .qz__in{margin-top:0}
.qz__f label{font-size:14.5px;font-weight:600;color:var(--ink-2)}
.qz__in::placeholder{color:#737068}
.qz__e{display:none;font-size:13px;color:#B3241B}
.qz__f.err .qz__in{border-color:#B3241B}
.qz__f.err .qz__e{display:block}
.qz__ok.err{color:#B3241B}
.qz__ok.err input{outline:2px solid #B3241B;outline-offset:2px}
.qz__est{display:grid;gap:6px;margin-top:20px;padding:18px 20px;background:var(--white);
  border:1px solid var(--acc);border-radius:6px}
.qz__est-k{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.qz__est-v{font-family:var(--serif);font-weight:400;font-size:clamp(24px,3.4vw,34px);line-height:1.1}
.qz__est p{font-size:14.5px;line-height:1.5;color:var(--ink-2)}

/* экран «заявка принята» — вместо строки над пустой формой */
.done{display:grid;gap:14px;align-content:start}
.done:focus{outline:none}
.done h2,.done h3{font-family:var(--display);font-weight:800;font-size:clamp(24px,3vw,36px);line-height:1.1;letter-spacing:-.02em}
.done__t{font-size:16.5px;color:var(--ink-2)}
.done__l{display:grid;gap:8px;padding-top:14px;border-top:1px solid var(--line-2)}
.done__l li{position:relative;padding-left:16px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.done__l li::before{content:'';position:absolute;left:0;top:9px;width:6px;height:6px;background:var(--acc);border-radius:1px}
.done__l a{border-bottom:1px solid var(--line);font-weight:600;white-space:nowrap}
.done__a{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;margin-top:6px}
.done__a button.lnk{border:0;background-color:transparent;cursor:pointer;padding-left:0;padding-right:0}
.done--card{padding:clamp(22px,2.6vw,34px);background:var(--white);border:1px solid var(--line-2);border-radius:6px}

/* юридические страницы: ссылка в тексте отличается не только цветом */
.law__body p a,.law__body li a,.law__body td a{text-decoration:underline;text-underline-offset:3px}

/* --- телефон: цели нажатия и длина главной --- */
.ct__v a{display:inline-block;padding:10px 0;margin:-10px 0}
@media(max-width:719px){
  .ftr__l{gap:0}
  .ftr__l a,.ftr__l span{display:flex;align-items:center;min-height:44px}
  /* на телефоне главная была 15 экранов: трёх проектов достаточно, остальные — по кнопке */
  .cases--home .case:nth-child(n+4){display:none}
}