/* Публичный сайт VLONE Designer. Шрифт Onest (SIL OFL), палитра «Нейтральный», светлая и тёмная темы. */
@font-face{font-family:Onest;font-weight:400;font-style:normal;font-display:block;src:url(/static/fonts/Onest-Regular.woff2) format("woff2")}
@font-face{font-family:Onest;font-weight:500;font-style:normal;font-display:block;src:url(/static/fonts/Onest-Medium.woff2) format("woff2")}
@font-face{font-family:Onest;font-weight:600;font-style:normal;font-display:block;src:url(/static/fonts/Onest-SemiBold.woff2) format("woff2")}

:root{--bg:#F2F2F2;--ink:#000;--mut:#6B6B6B;--tog:#E2E2E2;--p1:#E6E6E6;--p2:#DADADA;--p3:#ECECEC;--p4:#CFCFCF;
--ease:cubic-bezier(.4,0,.2,1);--pad:56px;--head:88px;--g:88px;--c:58px;color-scheme:light}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html{background:var(--bg);transition:background .4s var(--ease)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Onest,system-ui,sans-serif;font-size:15px;line-height:1.5;
transition:background .4s var(--ease),color .4s var(--ease);-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:none;transition:opacity .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
a:hover{opacity:.55}
button{font:inherit;color:inherit}
img{display:block;max-width:100%}
h1,h2,h3,p{margin:0}
.wrap{padding:0 var(--pad) 72px;max-width:1920px;margin:0 auto}
.muted,.mut{color:var(--mut)}
.mut{font-style:normal}
.ttl{font-weight:500}
.ico{display:inline-block;vertical-align:-1px;flex:none}
:focus-visible{outline:1px solid var(--ink);outline-offset:3px}

/* шапка */
.head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:var(--head);font-size:15px;position:relative;z-index:40}
.logo{font-weight:500;font-size:18px;letter-spacing:.02em}
.nav{display:flex;gap:44px;justify-self:center}
.nl{padding-bottom:4px;background:linear-gradient(currentColor,currentColor) no-repeat right bottom/0 1px;transition:background-size .35s var(--ease),opacity .3s}
.nl:hover{opacity:1;background-position:left bottom;background-size:100% 1px}
.nl.cur{background-size:100% 1px;background-position:left bottom}
.tools{display:flex;align-items:center;gap:32px;justify-self:end}
.lg{display:inline-flex;gap:12px}
.lg a{color:var(--mut)}
.lg .on{color:var(--ink)}
.write{border-bottom:1px solid var(--ink);padding-bottom:2px}
.write .ico{margin-left:7px}
.burger{display:none;width:32px;height:32px;border:0;background:none;padding:0;cursor:pointer;position:relative}
.burger i{position:absolute;left:6px;right:6px;height:1.4px;background:var(--ink);transition:transform .35s var(--ease),top .35s var(--ease)}
.burger i:nth-child(1){top:12px}.burger i:nth-child(2){top:19px}
.menu-open .burger i:nth-child(1){top:15.5px;transform:rotate(45deg)}
.menu-open .burger i:nth-child(2){top:15.5px;transform:rotate(-45deg)}
.mmenu{display:none}

/* стрелки и кнопки */
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 18px;border-radius:4px;border:0;cursor:pointer;font-size:15px;
background:var(--ink);color:var(--bg);transition:background .3s var(--ease),color .3s var(--ease)}
.btn:hover{opacity:1;background:var(--mut)}
.btn svg{transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn.soft{background:var(--tog);color:var(--ink)}
.btn.soft:hover{background:var(--ink);color:var(--bg)}
.chip{font-size:15px;padding:11px 16px;border-radius:4px;border:0;background:var(--bg);color:var(--ink);cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease)}
.chip.on{background:var(--ink);color:var(--bg)}
.tag{display:inline-block;font-size:14px;font-weight:500;letter-spacing:.06em;padding:7px 12px;border-radius:4px;background:var(--tog)}

/* главная */
.hero{display:grid;grid-template-columns:repeat(4,1fr);column-gap:var(--g);padding:56px 0 72px;align-items:start}  /* та же 4-колоночная сетка и промежуток, что у плиток ниже */
.hero h1{grid-column:1/4;font-size:80px;line-height:1.03;letter-spacing:-.035em;font-weight:500}
.hero aside{grid-column:4;margin-top:6px;line-height:1.5}  /* левый край совпадает с 4-й колонкой плиток, верх с верхом заглавных букв заголовка */
.hero .where{margin-top:18px;padding-top:18px;border-top:1px solid var(--p2)}
/* геолокация отдельным блоком под линией: герб слева по центру двух строк, текст ровным столбцом */
.geo{display:flex;align-items:center;gap:14px;line-height:1.45}
.geo .gerb{flex:none;width:30px;height:30px}
.geo-txt{display:flex;flex-direction:column}
.hero .lbl{display:none}
.who-link{display:inline-flex;align-items:center;gap:8px}
.who-link .ico{vertical-align:0;transition:transform .3s var(--ease)}
.who-link:hover .ico{transform:translate(2px,-2px)}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:32px;position:relative}
.types{display:flex;gap:28px;flex-wrap:wrap}
.f{background:none;border:0;padding:4px 0;cursor:pointer;color:var(--mut);transition:color .3s var(--ease)}
.f.on{color:var(--ink)}
.right{display:flex;align-items:center;gap:28px;position:relative}
.dd{position:relative}
.ddb{background:none;border:0;padding:4px 0;cursor:pointer;display:flex;align-items:center;gap:8px}
.ddb svg{transition:transform .3s var(--ease)}
.dd.open .ddb svg{transform:rotate(180deg)}
.ddp{position:absolute;right:0;top:100%;margin-top:10px;z-index:30;min-width:270px;background:var(--p1);border-radius:4px;padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
.dd.open .ddp{opacity:1;visibility:visible;transform:none}
.opt{display:block;width:100%;text-align:left;background:none;border:0;color:var(--mut);padding:10px 12px;border-radius:4px;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease)}
.opt:hover{background:var(--bg);color:var(--ink)}
.opt.on{color:var(--ink)}
.count{color:var(--mut);white-space:nowrap}

/* сетка кейсов */
.grid{display:grid;grid-template-columns:repeat(4,1fr);column-gap:var(--g);row-gap:calc(var(--g)*1.25 - var(--c));grid-auto-flow:row dense;min-height:560px;align-content:start}
.card{display:block;min-width:0}
.card:hover{opacity:1}
.card[hidden]{display:none}
.tile{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:4px;background:var(--p1)}
.card:nth-child(4n+2) .tile{background:var(--p2)}.card:nth-child(4n+3) .tile{background:var(--p3)}.card:nth-child(4n) .tile{background:var(--p4)}
.tile .sl{position:absolute;inset:0}
.dots{position:absolute;left:14px;right:14px;bottom:16px;z-index:3;display:flex;align-items:center;gap:6px;pointer-events:none}
.dots i{display:block;flex:1 1 0;min-width:2px;height:2px;border-radius:1px;background:rgba(255,255,255,.5);box-shadow:0 1px 3px rgba(0,0,0,.14);transition:background .3s var(--ease)}
.dots i.on{background:#fff}
.tile .s{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;z-index:1;transition:opacity 0s linear .45s}
.tile .s.on{opacity:1;z-index:2;transition:opacity .45s var(--ease)}
.tile .dslide{display:none}
.tile .num{position:absolute;left:18px;bottom:10px;font-weight:500;font-size:88px;line-height:1;letter-spacing:-.05em;opacity:.3}
.cap{height:var(--c);padding-top:12px}
.cap .t{font-weight:500;font-size:19px;line-height:1.25;letter-spacing:-.01em}
.cap .sub{font-size:13px;line-height:1.4;color:var(--mut);margin-top:4px}
.grid:not(.filtered) .card.big{grid-column:span 2;grid-row:span 2}
.grid:not(.filtered) .card.big.right{grid-column:3/span 2}
.grid:not(.filtered) .card.big .cap{height:var(--c)}
.empty{padding:16px 0 0;font-size:22px;letter-spacing:-.02em}
.rs{font-family:inherit;font-size:inherit;background:none;border:0;padding:0 0 2px;color:var(--ink);border-bottom:1px solid var(--ink);cursor:pointer}

/* все проекты */
.pagehead{padding:56px 0 40px}
.pagehead h1{font-size:40px;line-height:1.04;letter-spacing:-.04em;font-weight:500}
.pagehead p{margin-top:12px;font-size:20px;color:var(--mut);letter-spacing:-.01em}
.filters{background:var(--p1);border-radius:4px;padding:24px 28px;display:grid;gap:16px;margin-bottom:24px}
.frow{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.frow .lab{width:140px;color:var(--mut);font-size:14px}
.fchips{display:flex;gap:8px;flex-wrap:wrap}
.status{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px;min-height:24px;color:var(--mut)}
.status .rst{visibility:hidden}
.status .rst.show{visibility:visible}
.fbtn{display:none}

/* кейс */
.case{display:grid;grid-template-columns:640px 1fr;column-gap:64px;padding-top:24px;align-items:start}
.slides{display:grid;gap:12px;grid-column:1;grid-row:1}
.slides img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:4px;background:var(--p1)}
.info{position:sticky;top:24px;max-width:520px;padding-top:8px;grid-column:2;grid-row:1}
.info .back{display:inline-flex;align-items:center;gap:10px;margin-bottom:40px}
.info h1{font-size:40px;line-height:1.04;letter-spacing:-.04em;font-weight:500}
.info .sub{margin-top:10px;color:var(--mut)}
.facts{margin:36px 0 0;display:grid;gap:10px;font-size:15px}
.facts div{display:grid;grid-template-columns:130px 1fr;gap:16px}
.facts dt{color:var(--mut)}
.facts dd{margin:0}
.about-l{margin-top:36px;color:var(--mut);font-size:13px}
.desc{margin-top:8px;font-size:16px;line-height:1.55}
.nextfix{position:fixed;right:var(--pad);bottom:32px;z-index:30}
.nextbig{display:block;margin-top:160px;padding-top:40px;font-size:96px;line-height:1.02;letter-spacing:-.035em;font-weight:500}
.nextbig .ico{margin-left:24px;vertical-align:-2px}
.nextbig .lab{display:block;font-size:15px;letter-spacing:0;font-weight:400;color:var(--mut);margin-bottom:16px}
.mnext{display:none}

/* услуги */
.svc{display:grid;grid-template-columns:1fr 1fr;column-gap:0;align-items:start;padding-top:8px}
.svc>li{display:contents}
.svc,.stops{list-style:none;margin:0;padding-left:0}
.svc-row{grid-column:1;display:flex;justify-content:space-between;align-items:baseline;gap:24px;width:100%;text-align:left;background:none;border:0;padding:14px 56px 14px 0;cursor:pointer;color:var(--mut);font-size:36px;line-height:1.15;letter-spacing:-.03em;font-weight:500;transition:color .3s var(--ease)}
.svc-row .pr{font-size:20px;text-align:right;letter-spacing:-.01em;white-space:nowrap}
.svc-row .pr small{display:block;font-size:13px;color:var(--mut);font-weight:400}
.svc-row{text-decoration:none}
.svc-row.on,.svc-row:hover{color:var(--ink);opacity:1}
.svc-d{grid-column:2;grid-row:1/span 12;display:none;padding:12px 0 12px 56px;border-left:1px solid var(--p2);align-self:stretch}
.svc-d.on{display:block}
.svc-d .lead{font-size:20px;line-height:1.4;font-weight:500;letter-spacing:-.01em}
.svc-d .inc{margin-top:36px;font-size:13px;color:var(--mut)}
.svc-d .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.svc-d .tags .tag{background:var(--tog)}
.svc-d .acts{margin-top:36px;display:flex;gap:12px;flex-wrap:wrap}

/* страница «Услуги»: колонки-карточки; описания пунктов раскрываются при наведении, на телефоне услуга раскрывается по нажатию */
.dcols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.dcard{display:flex;flex-direction:column;background:var(--p1);border-radius:4px;padding:28px 24px 24px;min-width:0}
.dcard h2{margin:0;font-size:28px;line-height:1.1;font-weight:500;letter-spacing:-.03em}
.dcard .ddesc{margin:12px 0 0;font-size:14px;line-height:1.5;color:var(--mut);padding-bottom:22px;border-bottom:1px solid var(--p2)}
.ditems{list-style:none;margin:0;padding:6px 0 24px}
.ditems li{display:grid;grid-template-columns:30px 1fr;gap:2px 12px;padding:14px 0 0}
.sico{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:4px;background:var(--p1);border:1px solid var(--p2);color:var(--ink)}
.ditems .sico{width:30px;height:30px;grid-row:span 2}
.ditems .sico svg{width:16px;height:16px}
.ditems h3{margin:0;font-size:16px;line-height:30px;font-weight:500;letter-spacing:-.01em}
.ditems p{margin:0;font-size:13px;line-height:1.5;color:var(--mut)}
.dname{margin:0}
.dname a{color:inherit;display:inline-block;transition:opacity .3s var(--ease)}
.dname a:hover{opacity:.6}
.dhd{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.dhprice{display:none;font-size:15px;white-space:nowrap}
.dchev{display:none}
.dmob{display:none}
@media (min-width:769px){.dbody,.dbi{display:contents}}
.dprice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;margin-top:auto;padding:13px 18px;border-radius:4px;background:var(--ink);color:var(--bg);text-decoration:none;transition:background .3s var(--ease),opacity .3s var(--ease)}
.dprice b{font-size:17px;font-weight:500;letter-spacing:-.01em}
.dprice small{font-size:12px;color:var(--bg);opacity:.62;font-weight:400}
.dprice:hover{opacity:.82}
.ditems.compact li{display:block;padding-top:10px;outline:0}
.drow{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:center;cursor:default}
.drow .sico{grid-row:auto}
.drow h3{line-height:30px}
.dmore{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .4s var(--ease),opacity .3s var(--ease)}
.dmore>div{overflow:hidden;min-height:0}
.dmore p{margin:0 0 4px 42px;padding-top:2px}
.ditems.compact li:hover .dmore{grid-template-rows:1fr;opacity:1}
@media (hover:none),(max-width:768px){.dmore{grid-template-rows:1fr;opacity:1}}  /* на телефоне наведения нет: описания видны сразу */
@media (prefers-reduced-motion:reduce){.dmore,.dbody{transition:none!important}}
.dcol{display:flex;flex-direction:column;gap:16px;min-width:0}
.feat{background:var(--ink);color:var(--bg)}  /* выделенная услуга: цвета темы наоборот */
.feat .ddesc,.feat .ditems p,.feat .dtag{color:var(--bg);opacity:.62}
.feat .ddesc{border-bottom-color:color-mix(in srgb,var(--bg) 18%,transparent)}
.feat .sico{background:transparent;border-color:color-mix(in srgb,var(--bg) 35%,transparent);color:var(--bg)}
.feat .dprice{background:var(--bg);color:var(--ink)}
.feat .dprice small{color:var(--ink)}
.dcol .dcard:first-child{flex:1}
.dtag{display:block;font-size:12px;color:var(--mut);letter-spacing:.02em;margin-bottom:8px}
.dbadge{display:none}
@media (min-width:769px){.dhd{justify-content:flex-start;align-items:center;gap:12px}.dtag{display:none}.dbadge{display:inline-block;align-self:center;flex:none;font-size:12px;line-height:1;padding:6px 10px;border-radius:4px;background:var(--bg);color:var(--ink)}}  /* компьютер: «Популярно» плашкой справа от названия, линия названий не сдвигается */
.dcols+.dwide{margin-top:16px}
.dwide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:8px 48px;align-items:start;margin-top:16px}
.dwide .dhd{grid-column:1;grid-row:1}
.dwide .ddesc{grid-column:1;grid-row:2;border-bottom:0;padding-bottom:20px}
.dwide .dprice{grid-column:1;grid-row:3;justify-self:start;margin-top:0;align-items:flex-start;min-width:200px}
.dwide .ditems{grid-column:2;grid-row:1/span 4;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 36px;padding:0}
.dwide .ditems li:nth-child(-n+2){padding-top:0}

/* обо мне */
.collage{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.bl{border-radius:4px;background:var(--p1);padding:32px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-width:0}
.portrait{grid-column:span 4;aspect-ratio:4/5;padding:0;overflow:hidden;background:var(--p2);align-items:center;justify-content:center;text-align:center}
.portrait img{width:100%;height:100%;object-fit:cover}
.portrait span{padding:24px;color:var(--mut)}
.statement{grid-column:span 8;background:var(--p3)}
.statement .big{font-size:52px;line-height:1.07;letter-spacing:-.04em;font-weight:500}
.statement p{max-width:560px;color:var(--mut);font-size:16px}
.years{grid-column:span 3}
.years .num{font-size:200px;line-height:.9;letter-spacing:-.06em;font-weight:500}
.practice{grid-column:span 5;background:var(--p2)}
.dark{grid-column:span 4;background:var(--ink);color:var(--bg)}
.dark .tag{background:rgba(128,128,128,.28);color:var(--bg)}
.client{grid-column:span 8;background:var(--p3)}
.client .lead{font-size:44px;line-height:1.06;letter-spacing:-.04em;font-weight:500}
.client p{max-width:620px;color:var(--mut);font-size:16px}
.contactbl{grid-column:span 4;background:var(--tog);font-size:28px;font-weight:500;letter-spacing:-.03em;justify-content:flex-end;transition:background .3s var(--ease),color .3s var(--ease)}
.contactbl:hover{opacity:1;background:var(--ink);color:var(--bg)}
.contactbl .ico{margin-left:14px;vertical-align:-1px}
.bl .lab{font-size:13px;color:var(--mut)}
.dark .lab{color:var(--bg);opacity:.6}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.bl .tags .tag{background:var(--bg)}
.bl.dark .tags .tag{background:rgba(128,128,128,.28)}
.dark .cp{font-size:28px;font-weight:500;letter-spacing:-.03em}
.practice p,.statement p{margin:0}

/* условия работы */
.stops{position:relative;display:grid;grid-template-columns:repeat(6,1fr);column-gap:16px;margin-top:24px;padding-top:0}
.stops>li{display:contents}
.stops::before{content:"";position:absolute;left:0;right:12px;top:10px;height:1.3px;background:linear-gradient(var(--ink),var(--ink)) 0 0/calc(var(--i,0) * (100% - 12px) / 6 + 10px) 100% no-repeat,var(--p4);transition:background-size .45s var(--ease)}
.stops::after{content:"";position:absolute;right:12px;top:5.5px;width:10px;height:10px;border-top:1.3px solid var(--p4);border-right:1.3px solid var(--p4);transform:rotate(45deg)}
.node{grid-row:1;position:relative;background:none;border:0;padding:0;text-align:left;cursor:pointer;color:var(--mut);display:block;transition:color .3s}
.node .dot{display:block;width:8px;height:8px;border-radius:50%;background:var(--p4);margin:6px 0 20px;position:relative;z-index:1;transition:all .3s var(--ease)}
.node.done .dot{background:var(--ink)}
.node.on .dot{background:var(--ink);width:20px;height:20px;margin:0 0 14px;left:-6px}
.node.on,.node.done{color:var(--ink)}
.node b{display:block;font-weight:500;font-size:17px;letter-spacing:-.01em}
.node small{display:block;font-size:13px;color:var(--mut);margin-top:2px}
.stop-body{grid-column:1/-1;grid-row:2;display:none;padding-top:64px;max-width:1000px}
.stop-body.on{display:block}
.stop-body .th{font-size:44px;line-height:1.07;letter-spacing:-.04em;font-weight:500}
.stop-body .tx{margin-top:24px;font-size:16px;max-width:620px}
.stop-body table{border-collapse:collapse;margin-top:20px;font-size:15px}
.stop-body td{padding:8px 32px 8px 0;border-top:1px solid var(--tog)}
.stop-body td:first-child{font-weight:500}
.stop-body .refund{margin-top:20px;color:var(--mut);max-width:620px}
.stop-body .tags{margin-top:20px}
.termsbtn{margin-top:72px}

/* контакты */
.ct{min-height:calc(100vh - var(--head) - 140px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 0}
.ct .lab{color:var(--mut)}
.ct .hd{font-size:56px;line-height:1.05;letter-spacing:-.04em;font-weight:500;margin-top:12px}
.ct .ph{font-size:22px;margin-top:12px}
.ct .btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:36px}
.ct .soc{margin-top:48px;font-size:14px;color:var(--mut);display:flex;gap:28px;flex-wrap:wrap;justify-content:center}
.ct .soc a{color:var(--mut)}

/* кнопка «Наверх» (только компьютер): появляется после прокрутки */
.totop{position:fixed;right:var(--pad);bottom:32px;z-index:35;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:4px;background:var(--tog);color:var(--ink);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s,background .3s var(--ease),color .3s var(--ease)}
/* плашка про куки: один раз на несколько секунд, внизу слева */
.cookie{position:fixed;left:0;right:0;margin:0 auto;width:max-content;max-width:calc(100% - 2 * var(--pad));bottom:20px;z-index:40;display:flex;align-items:center;gap:12px;padding:8px 8px 8px 12px;border-radius:4px;background:color-mix(in srgb,var(--tog) 55%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);color:var(--mut);font-size:12px;line-height:1.3;opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.cookie.show{opacity:1;transform:none}
.cookie button{flex:none;border:0;border-radius:4px;padding:4px 8px;background:transparent;color:var(--ink);font:inherit;cursor:pointer;transition:background .3s var(--ease)}
.cookie button:hover{background:color-mix(in srgb,var(--p4) 70%,transparent)}
@media (max-width:768px){.cookie{bottom:16px}}
@media (prefers-reduced-motion:reduce){.cookie{transition:none}}
.totop.show{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--ink);color:var(--bg)}
.with-next .totop{bottom:88px}  /* на странице кейса справа внизу уже есть кнопка «Следующий кейс» */

/* подвал */
.cta{margin-top:200px;padding-top:40px}
.cta a.big{display:block;font-size:96px;line-height:1.02;letter-spacing:-.035em;font-weight:500}
.cta a.big .ico{margin-left:24px;vertical-align:-2px}
.foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:72px;font-size:14px;color:var(--mut)}
.foot.slim{margin-top:96px}
.foot nav{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.soc-ico-row{display:flex;align-items:center;gap:20px}
.soc-ico{display:inline-flex;color:var(--mut)}
.soc-ico:hover{color:var(--ink);opacity:1}
.foot a{color:var(--mut)}
.nf{min-height:50vh;display:flex;flex-direction:column;justify-content:center;gap:16px}
.nf h1{font-size:80px;letter-spacing:-.04em;font-weight:500;line-height:1}

@media (max-width:1280px){
:root{--g:48px}
.hero h1{font-size:64px}
.hero aside{margin-top:2px}
.nextbig{font-size:72px}.cta a.big{font-size:72px}
.case{grid-template-columns:minmax(0,560px) 1fr;column-gap:48px}
.collage .years .num{font-size:140px}
}
@media (max-width:1024px){
.dcols{grid-template-columns:repeat(2,1fr)}
.dwide{grid-template-columns:1fr}
.dwide .dhd,.dwide .ddesc,.dwide .dprice,.dwide .ditems{grid-column:1;grid-row:auto}
.dwide .ditems{padding:8px 0 20px}
:root{--pad:40px;--g:32px}
.grid{grid-template-columns:repeat(3,1fr)}
.grid:not(.filtered) .card.big,.grid:not(.filtered) .card.big.right{grid-column:span 2;grid-row:span 2}
.nav{gap:26px}.tools{gap:20px}
.hero{grid-template-columns:1fr}
.hero h1{grid-column:1/-1;font-size:56px}
.hero aside{grid-column:1/-1;margin-top:28px}
.statement .big{font-size:40px}.client .lead{font-size:34px}
.portrait{grid-column:span 5}.statement{grid-column:span 7}
.years{grid-column:span 4}.practice{grid-column:span 8}.dark{grid-column:span 6}.contactbl{grid-column:span 6}.client{grid-column:span 12}
.svc-row{font-size:30px}
}
@media (max-width:768px){
.dcols{grid-template-columns:1fr;gap:8px}
.dcol{gap:8px}
.dwide{margin-top:8px}
.dcols+.dwide{margin-top:8px}
.dwide .ditems{grid-template-columns:1fr}
.dwide .ditems li:nth-child(2){padding-top:10px}
.dcard{padding:0}
.dhd{padding:18px 20px;align-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.dcard h2{font-size:22px}
.dhprice{display:block;margin-left:auto}
.dchev{display:block;flex:none;width:8px;height:8px;margin-left:4px;border:solid currentColor;border-width:0 1px 1px 0;transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--ease);opacity:.6}
[data-svc].open>.dhd .dchev{transform:rotate(-135deg) translateY(-2px)}
.dbody{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .4s var(--ease),visibility 0s .4s}
[data-svc].open>.dbody{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .4s var(--ease),visibility 0s}
.dbi{display:block;overflow:hidden;min-height:0;padding:0 20px}
.dbi>:last-child{margin-bottom:20px}
.dcard .ddesc,.dwide .ddesc{margin-top:0;padding-bottom:14px}
.dtag{padding:16px 20px 0;margin:0}
.dtag+.dhd{padding-top:4px}
.dprice{display:none}
.dmob{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.dmob .btn{justify-content:center}
.feat .dmob .btn{background:var(--bg);color:var(--ink)}
.feat .dmob .btn.soft{background:color-mix(in srgb,var(--bg) 14%,transparent);color:var(--bg)}
.totop{display:none}
:root{--pad:20px;--head:64px;--g:20px;--c:58px}
.wrap{padding-bottom:48px}
.head{grid-template-columns:1fr auto auto;gap:12px}
.nav,.tools .lg,.tools .write{display:none}
.tools{gap:12px}
.burger{display:block}
.mmenu{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.mmenu>div{overflow:hidden;min-height:0;visibility:hidden;transition:visibility .4s}
.menu-open .mmenu>div{visibility:visible}
.menu-open .mmenu{grid-template-rows:1fr}
.mmenu nav{display:grid;gap:4px;padding:16px 0 12px}
.mmenu nav a{font-size:30px;line-height:1.25;letter-spacing:-.03em;font-weight:500;opacity:0;transition:opacity .3s var(--ease)}
.menu-open .mmenu nav a{opacity:1}
.mmenu .lg{margin:16px 0}
.mmenu .btn{display:flex;justify-content:center;margin-bottom:24px}
.hero{padding:24px 0 40px}
.hero h1{font-size:44px;line-height:1.02;letter-spacing:-.045em}
.hero aside{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px 20px;margin-top:28px}
.hero .where{margin-top:0;padding-top:0;border-top:0}
.hero .lbl{display:block;color:var(--mut);font-size:13px}
.toolbar{margin-bottom:24px}
.types{flex-wrap:nowrap;overflow-x:auto;gap:22px;margin:0 calc(var(--pad)*-1);padding:0 var(--pad);scrollbar-width:none}
.types::-webkit-scrollbar{display:none}
.f{white-space:nowrap}
.right{display:none}
.grid{grid-template-columns:1fr;row-gap:28px;min-height:0}
.grid:not(.filtered) .card.big,.grid:not(.filtered) .card.big.right{grid-column:auto;grid-row:auto}
.tile .sl{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.tile .sl::-webkit-scrollbar{display:none}
.tile:not([data-n="0"]),.card:nth-child(n) .tile:not([data-n="0"]){background:transparent}  /* без серой подложки в зазорах и пока слайды грузятся */
.slides img{background:transparent}
.tile .sl{gap:6px}
.tile .s,.tile .s.on{position:relative;inset:auto;width:auto;min-width:0;flex:0 0 92%;border-radius:4px;opacity:1;scroll-snap-align:start;transition:none}
.tile .s:last-child,.tile .dslide:last-child{scroll-snap-align:end}
/* на телефоне вторым слайдом идёт описание проекта, дальше остальные слайды */
.tile .dslide{display:flex;flex:0 0 92%;height:100%;min-width:0;align-items:flex-start;padding:22px 20px;border-radius:4px;background:var(--p1);color:var(--ink);scroll-snap-align:start;overflow:hidden}
.tile .dslide p{margin:0;font-size:15px;line-height:1.55;letter-spacing:-.005em;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:14;line-clamp:14;overflow:hidden}
.tile[data-n="1"]:not(.has-d) .s{flex-basis:100%}
.dots{display:none}
.tile .num{display:none}
.cap{height:auto;padding-bottom:4px}
.pagehead{padding:28px 0 24px}
.pagehead h1{font-size:36px}
.pagehead p{font-size:18px}
.fbtn{display:inline-flex;align-items:center;gap:10px;background:var(--p1);border:0;border-radius:4px;padding:12px 16px;cursor:pointer;margin-bottom:12px}
.fbtn b{background:var(--ink);color:var(--bg);border-radius:10px;font-size:12px;padding:1px 7px;font-weight:500}
.fbtn b[hidden]{display:none}
.filters{display:none;padding:18px}
.filters.open{display:grid}
.frow{align-items:flex-start;gap:8px;flex-direction:column}
.frow .lab{width:auto}
.status{margin-bottom:24px}
.case{display:flex;flex-direction:column;padding-top:8px}
.info{display:contents}
.slides{grid-column:auto;grid-row:auto}
.case .i1{order:1}.case .slides{order:2;margin-top:28px}.case .mnext{order:3}

.info .back{margin-bottom:24px}
.info h1{font-size:36px}
.facts{margin-top:24px}
.facts div{grid-template-columns:110px 1fr}
.nextfix{display:none}
.mnext{display:none}  /* на телефоне остаётся только крупная ссылка со стрелкой внизу страницы */
.nextbig{font-size:44px;margin-top:80px;text-align:right}
.nextbig .ico{width:36px;height:36px;margin-left:12px}
.svc{display:block}
.svc>li{display:block;border-top:1px solid var(--tog)}
.svc-row{font-size:26px;padding:16px 0;color:var(--ink)}
.svc-row .pr{font-size:16px}
.svc-d,.svc-d.on{display:grid;grid-template-rows:0fr;position:static;padding:0;border-left:0;background:none;transition:grid-template-rows .45s var(--ease)}
.svc-d.on{grid-template-rows:1fr}
.svc-d>div{overflow:hidden;min-height:0;opacity:0;transition:opacity .35s var(--ease)}
.svc-d.on>div{opacity:1;padding-bottom:24px}
.svc-d .lead{font-size:18px}
.svc-d .tags .tag{background:var(--tog)}
.svc-d .inc,.svc-d .acts{margin-top:20px}
.collage{display:flex;flex-direction:column;gap:12px}
.bl{padding:24px}
.portrait{aspect-ratio:4/5}
.statement .big{font-size:30px}
.years .num{font-size:120px}
.client .lead{font-size:30px}
.stops{display:block;margin-top:8px}
.stops::before,.stops::after{display:none}
.stops>li{display:block;position:relative;padding-left:32px}
.stops>li::before{content:"";position:absolute;left:3.5px;top:20px;bottom:-12px;width:1.3px;background:var(--p4)}
.stops>li:last-child::before{display:none}
.stops>li.done::before{background:var(--ink)}
.node{display:block;width:100%;padding:12px 0}
.node .dot{position:absolute;left:-32px;top:20px;margin:0}
.node.on .dot{width:8px;height:8px;margin:0;left:-32px}
.stop-body{display:grid;grid-template-rows:0fr;padding-top:0;transition:grid-template-rows .45s var(--ease)}
.stop-body.on{grid-template-rows:1fr}
.stop-body>div{overflow:hidden;min-height:0;opacity:0;transition:opacity .35s var(--ease)}
.stop-body.on>div{opacity:1;padding-bottom:20px}
.stop-body .th{font-size:24px}
.termsbtn{margin-top:32px}
.ct .hd{font-size:34px}
.ct .btns{flex-direction:column;width:100%}.ct .btns .btn{justify-content:center}
.cta{margin-top:100px}
.cta a.big{font-size:44px}
.cta a.big .ico{width:36px;height:36px;margin-left:12px}
.foot{margin-top:40px}
.nf h1{font-size:48px}
}
@media (min-width:769px){.wrap{padding-bottom:128px}}  /* запас снизу, чтобы кнопка «Наверх» не накрывала подвал */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}}