/* =========================================================
   МосКул — главная: 07 цифры, 08 поставки, 09 призыв, контакты и форма.
   В конце — планшет и телефон: отдельная компоновка, а не уменьшенный десктоп.
   ========================================================= */

/* ---------------- 07 цифры ---------------- */
.mk-num{min-height:calc(560*var(--u));padding-top:calc(118*var(--u));background:var(--mk-bg-2);border-block:1px solid var(--mk-line)}
.mk-num__row{display:grid;grid-template-columns:calc(301*var(--u)) calc(349*var(--u)) calc(350*var(--u)) 1fr}
.mk-num__it{min-height:calc(282*var(--u));padding-left:calc(78*var(--u));border-right:1px solid var(--mk-line-2)}
.mk-num__it:first-child{padding-left:0}
.mk-num__it:last-child{border-right:0}
.mk-num__v{display:block;font:500 calc(152*var(--u))/.9 var(--mk-f-head);letter-spacing:-.03em;color:var(--mk-ink);font-variant-numeric:tabular-nums}
.mk-num__l{margin-top:calc(38*var(--u));font-size:calc(29.5*var(--u));line-height:1.42;color:var(--mk-ink-2)}

/* ---------------- 08 поставки ---------------- */
.mk-b2b{padding:calc(92*var(--u)) 0 calc(110*var(--u))}
.mk-b2b__h{font-size:calc(75*var(--u));line-height:.8}
.mk-b2b .mk-head__sub{margin-top:calc(34*var(--u));max-width:calc(480*var(--u));font-size:calc(23*var(--u));line-height:1.35}
.mk-b2b__grid{display:grid;grid-template-columns:1.12fr .92fr 1.02fr .94fr;gap:calc(16*var(--u));margin-top:calc(46*var(--u))}
.mk-b2b__card{display:flex;flex-direction:column;min-height:calc(323*var(--u));background:var(--mk-bg-2);border:1px solid var(--mk-line)}
.mk-b2b__ph{height:calc(150*var(--u));overflow:hidden;margin:-1px -1px 0}
.mk-b2b__ph img{width:100%;height:100%;object-fit:cover;transition:scale .7s var(--mk-ease)}
@media (hover:hover){
  .mk-b2b__card:hover .mk-b2b__ph img{scale:1.05}
}
.mk-b2b__b{padding:calc(30*var(--u)) calc(20*var(--u)) calc(24*var(--u))}
.mk-b2b__t{font:600 calc(23*var(--u))/1.3 var(--mk-f-body);color:var(--mk-ink)}
.mk-b2b__d{margin-top:calc(18*var(--u));font-size:calc(18*var(--u));line-height:1.65;color:var(--mk-muted)}

/* ---------------- 09 призыв: единственный тёмный блок ---------------- */
.mk-final{position:relative;isolation:isolate;overflow:hidden;min-height:calc(581*var(--u));color:#fff;background:var(--mk-night)}
.mk-final__media{position:absolute;inset:0;z-index:-2}
.mk-final__media img{width:100%;height:100%;object-fit:cover;object-position:70% 50%;will-change:transform}
.mk-final::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,18,24,.9) 0,rgba(8,18,24,.55) 42%,rgba(8,18,24,.08) 100%)}
.mk-final__in{display:grid;grid-template-columns:1fr auto;align-items:end;gap:var(--mk-gap);padding-top:calc(52*var(--u));padding-bottom:calc(84*var(--u))}
.mk-final__h{font-size:calc(144*var(--u));line-height:.85;color:#fff}
.mk-final__p{margin-top:calc(46*var(--u));max-width:calc(560*var(--u));font-size:calc(26*var(--u));line-height:1.4;color:rgba(255,255,255,.9)}
.mk-final .mk-btn{margin-top:calc(46*var(--u));height:max(50px,calc(73*var(--u)));font-size:max(15px,calc(24*var(--u)));padding-inline:calc(48*var(--u)) calc(40*var(--u))}
.mk-final__tel{display:grid;grid-template-columns:auto 1fr;column-gap:calc(26*var(--u));align-items:center;margin-right:calc(90*var(--u));margin-bottom:calc(8*var(--u))}
.mk-final__ic{grid-row:span 3;width:calc(58*var(--u));height:calc(58*var(--u));min-width:44px;min-height:44px;display:grid;place-items:center;border-radius:8px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.mk-final__ic .mk-i{width:44%;height:44%}
.mk-final__tel a{font-size:max(18px,calc(27.5*var(--u)));line-height:1.3;color:#fff;transition:color .3s}
.mk-final__tel a:hover{color:#9CCBEA}
.mk-final__tel span{font-size:max(14px,calc(20*var(--u)));color:rgba(255,255,255,.72)}

/* ---------------- контакты и форма ---------------- */
.mk-ct{padding:calc(120*var(--u)) 0 calc(120*var(--u))}
.mk-ct__top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--mk-gap);align-items:start}
.mk-ct__info{grid-column:1 / span 5}
.mk-ct__h{font-size:calc(92*var(--u));line-height:.9}
.mk-ct__list{margin-top:calc(46*var(--u));border-bottom:1px solid var(--mk-line)}
.mk-ct__row{display:grid;grid-template-columns:calc(48*var(--u)) 1fr;column-gap:calc(18*var(--u));padding-block:calc(20*var(--u));border-top:1px solid var(--mk-line)}
.mk-ct__row .mk-i{width:max(20px,calc(24*var(--u)));height:max(20px,calc(24*var(--u)));margin-top:4px;color:var(--mk-blue);stroke-width:1.4}
.mk-ct__k{display:block;font-size:max(12px,calc(14*var(--u)));letter-spacing:.06em;text-transform:uppercase;color:var(--mk-muted)}
.mk-ct__v{display:block;margin-top:4px;font-size:max(16px,calc(22*var(--u)));line-height:1.4;color:var(--mk-ink)}
.mk-ct__v a{transition:color .3s}
.mk-ct__v a:hover{color:var(--mk-blue)}
.mk-ct__media{grid-column:7 / -1;position:relative;padding-bottom:calc(120*var(--u))}
.mk-ct__map{height:calc(430*var(--u));min-height:260px;background:var(--mk-line);overflow:hidden}
.mk-ct__map iframe{display:block;width:100%;height:100%;border:0;filter:grayscale(.85) contrast(1.02)}
.mk-ct__ph{position:absolute;right:calc(-1*var(--mk-pad) + 0px);bottom:0;width:calc(330*var(--u));min-width:200px;border:6px solid var(--mk-bg)}
.mk-ct__ph img{width:100%;aspect-ratio:4/3;object-fit:cover}
.mk-ct__form{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--mk-gap);margin-top:calc(110*var(--u));padding-top:calc(56*var(--u));border-top:1px solid var(--mk-line-2)}
.mk-ct__intro{grid-column:1 / span 4}
.mk-ct__intro h3{font:500 calc(56*var(--u))/.95 var(--mk-f-head);text-transform:uppercase;color:var(--mk-ink)}
.mk-ct__intro p{margin-top:calc(20*var(--u));max-width:30ch;font-size:max(15px,calc(19*var(--u)));line-height:1.6;color:var(--mk-muted)}
.mk-ct__form .mk-form{grid-column:6 / -1}
.mk-ct__route{margin-top:calc(28*var(--u))}
/* длинная почта не должна распирать узкий экран */
.mk-ct__row>div,.mk-final__in>div{min-width:0}
.mk-ct__v,.mk-ftr__col a,.mk-ftr__col span{overflow-wrap:anywhere}

/* без движения процесс не растягивается на несколько экранов */
@media (prefers-reduced-motion:reduce){
  .mk-pr{height:auto}
  .mk-pr__stick{position:relative;top:auto;height:calc(745*var(--u))}
}

/* ---------------- планшет ---------------- */
@media (max-width:1023px){
  .mk-head__sub,.mk-ed__p,.mk-ps__p,.mk-final__p{font-size:17px}
  .mk-kat__d,.mk-pr__d,.mk-b2b__d,.mk-hero__facts dd{font-size:14px}
  .mk-kat__n,.mk-num__l,.mk-rail__d{font-size:15px}
  .mk-pr__t,.mk-b2b__t{font-size:15px}
  .mk-hero__sub{font-size:14px}
  .mk-ps__note{font-size:15px}
  .mk-b2b__grid{grid-template-columns:1fr 1fr}
  .mk-ct__info{grid-column:1 / -1}
  .mk-ct__media{grid-column:1 / -1;margin-top:40px}
  .mk-ct__intro{grid-column:1 / -1}
  .mk-ct__form .mk-form{grid-column:1 / -1;margin-top:28px}
}

/* ---------------- телефон: своя компоновка ---------------- */
@media (max-width:767px){
  .mk-hero{min-height:0;padding-bottom:56px}
  .mk-hero__media{position:relative;inset:auto;order:2;height:auto;aspect-ratio:4/3;margin-top:32px;-webkit-mask-image:none;mask-image:none}
  .mk-hero__media img{scale:1}
  .mk-hero__wash{display:none}
  .mk-hero__body{order:1;padding-top:calc(var(--mk-hdr) + 28px)}
  .mk-hero__h{font-size:clamp(40px,12.4vw,58px)}
  .mk-hero__sub{margin-top:14px;font-size:12.5px;line-height:1.5}
  .mk-hero__cta{margin-top:22px}
  .mk-hero>.mk-wrap:nth-of-type(2){order:3}
  .mk-hero__facts{grid-template-columns:1fr;margin-top:8px;padding-bottom:0}
  .mk-hero__facts>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;min-height:0;padding:14px 0;border-right:0;border-bottom:1px solid var(--mk-line-2)}
  .mk-hero__facts dt,.mk-hero__facts>div:first-child dt{font-size:26px}
  .mk-hero__facts dt br,.mk-hero__facts dd br{display:none}
  .mk-hero__facts dd{margin:0;text-align:right}

  .mk-kat{padding:72px 0 64px}
  .mk-head{display:block}
  .mk-head .mk-link{margin:18px 0 0}
  .mk-kat__h,.mk-ct__h{font-size:52px}
  .mk-kat__track{gap:12px;margin-top:28px}
  .mk-kat__card{flex-basis:78vw;min-height:0}
  .mk-kat__ph{height:46vw}
  .mk-kat__body{padding:16px 16px 18px}
  .mk-kat__t{margin-top:14px;font-size:32px}
  .mk-kat__d{margin-top:10px}
  .mk-kat__go{margin-top:16px}
  .mk-foot{margin-top:22px}

  .mk-ed{min-height:0;display:flex;flex-direction:column;padding-bottom:64px}
  .mk-ed__media{position:relative;order:2;width:auto;aspect-ratio:1/1;margin-top:36px;-webkit-mask-image:none;mask-image:none}
  .mk-ed__media img{height:100%}
  .mk-ed__body{order:1;padding-top:72px}
  .mk-ed__h{font-size:clamp(38px,11.6vw,54px)}
  .mk-ed__p{margin-top:20px}
  .mk-ed .mk-btn{margin-top:24px}

  .mk-rail{padding:64px 0}
  .mk-rail__h{font-size:44px}
  .mk-rail__view{margin:28px calc(-1*var(--mk-pad)) 0}
  .mk-rail__row{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-inline:var(--mk-pad);gap:10px;translate:none!important}
  .mk-rail__row::-webkit-scrollbar{display:none}
  .mk-rail__item,.mk-rail__item.is-on{flex:0 0 76vw;height:104vw;max-height:480px;padding:0 20px 58px;scroll-snap-align:start}
  .mk-rail__item .mk-rail__t,.mk-rail__item.is-on .mk-rail__t{font-size:34px}
  .mk-rail__item .mk-rail__d{max-height:6em;opacity:1;margin-top:10px}
  .mk-rail__item .mk-rail__count{opacity:1;left:20px;bottom:22px}
  .mk-rail__item::before{background-color:rgba(8,18,24,.2)}
  .mk-rail__foot{display:none}

  .mk-ps{min-height:0;display:flex;flex-direction:column;padding-bottom:64px}
  .mk-ps__media{position:relative;order:2;left:auto;aspect-ratio:4/3;margin-top:32px;-webkit-mask-image:none;mask-image:none}
  .mk-ps__body{order:1;padding-top:72px}
  .mk-ps__h{font-size:clamp(44px,13vw,60px)}
  .mk-ps__p{margin-top:18px;max-width:none}
  .mk-ps .mk-btn{margin-top:24px;font-size:16px;height:52px;padding-inline:26px 22px}
  .mk-ps__note{margin-top:18px}

  .mk-pr{height:auto}
  .mk-pr__stick{position:relative;top:auto;height:auto;min-height:0;display:flex;flex-direction:column;padding-bottom:64px}
  .mk-pr__media{position:relative;order:2;left:auto;aspect-ratio:4/3;margin-top:28px;-webkit-mask-image:none;mask-image:none}
  .mk-pr__img{opacity:0;scale:1}
  .mk-pr__img[data-step="0"]{opacity:1}
  .mk-pr__stick>.mk-wrap{order:1}
  .mk-pr__body{width:auto;padding-top:72px}
  .mk-pr__h{font-size:44px;padding-bottom:22px}
  .mk-pr__steps{grid-template-columns:1fr}
  .mk-pr__step,.mk-pr__step:nth-child(3),.mk-pr__step:nth-child(4){grid-column:1;grid-template-columns:52px 1fr;padding:18px 0;border-right:0;border-bottom:1px solid var(--mk-line-2)}
  .mk-pr__steps.is-live .mk-pr__step{opacity:1}
  .mk-pr__n{font-size:30px}

  .mk-num{min-height:0;padding:56px 0}
  .mk-num__row{grid-template-columns:1fr 1fr;row-gap:36px}
  .mk-num__it,.mk-num__it:first-child{min-height:0;padding:0 0 0 16px;border-right:0;border-left:1px solid var(--mk-line-2)}
  .mk-num__v{font-size:56px}
  .mk-num__l{margin-top:10px;font-size:14px}

  .mk-b2b{padding:64px 0 72px}
  .mk-b2b__h{font-size:40px;line-height:.9}
  .mk-b2b .mk-head__sub{max-width:none}
  .mk-b2b__grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:28px calc(-1*var(--mk-pad)) 0;padding-inline:var(--mk-pad);gap:10px}
  .mk-b2b__grid::-webkit-scrollbar{display:none}
  .mk-b2b__card{flex:0 0 72vw;min-height:0;scroll-snap-align:start}
  .mk-b2b__ph{height:40vw}
  .mk-b2b__b{padding:16px}

  .mk-final{min-height:0}
  .mk-final::before{background:linear-gradient(180deg,rgba(8,18,24,.72) 0,rgba(8,18,24,.9) 100%)}
  .mk-final__in{grid-template-columns:1fr;padding-top:72px;padding-bottom:72px}
  .mk-final__h{font-size:clamp(52px,16vw,72px)}
  .mk-final__p{margin-top:18px}
  .mk-final .mk-btn{margin-top:24px;font-size:16px;height:52px}
  .mk-final__tel{margin:28px 0 0}

  .mk-ct{padding:72px 0}
  .mk-ct__list{margin-top:26px}
  .mk-ct__row{grid-template-columns:34px 1fr;padding-block:14px}
  .mk-ct__media{padding-bottom:0}
  .mk-ct__ph{position:relative;right:auto;width:62%;margin:-48px 0 0 auto}
  .mk-ct__form{margin-top:56px;padding-top:36px}
  .mk-ct__intro h3{font-size:34px}
  .mk-form .f2{grid-template-columns:1fr}
}

/* ---------- сверка с макетом, проход 1 ---------- */
.mk-ct__intro h3{font-weight:600}
@media (min-width:768px){
  .mk-num{border-block:0}
  /* моноширинные цифры в узком шрифте разъезжаются: в макете цифры плотные */
  .mk-num__v{font-weight:600;letter-spacing:-.02em;font-variant-numeric:normal}
  .mk-num__l{margin-top:calc(20*var(--u))}
  .mk-b2b{padding:calc(30*var(--u)) 0 calc(62*var(--u))}
  .mk-b2b .mk-head__sub{margin-top:calc(16*var(--u))}
  .mk-b2b .mk-head .mk-link{margin-bottom:calc(95*var(--u))}
  .mk-b2b__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mk-b2b__b{padding-top:calc(22*var(--u))}
  .mk-b2b__t{font-size:calc(21*var(--u))}
  .mk-b2b__d{font-size:calc(16*var(--u))}
  .mk-final__in{padding-top:calc(38*var(--u))}
  .mk-final__h{line-height:.88}
  .mk-final__p{margin-top:calc(36*var(--u));font-weight:500}
  .mk-final .mk-btn{padding-inline:calc(56*var(--u)) calc(48*var(--u))}
  .mk-final__tel{margin-right:calc(76*var(--u))}
}
@media (min-width:768px) and (max-width:1023px){
  /* на планшете фиксированные колонки макета шире экрана: делим поровну */
  .mk-hero__facts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mk-hero__facts>div{padding-left:24px;padding-right:12px}
  .mk-hero__facts>div:first-child{padding-left:0}
  .mk-hero__facts dt,.mk-hero__facts>div:first-child dt{font-size:34px}
  .mk-num__row{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mk-num__it{padding-left:20px}
  .mk-num__v{font-size:64px}
  .mk-b2b__grid{grid-template-columns:1fr 1fr}
  .mk-b2b__t{font-size:15px}
  .mk-b2b__d{font-size:14px}
}
@media (max-width:767px){
  /* порядок на телефоне: текст, фото, факты. Факты — сосед текстового блока,
     прежний селектор по номеру div промахивался, и они всплывали наверх */
  .mk-hero__body+.mk-wrap{order:3;margin-top:0}
  .mk-pr__d,.mk-rail__d,.mk-kat__d,.mk-ed__p{max-width:none}
  .mk-num__v{font-variant-numeric:normal;letter-spacing:-.02em}
}

/* ---------- сверка с макетом, проход 2 ---------- */
@media (min-width:768px){
  .mk-num__v{font-weight:500;letter-spacing:-.03em}
  .mk-b2b__h{font-size:calc(73*var(--u))}
  .mk-b2b__grid{margin-top:calc(24*var(--u))}
  .mk-b2b__d{margin-top:calc(26*var(--u))}
  .mk-final__in{padding-top:calc(28*var(--u))}
  .mk-final .mk-btn{margin-top:calc(34*var(--u))}
  .mk-b2b{padding-bottom:calc(40*var(--u))}
}

/* ---------- без нумерации: индексы разделов, номера карточек и шагов,
   счётчики листания убраны. Активный шаг выделяется заголовком ---------- */
.mk-foot{justify-content:flex-end}
.mk-kat__t{margin-top:0}
.mk-pr__step,.mk-pr__step:nth-child(3),.mk-pr__step:nth-child(4){grid-template-columns:1fr}
.mk-pr__t{transition:color .4s var(--mk-ease)}
.mk-pr__step.is-on .mk-pr__t{color:var(--mk-blue)}
/* фото поверх карты не выходит за край контейнера и не режется краем окна */
.mk-ct__ph{right:0}
@media (max-width:767px){
  .mk-rail__item,.mk-rail__item.is-on{padding-bottom:22px}
}
/* четвёртый шаг стоит в узкой второй колонке: без номера текст сжимался
   в три строки. Как в макете, он заходит на выбеленный край фото */
@media (min-width:768px){
  .mk-pr__step:nth-child(4)>div{width:calc(210*var(--u))}
}

/* ---------- контакты: снимок больше не наезжает на карту ----------
   Поверх угла карты он выглядел вырезанным куском. Карта сверху,
   снимок полосой под ней в той же колонке */
.mk-ct__media{display:grid;gap:var(--mk-gap);padding-bottom:0}
.mk-ct__ph{position:static;width:auto;min-width:0;margin:0;border:0}
.mk-ct__ph img{width:100%;height:calc(190*var(--u));min-height:140px;aspect-ratio:auto;object-fit:cover;object-position:50% 62%}
@media (max-width:767px){.mk-ct__ph img{height:46vw}}

/* снимок под картой целиком, в своих пропорциях: кадрирование по высоте
   полосы срезало склад и фуру */
.mk-ct__ph img{height:auto;min-height:0;aspect-ratio:auto;object-fit:contain}
@media (max-width:767px){.mk-ct__ph img{height:auto}}

/* ---------- крупные фото без растягивания ----------
   Снимки 1119 и 750 px по высоте, а на широком экране рамка выше:
   cover растягивал фото, и оно мылилось. Рамка не выше снимка,
   по вертикали по центру */
.mk-ed__media img{height:100%;scale:1.03}
.mk-ps__media img{scale:1.03}
@media (min-width:1600px){
  .mk-ed__media,.mk-ps__media{top:0;bottom:0;margin-block:auto}
  .mk-ed__media{height:min(100%,1119px)}
  .mk-ps__media{height:min(100%,750px)}
}

/* ---------- фото категорий из макета: кадр под узкие карточки рельса ---------- */
.mk-rail__item:nth-child(1) img{object-position:74% 50%}
.mk-rail__item:nth-child(2) img{object-position:36% 50%}
.mk-rail__item:nth-child(3) img{object-position:52% 50%}

/* ---------- шильдик и склад из макета ----------
   Шильдик справа, палец в кадре, как в макете; рамка на широком экране
   не выше снимка (894 px). В процессе погрузчик и паллеты в кадре */
.mk-ps__media img{object-position:70% 50%}
.mk-pr__img[data-step="0"]{object-position:72% 50%}
@media (min-width:1600px){.mk-ps__media{height:min(100%,894px)}}
@media (max-width:767px){
  .mk-ps__media img{object-position:62% 50%}
  .mk-pr__img[data-step="0"]{object-position:70% 50%}
}

/* ---------- полоса фона между «Не знаете» и процессом ----------
   Шильдик и склад шли встык, одним коллажем. Верх и низ фото чёткие:
   растушёвка там выглядела мутной полосой, растворяется только левая кромка */
@media (min-width:768px){
  .mk-ps+.mk-pr{margin-top:calc(80*var(--u))}
}

/* ---------- склад: пять категорий в один ряд ----------
   В мелком масштабе пятая карточка торчала обрезанной у края, а при листании
   крупная карточка наезжала на полосу со стрелками. На широком экране ряд
   делится на пять карточек долей ширины, пропорции крупной и узкой как в макете;
   полоса листания под рядом и стоит на месте при любой активной карточке */
@media (min-width:768px){
  .mk-rail__view{padding-bottom:calc(64*var(--u))}
  .mk-rail__foot{top:auto;bottom:0;height:max(40px,calc(44*var(--u)))}
}
@media (min-width:1024px){
  .mk-rail__item{flex-basis:calc((100% - 32*var(--u)) / 6.512)}
  .mk-rail__item.is-on{flex-basis:calc((100% - 32*var(--u)) * 2.512 / 6.512)}
  .mk-rail__foot{left:calc((100% - 32*var(--u)) * 2.512 / 6.512 + 38*var(--u))}
}

/* ---------- призыв на фото синего компрессора ----------
   Снимок светлее и пестрее прежнего тёмного коллажа: затемнение справа
   сильнее, снизу полоса под телефоном; запас по высоте под параллакс */
.mk-final__media img{object-position:50% 28%;scale:1.06}
.mk-final::before{background:
  linear-gradient(0deg,rgba(8,18,24,.78) 0,rgba(8,18,24,0) 48%),
  linear-gradient(90deg,rgba(8,18,24,.92) 0,rgba(8,18,24,.62) 42%,rgba(8,18,24,.2) 100%)}
@media (max-width:767px){
  .mk-final__media img{object-position:62% 50%;scale:1}
  .mk-final::before{background:linear-gradient(180deg,rgba(8,18,24,.74) 0,rgba(8,18,24,.9) 100%)}
}

/* ---------- процесс заказа: обычный блок ----------
   Раздел листается как все, без залипания и поочерёдной подсветки:
   бледные неактивные шаги и серые описания плохо читались */
@media (min-width:768px){
  .mk-pr{height:auto}
  .mk-pr__stick{position:relative;top:auto;height:auto;min-height:calc(745*var(--u))}
}
.mk-pr__t{color:var(--mk-ink)}
.mk-pr__d{color:var(--mk-ink-2)}

/* =========================================================
   Полировка перед запуском: сетка, воздух, карточки, движение.
   Концепция и размеры макета те же; правки только там, где
   блоки расходились с сеткой или оставляли пустоты.
   ========================================================= */


/* ссылка «весь каталог» у заголовка раздела — на линии последней строки
   подзаголовка во всех разделах (у «Поставок» висела посередине) */
@media (min-width:768px){
  .mk-head .mk-link,.mk-b2b .mk-head .mk-link{margin-bottom:calc(2*var(--u))}
}

/* каталог на главной: карточка по содержимому, без пустого низа;
   описание с обычным межстрочным, при наведении рамка темнеет */
@media (min-width:768px){
  .mk-kat__card{min-height:calc(470*var(--u))}
}
.mk-kat__d{line-height:1.55}
.mk-kat__card{background:transparent;transition:border-color .5s var(--mk-ease),background-color .5s var(--mk-ease)}
.mk-kat__card:hover{border-color:var(--mk-line-2);background:var(--mk-bg-2)}
.mk-kat__card:focus-visible{outline-offset:-2px}

/* «Когда оборудование стоит»: текст по центру высоты фото,
   а не прижат к верху с пустым полем снизу */
@media (min-width:768px){
  .mk-ed{display:flex;align-items:center}
  .mk-ed__body{width:100%;padding-block:calc(80*var(--u))}
}

/* склад: ряд карточек по сетке страницы, без выноса за левое поле */
@media (min-width:768px){
  .mk-rail__view{margin-left:0;margin-right:0}
}

/* цифры: высота по содержимому, без пустой полосы под подписями */
@media (min-width:768px){
  .mk-num{min-height:0;padding-block:calc(100*var(--u))}
  .mk-num__it{min-height:0;padding-bottom:calc(6*var(--u))}
}

/* поставки: описание ближе к своему заголовку, карточка реагирует целиком */
.mk-b2b__card{transition:border-color .5s var(--mk-ease),background-color .5s var(--mk-ease)}
@media (hover:hover){
  .mk-b2b__card:hover{border-color:var(--mk-line-2);background:var(--mk-paper)}
}
@media (min-width:768px){
  .mk-b2b__d{margin-top:calc(10*var(--u));line-height:1.55}
  .mk-b2b__ph{height:calc(170*var(--u))}
}
@media (min-width:768px){
  .mk-b2b__h{line-height:.9}
  .mk-b2b__card{min-height:0}
  .mk-b2b__b{padding-bottom:calc(28*var(--u))}
  /* процесс: линия под заголовком той же длины, что линии шагов
     (четвёртый шаг раздвигает сетку шагов до 618 единиц макета) */
  .mk-pr__body{width:calc(618*var(--u))}
  .mk-pr__steps{grid-template-columns:calc(350*var(--u)) minmax(0,1fr)}
}

/* «Когда оборудование стоит» на планшете: крупный заголовок заходил на фото,
   поэтому как на телефоне — текст сверху, фото под ним */
@media (min-width:768px) and (max-width:1023px){
  .mk-ed{min-height:0;display:flex;flex-direction:column;align-items:stretch;padding-bottom:64px}
  .mk-ed__media{position:relative;inset:auto;order:2;width:auto;height:auto;aspect-ratio:16/9;margin-top:40px;-webkit-mask-image:none;mask-image:none}
  .mk-ed__media img{height:100%}
  .mk-ed__body{order:1;padding-block:72px 0}
  .mk-ed__h{font-size:clamp(46px,7.6vw,68px)}
  .mk-ed__p{margin-top:22px;max-width:560px}
}

/* ---------- 10.11: «Поставки» крупнее и по фактам ---------- */
.mk-b2b .mk-b2b__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:max(12px,calc(18*var(--u)))}
.mk-b2b .mk-b2b__ph{height:auto;aspect-ratio:4/3}
.mk-b2b .mk-b2b__b{display:flex;flex-direction:column;gap:max(8px,calc(12*var(--u)));padding:max(18px,calc(26*var(--u))) max(16px,calc(24*var(--u))) max(22px,calc(30*var(--u)))}
.mk-b2b__n{font:500 max(15px,calc(18*var(--u)))/1 var(--mk-f-body);letter-spacing:.06em;color:var(--mk-blue)}
.mk-b2b .mk-b2b__t{font:500 max(24px,calc(36*var(--u)))/.95 var(--mk-f-head);text-transform:uppercase;letter-spacing:0}
.mk-b2b .mk-b2b__d{margin-top:0;font-size:max(15px,calc(18*var(--u)));line-height:1.5;color:var(--mk-ink-2)}
@media (max-width:1023px){.mk-b2b .mk-b2b__grid{grid-template-columns:1fr 1fr}}
@media (max-width:767px){
  .mk-b2b .mk-b2b__grid{display:flex}
  .mk-b2b .mk-b2b__card{flex:0 0 78vw}
  .mk-b2b .mk-b2b__t{font-size:26px}
}

/* ---------- 10.11: «Процесс» — четыре равных шага с номерами ---------- */
.mk-pr .mk-pr__steps{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:max(20px,calc(40*var(--u)));margin-top:0}
.mk-pr .mk-pr__step,.mk-pr .mk-pr__step:nth-child(3),.mk-pr .mk-pr__step:nth-child(4){grid-column:auto;display:grid;grid-template-columns:max(44px,calc(64*var(--u))) minmax(0,1fr);align-items:baseline;padding:max(16px,calc(26*var(--u))) 0;padding-left:0;border-right:0;border-bottom:1px solid var(--mk-line-2)}
.mk-pr .mk-pr__step:nth-child(4)>div{width:auto}
.mk-pr .mk-pr__n{display:block;font:500 max(26px,calc(40*var(--u)))/.9 var(--mk-f-head);color:var(--mk-muted)}
.mk-pr .mk-pr__step.is-on .mk-pr__n{color:var(--mk-blue)}
@media (max-width:767px){.mk-pr .mk-pr__steps{grid-template-columns:1fr}}

/* ---------- 10.11: контакты — только карта, без постороннего фото склада ---------- */
.mk-ct .mk-ct__map{height:100%;min-height:max(320px,calc(520*var(--u)))}
@media (max-width:767px){.mk-ct .mk-ct__map{min-height:300px}}

/* ---------- 10.11: внизу главной вместо второй формы — вход в спецификацию ---------- */
.mk-ct__go{align-content:start}
.mk-ct__go .mk-ct__intro p{max-width:34em}
.mk-ct__acts{display:flex;flex-wrap:wrap;align-items:center;gap:max(16px,calc(32*var(--u)));margin-top:max(20px,calc(32*var(--u)))}
.mk-ct__go .mk-ct__acts{grid-column:6 / -1;margin-top:0;align-self:center}
@media (max-width:1023px){.mk-ct__go .mk-ct__acts{grid-column:1 / -1;margin-top:24px}}
.mk-ct .mk-ct__map iframe{filter:grayscale(.55) contrast(1.02)}

/* ---------- 11.11: блоки главной — светлые панели со скруглением на сером фоне ----------
   Вместо пустых отступов между блоками одного цвета. Первый экран остаётся во всю ширину.
   overflow:clip режет фото по скруглению и, в отличие от hidden, не ломает position:sticky;
   isolation — фото с z-index:-1 остаются над фоном панели. */
body{background:#E3E7E8}
.mk-hero{background:var(--mk-bg)}
#katalog,#about,#poisk,#process,#uslugi,#cta,#lead{margin:14px 14px 0;border-radius:22px;overflow:hidden;overflow:clip;isolation:isolate;background:#F6F7F7}
#cta{background:#0C1C24}
#lead{margin-bottom:14px}
@media (min-width:1024px){
  #katalog{padding-top:64px!important;padding-bottom:48px!important}
  #uslugi{padding-top:64px!important;padding-bottom:64px!important}
  #lead{padding-top:72px!important}
}
@media (max-width:767px){
  #katalog,#about,#poisk,#process,#uslugi,#cta,#lead{margin:8px 8px 0;border-radius:16px}
  #lead{margin-bottom:8px}
}
/* телефон: блок процесса по высоте содержимого, без пустой полосы под фото */
@media (max-width:767px){
  #process .mk-pr__stick{height:auto;min-height:0;padding-bottom:0}
  #process .mk-pr__media{position:relative}
  /* фото внизу блока садится в скруглённый низ панели */
  #about,#poisk{padding-bottom:0!important}
  #about .mk-ed__media,#poisk .mk-ps__media{margin-bottom:0}
}