/* ==========================================================================
   КБ-57 — ЕДИНАЯ ДИЗАЙНЕРСКАЯ СЕТКА
   компьютер: 12 колонок, контейнер 1320, межколонник 32
   планшет  (≤1024): 8 колонок, межколонник 24, поля 24
   телефон  (≤640):  4 колонки, межколонник 16, поля 16
   шаг отступов 8: --s1 8 · --s2 16 · --s3 24 · --s4 32 · --s6 48 · --s8 64 · --s12 96
   Подключается ПОСЛЕ site.css/variants.css и переопределяет все раскладки.
   ========================================================================== */
:root{
  --cont:1320px; --cols:12; --gut:32px; --pad:32px;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s6:48px; --s8:64px; --s12:96px;
  --sec:var(--s12);                                   /* отступ секции сверху/снизу */
  --wrap:calc(var(--cont) + var(--pad) * 2);          /* контейнер с полями */
  --col:calc((100% - (var(--cols) - 1) * var(--gut)) / var(--cols));   /* ширина одной колонки внутри контейнера */
  --w8:calc(var(--col) * 8 + var(--gut) * 7);          /* ширина 8 колонок */
  --w6:calc(var(--col) * 6 + var(--gut) * 5);
}
@media (max-width:1024px){:root{--cols:8; --gut:24px; --pad:24px; --sec:var(--s8); --w8:100%; --w6:100%}}
@media (max-width:640px){:root{--cols:4; --gut:16px; --pad:16px; --sec:var(--s6)}}

.wrap{max-width:var(--wrap);padding-left:var(--pad);padding-right:var(--pad);margin:0 auto;width:100%}

/* ---------- все раскладки = один грид на var(--cols) колонок ---------- */
.hero__grid,.phero__grid,.intro-head,.split,.split--wide,.cards,.sec--alt .cards,.page-services .cards,
.advs,.advs--5,.pcards,.gallery,.gallery--3,.gallery--4,.principles__grid,.contact-min__grid,.online,.ftr__grid{
  display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gut);row-gap:var(--gut)
}
.gallery,.gallery--3,.gallery--4{row-gap:var(--gut)}

/* компьютер — 12 колонок */
.hero__txt{grid-column:span 7}
.hero__obj{grid-column:span 5;justify-self:stretch;width:100%}
.phero__txt{grid-column:span 6}
.phero__media{grid-column:span 6}
.phero--plain .phero__txt{grid-column:1 / -1}
.intro-head > .sec-head{grid-column:span 4}
.intro-head__txt{grid-column:span 8}
.split > :first-child{grid-column:span 5}
.split > :last-child{grid-column:span 7}
.split--wide > :first-child{grid-column:span 4}
.split--wide > :last-child{grid-column:span 8}
.cards > .card{grid-column:span 4}
.advs > .adv{grid-column:span 4}
.advs--5 > .adv:nth-child(n+4){grid-column:span 6}
.pcards > .pcard{grid-column:span 4}
.gallery > .g{grid-column:span 4}
.gallery--4 > .g{grid-column:span 3}
.principles__grid > .prin{grid-column:span 6}
.contact-min__grid > .crows{grid-column:span 5}
.contact-min__grid > .map{grid-column:7 / -1}
.online > .online__col{grid-column:span 6}
.ftr__grid > .ftr__col{grid-column:span 4}

/* планшет — 8 колонок */
@media (max-width:1024px){
  .hero__txt,.hero__obj,.phero__txt,.phero__media,.intro-head > .sec-head,.intro-head__txt,
  .split > :first-child,.split > :last-child,.split--wide > :first-child,.split--wide > :last-child,
  .contact-min__grid > .crows,.contact-min__grid > .map{grid-column:1 / -1}
  .hero__obj{order:0;aspect-ratio:16/10;max-height:52vh}
  .cards > .card,.advs > .adv,.advs--5 > .adv:nth-child(n+4),.pcards > .pcard,
  .gallery > .g,.gallery--4 > .g,.principles__grid > .prin,.online > .online__col,.ftr__grid > .ftr__col{grid-column:span 4}
}
/* телефон — 4 колонки: всё в одну, галереи по две */
@media (max-width:640px){
  .cards > .card,.advs > .adv,.advs--5 > .adv:nth-child(n+4),.pcards > .pcard,.principles__grid > .prin,.online > .online__col,.ftr__grid > .ftr__col{grid-column:1 / -1}
  .gallery > .g,.gallery--4 > .g{grid-column:span 2}
  .hero__obj{aspect-ratio:4/3;max-height:44vh}
}

/* ---------- ширины текстовых блоков = целое число колонок ---------- */
.sec-head{max-width:var(--w6)}
.lead-block,.narrow,.ops,.tbl,.ticks--lg,.lead-txt,.closing{max-width:var(--w8)}
.hero__sub{max-width:var(--w6)}
.hero__h1{max-width:none}

/* ---------- вертикальный ритм (шаг 8) ---------- */
.sec{padding:var(--sec) 0}
.sec--tight{padding:var(--s8) 0}
.hero{padding:calc(var(--hdr) + var(--s3)) 0 var(--s6)}
.phero{padding:calc(var(--hdr) + var(--s3)) 0 var(--s6)}
.phero--plain{padding-top:calc(var(--hdr) + var(--s12));padding-bottom:var(--s8)}
.kicker{margin-bottom:var(--s2)}
.sec-head{margin-bottom:var(--s6)}
.sec-sub{margin-top:var(--s2)}
.intro-head{margin-bottom:0}
.hero__sub{margin-top:var(--s4)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4);opacity:0;animation:fade 1.2s var(--ease) 1.2s forwards}
.pcards{margin-top:0}
.mt-6{margin-top:var(--s6)}
.lead-block + .gallery{margin-top:var(--s6)}
.lead-block p{margin-bottom:var(--s2)}
.split__txt p{margin-bottom:var(--s2)}
.card__title{padding:var(--s2) var(--s3)}
.card__desc{padding:0 var(--s3) var(--s3)}
.adv{padding-bottom:var(--s3);gap:var(--s2)}
.adv figcaption{padding:0 var(--s3)}
.prin{padding-top:var(--s3)}
.prin h3{margin-bottom:var(--s1)}
.crow{padding:var(--s2) 0}
.ftr{padding-top:var(--s8)}
.ftr__grid{padding-bottom:var(--s6)}
.ftr__legal{padding-top:var(--s3)}
.contact-min .map{margin:0}
.map{margin-top:0}
.op summary{padding:var(--s3) 0}
.tbl td{padding:var(--s3) 0}
.facts{gap:var(--gut)}

/* ---------- сплит-панели услуг: текст стоит на колонках контейнера ---------- */
/* левая панель: отступ = поле контейнера; правая: начинается с 7-й колонки (половина межколонника от центра) */
.sp__txt{left:max(var(--pad),calc(100% - var(--cont) / 2));right:calc(var(--gut) / 2);bottom:var(--s8)}
.sp:nth-child(2n) .sp__txt{left:calc(var(--gut) / 2);right:max(var(--pad),calc(100% - var(--cont) / 2))}
.sp .kicker{margin-bottom:var(--s2)}
.sp__more{margin-top:var(--s2)}
@media (max-width:1024px){
  .splits{grid-template-columns:1fr 1fr}
  .sp{height:60vh;min-height:400px}
  .sp:nth-child(2n){border-left:1px solid rgba(255,255,255,.14)}
  .sp:nth-child(2){border-top:0}
  .sp:nth-child(n+3){border-top:1px solid rgba(255,255,255,.14)}
  .sp__txt{bottom:var(--s6)}
}
@media (max-width:640px){
  .splits{grid-template-columns:1fr}
  .sp{height:64vh;min-height:400px}
  .sp:nth-child(2n){border-left:0}
  .sp:nth-child(n+2){border-top:1px solid rgba(255,255,255,.14)}
  .sp__txt,.sp:nth-child(2n) .sp__txt{left:var(--pad);right:var(--pad);bottom:var(--s6)}
}

/* ---------- шапка и меню: на тех же полях ---------- */
@media (max-width:960px){.nav{padding-left:var(--pad);padding-right:var(--pad)}}
.mbar{left:var(--pad);right:var(--pad);bottom:var(--s2)}

/* сплиты: номер и заголовок на одной линии у обеих панелей (заголовок всегда занимает 2 строки) */
.sp__h{min-height:2.04em;display:flex;align-items:flex-end}
.sp__more{position:absolute;left:0;top:100%;margin-top:var(--s2)}
.sp__txt{padding-bottom:calc(var(--s2) + 1.2em)}

/* мобильное меню: пункты на линии сетки и крупным кеглем (правило ≤1180 для ноутбуков сюда не должно доставать) */
@media (max-width:960px){.nav__links a{padding:var(--s2) 0;font-size:clamp(1.5rem,7vw,2.25rem)}}

/* компьютер: у меню в шапке НИКОГДА нет фона и полей (защита от старых правил мобильного меню) */
@media (min-width:961px){
  .nav,html[data-v] .nav,html[data-theme] .nav{background:none!important;padding:0!important;box-shadow:none!important;backdrop-filter:none!important}
}
/* иконки в шапке: без кружка — ни рамки фокуса после клика, ни серой подложки; на ховере темнеет только значок */
.ibtn,.phone,.burger{outline:none!important;-webkit-tap-highlight-color:transparent}
.ibtn:hover,.ibtn:focus,.ibtn:focus-visible,.ibtn:active,
html[data-v] .ibtn:hover,html[data-v] .phone:hover,html[data-theme] .ibtn:hover,html[data-theme] .phone:hover{background:none!important;box-shadow:none!important}
.phone:focus,.phone:focus-visible,.burger:focus,.burger:focus-visible{outline:none!important;box-shadow:none!important}
.ibtn:hover,.ibtn:focus-visible,.phone:hover,.phone:focus-visible{color:var(--ink)}

/* цепочка процесса над заголовком первого экрана */
.hero__chain{font-family:var(--font-m);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s3);display:flex;flex-wrap:wrap;gap:0 var(--s1);opacity:0;animation:fade 1.2s var(--ease) .2s forwards}
.hero__chain i{font-style:normal;color:var(--ink-3);opacity:.6;margin:0 var(--s1)}

/* ---------- первый экран: чертёж-развёртка на весь фон (Nano Banana), «вырисовывается» при загрузке ---------- */
.hero{overflow:clip}
.hero__sheet{position:absolute;inset:-4% -2%;z-index:0;pointer-events:none;background:var(--img) center/cover no-repeat;opacity:0;
  -webkit-mask:linear-gradient(100deg,#000 42%,transparent 58%) 100% 0/260% 100% no-repeat;mask:linear-gradient(100deg,#000 42%,transparent 58%) 100% 0/260% 100% no-repeat}
.hero__sheet.in{opacity:var(--sheet-o,.34);animation:sheetDraw 3.2s cubic-bezier(.4,0,.2,1) .15s forwards}
@keyframes sheetDraw{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}
html[data-v="2"] .hero__sheet{filter:invert(1);--sheet-o:.3}
/* затемнение под текстом и под корпусом, чтобы объект и заголовок не сливались с чертежом */
.hero__shade{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 70% at 24% 55%,rgba(var(--deep-rgb),.78) 0%,rgba(var(--deep-rgb),.35) 45%,transparent 75%),
             radial-gradient(34% 44% at 76% 52%,rgba(var(--deep-rgb),.85) 0%,rgba(var(--deep-rgb),.4) 55%,transparent 80%)}
.hero>.wrap{position:relative;z-index:1}
@media (max-width:1024px){.hero__sheet{inset:-2% -10%;background-size:auto 120%}.hero__shade{background:radial-gradient(70% 60% at 50% 40%,rgba(var(--deep-rgb),.8) 0%,rgba(var(--deep-rgb),.4) 50%,transparent 80%)}}
@media (prefers-reduced-motion:reduce){.hero__sheet.in{animation:none;-webkit-mask:none;mask:none}}

/* ---------- полоса «Услуги»: просто чёрная, отделена тонкими линиями ---------- */
.sec--black{background:#060606;color:#fff;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1)}
.sec--black::before{display:none}
.sec--black .sec-head,.sec--black h2,.sec--black .kicker{color:#fff}
.sec--black .intro-head__txt{color:rgba(255,255,255,.78)}