/* =============================================================
   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:#78766F;
  --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:11.5px;
  font-weight:500;letter-spacing:.18em;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}
.top.stuck{background:rgba(239,237,232,.86);backdrop-filter:blur(14px) saturate(1.4);border-bottom-color:var(--line)}
/* 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:11.5px;letter-spacing:.14em;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{white-space:nowrap}
.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{font-weight:600}
.price__split span{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}}

/* ---------- появление ---------- */
[data-r]{opacity:0;transform:translateY(22px);
  transition:opacity .85s var(--ease),transform .85s var(--ease);transition-delay:var(--d,0ms)}
[data-r].in{opacity:1;transform:none}
[data-mask]{display:block;overflow:hidden}
[data-mask]>span{display:block;transform:translateY(105%);transition:transform 1s var(--ease);
  transition-delay:var(--d,0ms)}
[data-mask].in>span{transform:none}
@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:11.5px;letter-spacing:.1em;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:11px;letter-spacing:.14em;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:12.5px;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:11.5px;letter-spacing:.12em;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(--acc);color:#fff;padding:clamp(52px,7vw,110px) 0}
.band-acc .lbl{color:rgba(255,255,255,.62)}
.band-acc .lbl i{color:#fff}
.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(255,255,255,.11);border:1px solid rgba(255,255,255,.14);
  border-radius:14px;font-size:16px;line-height:1.35;
  transition:background .22s var(--ease),border-color .22s var(--ease)}
.pill:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.3)}
.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(255,255,255,.1);border-color:rgba(255,255,255,.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}
}