/* ЕКР · вёрстка макета. Токены — ekr-ds.css, здесь только раскладка и типографика. */

/* Тёмные секции: тема переключается на самой секции, а не на html. */
.sec--dark{
  --bg:#1A1A1C; --bg2:#212125; --surf:#26262A; --surf2:#2E2E34; --plate:#26262A;
  --ink:#F3F2EE; --ink2:#DCC6B5; --ink3:#B8AFA3;
  --line:#26262A; --line2:#3A3A42; --acc-cold:#5BAAB0; --field-line:#857D74;
  background:var(--bg); color:var(--ink);
}

*{box-sizing:border-box}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 17px/1.5 'Mulish',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,h5{margin:0;font-weight:600;letter-spacing:-.01em}
p{margin:0}
:focus-visible{outline:2px solid var(--acc-cold);outline-offset:3px}

.wrap{width:min(1248px,100% - 48px);margin-inline:auto}

/* ── типографика ─────────────────────────────────────────────── */
.display{font-size:64px;line-height:1.05;letter-spacing:-.015em;max-width:1036px}
h2{font-size:44px;line-height:1.15}
.h3,h3{font-size:24px;line-height:1.25}
.lead{font-size:20px;line-height:1.5;color:var(--ink2)}
.lead--hero{font-size:30px;line-height:1.2;color:var(--ink)}
.lead--sm{font-size:17px}
.note{font-size:15px;line-height:1.45;color:var(--ink3)}
.hint{font-size:13px;line-height:1.4;color:var(--ink3)}
.eyebrow,.kicker{font:500 12px/1.3 'Mulish',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--acc-cold)}
.kicker{color:var(--ink3)}
.link{font:600 16px/1.4 'Mulish',sans-serif;color:var(--acc-cold);text-decoration:none}
.link:hover{text-decoration:underline}

/* ── кнопки ──────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:16px 32px;border:0;border-radius:var(--r2,8px);
  font:600 16px/1.4 'Mulish',sans-serif;text-decoration:none;cursor:pointer;
  transition:background .16s cubic-bezier(.23,1,.32,1),border-color .16s;
}
.btn--acc{background:var(--acc);color:var(--on-acc)}
.btn--acc:hover{background:var(--acc-fill-hover,#DC5C10)}
.btn--ghost{background:none;color:var(--ink);border:1px solid currentColor;padding:10px 24px}
.btn--ghost:hover{border-color:var(--acc-cold);color:var(--acc-cold)}
.btn--wide{width:100%}


/* ── 1 · первый экран ────────────────────────────────────────── */
/* Первый экран занимает окно целиком: шапка 96 + содержимое.
   svh — чтобы на мобильных панель браузера не резала низ. */
.s1{display:flex;flex-direction:column;padding-top:32px;
  height:100vh;height:100svh;min-height:640px}
/* Лок-ап с дескриптором открывает страницу и дальше не едет: он статический. */
.opener{display:inline-block;width:max-content;border-radius:var(--r2,8px)}
.opener img{display:block;height:64px;width:auto}
.s1 .display{margin-top:64px}
.s1__band{display:grid;grid-template-columns:minmax(0,724fr) 8px minmax(0,708fr);
  margin-top:48px;flex:1 1 auto;min-height:280px}
.s1__plate{display:flex;align-items:center}
.s1__plate-in{width:min(506px,100%);margin-left:max(24px,calc((100vw - 1248px) / 2))}
.s1__photo{height:100%;width:100%;object-fit:cover}
/* Полоса-призыв во всю ширину под плитой — позиция из макета «Финал · доводка». */
/* Отбивка над кнопкой — решение владельца 2026-09-11: 16, а не шов (8). */
.s1__cta{margin-top:16px;display:flex;align-items:center;justify-content:center;height:80px;
  background:var(--acc);color:var(--on-acc);text-decoration:none;
  font:600 20px/1.4 'Mulish',sans-serif;letter-spacing:-.01em;
  transition:background .16s cubic-bezier(.23,1,.32,1)}
.s1__cta:hover{background:var(--acc-fill-hover,#DC5C10)}

/* ── 2 · какая у вас задача ──────────────────────────────────── */
.s2{padding:128px 0}
.reg{display:grid;grid-template-columns:224px minmax(0,1fr) minmax(0,1fr);gap:32px;
  padding:32px 0;border-top:1px solid var(--line2)}
.s2 .reg:first-of-type{border-top:0}
.reg__k{font-size:15px;color:var(--ink3)}
.reg p + p{margin-top:16px}
.reg--heads{padding-top:64px;border-top:0}
.reg--act{align-items:center}
.route{margin-top:24px}
.ph{display:flex;align-items:flex-end;padding:16px;background:var(--surf2,#2E2E34);border-radius:var(--r2,8px);
  font:500 12px/1.3 'Mulish',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.ph--wide{height:192px}
img.ph{padding:0;object-fit:cover;width:100%}
.s2__price{background:#232327;margin:0 0 0;padding:0}
.s2__price .reg{border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.tail{margin-top:64px;max-width:832px;color:var(--ink2)}

/* ── 3 · единое окно ─────────────────────────────────────────── */
.s3{padding:128px 0}
.s3 .lead--hero{margin-top:32px}
.s3 .lead:not(.lead--hero){margin-top:24px;max-width:1248px}
.s3 .h3{margin-top:96px}
.s3 .lead--sm{margin-top:16px;max-width:1000px}
.stages{list-style:none;margin:48px 0 0;padding:0}
.stages li{display:grid;grid-template-columns:140px 340px minmax(0,1fr);gap:0;
  padding:24px 0 24px 40px;border-top:1px solid var(--line2)}
.stages li:last-child{border-bottom:1px solid var(--line2)}
.stages__n{color:var(--ink3);font-size:15px}
.stages__t{font-size:20px;padding-right:24px}
.stages__w{color:var(--ink2);font-size:17px}
.kicker{display:block}
.s3 .kicker{margin-top:96px}
.rules{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:32px}
.rules img{height:200px;width:100%;object-fit:cover;border-radius:var(--r2,8px)}
.rules h4{margin-top:24px;font-size:20px}
.rules p{margin-top:8px;font-size:15px;line-height:1.45;color:var(--ink2)}

/* ── 4 · компетенции ─────────────────────────────────────────── */
.s4{padding:128px 0}
.s4 h2{margin-top:8px}
.s4 .lead{margin-top:32px;max-width:900px}
.comp{margin-top:48px}
.comp details{border-top:1px solid var(--line)}
.comp details:last-child{border-bottom:1px solid var(--line)}
.comp summary{display:grid;grid-template-columns:72px minmax(0,1fr) auto 40px;align-items:center;gap:0;
  padding:24px 0;cursor:pointer;list-style:none}
.comp summary::-webkit-details-marker{display:none}
.comp summary:hover .comp__t{color:var(--acc-cold)}
.comp__n{font-size:15px;color:var(--ink3)}
.comp__t{font-size:24px;line-height:1.25;font-weight:600;transition:color .16s}
.comp__c{font-size:15px;color:var(--ink3);white-space:nowrap}
.comp summary::after{content:'+';justify-self:end;font-size:24px;color:var(--ink3);line-height:1}
.comp details[open] summary::after{content:'−'}
.comp__todo{padding:0 0 32px 72px;font-size:15px;color:var(--ink3)}
.comp__body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 88px;padding:0 0 40px 72px}
.comp__grp-t{font:500 12px/1.3 'Mulish',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-bottom:24px}
.svc{padding:16px 0;border-top:1px solid var(--line)}
.svc:first-of-type{border-top:0}
.svc h5{font-size:17px;font-weight:600}
.svc p{margin-top:6px;font-size:15px;line-height:1.45;color:var(--ink2);max-width:56ch}
.comp__all{grid-column:1 / -1;margin-top:24px}
.comp__body--plain{display:block}
.comp__intro{max-width:900px;font-size:17px;line-height:1.5;color:var(--ink2)}
.comp__body .comp__intro{grid-column:1 / -1;margin-bottom:32px}
.comp__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 88px;margin-top:24px}
.comp__list{list-style:none;margin:0;padding:0}
.comp__list li{padding:12px 0;font-size:17px;border-top:1px solid var(--line)}
.comp__list li:first-child{border-top:0}

/* ── 5 · кейсы ───────────────────────────────────────────────── */
.s5{padding:128px 0}
.s5__grid{display:grid;grid-template-columns:384px minmax(0,768fr);gap:96px}
.s5__aside{position:sticky;top:120px;align-self:start}
.s5__aside .note{margin-top:24px}
.s5__map{position:relative;margin-top:48px;width:384px;--map-bg:var(--bg);--map-on:var(--acc-cold)}
.s5__map.is-failed{padding:24px;font-size:13px;color:var(--ink3);border:1px dashed var(--line2)}
.map{display:block;width:100%;height:auto;border-radius:var(--r2,8px);background:var(--map-bg);overflow:visible}
.map__grid line{stroke:#fff;stroke-opacity:.07;stroke-width:.5}
.map__rest path{fill:var(--surf);stroke:var(--line2);stroke-width:.5}
.map__c{cursor:pointer;outline:0}
.map__c path{fill:var(--map-on);stroke:var(--map-on);stroke-width:1.25;stroke-linejoin:round;
  transition:fill .16s cubic-bezier(.23,1,.32,1),stroke .16s}
.map__c--hatch path{fill:url(#mapHatch)}
.map__c.is-on path,.map__c:hover path{fill:var(--acc);stroke:var(--acc)}
.map__c:focus-visible path{stroke:var(--ink);stroke-width:2}
.map__read{min-height:52px;margin-top:16px;font-size:13px;line-height:1.35}
.map__read b{display:block;font-weight:600;color:var(--ink)}
.map__read i{display:block;margin:2px 0 8px;font-style:normal;color:var(--ink3)}
.map__read i:last-child{margin-bottom:0}
.legend{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:8px;font-size:13px;color:var(--ink3)}
.legend li{display:flex;align-items:center;gap:8px}
.legend__k{width:12px;height:12px;flex:none;background:var(--line2)}
.legend__k--fill{background:var(--acc-cold)}
.legend__k--hatch{background:repeating-linear-gradient(45deg,var(--acc-cold) 0 2px,transparent 2px 5px)}
.s5__aside .btn{margin-top:32px}
.s5__aside .hint{margin-top:24px}
.s5__list article{padding:32px 0;border-top:1px solid var(--line2);
  transition:background .16s cubic-bezier(.23,1,.32,1);cursor:default}
.s5__list article.is-on{background:var(--surf);box-shadow:-24px 0 0 var(--surf),24px 0 0 var(--surf)}
.s5__list article:first-child{border-top:0;padding-top:0}
.case__c{font-size:15px;color:var(--ink2)}
.s5__list h3{margin-top:8px}
.case__m{margin-top:8px;font-size:15px;color:var(--ink3)}
.case--todo h3,.case--todo .case__m,.case--todo .case__c{color:#9E968D}
.case__rest{margin-top:24px;font-size:15px;color:var(--ink2)}
/* Заголовок группы в списке проектов. Появился, когда карточек стало двадцать
   четыре вместо семи: плоским списком такой объём не читается. Липкий — как в
   каталоге выше, чтобы при прокрутке было видно, в какой группе находишься. */
.case__g{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;
  align-items:baseline;gap:16px;padding:16px 0;background:var(--bg2);
  font:600 13px/1.2 'Mulish',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.case__g span{font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink3);
  font-variant-numeric:tabular-nums}
/* Первая карточка группы не должна нести линию: её роль играет сам заголовок. */
.case__g + article{border-top:0;padding-top:8px}

/* ── 6 · продукты ────────────────────────────────────────────── */
.s6{padding:128px 0}
.s6 .lead{margin-top:24px;max-width:820px}
.cat{display:grid;grid-template-columns:288px minmax(0,1fr);gap:36px;margin-top:64px}
.cat__rail{display:grid;align-content:start;gap:2px;position:sticky;top:120px}
.cat__rail a{display:flex;justify-content:space-between;gap:16px;padding:12px 16px;
  font-size:15px;text-decoration:none;border-radius:var(--r3,6px);color:var(--ink2)}
.cat__rail a span{color:var(--ink3);font-variant-numeric:tabular-nums}
.cat__rail a:hover{background:var(--bg2)}
.cat__rail a.is-active{background:var(--bg2);color:var(--ink);font-weight:600}
.cat__head{display:grid;grid-template-columns:minmax(0,1fr) 204px 196px;gap:0;
  padding:0 24px 12px;font:500 13px/1.4 'Mulish',sans-serif;color:var(--ink3);border-bottom:1px solid var(--line)}
.cat__head span:last-child{text-align:right}
.cat__scroll{height:720px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.cat__g{position:sticky;top:0;z-index:1;background:var(--bg);
  padding:20px 24px 8px;font:500 12px/1.3 'Mulish',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.row{display:grid;grid-template-columns:minmax(0,1fr) 204px 196px;align-items:start;gap:0;
  padding:16px 24px;text-decoration:none;border-top:1px solid var(--line);transition:background .16s}
.row:hover{background:var(--surf)}
.row__n{font-size:17px;font-weight:600}
.row__n em{display:block;margin-top:6px;font:400 15px/1.45 'Mulish',sans-serif;color:var(--ink2);max-width:52ch}
.row__t{font-size:15px;color:var(--ink2);padding-top:2px}
.row__p{font-size:17px;text-align:right;font-variant-numeric:tabular-nums;padding-top:1px}
.cat__note{margin-top:24px;padding-left:24px;max-width:920px}

/* ── 7 · экспертиза ──────────────────────────────────────────── */
.s7{padding:128px 0}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:48px}
.pcard{display:flex;flex-direction:column;min-height:400px;padding:48px;
  background:var(--surf);border:1px solid var(--line);border-radius:var(--r2,8px)}
.pcard__h{display:flex;justify-content:space-between;gap:24px;align-items:baseline}
.pcard__p{font-size:13px;text-align:right}
.pcard > p:not(.pcard__h){margin-top:24px;color:var(--ink2)}
.pcard footer{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  margin-top:auto;padding-top:24px;border-top:1px solid var(--line)}
.pcard__pr{display:block;font-size:20px}
.pcard__c{display:block;margin-top:4px;font-size:30px;line-height:1.2;font-weight:600}
.arrow{display:grid;place-items:center;width:48px;height:48px;flex:none;
  border:1px solid var(--acc-cold);border-radius:50%;color:var(--acc-cold);text-decoration:none;
  transition:background .16s,color .16s}
.arrow:hover{background:var(--acc-cold);color:var(--bg)}
.strip{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;
  margin-top:24px;padding:48px;background:var(--bg2);border-radius:var(--r2,8px)}
.strip p{margin-top:16px;max-width:720px;color:var(--ink2)}
.strip .link{white-space:nowrap}
.cta{display:flex;justify-content:space-between;align-items:center;gap:24px;
  margin-top:24px;padding:32px 48px;border-radius:var(--r2,8px)}
.cta__t{font-size:24px;font-weight:600}

/* ── 8 · контакт и подвал ────────────────────────────────────── */
.s8{background:#26262A;padding:128px 0 64px}
.s8__grid{display:grid;grid-template-columns:480px minmax(0,672fr);gap:96px;align-items:start}
.s8__left .lead{margin-top:24px}
.formats{list-style:none;margin:48px 0 0;padding:0}
.formats li{padding:16px 0;font-size:24px;color:var(--ink2);border-bottom:1px solid var(--line2)}
.formats li:first-child{border-top:1px solid var(--line2)}
.counter{margin-top:64px;font-size:15px;color:var(--ink3)}
.fcard{padding:64px;background:var(--surf2,#2E2E34);border-radius:var(--r,12px)}
.f{display:block;margin-bottom:32px}
.f span{display:block;font:500 13px/1.4 'Mulish',sans-serif;color:var(--ink2)}
.f input,.f textarea{
  display:block;width:100%;margin-top:8px;padding:0 0 12px;
  background:none;border:0;border-bottom:1px solid var(--field-line);border-radius:0;
  font:400 17px/1.6 'Mulish',sans-serif;color:var(--ink);
  transition:border-color .15s cubic-bezier(.23,1,.32,1);
}
.f textarea{resize:vertical;min-height:96px}
.f input:focus,.f textarea:focus{outline:0;border-bottom-color:var(--acc-cold);border-bottom-width:2px;padding-bottom:11px}
.consent{margin-top:24px;font-size:13px;line-height:1.4;color:var(--ink3)}
/* Ловушка для ботов. Не display:none: часть автозаполнителей такие поля
   пропускает, а сдвинутое за край — заполняет как обычное. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.f--check{display:flex;align-items:flex-start;gap:12px;margin-bottom:32px}
.f--check input{flex:0 0 auto;width:18px;height:18px;margin:2px 0 0;accent-color:var(--acc-cold)}
.f--check span{display:block;margin:0;font:400 13px/1.5 'Mulish',sans-serif;color:var(--ink3)}
.f--check a{color:var(--ink2)}
.f--check a:hover{color:var(--acc-cold)}
.foot{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;
  margin-top:64px;padding-top:48px;border-top:1px solid var(--line2)}
.foot__l img{height:20px;width:auto}
.descr{margin-top:12px;font-size:13px;color:var(--ink3)}
.foot__menu{display:flex;gap:24px;justify-content:flex-end}
.foot__menu a{font-size:17px;text-decoration:none}
.foot__menu a:hover{color:var(--acc-cold)}
.foot__c{margin-top:16px;text-align:right;font-size:13px;line-height:1.4;color:var(--ink3)}

/* ── сужение. Мобильная раскладка в макете не спроектирована;
      ниже — только защита от поломки. ─────────────────────────── */
@media (max-width:1180px){
  .s5__grid,.cat,.s8__grid{grid-template-columns:minmax(0,1fr);gap:48px}
  .s5__aside,.cat__rail{position:static}
  .s5__map{width:100%;max-width:520px}
  .cat__rail{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto}
  .rules{grid-template-columns:repeat(2,minmax(0,1fr))}
  .comp__body{grid-template-columns:minmax(0,1fr);gap:0}
}
@media (max-width:900px){
  .display{font-size:44px}
  h2{font-size:32px}
  .s1__band{grid-template-columns:minmax(0,1fr);height:auto}
  .s1__seam{display:none}
  .s1__plate-in{margin:48px 24px}
  .s1__photo{height:320px}
  .s1__cta{height:64px;font-size:17px}
  .opener img{height:48px}
  .reg,.reg--heads{grid-template-columns:minmax(0,1fr);gap:16px}
  .stages li{grid-template-columns:64px minmax(0,1fr);padding-left:0}
  .stages__w{grid-column:2}
  .pair,.rules{grid-template-columns:minmax(0,1fr)}
  .strip,.cta,.foot{flex-direction:column;align-items:flex-start}
  .foot__menu,.foot__c{justify-content:flex-start;text-align:left}
  .fcard{padding:32px}
  .row,.cat__head{grid-template-columns:minmax(0,1fr) 140px}
  .row__p,.cat__head span:last-child{grid-column:2;text-align:right}
}

/* ── Диалог заявки на услугу ─────────────────────────────────────────────────
   Нативный <dialog>: модальность, ловушка фокуса и закрытие по Esc достаются
   от браузера, а не пишутся руками.
   Фон светлый: диалог висит в корне документа, где токены разрешаются в светлую
   тему — как и у каталога, из которого он открывается. Тёмная форма внизу
   страницы выглядит иначе потому, что лежит внутри тёмной секции.
   margin:auto обязателен: браузер центрирует модальный диалог именно им, а
   глобальный сброс полей на странице его обнуляет — диалог уезжает к левому краю. */
.ord{
  width:min(560px, calc(100vw - 32px));
  margin:auto;
  padding:0;border:0;border-radius:var(--r,12px);
  background:var(--surf2);color:var(--ink);
}
.ord::backdrop{background:rgba(26,26,28,.72)}
.ord__in{padding:48px}
.ord__kicker{font:500 13px/1.4 'Mulish',sans-serif;color:var(--ink3);
  text-transform:uppercase;letter-spacing:.08em}
.ord__t{margin-top:12px;font:600 28px/1.2 'Mulish',sans-serif;letter-spacing:-.01em;color:var(--ink)}
.ord__meta{margin:8px 0 32px;font:400 15px/1.5 'Mulish',sans-serif;color:var(--ink2);
  font-variant-numeric:tabular-nums}
.ord__meta:empty{display:none;margin-bottom:32px}
.ord__act{display:flex;gap:12px;align-items:center;margin-top:8px}
.ord .consent{margin-top:16px}

@media (max-width:600px){
  .ord__in{padding:32px 24px}
  .ord__act{flex-wrap:wrap}
}

/* Виды работ внутри услуги компетенции. Приходят из БД (kinds) и заведены не у
   всех услуг — отсюда и отдельная строка, а не колонка: пустых ячеек не будет. */
.comp__list li em{display:block;margin-top:6px;font-style:normal;
  font-size:15px;line-height:1.5;color:var(--ink3)}