/* Портфолио v3. Один шрифт (Onest), одна земля, одни чернила, акцент = цвет текущей работы в витрине. */
:root{
  --ground:#f1f0ec; --ground-2:#e4e2db; --ground-3:#d6d3c9;
  --ink:#121211; --ink-2:#4a4842;
  --dark:#121211; --dark-ink:#f1f0ec; --dark-muted:#b9b6ab;
  --spruce:#10241c; --spruce-ink:#f1ead6; --gold:#d4a64a;
  --ochre:#c79a3e;
  /* витрина: меняются скриптом под каждую работу */
  --bg:#dce5d5; --word:#2b3226; --fg:#1c2118;
  --m:clamp(16px,2.4vw,32px);
  --gap:clamp(120px,14vw,220px);
  --s-small:clamp(.875rem,.85rem + .1vw,.9375rem);
  --s-body:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --s-lead:clamp(1.25rem,1.1rem + .6vw,1.625rem);
  --s-head:clamp(2.75rem,1.6rem + 4.6vw,6.5rem);
  --ease:cubic-bezier(.2,.7,.2,1);
  --font:"Onest",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 var(--s-body)/1.55 var(--font);overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-weight:800;letter-spacing:-.04em;line-height:.95;margin:0}
p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:3px solid currentColor;outline-offset:3px}
::selection{background:var(--ink);color:var(--ground)}
.skip{position:absolute;left:-999px}
.skip:focus{left:var(--m);top:8px;z-index:50;background:var(--ink);color:var(--ground);padding:8px 14px}
[data-promo][hidden]{display:none!important}

/* кнопки: плоские, квадратные */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border:0;border-radius:0;cursor:pointer;
  font:500 var(--s-small)/1 var(--font);text-decoration:none;background:var(--ink);color:var(--ground);
  transition:transform .25s var(--ease),background-color .25s,color .25s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn--hero{background:var(--word);color:var(--bg);transition:transform .25s var(--ease),background-color .6s,color .6s}
.btn--light{background:var(--spruce-ink);color:var(--spruce)}

/* плашка акции */
.promo{display:block;background:var(--ochre);color:#1c1b17;text-align:center;padding:10px var(--m);font-size:var(--s-small);line-height:1.35;text-decoration:none}
.promo:hover{text-decoration:underline;text-underline-offset:4px}
.promo b{font-weight:500}

/* ── Витрина ── */
.hero{position:relative;background:var(--bg);color:var(--fg);min-height:max(100svh,720px);overflow:hidden;display:flex;flex-direction:column;
  transition:background-color .7s var(--ease),color .7s var(--ease)}
.nav{position:relative;z-index:6;display:flex;align-items:center;gap:28px;padding:18px var(--m)}
.nav__name{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:1.375rem;letter-spacing:-.03em;text-decoration:none;margin-right:auto}
.nav__mark{flex:none;display:block}
.nav__role{font-weight:400;font-size:var(--s-small);letter-spacing:0;opacity:.75;margin-left:10px}
.nav__links{display:flex;gap:24px}
.nav__links a{text-decoration:none;font-size:var(--s-small)}
.nav__links a:hover{text-decoration:underline;text-underline-offset:4px}
.nav .btn{min-height:44px;padding:0 18px}

.hero__head{position:relative;z-index:5;padding:clamp(8px,2vw,24px) var(--m) 0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px var(--m);align-items:end}
.hero__head h1{grid-column:1/7;font-size:clamp(2.5rem,1.2rem + 4vw,5.5rem)}
.hero__side{grid-column:8/13;display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px}
.hero__lead{max-width:44ch}
.hero__offer{flex-basis:100%;max-width:44ch}
.hero__offer b{font-weight:800}
/* якоря для телефона и планшета: на узком экране меню скрыто */
.jump{display:none}

.show{position:relative;flex:1;min-height:460px;z-index:1;touch-action:pan-y;outline-offset:-6px}
.show__word{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;margin:0;white-space:nowrap;
  font-weight:800;letter-spacing:-.05em;line-height:.8;color:var(--word);font-size:20vw;transition:color .7s var(--ease);user-select:none}
.show__word span{display:inline-block;will-change:transform}
.show__phone{position:absolute;left:50%;top:50%;z-index:3;height:86%;aspect-ratio:1/2;transform:translate(-50%,-50%);
  background:#0d0d0c;border:7px solid #0d0d0c;border-radius:34px;overflow:hidden}
.show__phone img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:27px}
.show__floats{position:absolute;inset:0;z-index:4;pointer-events:none}
.float{position:absolute;left:var(--x);top:var(--y);width:var(--w);z-index:var(--z,4)}
.float__p{will-change:transform}
.float img{width:100%;aspect-ratio:4/5;object-fit:cover;animation:bob var(--dur,7s) ease-in-out infinite alternate;animation-delay:var(--del,0s)}
@keyframes bob{from{transform:translateY(-8px) rotate(var(--r,0deg))}to{transform:translateY(8px) rotate(calc(var(--r,0deg) * -.4))}}

.hero__foot{position:absolute;left:0;right:0;bottom:0;z-index:6;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:24px var(--m) 28px}
.show__cap{display:grid;gap:4px;max-width:34ch}
.show__cap b{font-weight:800;font-size:var(--s-lead);letter-spacing:-.02em;line-height:1.1}
.show__cap span{font-size:var(--s-small);opacity:.8}
.show__cap a{font-size:var(--s-small);font-weight:500;margin-top:6px;width:max-content;text-underline-offset:4px}
.show__ctl{display:flex;align-items:center;gap:8px}
.ctl{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 16px;border:0;border-radius:0;cursor:pointer;
  font:500 var(--s-small)/1 var(--font);background:color-mix(in srgb,var(--fg) 10%,transparent);color:inherit;transition:background-color .25s,transform .25s var(--ease)}
.ctl:hover{background:color-mix(in srgb,var(--fg) 18%,transparent)}
.ctl:active{transform:scale(.97)}
.ctl span[aria-hidden]{font-size:1.5rem;line-height:1}
.ctl__name{max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Отзывы ── */
.reviews{margin-top:var(--gap);background:var(--dark);color:var(--dark-ink);padding:clamp(64px,8vw,128px) var(--m)}
.reviews__head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px var(--m);align-items:end}
.reviews__head h2{grid-column:1/7;font-size:var(--s-head)}
.reviews__head p{grid-column:8/13;max-width:40ch;color:var(--dark-muted)}
.reviews__list{margin-top:clamp(40px,5vw,72px);display:grid;grid-template-columns:1fr 1fr;gap:56px clamp(32px,5vw,96px)}
.rev{margin:0;display:flex;flex-direction:column}
.rev blockquote{margin:0}
.rev__lead{font-weight:800;font-size:clamp(1.5rem,1.15rem + 1.1vw,2.25rem);line-height:1.15;letter-spacing:-.02em;max-width:24ch}
.rev__full{margin-top:20px}
.rev__full summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--ochre);font-weight:500}
.rev__full summary::-webkit-details-marker{display:none}
.rev__full summary::after{content:"+";font-size:1.4rem;line-height:1;transition:transform .3s var(--ease)}
.rev__full[open] summary::after{transform:rotate(45deg)}
.rev__full p{margin-top:12px;max-width:60ch;color:var(--dark-ink)}
.rev figcaption{margin-top:auto;padding-top:24px;font-size:var(--s-small);color:var(--dark-muted)}
.rev figcaption b{display:block;margin-bottom:2px;color:var(--dark-ink);font-size:var(--s-body);font-weight:500}
.rev figcaption a{color:var(--dark-ink);text-underline-offset:4px}

/* ── Зачем сайт, если есть 2ГИС и ВК ── */
.why{margin-top:var(--gap);background:var(--ground-2);padding:clamp(64px,8vw,120px) var(--m)}
.why__head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px var(--m);align-items:end}
.why__head h2{grid-column:1/8;font-size:clamp(2.5rem,1.4rem + 3.4vw,4.75rem)}
.why__head p{grid-column:9/13;max-width:40ch}
.why__list{margin-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:40px clamp(32px,5vw,80px)}
.why__list li{max-width:52ch}
.why__list b{display:block;font-weight:800;font-size:var(--s-lead);letter-spacing:-.02em;line-height:1.15;margin-bottom:10px}

/* ── Сцена «Из чего состоит сайт» ── */
.layers{margin-top:var(--gap);padding:0 var(--m)}
.layers__head{max-width:640px}
.layers__head h2{font-size:var(--s-head)}
.layers__head p{margin-top:28px;max-width:44ch}
.layers__words,.layers__frame,.layers__cap{display:none}
.layers__stage{margin-top:56px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--m)}
.layer img{width:100%;aspect-ratio:390/640;object-fit:cover;object-position:top;background:var(--ground-2)}
.layer figcaption{margin-top:16px;font-size:var(--s-small);color:var(--ink-2)}
.layer figcaption b{display:block;font-size:var(--s-body);color:var(--ink);font-weight:500;margin-bottom:4px}
.layers__end{margin-top:48px;display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px}
.layers__end p{max-width:40ch;font-size:var(--s-lead);line-height:1.3}

/* живой режим: закреплённая сцена (класс ставит скрипт) */
.layers.is-live{padding:0;margin-top:calc(var(--gap) * .6)}
.is-live .layers__pin{position:relative;height:100svh;min-height:640px;overflow:hidden}
.is-live .layers__head{position:absolute;left:var(--m);top:clamp(24px,6svh,72px);z-index:5;max-width:min(440px,30vw)}
.is-live .layers__head h2{font-size:clamp(2.5rem,1.4rem + 3.4vw,4.75rem)}
.is-live .layers__words{display:block;position:absolute;inset:0;z-index:1;pointer-events:none}
.is-live .layers__words span{position:absolute;left:0;top:46%;width:max-content;transform:translateY(-50%);white-space:nowrap;font-weight:800;letter-spacing:-.06em;
  line-height:.8;font-size:clamp(5rem,21vw,22rem);color:var(--ink);will-change:transform}
.is-live .layers__stage{display:block;margin:0;position:absolute;left:50%;top:46%;width:var(--lw);aspect-ratio:390/640;transform:translate(-50%,-50%);z-index:3}
.is-live .layers__frame{display:block;position:absolute;inset:-9px;background:#0d0d0c;border-radius:36px}
.is-live .layer{position:absolute;inset:0;will-change:transform}
.is-live .layer img{height:100%;border-radius:26px}
.is-live .layer figcaption{display:none}
.is-live .layers__cap{display:block;position:absolute;left:var(--m);right:var(--m);bottom:clamp(20px,4svh,48px);z-index:5;max-width:560px;margin:0 auto;text-align:center}
.layers__cap b{display:block;font-size:var(--s-lead);font-weight:800;letter-spacing:-.02em;line-height:1.1;margin-bottom:8px}
.is-live .layers__end{position:absolute;left:var(--m);right:var(--m);bottom:clamp(20px,4svh,48px);z-index:5;margin:0 auto;max-width:560px;flex-direction:column;align-items:center;text-align:center;
  opacity:0;visibility:hidden}
.is-live .layers__end p{font-size:var(--s-body);line-height:1.5}

/* ── Работы ── */
.works{margin-top:var(--gap);padding:0 var(--m);position:relative}
.works__head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px var(--m);align-items:end}
.works__head h2{grid-column:1/6;font-size:var(--s-head)}
.works__head p{grid-column:7/13;max-width:44ch}
.chips{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chip{min-height:44px;padding:0 18px;border:0;border-radius:0;cursor:pointer;font:500 var(--s-small)/1 var(--font);background:var(--ground-2);color:var(--ink);
  transition:background-color .2s,color .2s,transform .2s var(--ease)}
.chip:hover{background:var(--ground-3)}
.chip:active{transform:scale(.97)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--ground)}
.chip small{font-size:inherit;opacity:.6;margin-left:6px}
.list{margin-top:48px;display:grid}
.list.is-collapsed .work.is-more{display:none}
.more{margin-top:16px;width:100%;min-height:52px;border:0;border-radius:0;background:var(--ground-2);color:var(--ink);
  font:500 var(--s-body)/1 var(--font);cursor:pointer;transition:background-color .2s}
.more:hover{background:var(--ground-3)}
.more[hidden]{display:none}
/* закреплённая кнопка на телефоне и планшете: появляется после первого экрана, прячется у контактов */
.dock{display:none}
.work[hidden]{display:none}
.work a{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr) auto;align-items:baseline;gap:8px 24px;padding:22px 16px;margin:0 -16px;text-decoration:none;
  transition:background-color .25s}
.work a:hover,.work a:focus-visible{background:var(--ground-2)}
.work__name{font-weight:800;letter-spacing:-.04em;line-height:1;font-size:clamp(1.75rem,1.1rem + 2.4vw,3.5rem);transition:transform .35s var(--ease)}
.work a:hover .work__name{transform:translateX(12px)}
.work__meta{font-size:var(--s-small);color:var(--ink-2)}
.work__go{font-size:var(--s-small);font-weight:500;white-space:nowrap}
.work__live{display:inline-block;margin-left:10px;padding:4px 10px;background:var(--ink);color:var(--ground);font-size:.8125rem;font-weight:500;letter-spacing:0;vertical-align:middle}
.work__thumb{display:none}
.peek{position:fixed;left:0;top:0;width:min(420px,30vw);z-index:20;pointer-events:none;opacity:0;visibility:hidden}

/* ── Как я работаю: карточки наезжают друг на друга ── */
.how{margin-top:var(--gap);padding:0 var(--m)}
.how__head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px var(--m);align-items:end;margin-bottom:56px}
.how__head h2{grid-column:1/7;font-size:var(--s-head)}
.how__head p{grid-column:8/13;max-width:42ch}
.steps{display:grid;gap:24px}
.step{position:sticky;top:calc(24px + var(--i,0) * 22px);min-height:min(78svh,700px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  background:var(--t);color:var(--tc,var(--ink));transform-origin:50% 0}
.step:nth-child(1){--t:var(--ground-2);--i:0}
.step:nth-child(2){--t:var(--ground-3);--i:1}
.step:nth-child(3){--t:#2b2a26;--tc:var(--dark-ink);--i:2}
.step:nth-child(4){--t:var(--ink);--tc:var(--dark-ink);--i:3}
.step__text{padding:clamp(28px,4vw,56px);display:flex;flex-direction:column}
.step__text h3{font-size:clamp(3rem,1.6rem + 5vw,7rem)}
.step__lead{margin-top:auto;font-size:var(--s-lead);font-weight:500;line-height:1.25;max-width:20ch}
.step__text p:last-child{margin-top:16px;max-width:40ch;opacity:.85}
.step__pic{display:grid;place-items:center;padding:clamp(24px,4vw,56px);overflow:hidden}
.step__pic img{width:100%;max-width:620px}
.step__pic--phone img{max-width:240px;border:7px solid #0d0d0c;border-radius:30px}
.msg{width:100%;max-width:480px;background:var(--ground);color:var(--ink);padding:28px 30px;line-height:1.55}
.msg p+p{margin-top:12px}
.msg__who{font-weight:500}
.msg__who span{font-weight:400;color:var(--ink-2)}

/* ── Новогодняя акция ── */
.ny{margin-top:var(--gap);background:var(--spruce);color:var(--spruce-ink);padding:clamp(64px,8vw,128px) var(--m);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px var(--m);align-items:center}
.ny__text{grid-column:1/6}
.ny__text h2{font-size:clamp(2.5rem,1.4rem + 3.4vw,4.75rem)}
.ny__text p{margin-top:24px;max-width:40ch}
.ny__list{margin-top:24px;display:grid;gap:8px}
.ny__list li{padding-left:22px;position:relative}
.ny__list li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:10px;border-radius:50%;background:var(--gold)}
.ny__note{font-weight:500;color:var(--gold)}
.ny__text .btn{margin-top:32px}
.ny__pic{grid-column:7/13;display:block;overflow:hidden}
.ny__pic img{width:100%;transition:transform .6s var(--ease)}
.ny__pic:hover img{transform:scale(1.03)}

/* ── Стоимость ── */
.price{background:var(--dark);color:var(--dark-ink);padding:clamp(72px,9vw,144px) var(--m)}
.price h2{font-size:var(--s-head)}
.price__big{margin-top:24px;font-weight:800;letter-spacing:-.06em;line-height:.85;font-size:clamp(4rem,10vw,11rem);white-space:nowrap}
.price__cols{margin-top:clamp(48px,6vw,96px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px clamp(32px,6vw,96px)}
.price__intro{color:var(--dark-muted);max-width:44ch;margin-bottom:24px}
.row{display:grid;grid-template-columns:1fr auto;gap:4px 24px;padding:18px 0}
.row+.row{margin-top:4px}
.row>span{font-weight:500;font-size:var(--s-lead);letter-spacing:-.01em;line-height:1.2}
.row>span:nth-child(2){color:var(--ochre)}
.row p{grid-column:1/-1;color:var(--dark-muted);font-size:var(--s-small)}
.price h3{font-size:var(--s-lead);letter-spacing:-.02em;line-height:1.1}
.incl{margin-top:20px;display:grid;gap:14px}
.incl li{padding-left:22px;position:relative}
.incl li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:10px;background:var(--ochre)}

/* ── Частые вопросы ── */
.faq{padding:var(--gap) var(--m) 0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px var(--m);align-items:start}
.faq__head{grid-column:1/5;position:sticky;top:32px}
.faq__head h2{font-size:var(--s-head)}
.faq__head p{margin-top:24px;max-width:32ch}
.faq__list{grid-column:6/13;display:grid;gap:8px}
.qa{background:var(--ground-2);transition:background-color .25s}
.qa[open]{background:var(--ground-3)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 24px;
  font-weight:500;font-size:var(--s-lead);letter-spacing:-.01em;line-height:1.25}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";flex:none;font-weight:400;font-size:1.75rem;line-height:1;transition:transform .3s var(--ease)}
.qa[open] summary::after{transform:rotate(45deg)}
.qa summary:hover{background:var(--ground-3)}
.qa p{padding:0 24px 24px;max-width:60ch}

/* ── Контакты ── */
.contact{padding:var(--gap) var(--m) 0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:48px var(--m);align-items:center}
.contact__text{grid-column:1/8}
.contact h2{font-size:clamp(3.5rem,1.6rem + 7vw,9.5rem)}
.contact__lead{margin-top:28px;font-size:var(--s-lead);line-height:1.3;max-width:30ch}
.contact__btns{margin-top:36px;display:flex;flex-wrap:wrap;gap:10px}
.contact__btns .btn{min-height:60px;padding:0 30px;font-size:var(--s-body)}
.contact__btns .btn[aria-disabled="true"]{opacity:.4;pointer-events:none}
.contact__next{margin-top:24px;max-width:44ch;color:var(--ink-2)}
.contact__pic{grid-column:9/12}
.contact__pic img{border:8px solid #0d0d0c;border-radius:34px}

.foot{margin-top:var(--gap);background:var(--ground-2);padding:40px var(--m) 28px;overflow:hidden}
.foot__top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 32px;font-size:var(--s-small)}
.foot nav,.foot__contacts{display:flex;flex-wrap:wrap;gap:12px 24px}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline;text-underline-offset:4px}
.foot__name{font-weight:800;letter-spacing:-.07em;line-height:.8;font-size:clamp(5rem,16vw,18rem);margin:40px 0 24px -.04em}
.foot__legal{font-size:var(--s-small);color:var(--ink-2);max-width:70ch}

/* ── Планшет ── */
@media (max-width:1000px){
  .nav__links{display:none}
  .hero__head h1{grid-column:1/-1}
  .hero__side{grid-column:1/-1}
  .works__head h2,.works__head p,.how__head h2,.how__head p{grid-column:1/-1}
  .layers__stage{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ny__text,.ny__pic{grid-column:1/-1}
  .price__cols{grid-template-columns:1fr}
  .contact__text{grid-column:1/-1}
  .contact__pic{grid-column:1/7}
  .faq__head,.faq__list{grid-column:1/-1}
  .faq__head{position:static}
  .why__head h2,.why__head p{grid-column:1/-1}
  .reviews__head h2,.reviews__head p{grid-column:1/-1}
  .reviews__list{grid-template-columns:1fr;gap:48px}
  .jump{position:relative;z-index:6;display:flex;gap:20px;overflow-x:auto;scrollbar-width:none;padding:0 var(--m) 6px;font-size:var(--s-small)}
  .jump a{white-space:nowrap;text-decoration:underline;text-underline-offset:4px}
  .js .dock{display:flex;position:fixed;left:var(--m);right:var(--m);bottom:calc(12px + env(safe-area-inset-bottom));z-index:30;
    min-height:54px;align-items:center;justify-content:center;background:var(--ochre);color:var(--ink);
    font:500 var(--s-body)/1 var(--font);text-decoration:none;transform:translateY(160%);transition:transform .35s var(--ease)}
  .js .dock.is-on{transform:none}
}

/* ── Телефон: витрина в потоке, своя композиция ── */
@media (max-width:700px){
  .nav__role{display:none}
  .hero{min-height:0}
  .hero__head{padding-top:8px;gap:20px}
  .hero__side{flex-direction:column;align-items:flex-start}
  .show{flex:none;min-height:0;height:clamp(440px,128vw,560px);margin-top:8px}
  .show__phone{height:84%;border-width:5px;border-radius:24px}
  .show__phone img{border-radius:19px}
  .float[data-k="3"],.float[data-k="4"]{display:none}
  .hero__foot{position:relative;flex-direction:column;align-items:stretch;padding-top:8px}
  .show__ctl{justify-content:space-between}
  .ctl__name{display:none}
  .ctl{flex:1;justify-content:center}

  .layers__stage{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;margin-right:calc(var(--m) * -1);padding-right:var(--m)}
  .layer{scroll-snap-align:start}
  .is-live .layers__head{max-width:none;right:var(--m)}
  .is-live .layers__head p{display:none}
  .is-live .layers__frame{inset:-6px;border-radius:24px}
  .is-live .layer img{border-radius:18px}

  .work a{grid-template-columns:1fr;padding:16px;gap:6px}
  .work__thumb{display:block;width:100%;aspect-ratio:16/8;object-fit:cover;object-position:top;margin-bottom:10px}
  .work a:hover .work__name{transform:none}
  .why__list{grid-template-columns:1fr;gap:28px;margin-top:36px}
  /* на телефоне в «Как я работаю» оставляем картинку только у первого шага: так страница короче */
  .step:not(:first-child) .step__pic{display:none}
  .step:not(:first-child) .step__text{padding-bottom:32px}
  .qa summary{padding:18px 16px;font-size:var(--s-body)}
  .qa p{padding:0 16px 18px}
  .peek{display:none}

  .step{grid-template-columns:1fr;min-height:0;top:calc(12px + var(--i,0) * 12px)}
  .step__lead{margin-top:32px}
  .step__pic{padding-top:0}
  .step__pic--phone img{max-width:180px}
  .contact__pic{grid-column:1/-1;max-width:220px}
  .row>span{font-size:var(--s-body)}
}

@media (prefers-reduced-motion:reduce){
  .float img{animation:none}
  *,*::before,*::after{transition-duration:.01ms!important}
  .step{position:relative;top:auto}
}
.nolist{margin-top:32px;display:grid;gap:12px}
.nolist a{font-weight:800;font-size:var(--s-lead);letter-spacing:-.02em}