/* ============================================================
   Дотошно.про — общие стили сайта.

   До сегодняшнего дня стили лежали внутри каждой страницы. Пока страниц
   было три, это стоило дёшево: главная, политика, бриф — и в каждой своя
   копия. С пятнадцатью страницами цена стала другой: правка отступа
   в шапке означала бы пятнадцать одинаковых правок и гарантированное
   расхождение страниц между собой уже к третьей.

   Внешних библиотек здесь по-прежнему нет и не будет: это наш файл,
   написанный руками, а не чужой пакет. Сборщика тоже нет — файл
   подключается тегом link, и на этом всё.

   ЧТО ГДЕ ЛЕЖИТ
   · КРИТИКА — короткий блок между маркерами ниже. Он повторён инлайном
     в <head> каждой страницы, чтобы фон, цвет и шрифт были на месте
     ещё до того, как приедет этот файл. Правится ЗДЕСЬ и переносится
     в страницы. Совпадение проверяет tools/check-html.js: разойдётся —
     проверка упадёт, а не выяснится через месяц на чужом экране.
   · Всё остальное — общее для всех страниц: шапка, колонтитулы, тикер,
     развороты, форма заявки, подвал, адаптив.
   · Стили обложки главной (шторы, кадр, подписи) сюда НЕ входят: они
     нужны одной странице из пятнадцати и остаются инлайном в index.html.
     Там им и место — это критический CSS первого экрана.

   Шрифты объявлены отдельно, инлайном на каждой странице, источник —
   fonts.css. Так было и раньше: отдельный файл задерживал бы первую
   отрисовку на лишний запрос, а шрифт нужен сразу.
   ============================================================ */

/* ==================== КРИТИКА · НАЧАЛО ====================
   Ровно этот блок повторяется в <style id="critical"> каждой страницы.
   Меняете здесь — переносите туда. Проверяется автоматически. */

/* ============================== TOKENS ============================== */
:root{
  --bg:#131316;          /* графит номера */
  --bg-deep:#0f0f12;     /* тёмная полоса */
  /* Фон поля ввода и приглушённая подпись. Оба цвета жили только в политике
     и брифе, а форма на главной ими пользовалась — и не получала ничего:
     необъявленная переменная делает всё правило недействительным. Поля стояли
     без фона, пометка «необязательно» светилась в полную силу основного текста.
     Значения взяты из политики, чтобы формы сайта выглядели одинаково. */
  --panel:#17171b;       /* фон поля ввода */
  /* Тише приглушённого: пометки, колонтитулы, служебные строки. Прежний
     #6F6C66 давал к графиту 3.5:1 — ниже требования AA для мелкого текста,
     а набран этим цветом как раз мелкий. Осветлён до 4.9:1; на панели формы,
     самом светлом фоне сайта, остаётся 4.7:1. */
  --dim:#87837B;
  --ink:#EDEBE6;         /* тёплая «бумажная» белизна */
  --mut:#9B978E;         /* приглушённый текст */
  --amber:#E9A13B;       /* янтарь */
  --amber-deep:#C97F1F;
  --hair:rgba(237,235,230,.14);
  --hair-soft:rgba(237,235,230,.08);
  /* Верхняя точка градиента держит контраст не ниже 3:1 к графиту: при #45454d
     верхняя треть букв уходила в фон и крупные заголовки читались наполовину. */
  --grad-display:linear-gradient(180deg,#6a6a72 0%,#7a6a4a 52%,var(--amber) 100%);
  --f-display:"Commissioner",system-ui,sans-serif;
  --f-serif:"Spectral",Georgia,"Times New Roman",serif;
  --ease-out:cubic-bezier(.19,1,.22,1);
  /* Высота закреплённой шапки. Живёт здесь, потому что от неё зависят
     и липкий колонтитул, и приземление якорей: два места, которые обязаны
     совпадать до пикселя. */
  --head-h:3.9rem;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{background:var(--bg)}
body{
  color:var(--ink);
  font-family:var(--f-serif);
  font-weight:400;
  font-size:1.0625rem;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--amber);color:#131316}
a{color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:4px;border-radius:2px}
img,svg{max-width:100%;display:block}
/* ==================== КРИТИКА · КОНЕЦ ==================== */

/* ============================== ШАПКА-ФОЛИО ============================== */
/* Без скрипта шапка остаётся частью обложки, как была: прозрачная плашка,
   висящая над текстом, без возможности её подкрасить — хуже, чем её отсутствие.
   Со скриптом она закрепляется и подкрашивается, но только когда обложка ушла:
   плашка поверх кадра испортила бы первый экран, ради которого он и снят. */
.masthead{
  position:absolute;top:0;left:0;right:0;z-index:30;
  display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;
  padding:1.4rem clamp(1.25rem,4vw,3.5rem) 1.15rem;
  border-bottom:1px solid var(--hair-soft);
  font-family:var(--f-display);font-weight:300;
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
}
.js .masthead{position:fixed;transition:background .3s,border-color .3s}
.js .masthead.is-stuck{background:rgba(19,19,22,.94);border-bottom-color:var(--hair)}
/* Страница без обложки. Прятаться шапке здесь не от чего: фон у неё сразу,
   и она едет вместе с прокруткой. Прозрачная плашка нужна была ровно затем,
   чтобы не портить кадр с машиной, а кадра тут нет. */
.masthead--page,
.js .masthead--page{
  position:sticky;background:rgba(19,19,22,.94);border-bottom-color:var(--hair);
}
/* Якоря не должны прятаться под закреплённой шапкой */
.js #ceny, .js #raboty, .js #voprosy, .js #cta{scroll-margin-top:var(--head-h)}
.masthead .brand{font-weight:700;letter-spacing:.28em;white-space:nowrap;text-decoration:none;color:var(--ink)}
.masthead .brand:hover{color:var(--ink)}
/* Точка как в доменном имени. Символ «.» в этом кегле слишком хилый,
   поэтому рисуем круг — его толщину задаём сами. Цвет — янтарь из нижней
   части градиента буквы Д. */
.dot{
  display:inline-block;width:.42em;height:.42em;
  margin:0 .16em 0 .1em;border-radius:50%;
  background:var(--amber);vertical-align:baseline;
}
.masthead .issue{color:var(--mut)}
/* Строка выпуска — украшение, и уходит первой: полному меню на полутора
   тысячах пикселей уже тесно, а разделам хватать обязано. Уходит она
   молча — ни один раздел от этого не пропадает. */
@media (max-width:1500px){ .masthead .issue{display:none} }
.masthead a{color:var(--mut);text-decoration:none;transition:color .3s}
.masthead a:hover{color:var(--amber)}
/* Место под кнопку Telegram не должно участвовать в раскладке само по себе:
   обёртка становилась элементом флекса, и ссылка внутри неё вставала
   на 2.5 пикселя ниже соседей по базовой линии. display:contents убирает
   обёртку из раскладки, оставляя саму ссылку соседкой пунктам меню.
   А пока ника нет, слот пуст и не съедает даже отступа. */
[data-tg-slot]{display:contents}
[data-tg-slot]:empty{display:none}
.masthead .tg{color:var(--amber)}
.masthead .tg:hover{color:#F2AE4E}
/* Кнопка Telegram рядом с «содержанием» нужна там, где строка разделов
   уехала в меню, то есть на узком экране. На широком она уже стоит в строке
   разделов, и вторая была бы повтором. */
.masthead__tg{display:none}

/* ---------- содержание номера ----------
   Меню многостраничного сайта, набранное как оглавление журнала.

   Без скрипта оно лежит развёрнутым списком: видны все разделы и все
   подпункты, ни одна страница не спрятана за кнопкой, которую некому нажать.
   Скрипт сворачивает подпункты в выпадающие панели, а на узком экране
   убирает меню целиком за строку «содержание». Порядок именно такой:
   сначала работает без скрипта, потом становится удобнее с ним. */
.masthead__nav{
  display:flex;align-items:baseline;justify-content:flex-end;
  gap:clamp(.7rem,1.7vw,1.3rem);flex-wrap:wrap;
}
.nav__title{display:none}
.nav__list{
  list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:flex-end;gap:clamp(.7rem,1.7vw,1.3rem);
  /* Разделов стало шесть вместо трёх, и прежний журнальный разрядки
     в четверть кегля они уже не выдерживают: строка ломалась пополам
     на обычном ноутбуке. Разрядка осталась, но втрое скромнее. */
  letter-spacing:.14em;
}
.nav__list a,
.nav__head{
  display:inline-block;color:var(--mut);text-decoration:none;white-space:nowrap;
  font:inherit;letter-spacing:inherit;text-transform:inherit;
  background:none;border:0;padding:0;cursor:pointer;transition:color .3s;
}
.nav__list a:hover,
.nav__head:hover{color:var(--amber)}
/* Пунктов в шапке стало девять: журнальные «Собрали» и «Считаем» уступили
   место понятным «Работы», «Цены», «Метод», «Вопросы», «Контакты». На узком
   ноутбуке строка от этого ломалась пополам и кнопка разговора уезжала
   на вторую линию. Между полным меню и «содержанием» поджимаем кегль
   и разрядку: девять коротких существительных в одну строку помещаются,
   если не разгонять их журнальной разрядкой. */
@media (min-width:1101px) and (max-width:1340px){
  .masthead{gap:1rem;padding-left:clamp(1.25rem,3vw,2.2rem);padding-right:clamp(1.25rem,3vw,2.2rem)}
  .nav__list{gap:.8rem;letter-spacing:.1em}
  .nav__cta a{padding:.5em 1em}
}
.nav__sub{list-style:none;display:grid;gap:.5rem;margin-top:.6rem;padding-left:1rem}
.nav__sub a{white-space:normal}

/* Стрелка появляется только при живом скрипте: без него раскрывать нечего,
   подпункты уже на виду, и стрелка обещала бы действие, которого нет. */
.js .nav__head::after{content:"▾";margin-left:.4em;font-size:.9em;opacity:.7}
.js .nav__group{position:relative}
.js .nav__sub{
  position:absolute;top:calc(100% + 1.15rem);left:50%;transform:translateX(-50%);
  display:none;min-width:15rem;margin:0;padding:1.1rem 1.3rem;
  background:rgba(19,19,22,.98);border:1px solid var(--hair);border-radius:6px;
  box-shadow:0 18px 40px rgba(0,0,0,.5);
  text-transform:none;letter-spacing:.04em;font-size:.86rem;
}
.js .nav__group.is-open > .nav__sub{display:grid;gap:.8rem}
.js .nav__group.is-open > .nav__head{color:var(--amber)}

/* Выход на разговор набран кнопкой, а не строкой меню: это единственный
   пункт, ради которого сайт написан, и он не должен теряться среди разделов. */
.nav__cta a{
  color:var(--amber);border:1px solid rgba(233,161,59,.5);border-radius:999px;
  padding:.45em .95em;transition:background .25s,border-color .25s,color .25s;
}
.nav__cta a:hover{background:rgba(233,161,59,.12);border-color:var(--amber);color:#F2AE4E}

/* Строка «содержание» на узком экране. Появляется скриптом: без него меню
   и так на виду, а кнопка без обработчика — мёртвая кнопка. */
.burger{
  display:none;align-items:center;gap:.6rem;
  font:inherit;letter-spacing:inherit;text-transform:inherit;
  color:var(--amber);background:none;border:0;padding:0;cursor:pointer;
}
.burger__rule{position:relative;display:block;width:1.5rem;height:1px;background:currentColor}
.burger__rule::before,
.burger__rule::after{content:"";position:absolute;left:0;width:100%;height:1px;background:currentColor;transition:transform .25s var(--ease-out)}
.burger__rule::before{top:-.34rem}
.burger__rule::after{top:.34rem}
/* Открытое меню закрывается той же строкой, поэтому три черты складываются
   в крест: иначе человек ищет крестик, которого нет. */
.burger[aria-expanded="true"] .burger__rule{background:transparent}
.burger[aria-expanded="true"] .burger__rule::before{transform:translateY(.34rem) rotate(45deg)}
.burger[aria-expanded="true"] .burger__rule::after{transform:translateY(-.34rem) rotate(-45deg)}
/* Пока содержание раскрыто, шапка обязана быть непрозрачной: под ней в этот
   момент не кадр с машиной, а список разделов, и просвечивающий сквозь него
   текст страницы читать невозможно. */
.masthead.is-nav-open{background:rgba(19,19,22,.94);border-bottom-color:var(--hair)}
/* ============================== СЕКЦИИ: ОБЩЕЕ ============================== */
/* Колонтитул номера. В журнале он для того и придуман: сообщает, на какой
   ты странице, пока страница не кончилась. Здесь ведёт себя так же —
   держится под шапкой, пока читается его разворот, и уходит вместе с ним.
   Липкость даётся только при живом скрипте: без него шапка не закрепляется,
   и колонтитул под ней висел бы в пустоте. */
.folio{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:1.1rem 0;border-top:1px solid var(--hair);
  font-family:var(--f-display);font-weight:300;font-size:.62rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--mut);
}
/* ============================== ШАПКА РАЗДЕЛА ==============================
   Разделы длиннее экрана: читаешь середину «что входит в работу» и уже
   не помнишь, к чему это относится. Журнал решает это колонтитулом,
   сайт — закреплённой шапкой: строка колонтитула и заголовок раздела
   держатся под верхней шапкой, пока раздел не кончится.

   Полоса рисуется скриптом и лежит поверх, а не в потоке: заголовок,
   меняющий кегль прямо в потоке, дёргал бы весь текст под собой.
   Фон берётся у текущего раздела, иначе текст просвечивал бы насквозь. */
.running-head{
  position:fixed;left:0;right:0;top:var(--head-h);z-index:20;
  border-bottom:1px solid var(--hair);
  transform:translateY(-101%);opacity:0;pointer-events:none;
  transition:transform .28s var(--ease-out),opacity .22s linear;
}
.running-head.is-on{transform:none;opacity:1}
.running-head .wrap{padding-top:.75rem;padding-bottom:.85rem}
.running-head__folio{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  font-family:var(--f-display);font-weight:300;font-size:.62rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--mut);
}
.running-head__name{
  margin-top:.4rem;font-family:var(--f-display);font-weight:900;
  text-transform:uppercase;font-size:clamp(1.2rem,4.2vw,2.5rem);
  line-height:1.08;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
@media (prefers-reduced-motion:reduce){
  .running-head{transition:none}
}
.wrap{max-width:82rem;margin:0 auto;padding:0 clamp(1.25rem,4vw,3.5rem)}

/* построчные проявления */
.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.js [data-reveal].in-view{opacity:1;transform:none}
.js [data-reveal="2"]{transition-delay:.12s}
.js [data-reveal="3"]{transition-delay:.24s}

/* посимвольные проявления */
.split-ready .w{display:inline-block;white-space:nowrap}
.js .split-ready .ch{display:inline-block;opacity:0;transform:translateY(.35em) rotate(2deg);
  transition:opacity .5s var(--ease-out),transform .6s var(--ease-out);
  transition-delay:calc(var(--i) * .028s)}
.js .split-ready.in-view .ch{opacity:1;transform:none}
.split-ready .accent{font-style:italic;font-weight:400;color:var(--amber)}


/* ============================== АНАЛОГИЯ ============================== */
.analogy{
  padding:clamp(4.5rem,11vh,8rem) 0;
  background:var(--bg-deep);
  border-top:1px solid var(--hair-soft);
  border-bottom:1px solid var(--hair-soft);
}
.analogy .wrap{max-width:58rem}
.analogy__lead{
  font-family:var(--f-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.6rem,4.2vw,3.4rem);line-height:1.18;letter-spacing:0;
  background:var(--grad-display);
  -webkit-background-clip:text;background-clip:text;color:var(--amber);
}
.analogy__body{
  margin-top:1.6rem;
  font-size:clamp(1.05rem,1.7vw,1.5rem);line-height:1.62;color:var(--mut);
  max-width:44rem;
}
.analogy__body em{font-style:italic;color:var(--ink)}

/* ============================== ОФФЕР-РАЗВОРОТ ============================== */
.offer{padding:clamp(6rem,14vh,10rem) 0 clamp(5rem,12vh,9rem);background:var(--bg)}
.offer h1{
  font-family:var(--f-display);font-weight:900;text-transform:uppercase;
  /* та же причина: кириллица с Ж и Й не терпит отрицательного трекинга */
  font-size:clamp(2.4rem,6.6vw,6rem);line-height:1.22;letter-spacing:0;
}
.offer h1 .l2{display:block;margin-left:clamp(1.5rem,9vw,9rem)}
/* Третья строка уходит глубже второй: лесенка ведёт к выводу,
   и градиент лежит там, где удар, а не в середине фразы. */
.offer h1 .l3{display:block;margin-left:clamp(3rem,18vw,18rem)}
.offer h1 .l3 i{
  font-style:normal;
  background:var(--grad-display);
  -webkit-background-clip:text;background-clip:text;color:var(--amber);
}
/* Градиент по буквам и посимвольное проявление вместе не работают: после разбивки
   каждая буква лежит в своём inline-block, а сквозь них background-clip:text
   пробивается не во всяком браузере — строка наследует color:transparent
   и исчезает целиком. Поэтому у разбитых заголовков градиент живёт на самих
   буквах: он вертикальный, высота строки у всех букв одна, картинка та же. */
.offer h1 .l3 i.split-ready .ch{
  background:var(--grad-display);
  -webkit-background-clip:text;background-clip:text;
}
/* Подзаголовок H1: журнальная подпись под крупной строкой. Набирается
   тише самого заголовка — он уточняет, а не спорит. */
.offer h1 .h1-sub{
  display:block;margin-top:clamp(1.1rem,2.4vh,1.8rem);
  font-family:var(--f-display);font-weight:300;text-transform:uppercase;
  font-size:clamp(.66rem,1.1vw,.78rem);letter-spacing:.28em;
  color:var(--mut);line-height:1.5;
}
.offer .after{
  display:flex;justify-content:flex-end;margin-top:clamp(2.5rem,6vh,4.5rem);
}
.offer .after p{
  max-width:26rem;font-style:italic;font-weight:300;
  font-size:clamp(1.05rem,1.4vw,1.25rem);color:var(--mut);
  border-left:1px solid var(--amber);padding-left:1.6rem;
}
.offer .after p b{color:var(--ink);font-weight:400}

/* ============================== БЕГУЩАЯ СТРОКА ============================== */
.ticker{
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  overflow:hidden;background:var(--bg-deep);padding:1.15rem 0;
}
.ticker__track{display:flex;gap:0;width:max-content;transform:translate3d(var(--tick,0%),0,0)}
.ticker__chunk{
  display:flex;gap:2.6rem;padding-right:2.6rem;white-space:nowrap;
  font-family:var(--f-display);font-weight:300;font-size:.78rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--mut);
}
.ticker__chunk b{font-weight:700;color:var(--amber)}

/* ============================== СПИСОК УСЛУГ ============================== */
.svc{list-style:none}
.svc li{border-top:1px solid var(--hair)}
.svc li:last-child{border-bottom:1px solid var(--hair)}
.svc .row{
  display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;
  gap:clamp(1rem,3vw,2.6rem);padding:clamp(1.6rem,3.4vh,2.4rem) .2rem;
  text-decoration:none;transition:background .35s;
}
.svc .row:hover{background:rgba(233,161,59,.045)}
.svc .num{
  font-family:var(--f-serif);font-style:italic;font-weight:300;
  font-size:clamp(1.3rem,2.2vw,1.9rem);color:var(--amber);min-width:2.2ch;
}
.svc .name{display:flex;align-items:baseline;gap:1.4rem;min-width:0}
.svc .name h3{
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.15rem,2.6vw,2.1rem);letter-spacing:.01em;line-height:1.15;
  transition:transform .4s var(--ease-out);
}
.svc .row:hover h3{transform:translateX(.5rem)}
.svc .name .leader{flex:1;border-bottom:1px dotted rgba(237,235,230,.28);transform:translateY(-.35em)}
.svc .desc{font-style:italic;font-weight:300;color:var(--mut);font-size:.98rem;margin-top:.55rem;max-width:34rem}
/* цена, это второй по важности элемент строки после названия, поэтому
   набираем её гротеском: у serif в этом кегле цифры теряются */
.svc .price{
  justify-self:end;align-self:start;
  font-family:var(--f-display);font-weight:500;font-size:.95rem;
  letter-spacing:.04em;color:var(--ink);white-space:nowrap;
}
/* «в месяц» не цена, а условие: набираем тише, чтобы не спорило с числом */
.svc .price .per{font-weight:300;color:var(--mut)}
/* Цена и срок — одной колонкой справа. Срок стоит на виду намеренно:
   три дня против двадцати у соседей по выдаче — это и есть аргумент,
   прятать его под клик было бы глупо. */
.svc .price-col{
  justify-self:end;align-self:start;text-align:right;
  display:flex;flex-direction:column;gap:.35rem;
}
.svc .term{
  font-family:var(--f-display);font-weight:300;font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mut);white-space:nowrap;
}
/* Обещание под списком услуг. Набрано как граница в развороте «состав»:
   оба высказывания одного рода — что будет, если что-то пойдёт не так. */
.pledge{
  margin-top:clamp(2.4rem,5vh,3.2rem);padding-top:1.6rem;
  border-top:1px solid var(--hair);max-width:46rem;
  font-weight:300;font-size:1rem;line-height:1.6;color:var(--mut);
}
.pledge b{font-family:var(--f-display);font-weight:700;color:var(--ink);
  text-transform:uppercase;font-size:.82em;letter-spacing:.08em}


/* Список услуг на своей полосе. Точки-маркеры, которыми набран текст полосы,
   здесь не нужны: это не перечисление внутри абзаца, а оглавление с ценами.
   Ширину держим в разумных пределах — иначе цена улетает от названия
   на треть экрана и перестаёт с ним читаться. */
.svc--page{max-width:62rem;margin-top:clamp(1.6rem,4vh,2.4rem)}
.page-body .svc li{padding-left:0}
.page-body .svc li::before{content:none}

/* ---------- разворот в две полосы ----------
   Слева то, что собираем, справа то, что делаем с сайтом дальше. На узком
   экране полосы становятся друг под друга: «собираем» первым, потому что
   с этим приходят чаще. */
.duo{
  margin-top:clamp(2.6rem,7vh,4.2rem);
  display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(2rem,5vw,4.5rem);
}
.duo__col > h2{
  font-family:var(--f-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.3rem,2.4vw,2rem);line-height:1.1;letter-spacing:.01em;
  padding-bottom:1rem;
}
/* Правая полоса отбита волосяной линией, а не рамкой или фоном: разворот
   журнала делится линейкой, карточек здесь нет и не будет. */
.duo__col--keep{border-left:1px solid var(--hair);padding-left:clamp(1.6rem,3.5vw,3rem)}
@media (max-width:900px){
  .duo{grid-template-columns:1fr;gap:clamp(2.4rem,6vh,3.4rem)}
  .duo__col--keep{border-left:0;padding-left:0;border-top:1px solid var(--hair);padding-top:clamp(1.8rem,4vh,2.6rem)}
}

/* Строка-ссылка вместо прежней раскрывашки «что входит»: состав уехал
   на страницу услуги, и она отвечает подробнее, чем абзац под кликом. */
.svc__more{
  display:inline-block;margin-top:.9rem;
  font-family:var(--f-display);font-weight:300;font-size:.66rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--mut);
  text-decoration:none;transition:color .25s;
}
.svc__more:hover{color:var(--amber)}

/* Вводка разворота: одна фраза о том, что здесь два раздела одного метода. */
.offer__lede{
  max-width:44rem;font-family:var(--f-serif);font-style:italic;font-weight:300;
  font-size:clamp(1.15rem,2.2vw,1.7rem);line-height:1.4;color:var(--ink);
}

/* Граница услуги: сказать, чего в смете нет, важнее, чем ещё раз сказать,
   что в ней есть. */
.scope .edge{
  margin-top:clamp(2.6rem,6vh,3.6rem);padding-top:1.6rem;
  border-top:1px solid var(--hair);max-width:46rem;
  font-weight:300;font-size:1rem;line-height:1.6;color:var(--mut);
}
.scope .edge b{font-family:var(--f-display);font-weight:700;color:var(--ink);
  text-transform:uppercase;font-size:.82em;letter-spacing:.08em}
/* Фильтр: две колонки на широком экране, лесенка на узком. «Кому подходим»
   и «кому нет» должны читаться парой, а не как два отдельных заявления. */
.scope .fit{
  margin-top:clamp(1.6rem,3.5vh,2.2rem);display:grid;gap:1.4rem clamp(2rem,5vw,3.5rem);
  grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));max-width:60rem;
}
.scope .fit p{font-weight:300;font-size:.98rem;line-height:1.6;color:var(--mut)}
.scope .fit b{font-family:var(--f-display);font-weight:700;color:var(--ink);
  text-transform:uppercase;font-size:.8em;letter-spacing:.08em}

/* ============================== ВКЛАДКА: ЕСТЬ САЙТ ==============================
   Полоса для тех, кто пришёл с готовым сайтом. Собрана из готовых частей:
   заголовок и вводка взяты у «кому подходим», три шага — этапы услуги (.stages).
   Своего у неё две строки: фон, чтобы вкладка отделялась от метода над ней,
   и строка цены под каждым шагом. */
.redo{padding:clamp(4rem,9vh,6.5rem) 0;background:var(--bg-deep)}
.redo h2{
  font-family:var(--f-serif);font-style:italic;font-weight:300;
  font-size:clamp(2rem,4vw,3.4rem);line-height:1.1;
}
.redo h2 b{font-family:var(--f-display);font-style:normal;font-weight:900;
  text-transform:uppercase;font-size:.92em;letter-spacing:0}
.redo .lede{
  margin-top:1.6rem;max-width:38rem;color:var(--mut);
  font-style:italic;font-weight:300;font-size:clamp(1rem,1.5vw,1.15rem);
}
/* Цена под шагом. Набрана колонтитульным кеглем: это подпись к шагу,
   а не его содержание, — и пока в двух шагах из трёх вместо цифры слова. */
.stage__price{
  margin-top:.9rem;font-family:var(--f-display);font-weight:300;font-size:.66rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dim);line-height:1.9;
}
.stage__price b{color:var(--amber);font-weight:300}
/* Дверь на полосу услуги. Строкой ниже цены и обычным кеглем: цена набрана
   колонтитулом, и ссылка в том же наборе спорила бы с ней за внимание. */
.stage__link{margin-top:.6rem;font-weight:300;font-size:.9rem;line-height:1.5}
.stage__link a{color:var(--amber);text-decoration:none;
  border-bottom:1px solid rgba(233,161,59,.35);transition:border-color .25s}
.stage__link a:hover{border-bottom-color:var(--amber)}
.redo__cta{margin-top:clamp(2.2rem,5vh,3rem)}
.redo__cta .btn{display:inline-block;text-decoration:none}

/* ============================== СОСТАВ РАБОТ ============================== */
/* Разворот стал компактным вместе с содержимым: восемь пунктов состава
   ушли на страницы услуг, осталась пара «кому подходим — кому нет».
   Прежние поля в двенадцать процентов высоты окна оставляли вокруг четырёх
   строк текста пустой экран. */
.scope{padding:clamp(4rem,9vh,6.5rem) 0;background:var(--bg)}
.scope h2{
  font-family:var(--f-serif);font-style:italic;font-weight:300;
  font-size:clamp(2.2rem,4.6vw,4rem);line-height:1.1;
}
.scope h2 b{font-family:var(--f-display);font-style:normal;font-weight:900;text-transform:uppercase;
  font-size:.92em;letter-spacing:0}
.scope .lede{
  margin-top:1.6rem;max-width:34rem;color:var(--mut);
  font-style:italic;font-weight:300;font-size:clamp(1rem,1.5vw,1.15rem);
}
/* две колонки пунктов: сетка держит их в общей высоте строки,
   а разделители рисуем линиями, без карточек и теней */
.scope__grid{
  margin-top:clamp(3rem,7vh,5rem);
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:0 clamp(2.5rem,6vw,6rem);
}
.scope__grid article{
  padding:clamp(1.8rem,3.6vh,2.6rem) 0;
  border-top:1px solid var(--hair);
}
.scope__grid article .mark{
  display:block;
  font-family:var(--f-display);font-weight:300;font-size:.66rem;
  letter-spacing:.3em;color:var(--amber);margin-bottom:.9rem;
}
.scope__grid article h3{
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1rem,1.8vw,1.25rem);letter-spacing:.02em;line-height:1.2;
}
.scope__grid article p{
  margin-top:.7rem;color:var(--mut);font-size:.99rem;max-width:26rem;
}
@media (max-width:760px){
  .scope__grid{grid-template-columns:1fr}
}

/* ============================== ПРОЦЕСС: КОЛОНКА РЕДАКТОРА ============================== */
.process{background:var(--bg-deep);padding:clamp(5rem,12vh,9rem) 0}
.process .cols{display:grid;grid-template-columns:minmax(16rem,1fr) 2fr;gap:clamp(2.5rem,6vw,7rem)}
.process .left{position:relative}
.process .sticky{position:sticky;top:16vh}
.process .left h2{
  font-family:var(--f-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.7rem,2.8vw,2.6rem);line-height:1.1;
}
.process .left p{
  margin-top:1.6rem;font-style:italic;font-weight:300;color:var(--mut);
  max-width:20rem;font-size:1.05rem;
}
.process .left .rule{width:3.5rem;height:1px;background:var(--amber);margin-top:2rem}
.step{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1.4rem,3vw,3rem);align-items:start;
  padding:clamp(2.4rem,6vh,4rem) 0;
}
.step + .step{border-top:1px solid var(--hair-soft)}
.step .digit{
  font-family:var(--f-display);font-weight:900;line-height:.85;
  /* Цифры разной ширины («1» уже остальных), а каждый шаг — свой grid,
     поэтому колонка считалась отдельно и текст первого пункта уезжал влево.
     Табличных цифр в Commissioner нет — задаём ширину бокса явно, в em,
     чтобы она масштабировалась вместе с кеглем. */
  display:block;width:.72em;text-align:center;
  font-size:clamp(4.6rem,9vw,8.5rem);letter-spacing:-.02em;
  background:var(--grad-display);
  -webkit-background-clip:text;background-clip:text;color:var(--amber);
}
.step h3{
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.05rem,1.7vw,1.45rem);letter-spacing:.06em;margin-top:.6rem;
}
.step p{margin-top:.9rem;font-weight:300;color:var(--mut);max-width:30rem;font-size:1.02rem}
.step p i{color:var(--ink)}

/* ============================== ВОПРОСЫ ==============================
   Ответы стоят открытым текстом, а не под раскрывашками: вопрос, который
   человек не решается задать вслух, он и нажимать не станет. */
.faq{padding:clamp(5rem,12vh,9rem) 0;background:var(--bg)}
.faq h2{
  font-family:var(--f-serif);font-style:italic;font-weight:300;
  font-size:clamp(2.2rem,4.6vw,4rem);line-height:1.1;
}
.faq h2 b{font-family:var(--f-display);font-style:normal;font-weight:900;text-transform:uppercase;
  font-size:.92em;letter-spacing:0}
.faq .lede{
  margin-top:1.6rem;max-width:38rem;color:var(--mut);
  font-style:italic;font-weight:300;font-size:clamp(1rem,1.5vw,1.15rem);
}
.faq__grid{
  margin-top:clamp(2.6rem,6vh,4rem);display:grid;
  gap:clamp(1.8rem,4vh,2.8rem) clamp(2rem,5vw,4rem);
  grid-template-columns:repeat(auto-fit,minmax(21rem,1fr));
}
.qa{border-top:1px solid var(--hair);padding-top:1.3rem}
.qa h3{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(1rem,1.6vw,1.2rem);letter-spacing:.01em;line-height:1.3;
}
.qa p{margin-top:.85rem;font-weight:300;font-size:.98rem;line-height:1.6;color:var(--mut)}
.qa p b{color:var(--ink);font-weight:500}

/* ============================== РАБОТЫ ==============================
   Разворот-репортаж. Тёмная полоса между «услугами» и «манифестом»:
   цена сказана, теперь доказательства. Работы разобраны на четыре
   вопроса, которые собственник задаёт вслух: задача, что сделали,
   срок, результат. */
.works{padding:clamp(5rem,12vh,9rem) 0;background:var(--bg-deep)}
.works h2{
  font-family:var(--f-serif);font-style:italic;font-weight:300;
  font-size:clamp(2.2rem,4.6vw,4rem);line-height:1.1;
}
.works h2 b{font-family:var(--f-display);font-style:normal;font-weight:900;text-transform:uppercase;
  font-size:.92em;letter-spacing:0}
.works .lede{
  margin-top:1.6rem;max-width:38rem;color:var(--mut);
  font-style:italic;font-weight:300;font-size:clamp(1rem,1.5vw,1.15rem);
}
.works ol{list-style:none;margin-top:clamp(2.6rem,6vh,4rem)}
.work{border-top:1px solid var(--hair);padding:clamp(1.8rem,4vh,2.6rem) 0}
.work__head{display:flex;align-items:baseline;gap:1.1rem;flex-wrap:wrap}
.work__no{
  font-family:var(--f-display);font-weight:300;font-size:.62rem;
  letter-spacing:.3em;color:var(--mut);
}
/* Тот же кегль и вес, что у заголовков в развороте «вопросы»: разворот
   с работами не должен кричать громче соседей. */
.work h3{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.05rem,1.7vw,1.3rem);letter-spacing:.01em;line-height:1.3;
}
.work__meta{
  margin-left:auto;font-family:var(--f-display);font-weight:300;font-size:.62rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--mut);
}
/* Адрес заказчика — рабочая ссылка: кейс, который можно открыть и проверить,
   стоит дороже кейса, который остаётся на слово. */
.work__meta--link{
  text-decoration:none;border-bottom:1px solid rgba(155,151,142,.4);
  transition:color .25s,border-color .25s;
}
.work__meta--link:hover{color:var(--amber);border-bottom-color:var(--amber)}
/* Четыре части идут колонками на широком экране и лесенкой на узком:
   порядок «задача → что сделали → срок → результат» держится в обоих. */
.work dl{
  margin-top:1.5rem;display:grid;gap:1.4rem 2.4rem;
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
}
.work dt{
  font-family:var(--f-display);font-weight:300;font-size:.6rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--mut);margin-bottom:.6rem;
}
/* Приглушённый, как весь основной текст на сайте: в услугах, в процессе
   и в вопросах он набран --mut. Здесь стоял яркий --ink, и разворот светился
   ярче остальных — владелец увидел это раньше меня. */
.work dd{margin:0;font-weight:300;font-size:.98rem;line-height:1.6;color:var(--mut)}
.work dd b{font-weight:700;color:var(--amber);font-family:var(--f-display);
  font-size:.94em;letter-spacing:.02em}
/* «Что сделали» — три пункта, а не абзац. Колонку в карточке работы читают
   по диагонали: три строки заказчик увидит, сплошной текст пролистает.
   Точка-маркер та же, что на полосах услуг, — список на сайте один. */
.work__did{list-style:none;display:grid;gap:.55rem;margin:0}
.work__did li{position:relative;padding-left:1.1rem}
.work__did li::before{
  content:"";position:absolute;left:.1rem;top:.62em;
  width:.28rem;height:.28rem;border-radius:50%;background:var(--amber);
}
/* Строка-выход из разворота: «все работы», «остальные вопросы». Набрана
   тем же кеглем, что колонтитул, и стоит отдельной строкой под разворотом —
   это не пункт содержания, а дверь в соседнюю комнату. */
.more{
  margin-top:clamp(2rem,4.5vh,2.8rem);padding-top:1.3rem;
  border-top:1px solid var(--hair-soft);
  font-family:var(--f-display);font-weight:300;font-size:.68rem;
  letter-spacing:.24em;text-transform:uppercase;
}
.more a{color:var(--mut);text-decoration:none;transition:color .3s}
.more a:hover{color:var(--amber)}

/* Порядок работы одной строкой. Стоит на главной, в «Методе» и в «Неудобных
   вопросах» слово в слово: заказчик, читающий сайт по диагонали, ловит
   расхождения быстрее, чем мы их замечаем, — а расхождения здесь и были.
   Набран колонтитульным кеглем: это не абзац, а формула, её сканируют. */
.flow{
  margin-top:clamp(2rem,4.5vh,2.8rem);padding-top:1.3rem;
  border-top:1px solid var(--hair-soft);max-width:52rem;
  font-family:var(--f-display);font-weight:300;font-size:.78rem;
  line-height:2.2;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);
}
.flow b{color:var(--amber);font-weight:500;letter-spacing:0}
/* Оговорка про крупные проекты. Без неё формула врёт на двух работах из шести. */
.flow__note{
  margin-top:1rem;max-width:44rem;
  font-weight:300;font-size:.9rem;line-height:1.65;color:var(--dim);
}

/* Заголовок работы — ссылка на её полосу. Подчёркивания нет: в развороте
   работ заголовки набраны крупно, и линия под ними шумела бы. Вместо неё —
   янтарь при наведении, как у остальных ссылок сайта. */
.work__link{text-decoration:none;transition:color .25s}
.work__link:hover{color:var(--amber)}

/* Строка о внутренних проектах под списком работ. Набрана мельче карточек
   и без колонок: это сноска к развороту, а не ещё одна работа. */
.works__inner{
  margin-top:clamp(1.8rem,4vh,2.6rem);padding-top:1.3rem;
  border-top:1px solid var(--hair-soft);max-width:38rem;
  font-weight:300;font-size:.95rem;line-height:1.7;color:var(--mut);
}
.works__inner a{
  color:var(--amber);text-decoration:none;
  border-bottom:1px solid rgba(233,161,59,.35);transition:border-color .25s;
}
.works__inner a:hover{border-bottom-color:var(--amber)}

/* ============================== МАНИФЕСТ ============================== */
.manifest{
  min-height:100vh;display:flex;align-items:center;
  background:var(--bg);position:relative;overflow:hidden;
  padding:clamp(5rem,10vh,8rem) 0;
}
.manifest blockquote{position:relative;max-width:64rem}
.manifest blockquote::before{
  content:"«";position:absolute;top:-11rem;left:-1rem;
  font-family:var(--f-serif);font-style:italic;font-size:16rem;line-height:1;
  color:rgba(233,161,59,.14);pointer-events:none;
}
.manifest blockquote p{
  font-family:var(--f-serif);font-style:italic;font-weight:300;
  font-size:clamp(1.9rem,4.6vw,4.1rem);line-height:1.28;
}
.manifest blockquote p b{font-style:italic;font-weight:400;color:var(--amber)}
.manifest footer{
  margin-top:3rem;font-family:var(--f-display);font-weight:300;
  font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--mut);
}

/* ============================== CTA-ПОДВАЛ ============================== */
.cta{
  background:var(--bg-deep);
  padding:clamp(5rem,12vh,9rem) 0 clamp(4rem,9vh,6.5rem);
}
.cta h2{
  font-family:var(--f-display);font-weight:900;text-transform:uppercase;
  /* нулевой трекинг: при отрицательном Ж слипается с соседями;
     интерлиньяж 1.14 — чтобы «крышечка» Й не задевала строку выше */
  font-size:clamp(3rem,9vw,9rem);line-height:1.28;letter-spacing:0;
  background:var(--grad-display);
  -webkit-background-clip:text;background-clip:text;color:var(--amber);
}
/* Последний разворот собран по центру: здесь читателю нечего листать дальше,
   и колонка по центру держит взгляд на форме, а не уводит к левому краю.
   Ширина обёртки та же, что у разделов выше. */
.cta h2{text-align:center}
.cta .lede{
  margin:2.2rem auto 0;max-width:34rem;font-style:italic;font-weight:300;
  color:var(--mut);font-size:clamp(1.05rem,1.4vw,1.25rem);text-align:center;
}
/* Довод про деньги стоит последним перед формой и набран чуть ярче остальной
   подводки: это последнее, что человек читает до того, как решить. */
.cta .lede--money{
  margin-top:1rem;font-style:normal;font-size:clamp(.98rem,1.25vw,1.12rem);
  color:var(--ink);max-width:32rem;
}
/* ---------- форма запроса ---------- */
/* Сама форма — колонка по центру. Поля внутри остаются прижатыми влево:
   подпись над полем читается с левого края, центрировать её значит
   заставлять глаз искать начало каждой строки заново. */
.request{margin:clamp(2.8rem,7vh,4.2rem) auto 0;max-width:46rem;text-align:left}
.request__pair{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
@media (max-width:640px){ .request__pair{grid-template-columns:1fr} }

.f{margin-top:1.5rem}
.request__pair .f{margin-top:0}
.f > label{
  display:block;font-family:var(--f-display);font-weight:500;
  font-size:.82rem;letter-spacing:.03em;color:var(--ink);
}
/* пометка необязательности стоит при вопросе: в placeholder её не спрятать,
   а отдельной строкой она весит больше самого поля */
.f > label i{
  font-style:normal;font-weight:300;font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);margin-left:.6rem;
}
/* Селектор перечисляет типы поимённо: по одному .request input под правило
   попал бы и чекбокс согласия, и ловушка для ботов. Тип url добавился вместе
   с полем «ссылка на текущий сайт» — без него поле рисовалось узкой коробкой
   не по сетке, а такие мелочи на этом сайте и есть работа. */
.request input[type=text],.request input[type=url],.request textarea,.request select{
  width:100%;margin-top:.55rem;
  background:var(--panel);color:var(--ink);
  border:1px solid var(--hair);border-radius:4px;
  padding:.78rem .9rem;
  font-family:var(--f-serif);font-size:1rem;line-height:1.5;
  transition:border-color .25s,background .25s;
}
.request textarea{min-height:5.2rem;resize:vertical}
.request select{
  font-family:var(--f-display);font-weight:300;font-size:.92rem;
  appearance:none;cursor:pointer;
}
.f--when{max-width:20rem}

/* ---------- тема разговора ----------
   Три варианта, набранные полосками, а не списком: выбор виден целиком,
   а не после нажатия. Сам кружок радиокнопки уведён с глаз, но не выключен —
   он принимает фокус, читается скринридером и переключается стрелками.
   Поэтому обводку фокуса приходится рисовать на подписи: у невидимого
   кружка её никто не увидит, а поле это обязательное к пониманию. */
.f--topic{border:0;padding:0;margin-top:1.5rem}
.f--topic legend{
  padding:0;font-family:var(--f-display);font-weight:500;
  font-size:.82rem;letter-spacing:.03em;color:var(--ink);
}
.topic{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.7rem}
.topic__opt{cursor:pointer}
.topic__opt input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.topic__opt span{
  display:inline-block;padding:.55em 1.15em;
  border:1px solid var(--hair);border-radius:999px;
  font-family:var(--f-display);font-weight:300;font-size:.82rem;
  letter-spacing:.08em;color:var(--mut);
  transition:border-color .25s,color .25s,background .25s;
}
.topic__opt:hover span{border-color:rgba(237,235,230,.24);color:var(--ink)}
.topic__opt input:checked + span{
  border-color:var(--amber);color:var(--amber);background:rgba(233,161,59,.1);
}
.topic__opt input:focus-visible + span{outline:2px solid var(--amber);outline-offset:3px}
.request input:hover,.request textarea:hover,.request select:hover{border-color:rgba(237,235,230,.24)}
/* Текстовым полям обводка не нужна: у них есть своя рамка, она и загорается
   янтарём. А вот чекбоксу согласия обводку снимать нельзя — рамку и фон
   нативный чекбокс игнорирует, и без обводки с клавиатуры не видно, где ты
   стоишь. На обязательном поле это не мелочь: без него заявку не отправить.
   Поэтому checkbox исключён и попадает под общее правило :focus-visible. */
.request input:not([type=checkbox]):focus,
.request textarea:focus,
.request select:focus{
  outline:none;border-color:var(--amber);background:#191920;
}
.request ::placeholder{color:#5C5A56}

/* поле, на которое ругнулись: рамка янтарём и строка под ним */
.f--bad input,.f--bad textarea{border-color:var(--amber)}
.f__bad{
  display:block;margin-top:.45rem;font-family:var(--f-display);font-weight:300;
  font-size:.78rem;letter-spacing:.02em;color:var(--amber);
}

/* ловушка для ботов: убрана с глаз, но не через display:none —
   часть ботов такие поля пропускает именно по нему */
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.consent{
  margin-top:1.9rem;padding:1.1rem 1.2rem;
  background:var(--bg);border:1px solid var(--hair-soft);border-radius:6px;
  display:flex;gap:.85rem;align-items:flex-start;
}
.consent input{margin-top:.3rem;width:1.05rem;height:1.05rem;accent-color:var(--amber);flex:none}
.consent label{font-size:.92rem;color:var(--mut);line-height:1.55}
.consent a{color:var(--amber);text-decoration:none;border-bottom:1px solid rgba(233,161,59,.4);
  transition:border-color .25s}
.consent a:hover{border-bottom-color:var(--amber)}
.consent--bad{border-color:var(--amber)}

.request__send{margin-top:1.8rem;display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;justify-content:center}
.btn{
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:.82rem;letter-spacing:.14em;
  background:var(--amber);color:#131316;border:1px solid var(--amber);
  border-radius:999px;padding:.95rem 2.1rem;cursor:pointer;
  transition:transform .2s var(--ease-out),background .25s,box-shadow .25s;
}
.btn:hover{background:#F2AE4E;box-shadow:0 10px 26px rgba(0,0,0,.45)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55;cursor:progress;box-shadow:none}
/* Второй канал рядом с кнопкой — обводкой, а не заливкой: он не должен
   спорить с «отправить», он должен быть для тех, кто форму не заполнит. */
.btn--ghost{
  display:inline-block;text-decoration:none;
  background:transparent;color:var(--amber);border-color:var(--hair);
}
.btn--ghost:hover{background:rgba(233,161,59,.12);border-color:var(--amber);color:var(--amber);box-shadow:none}
/* Почта — обычным регистром: адрес читают глазами и переписывают руками,
   капслок здесь только мешает. */
.request__alt{
  margin:1.1rem 0 0;text-align:center;
  font-family:var(--f-display);font-weight:300;font-size:.8rem;color:var(--mut);
}
.request__alt a{color:var(--amber);text-decoration:none;border-bottom:1px solid rgba(233,161,59,.35)}
.request__alt a:hover{border-bottom-color:var(--amber)}
.request__status{font-style:italic;font-size:.95rem;color:var(--mut);margin:0}
/* пустая строка статуса всё равно съедала отступ и сдвигала кнопку с центра */
.request__status:empty{display:none}
.request__status--bad{color:var(--amber);font-style:normal;font-size:.88rem}

/* принято: форма уступает место ответу, а не остаётся стоять пустой */
.request--sent{max-width:36rem}
.request--sent .thanks{border-left:1px solid var(--amber);padding-left:1.6rem}
.request--sent .thanks b{
  display:block;font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:.82rem;letter-spacing:.14em;color:var(--amber);margin-bottom:.7rem;
}
.request--sent .thanks p{font-style:italic;font-weight:300;color:var(--mut);font-size:1.05rem;margin:0}
/* Человек уже доверился — лучший момент дать второй канал. */
.request--sent .thanks .btn--ghost{margin-top:1.4rem}
/* ============================== ВНУТРЕННЯЯ ПОЛОСА ==============================
   Страница, у которой нет обложки: сразу шапка, крошки, колонтитул и заголовок.
   Разворотов здесь не бывает — разворот это две полосы главной, а внутренняя
   страница и есть одна полоса. Отсюда и колонтитул: слева рубрика, справа
   слово, которым эту полосу называют. */
.page{padding:calc(var(--head-h) + clamp(2.2rem,6vh,3.6rem)) 0 clamp(3rem,8vh,5rem)}
.page > .wrap > .folio{margin-bottom:clamp(1.6rem,4vh,2.4rem)}

/* Хлебные крошки. Стоят выше колонтитула и набраны тише него: колонтитул
   говорит, где ты в номере, а крошки — как ты сюда пришёл и куда вернуться. */
.crumbs{
  font-family:var(--f-display);font-weight:300;font-size:.62rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--dim);
  padding-bottom:clamp(1.4rem,3.5vh,2rem);
}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .7rem}
.crumbs li+li::before{content:"·";margin-right:.7rem;color:var(--hair)}
.crumbs a{color:var(--mut);text-decoration:none;transition:color .3s}
.crumbs a:hover{color:var(--amber)}
.crumbs [aria-current="page"]{color:var(--ink)}

.page h1{
  font-family:var(--f-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(2rem,5.4vw,4.4rem);line-height:1.14;letter-spacing:0;
  max-width:22ch;
  background:var(--grad-display);
  -webkit-background-clip:text;background-clip:text;color:var(--amber);
}
/* Первый абзац — прямой ответ: сколько стоит, сколько занимает, что входит.
   Набран крупнее основного текста и стоит сразу под заголовком: человек,
   пришедший из поиска, должен получить ответ, не листая. */
.page-lede{
  margin-top:clamp(1.6rem,4vh,2.4rem);max-width:46rem;
  font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.6;color:var(--ink);
}
.page-lede b{font-weight:400;color:var(--amber)}
.page-lede + .page-lede{margin-top:1.1rem;font-size:1.05rem;color:var(--mut)}
/* Строка-манифест на полосе метода. Набрана курсивом, как цитата редакции:
   это не описание услуги, а заявление, и звучать оно должно иначе, чем
   текст вокруг. Приехала с обложки главной, где стояла лишней строкой. */
.page-lede--manifest{font-style:italic;color:var(--ink)}

/* Текст полосы: заголовки, абзацы и списки одной системой, чтобы страницы
   услуг не расходились между собой по мере наполнения. */
.page-body{padding:clamp(2.5rem,7vh,4rem) 0 0}
.page-body h2{
  font-family:var(--f-serif);font-style:italic;font-weight:300;
  font-size:clamp(1.7rem,3.4vw,2.8rem);line-height:1.16;
  margin-top:clamp(2.6rem,7vh,4rem);
}
.page-body h2 b{font-family:var(--f-display);font-style:normal;font-weight:900;
  text-transform:uppercase;font-size:.92em;letter-spacing:0}
.page-body h3{
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1rem,1.7vw,1.2rem);letter-spacing:.02em;line-height:1.25;
  margin-top:clamp(1.8rem,4vh,2.4rem);
}
.page-body p{margin-top:1.1rem;max-width:44rem;color:var(--mut);font-weight:300}
.page-body p b{color:var(--ink);font-weight:500}
.page-body ul{list-style:none;margin-top:1.2rem;display:grid;gap:.7rem;max-width:44rem}
.page-body li{padding-left:1.3rem;position:relative;color:var(--mut);font-weight:300}
.page-body li::before{
  content:"";position:absolute;left:.2rem;top:.78em;
  width:.3rem;height:.3rem;border-radius:50%;background:var(--amber);
}
.page-body li b{color:var(--ink);font-weight:500}

/* ---------- полоса работы ----------
   Четыре вопроса, которые собственник задаёт вслух: задача, что сделали,
   срок, результат. На главной они набраны так же — полоса не переписывает
   разворот другими словами, она его продолжает. */
.facts{
  display:grid;gap:1.6rem 2.4rem;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  padding-top:clamp(1.6rem,4vh,2.4rem);border-top:1px solid var(--hair);
}
.facts dt{
  font-family:var(--f-display);font-weight:300;font-size:.6rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--mut);margin-bottom:.6rem;
}
.facts dd{margin:0;font-weight:300;font-size:.98rem;line-height:1.6;color:var(--mut)}
.facts dd b{font-weight:700;color:var(--amber);font-family:var(--f-display);
  font-size:.94em;letter-spacing:.02em}

/* Список работ на своей полосе: тот же набор, что в развороте главной. */
.works-list{list-style:none;display:grid;gap:0}
.works-list .work:first-child{border-top:1px solid var(--hair)}
/* Внутренние проекты студии на полосе «Работы». Карточкой работы они больше
   не набраны: заказчик пришёл смотреть чужие задачи, а не нашу кухню. Строка
   со ссылкой — ровно столько внимания, сколько они стоят. */
.inner-works a{
  color:var(--amber);text-decoration:none;
  border-bottom:1px solid rgba(233,161,59,.35);transition:border-color .25s;
}
.inner-works a:hover{border-bottom-color:var(--amber)}

/* Строка под разделом: приглашение, а не кнопка. Кнопка ждёт ниже, в форме. */
.page-note{
  margin-top:clamp(2rem,5vh,3rem);padding-top:1.4rem;
  border-top:1px solid var(--hair-soft);max-width:44rem;
  font-style:italic;font-weight:300;color:var(--mut);
}
.page-note a{color:var(--amber);text-decoration:none;border-bottom:1px solid rgba(233,161,59,.4)}
.page-note a:hover{border-bottom-color:var(--amber)}

/* ---------- читать дальше ----------
   Три-четыре двери в соседние комнаты, названные тем, что за ними лежит.
   Стоит перед формой: человек, дочитавший полосу, либо пишет, либо идёт
   читать дальше, и оба выхода должны быть рядом. */
.page-next{margin-top:clamp(2.6rem,7vh,4rem);padding-top:1.5rem;border-top:1px solid var(--hair)}
.page-next__cap{
  display:block;font-family:var(--f-display);font-weight:300;font-size:.62rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--dim);margin-bottom:1.1rem;
}
.page-next ul{list-style:none;display:flex;flex-wrap:wrap;gap:.8rem 2.2rem;margin-top:0}
/* Точки-маркеры здесь не нужны: это не перечисление, а ряд дверей.
   Правило снимает их у списка внутри текста полосы. */
.page-next li{padding-left:0}
.page-next li::before{content:none}
.page-next a{
  color:var(--mut);text-decoration:none;font-family:var(--f-display);
  font-weight:300;font-size:.82rem;letter-spacing:.06em;transition:color .25s;
}
.page-next a:hover{color:var(--amber)}

/* ---------- свод принципов ----------
   На обложке главной эти четыре подписи читают по одной, по мере того как
   сдувается чехол. Здесь они собраны подряд: полоса о методе — то место,
   где их читают сводом, а не по дороге. */
.principles{
  margin-top:clamp(1.8rem,4vh,2.6rem);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:0 clamp(2rem,5vw,4rem);
}
.principles article{padding:clamp(1.4rem,3vh,2rem) 0;border-top:1px solid var(--hair)}
.principles .mark{
  display:block;margin-bottom:.8rem;
  font-family:var(--f-display);font-weight:700;font-size:.7rem;
  letter-spacing:.18em;color:var(--amber);
}
.principles p{margin:0;font-style:italic;font-weight:300;font-size:.98rem;
  line-height:1.55;color:var(--mut);max-width:26rem}
.principles p b{font-style:normal;font-weight:500;color:var(--ink)}

/* Шаги работы на полосе метода: тот же набор, что в развороте «процесс»
   на главной, только без закреплённой колонки редактора — на полосе
   ей нечего держать. */
.steps{margin-top:clamp(1.4rem,3vh,2rem)}
.steps .step{padding:clamp(1.6rem,4vh,2.6rem) 0}
.steps .step:first-child{border-top:1px solid var(--hair-soft)}

/* Врезка без рамки: подводка к разделу, а не приглашение. */
.page-note--plain{border-top:0;padding-top:0;margin-top:1.2rem}

/* ---------- этапы работы ----------
   Не шаги метода (те на полосе «метод»), а календарь конкретной услуги:
   что происходит в первый день, что во второй. Набраны колонками, потому
   что читаются как срок, а не как инструкция. */
.stages{
  margin-top:clamp(1.6rem,4vh,2.4rem);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:0 clamp(2rem,5vw,4rem);
}
.stage{padding:clamp(1.4rem,3vh,2rem) 0;border-top:1px solid var(--hair)}
.stage__when{
  display:block;margin-bottom:.8rem;
  font-family:var(--f-display);font-weight:700;font-size:.68rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--amber);
}
.stage p{margin:0;font-weight:300;font-size:.96rem;line-height:1.55;color:var(--mut);max-width:24rem}

/* Граница услуги на полосе: та же врезка, что была на главной, только
   без верхней линейки — здесь её роль играет заголовок раздела. */
.edge--page{border-top:0;padding-top:0;margin-top:1.2rem}

/* Вопросы внутри полосы: тот же набор, что в развороте главной, только
   отступ сверху задаётся здесь, а не разворотом. */
.page-body .faq__grid{margin-top:clamp(1.6rem,4vh,2.4rem)}
.page-body .qa p{margin-top:.85rem}

/* ---------- знакомые истории ----------
   Три случая, с которыми приходят на поддержку, названы словами заказчика.
   Набраны колонками с линейкой сверху — как заметки на полях разворота,
   а не как карточки: карточек на этом сайте нет. */
.pains{
  margin-top:clamp(1.6rem,4vh,2.4rem);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:0 clamp(2rem,5vw,4rem);
}
.pain{padding:clamp(1.4rem,3vh,2rem) 0;border-top:1px solid var(--hair)}
.pain h3{
  margin:0 0 .8rem;font-family:var(--f-serif);font-style:italic;font-weight:300;
  font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.35;color:var(--ink);
  text-transform:none;letter-spacing:0;
}
.pain p{margin:0;font-weight:300;font-size:.96rem;line-height:1.6;color:var(--mut);max-width:26rem}
.pain a{color:var(--amber);text-decoration:none;border-bottom:1px solid rgba(233,161,59,.35)}
.pain a:hover{border-bottom-color:var(--amber)}

/* ---------- сроки реакции ----------
   Таблица, а не список: у строки три величины, и читают их по столбцам.
   На узком экране она уезжает вбок внутри своей обёртки — ломать её
   в лесенку значит потерять то, ради чего она таблица. */
.rates-wrap{margin-top:clamp(1.6rem,4vh,2.4rem);overflow-x:auto}
.rates{border-collapse:collapse;width:100%;min-width:34rem;text-align:left}
.rates th,
.rates td{
  padding:.95rem 1.2rem .95rem 0;border-bottom:1px solid var(--hair-soft);
  font-weight:300;font-size:.95rem;line-height:1.5;color:var(--mut);vertical-align:top;
}
.rates thead th{
  border-bottom:1px solid var(--hair);
  font-family:var(--f-display);font-weight:300;font-size:.62rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--dim);
}
.rates tbody th{color:var(--ink);font-weight:500;padding-right:2rem}

/* Подпись таблицы нужна скринридеру и не нужна глазу: заголовок раздела
   стоит прямо над ней и говорит то же самое. */
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- группы проверок ----------
   Шесть групп аудита. Номер, название, что именно смотрим. Набраны той же
   сеткой, что состав работы: это тоже перечень, только не о том, что сделаем,
   а о том, что проверим. */
.checks{
  margin-top:clamp(1.6rem,4vh,2.4rem);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));
  gap:0 clamp(2rem,5vw,4rem);
}
.check{padding:clamp(1.5rem,3.4vh,2.2rem) 0;border-top:1px solid var(--hair)}
.check__no{
  display:block;margin-bottom:.9rem;
  font-family:var(--f-display);font-weight:300;font-size:.66rem;
  letter-spacing:.3em;color:var(--amber);
}
.check h3{
  margin:0 0 .7rem;font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1rem,1.7vw,1.2rem);letter-spacing:.02em;line-height:1.2;
}
.check p{margin:0;font-weight:300;font-size:.96rem;line-height:1.6;color:var(--mut);max-width:26rem}
.check a{color:var(--amber);text-decoration:none;border-bottom:1px solid rgba(233,161,59,.35)}
.check a:hover{border-bottom-color:var(--amber)}

/* Шаги на полосе услуги: те же, что в развороте «процесс», но цифра тише —
   на полосе она не заголовок раздела, а порядковый номер в списке. */
.steps--page .step{grid-template-columns:auto 1fr;gap:clamp(1.2rem,2.5vw,2.2rem)}
.steps--page .digit{font-size:clamp(3rem,5vw,4.6rem)}
.steps--page .step h3{margin-top:.2rem}
.steps--page .step p a{color:var(--amber);text-decoration:none;border-bottom:1px solid rgba(233,161,59,.35)}
.steps--page .step p a:hover{border-bottom-color:var(--amber)}

/* ---------- контакты ----------
   Три способа связаться, набранные одинаково: подпись, сам адрес крупно,
   строка о том, чего от него ждать. Место под Telegram остаётся пустым,
   если ник не задан, — и тогда колонки просто две. */
.contacts{
  margin-top:clamp(1.6rem,4vh,2.4rem);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:0 clamp(2rem,5vw,4rem);
}
.contact{padding:clamp(1.4rem,3vh,2rem) 0;border-top:1px solid var(--hair)}
.contact__cap{
  display:block;margin-bottom:.9rem;
  font-family:var(--f-display);font-weight:300;font-size:.62rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--dim);
}
.contact p{margin:0}
.contact__value{
  font-family:var(--f-display);font-weight:500;font-size:1.05rem;letter-spacing:.02em;
  color:var(--amber);text-decoration:none;
  border-bottom:1px solid rgba(233,161,59,.35);transition:border-color .25s;
}
.contact__value:hover{border-bottom-color:var(--amber)}
.contact__note{margin-top:.8rem;font-weight:300;font-size:.92rem;line-height:1.55;color:var(--mut)}
/* Пустое место под кнопку Telegram не должно оставлять после себя колонку
   с подписью и пустотой: нет ника — нет и всей строки. */
.contact p:has(> [data-tg-slot]:empty){display:none}


/* ---------- полоса, которой нет ----------
   Оглавление на странице ошибки. Название раздела и строка о том, что за ним
   лежит: человек попал не туда, и односложные «главная / работы / цены»
   заставят его гадать второй раз. */
.notfound ul{list-style:none;display:grid;gap:0;margin:0;max-width:none}
/* Точки-маркеры, которыми набран текст полосы, здесь не нужны: это оглавление,
   а не перечисление внутри абзаца. */
.notfound li::before{content:none}
.notfound li{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.4rem;
  padding:clamp(1rem,2.5vh,1.5rem) 0 clamp(1rem,2.5vh,1.5rem);
  border-top:1px solid var(--hair);padding-left:0;
}
.notfound a{
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1rem,1.8vw,1.25rem);letter-spacing:.02em;
  color:var(--ink);text-decoration:none;transition:color .25s;min-width:14rem;
}
.notfound a:hover{color:var(--amber)}
.notfound span{font-weight:300;font-size:.96rem;color:var(--mut)}

/* ============================== ВЫХОДНЫЕ ДАННЫЕ ==============================
   Колофон журнала: кто издал, где, когда и как связаться. Стоит отдельным
   разделом после формы, а не внутри неё: форма на этой странице — последний
   разворот, а выходные данные к развороту не относятся, они относятся
   ко всему номеру. */
.imprint{
  background:var(--bg);border-top:1px solid var(--hair);
  padding:clamp(2.4rem,6vh,3.6rem) 0 clamp(2.6rem,7vh,4rem);
  font-family:var(--f-display);font-weight:300;font-size:.62rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--mut);
}
.imprint__top{display:flex;justify-content:space-between;gap:1rem 1.8rem;flex-wrap:wrap}
.imprint a{color:var(--mut);text-decoration:none;transition:color .3s}
.imprint a:hover{color:var(--amber)}
/* Почта и Telegram — единственные места в подвале, где капслок снят:
   адрес переписывают руками, и «STUDIO@» читается хуже оригинала. */
.imprint .mail,
.imprint__tg{text-transform:none;letter-spacing:.06em;color:var(--amber)}
/* Строка издателя. Пока в ней заглушки, она набрана как заглушка и есть:
   пунктир видно и на экране, и в исходнике — выложить такое случайно
   не выйдет. Заполнится — станет обычной строкой выходных данных. */
.imprint__legal{
  margin-top:1.5rem;padding-top:1.3rem;border-top:1px solid var(--hair-soft);
  letter-spacing:.16em;line-height:2;
}
/* Разделы полными названиями. Кегль тот же, а разрядка меньше: это уже
   не колонтитул, а список, и читать его придётся строкой за строкой. */
.imprint__map{
  margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;
  letter-spacing:.1em;
}
.imprint__map a{white-space:nowrap}
/* Пометка «скоро» у раздела, которого ещё нет. Набрана тише самой ссылки:
   это оговорка, а не часть названия. Уйдёт вместе с первой публикацией. */
.imprint__map i{font-style:normal;color:var(--dim);letter-spacing:.14em;font-size:.9em}

/* ============================== АДАПТИВ ============================== */
/* ---------- шапка сворачивается в «содержание» ----------
   Правила висят на классе js-nav, а не на общем js. Класс ставит одна строка
   в самом начале полосы, до первой отрисовки: раньше шапку складывал
   script.js, подключённый в конце, и браузер успевал нарисовать её
   с развёрнутым списком разделов, а потом сложить — вся полоса прыгала
   вверх на треть экрана. Замерено: CLS 0.35 на /ceny/ при задержке скрипта.

   Порог 1100, а не 768: пунктов в шапке стало девять, и на узком ноутбуке
   строка ломалась пополам, а кнопка разговора уезжала на вторую линию —
   шапка становилась выше того места, что под неё зарезервировано,
   и наезжала на текст полосы. Всё остальное, что различает телефон
   и настольный экран, осталось на прежнем пороге в 768: это правило
   про меню, а не про телефон. */
@media (max-width:1100px){
  .masthead__nav{gap:.75rem}
  /* Кнопка Telegram переехала из строки разделов в саму шапку: строка
     здесь уезжает за «содержание», и кнопка уезжала вместе с ней. Теперь
     она рядом с «содержанием» и видна всегда, а в самом оглавлении стоит
     отдельным пунктом — там её и ищут те, кто открыл меню. */
  .masthead__tg{display:inline-flex}
  .masthead__tg:empty{display:none}
  .js-nav .nav__list > li[data-tg-slot]{counter-increment:none}
  .js-nav .nav__list > li[data-tg-slot]:empty{display:none;border-bottom:0}
  .js-nav .nav__list > li[data-tg-slot] > a{
    display:block;padding:1.05rem 0;
    font-size:.86rem;letter-spacing:.14em;color:var(--amber);
  }
  .js-nav .nav__list > li[data-tg-slot] > a::before{content:none}

  /* ---------- содержание номера на узком экране ----------
     Меню уезжает за строку «содержание» и раскрывается на весь экран
     оглавлением журнала: номер полосы, название раздела, под ним подпункты.
     Всё это появляется только при живом скрипте — без него список разделов
     остаётся в шапке, как и был. */
  .js-nav .burger{display:inline-flex}
  /* Пока скрипт не снял атрибут hidden, кнопки нет: класс js-nav ставится
     разметкой в самом начале полосы, а обработчик приезжает со script.js.
     Между этими двумя моментами кнопка была бы мёртвой. */
  .js-nav .burger[hidden]{display:none}
  .js-nav .masthead__nav{
    position:fixed;left:0;right:0;top:var(--head-h);bottom:0;z-index:29;
    display:none;background:var(--bg);
    padding:clamp(1.6rem,5vh,2.6rem) clamp(1.25rem,5vw,2rem) 3rem;
    overflow-y:auto;
  }
  .js-nav .masthead__nav.is-open{display:block}
  .js-nav .nav__title{
    display:block;font-size:.62rem;letter-spacing:.3em;color:var(--mut);
    padding-bottom:1rem;border-bottom:1px solid var(--hair);margin-bottom:1.2rem;
  }
  .js-nav .nav__list{
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:0;counter-reset:nav;
  }
  .js-nav .nav__list > li{counter-increment:nav;border-bottom:1px solid var(--hair-soft)}
  .js-nav .nav__list > li > a,
  .js-nav .nav__head{
    display:block;width:100%;text-align:left;padding:1.05rem 0;
    font-size:.86rem;letter-spacing:.14em;color:var(--ink);
  }
  /* Номер полосы у каждого раздела: то же, чем в журнале размечено
     оглавление, и то же, чем размечены развороты этого сайта. */
  .js-nav .nav__list > li > a::before,
  .js-nav .nav__head::before{
    content:counter(nav,decimal-leading-zero);
    margin-right:.9rem;color:var(--amber);font-size:.72rem;letter-spacing:.1em;
  }
  .js-nav .nav__head::after{float:right}
  .js-nav .nav__sub{
    position:static;transform:none;min-width:0;
    background:none;border:0;box-shadow:none;border-radius:0;
    margin:0 0 1.1rem;padding-left:2.7rem;font-size:.95rem;
  }
  /* Кнопка разговора номера полосы не получает: она не раздел номера,
     а выход из него. Селекторы длиннее соседних намеренно — иначе правило
     о номерах, у которого вес больше, перебивает это. */
  .js-nav .nav__list > li.nav__cta{counter-increment:none;border-bottom:0;padding-top:1.6rem}
  .js-nav .nav__list > li.nav__cta > a{display:inline-block;padding:.6em 1.4em;color:var(--amber)}
  .js-nav .nav__list > li.nav__cta > a::before{content:none}
  /* Страница под раскрытым содержанием не должна ехать: человек листает
     оглавление, а уезжает текст под ним. */
  body.nav-open{overflow:hidden}
}

@media (max-width:768px){
  :root{--head-h:3.6rem}
  .masthead{font-size:.58rem;letter-spacing:.16em;gap:.8rem}
  /* Полоса раздела на телефоне поджимается: она подсказка, а не содержание,
     и не должна съедать шестую часть экрана. */
  .running-head .wrap{padding-top:.5rem;padding-bottom:.6rem}
  .running-head__name{margin-top:.25rem}

  .offer h1 .l2{margin-left:1.5rem}
  .offer h1 .l3{margin-left:3rem}
  .svc .row{grid-template-columns:auto 1fr;row-gap:.6rem}
  .svc .price-col{grid-column:2;justify-self:start;text-align:left;
    flex-direction:row;align-items:baseline;gap:.9rem}
  .svc .name .leader{display:none}
  .process .cols{grid-template-columns:1fr}
  .process .sticky{position:static}
  .step .digit{font-size:4rem}
  .contacts li{grid-template-columns:1fr;gap:.5rem}
  .manifest::before{font-size:18rem;top:-2rem}
}

/* ============================== REDUCED MOTION / NO-JS ==============================
   Обложка главной со своими шторами и кадром живёт в index.html, там же
   и её правила для этого режима. Здесь — только то, что есть на всех
   страницах. */
/* ============================== ПОЛОСА СВЯЗИ ==============================
   Две кнопки, прижатые к низу экрана телефона. На широком экране их нет
   и быть не должно: там призыв стоит в шапке и виден постоянно.

   Полоса не занимает места в потоке и не двигает вёрстку: она всплывает
   поверх и уходит тем же движением. Отступа снизу у страницы поэтому нет —
   иначе каждое появление полосы сдвигало бы содержимое, а сдвиг макета
   на этом сайте считается дефектом. Уходит она раньше, чем читатель
   доберётся до подвала: как только форма на экране, полосы нет. */
.dock{display:none}
@media (max-width:768px){
  .dock{
    position:fixed;left:0;right:0;bottom:0;z-index:28;
    display:grid;grid-template-columns:1fr 1fr;gap:.6rem;
    padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom,0px));
    background:rgba(19,19,22,.94);border-top:1px solid var(--hair);
    transform:translateY(110%);transition:transform .3s var(--ease-out);
  }
  .dock[hidden]{display:none}
  .dock.is-on{transform:none}
  /* Одна кнопка вместо двух — когда ник в телеграме не задан и слот пуст. */
  .dock:has(> [data-tg-slot]:empty){grid-template-columns:1fr}
  .dock > [data-tg-slot]:empty{display:none}
  .dock__btn{
    display:flex;align-items:center;justify-content:center;text-align:center;
    padding:.85em .6em;border-radius:999px;text-decoration:none;
    font-family:var(--f-display);font-weight:700;font-size:.62rem;
    letter-spacing:.14em;text-transform:uppercase;line-height:1.2;
  }
  .dock__btn--tg{border:1px solid rgba(233,161,59,.55);color:var(--amber)}
  .dock__btn--cta{background:var(--amber);color:#131316}
}
@media (prefers-reduced-motion:reduce){
  .dock{transition:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ticker__track{transform:none}
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  .js .split-ready span{opacity:1;transform:none;transition:none}
}

/* Градиент по буквам держится на background-clip:text. Если браузер его не умеет,
   color:transparent превратил бы заголовки в невидимые — поэтому прозрачность
   включаем только при поддержке, иначе остаётся сплошной янтарь.
   Обложка главной (.cover-mark .no) стоит в таком же правиле в index.html. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .analogy__lead,
  .offer h1 .l3 i,
  .page h1,
  .step .digit,
  .cta h2{ color:transparent; }
}
