/* biz-com.kz — единый стиль сайта «БВ».
   Порядок файла: 1) токены и общие элементы 2) РАСКЛАДКА ДЛЯ ТЕЛЕФОНА (база)
   3) десктоп одним блоком @media (min-width:901px) 4) частные случаи.
   Правило: телефон — база, десктоп добавляется сверху. Никаких правок-отмен. */

/* ============ 1. ТОКЕНЫ, СБРОС, ОБЩИЕ ЭЛЕМЕНТЫ ============ */
*{margin:0;padding:0;box-sizing:border-box}
:root{--pitch:64px;--sh:100vh;--ink:#0d0d0f;--wh:#F2F2F2;--ac:#E9E1CE;--acd:#8a7f5e;--mut:rgba(242,242,242,.62);--mutd:rgba(13,13,15,.6);--line:rgba(242,242,242,.15);--lined:rgba(13,13,15,.15);--cream:#EFE9DA}
/* --sh — высота ЭКРАНА УСТРОЙСТВА, а не текущей видимой области.
   На iPhone видимая область скачет, когда прячется адресная строка: если брать её,
   блок оказывается короче экрана и сверху вылезает соседний. lvh — размер при
   спрятанной панели, то есть максимальный: блок всегда накрывает экран целиком,
   ровно как шторка. Для старых браузероввысоту подставляет JS. */
@supports (height:100lvh){:root{--sh:100lvh}}
img,svg,video{max-width:100%;height:auto}
html{max-width:100%;overflow-x:hidden;scroll-behavior:smooth}
body{font-family:'Manrope',sans-serif;background:var(--ink);color:var(--wh);max-width:100%}

/* метка с тире */
.lbl{display:flex;align-items:center;gap:14px;font-size:clamp(11.5px,.4vw + 10px,12.5px);font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:var(--acd)}
.lbl::after{content:"";width:44px;height:2px;background:var(--acd)}
.dark .lbl{color:var(--ac)}
.dark .lbl::after{background:var(--ac)}

/* большой заголовок */
.big{font-family:'Playfair Display',serif;font-style:normal;font-weight:700;text-transform:uppercase;line-height:1.06;margin:16px 0 0}

/* кнопки-скобки [ ] — единый стиль на весь сайт */
.brk{position:relative;font-weight:800;text-transform:uppercase;color:var(--acd);background:none;border:none;cursor:pointer;transition:.3s}
.brk::before,.brk::after,.gowa::before,.gowa::after,.mcta::before,.mcta::after,
.ovlwide .close::before,.ovlwide .close::after,.lb .close::before,.lb .close::after{content:"";position:absolute;top:0;bottom:0;width:12px;border:2px solid var(--acd);transition:width .45s ease}
.brk::before,.gowa::before,.mcta::before,.ovlwide .close::before,.lb .close::before{left:0;border-right:none;border-bottom:none}
.brk::after,.gowa::after,.mcta::after,.ovlwide .close::after,.lb .close::after{right:0;border-left:none;border-top:none}
.brk:hover::before,.brk:hover::after,.gowa:hover::before,.gowa:hover::after,
.mcta:hover::before,.mcta:hover::after,.ovlwide .close:hover::before,.ovlwide .close:hover::after,
.lb .close:hover::before,.lb .close:hover::after{width:100%}
.brk:hover{color:var(--ink)}
.dark .brk{color:var(--ac)}
.dark .brk::before,.dark .brk::after{border-color:var(--ac)}
.dark .brk:hover{color:#fff}
.lite .brk:hover{color:var(--ink)}
.gowa{position:relative;font-weight:800;text-transform:uppercase;color:var(--ink);text-decoration:none;background:none;border:none;transition:.3s}
.gowa:hover{color:var(--acd)}
.mcta{position:relative;font-family:'Manrope',sans-serif;font-weight:800;text-transform:uppercase;color:var(--wh);text-decoration:none;transition:.3s}
.mcta::before,.mcta::after{border-color:var(--ac)}
.mcta:hover{color:var(--ac)}

/* штамп на фотографии — единственное место с наклоном */
.stamp{position:absolute;z-index:3;font-family:'Playfair Display',serif;font-style:italic;font-weight:700;text-transform:uppercase;color:var(--ac);text-shadow:0 4px 30px rgba(0,0,0,.5)}

/* эффекты на фото-панелях */
/* Вертикальные линии и капли, которые по ним падают. Шаг линий — одна величина
   --pitch, и капли расставляет скрипт ровно по ней: раньше капля была одна и висела
   посередине, ни с какой линией не совпадая. */
.phfx{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;
  background:repeating-linear-gradient(90deg,transparent 0,transparent calc(var(--pitch) - 1px),rgba(242,242,242,.13) calc(var(--pitch) - 1px),rgba(242,242,242,.13) var(--pitch))}
.phfx::before{content:"";position:absolute;inset:-60px;background:url(/bv/img/film-grain.gif) repeat;opacity:.08}
.phfx b{position:absolute;top:-20%;width:2px;height:78px;
  background:linear-gradient(180deg,transparent,var(--ac) 62%,transparent);
  opacity:.85;animation-name:fdrop;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes fdrop{0%{top:-16%}100%{top:112%}}

/* затемнение соседних блоков при открытой шторке */
.dim{transition:filter .5s}
.dimmed .dim{filter:brightness(.35)}

/* тексты внутри колонок */
.col p{line-height:1.8;max-width:min(420px,100%)}
.col.lite p{color:rgba(13,13,15,.78)}
.col.dark p{color:rgba(242,242,242,.8)}
.col.lite{background:var(--wh);color:var(--ink)}
.col.dark{background:var(--ink);color:var(--wh)}

/* цитата */
.qphoto{width:76px;height:76px;border-radius:50%;object-fit:cover;filter:grayscale(1);margin:26px 0 18px}
.qt{font-size:16.5px;color:var(--mut);line-height:1.8}
.qa{margin-top:14px;font-size:12.5px;font-weight:800;letter-spacing:.25em;text-transform:uppercase;color:var(--ac)}

/* шкалы навыков */
.skill .sr{display:flex;justify-content:space-between;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--mutd);margin-bottom:8px}
.skill .sb{height:2px;background:var(--lined);position:relative}
.skill .sb i{position:absolute;left:0;top:0;bottom:0;background:var(--acd);width:0;transition:width 1.2s ease .3s}

/* списки-переходы */
.linklist{display:flex;flex-direction:column;margin-top:10px}
.linklist a{display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid rgba(13,13,15,.14);text-decoration:none;color:var(--ink);font-size:clamp(13px,.7vw + 11px,15px);font-weight:800;letter-spacing:.14em;text-transform:uppercase;transition:.25s}
.linklist a span:last-child{color:var(--acd);transition:transform .25s}
.linklist a:hover{padding-left:12px}
.linklist a:hover span:last-child{transform:translateX(6px)}
.dark .linklist a{color:var(--wh);border-color:var(--line)}
.dark .linklist a span:last-child{color:var(--ac)}

/* пакеты цен, блоки «что входит», вопросы */
.pkg{border-top:1px solid rgba(13,13,15,.14)}
.pkg b{font-weight:800;text-transform:uppercase}
.pkg span{display:block;margin-top:6px;font-size:clamp(14px,.7vw + 11px,15px);color:rgba(13,13,15,.66)}
.pblock{border-top:1px solid rgba(13,13,15,.14)}
.pblock b{display:block;font-weight:800;text-transform:uppercase}
.pblock span{display:block;margin-top:6px;font-size:clamp(14px,.8vw + 11px,15.5px);line-height:1.7;color:rgba(13,13,15,.7)}
.dark .pblock{border-color:var(--line)}
.dark .pblock span{color:rgba(242,242,242,.75)}
.qa2{border-top:1px solid rgba(13,13,15,.14)}
.qa2 b{display:block;font-weight:800}
.qa2 p{margin-top:6px;font-size:clamp(14px,.8vw + 11px,15.5px);line-height:1.7;color:rgba(13,13,15,.7)}

/* сертификаты */
.certlist{max-width:640px}
.certrow{display:flex;border-bottom:1px solid rgba(13,13,15,.12);text-decoration:none;color:var(--ink);transition:.2s}
.certrow:hover{padding-left:10px}
.certrow .cd{font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--acd);white-space:nowrap}

/* форма связи */
.frm label{display:block;margin-bottom:26px}
.frm span{display:block;font-size:11.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--mut);margin-bottom:6px}
.frm input,.frm textarea{width:100%;background:transparent;border:none;border-bottom:1px solid var(--line);color:var(--wh);font-family:'Manrope',sans-serif;font-size:15.5px;padding:8px 0;outline:none;resize:none;transition:border-color .3s}
.frm input:focus,.frm textarea:focus{border-color:var(--ac)}

/* конфигуратор: документ, слоты, чипсы */
.tab{font-weight:800;text-transform:uppercase;color:var(--ink);background:rgba(255,255,255,.5);border:1px solid rgba(13,13,15,.12);border-bottom:none;border-radius:12px 12px 0 0;cursor:pointer;transition:.25s;opacity:.6;text-align:center}
.tab:hover{opacity:.9}
.tab.on{background:#FFFDF7;opacity:1;box-shadow:0 -6px 18px rgba(13,13,15,.06)}
.bwrap{display:flex;align-items:stretch;margin-bottom:3vh;background:#FFFDF7;border:1px solid rgba(13,13,15,.12);box-shadow:0 14px 44px rgba(13,13,15,.08)}
.doc{color:var(--ink)}
.doc-h{text-align:center;margin-bottom:18px}
.doc-h .dtitle{font-family:'Manrope',sans-serif;font-weight:800;letter-spacing:.01em}
.doc-h .did{display:inline-block;margin-top:10px;font-size:14px;font-weight:800;letter-spacing:.06em;color:var(--acd);background:rgba(138,127,94,.12);border:1px solid rgba(138,127,94,.4);border-radius:0;padding:4px 14px}
.doc .dt2{font-size:12px;font-weight:800;letter-spacing:.25em;text-transform:uppercase;color:var(--acd);margin-bottom:10px}
.slot{display:inline-block;background:rgba(138,127,94,.14);border:1px solid rgba(138,127,94,.5);border-radius:0;padding:1px 10px;margin:0 3px;white-space:normal}
.slot.empty{opacity:.55;border-style:dashed}
.plh{flex:1;min-width:250px;background:none;border:none;box-shadow:none}
.plh .ph-t{font-size:15px;font-weight:800;color:var(--ink);margin-bottom:4px}
.plh .ph-s{font-size:13px;color:rgba(13,13,15,.55);margin-bottom:6px}
.plh .grp{border-top:1px solid rgba(13,13,15,.1);padding-top:14px}
.grp{font-size:12.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--acd)}
.chips{display:grid;grid-template-columns:repeat(2,1fr)}
.chip{font-weight:600;color:var(--ink);background:none;border:1px solid rgba(13,13,15,.35);border-radius:0;cursor:pointer;transition:.25s;text-align:center}
.chip:hover{border-color:var(--ink)}
.chip.sel{background:var(--ink);color:#EFE9DA;border-color:var(--ink)}

/* шторка: цвет и типографика одинаковые везде, геометрия — ниже по разделам */
.ovlwide{background:var(--cream);color:var(--ink)}
.ovlwide h3{font-family:'Playfair Display',serif;font-style:normal;font-weight:700;line-height:1.05;text-transform:uppercase;margin-bottom:14px}
.ovlwide h3 span{color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.ovlwide p{color:var(--mutd);line-height:1.8;margin-bottom:12px;max-width:640px}
.ovlwide p b{color:var(--ink)}
.ovlwide>p{color:rgba(13,13,15,.78);line-height:1.7;max-width:640px}
.ovlwide .close{background:none;border:none;font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:var(--ink);cursor:pointer;transition:.3s}

/* боковая панель Know-how */
.ovlcol{position:absolute;inset:0;background:var(--wh);color:var(--ink);display:flex;flex-direction:column;justify-content:center;transform:translateX(102%);transition:transform .7s cubic-bezier(.77,0,.18,1);z-index:5}
.ovlcol.left{transform:translateX(-102%)}
.ovlcol.open{transform:none}
.ovlcol .lbl{color:var(--acd)}
.ovlcol .lbl::after{background:var(--acd)}
.ovlcol .brk{color:var(--ink)}
.ovlcol .brk::before,.ovlcol .brk::after{border-color:var(--acd)}
.ovlcol .brk:hover{color:var(--acd)}

/* лайтбокс */
.lb{position:fixed;inset:0;background:rgba(8,8,10,.94);z-index:95;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;opacity:0;visibility:hidden;transition:.35s;cursor:zoom-out}
.lb.open{opacity:1;visibility:visible}
.lb img{max-width:60vw;max-height:64vh;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb .close{position:static;background:none;border:none;font-size:12.5px;font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:var(--wh);padding:13px 26px;cursor:pointer;transition:.3s}
.lb .close::before,.lb .close::after{border-color:var(--ac)}

/* соцсети по кнопке-шеру */
.shovl{position:fixed;inset:0;background:rgba(10,10,12,.95);z-index:75;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:.4s}
.shovl.open{opacity:1;visibility:visible}
.shovl a{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--wh);text-decoration:none;transition:.3s}
.shovl a:hover{color:var(--ac);transform:translateY(-4px)}
.shovl span{font-size:12.5px;font-weight:800;letter-spacing:.25em;text-transform:uppercase}

/* меню сайта */
.menu-btn{position:fixed;z-index:70;background:none;border:none;color:#fff;font-family:'Manrope',sans-serif;font-weight:800;letter-spacing:.3em;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;mix-blend-mode:difference}
.menu-btn .ln{height:2px;background:#fff;position:relative;transition:.3s}
.menu-btn .ln::before,.menu-btn .ln::after{content:"";position:absolute;left:0;height:2px;background:#fff;transition:.3s}
.menu-btn .ln::before{top:-7px}
.menu-btn .ln::after{top:7px}
body.open .menu-btn .ln{background:transparent}
body.open .menu-btn .ln::before{transform:rotate(45deg);top:0}
body.open .menu-btn .ln::after{transform:rotate(-45deg);top:0}
.mov{position:fixed;inset:0;background:rgba(10,10,12,.97);z-index:65;display:flex;justify-content:center;opacity:0;visibility:hidden;transition:.4s}
body.open .mov{opacity:1;visibility:visible}
.mov ul{list-style:none;text-align:center;padding:0}
.mov a.mi{display:block;font-family:'Playfair Display',serif;font-style:normal;font-weight:700;text-transform:uppercase;color:#fff;text-decoration:none;transition:.25s}
.mov a.mi:hover{color:transparent;-webkit-text-stroke:1.5px var(--wh);letter-spacing:.06em}
.mov .subm{margin-top:26px;display:flex;justify-content:center;flex-wrap:wrap}
.mov .subm a{font-family:'Manrope',sans-serif;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:rgba(242,242,242,.62);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:4px;transition:.25s}
.mov .subm a:hover{color:var(--ac);border-color:var(--ac)}

/* шапка и служебные кнопки */
.logo{position:fixed;z-index:60}
.logo img{display:block}
.back{position:fixed;z-index:60;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);text-decoration:none;border:1px solid var(--line);border-radius:0;background:rgba(13,13,15,.4);backdrop-filter:blur(4px);transition:opacity .3s,color .3s,background .3s}
.back:hover{color:var(--ink);background:var(--ac);border-color:var(--ac)}
.share{position:fixed;z-index:62;border:none;background:none;color:rgba(242,242,242,.75);cursor:pointer;transition:.3s;mix-blend-mode:difference}
.share:hover{color:var(--ac);transform:translateY(-2px)}
.dots{position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:60;flex-direction:column;gap:14px;mix-blend-mode:difference}
.dots a{width:8px;height:8px;border-radius:50%;border:1px solid #fff;display:block;transition:.25s}
.dots a.on{background:#fff}
/* пока шторка открыта — шапка не мешает */
body.po .back,body.po .logo,body.po .menu-btn{opacity:0;pointer-events:none}

/* стрелки слайдера услуг и ленты проектов */
.snav,.wnav2{position:absolute;top:50%;transform:translateY(-50%);background:var(--wh);color:var(--ink);border:none;cursor:pointer;transition:.3s}
.snav:hover,.wnav2:hover{background:var(--ac)}
.snav{z-index:6}
.wnav2{z-index:8}
.snav.prev{left:16px}
.snav.next{right:16px}

/* плюсик на фотографиях проектов */
.plus{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.5);font:300 48px/1 'Manrope',sans-serif;color:#fff;opacity:0;transition:.35s;z-index:4;text-shadow:0 2px 14px rgba(0,0,0,.6)}
.cell.photo:hover .plus{opacity:.95;transform:translate(-50%,-50%) scale(1)}

/* юридические страницы */
main.doc-scroll{scroll-snap-type:none}
.legalsec{height:auto;min-height:100vh;background:var(--wh);color:var(--ink)}
.legalwrap{max-width:860px;margin:0 auto}
.legalwrap .lead2{margin-top:14px;font-size:14px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--acd)}
.legalwrap h2{font-family:'Playfair Display',serif;text-transform:uppercase;margin:34px 0 12px}
.legalwrap p,.legalwrap li{line-height:1.8;color:rgba(13,13,15,.78);margin-bottom:12px}
.legalwrap ul{padding-left:22px;margin-bottom:14px}
.legalwrap li{list-style:disc}
.legalwrap a{color:var(--acd);text-decoration:underline}
.legalwrap .note2{border:1px solid rgba(13,13,15,.15);border-left:3px solid var(--acd);padding:16px 18px;background:#FFFDF7;font-size:14.5px;color:rgba(13,13,15,.7);margin:26px 0}
.legalwrap .foot2{margin-top:40px;padding-top:20px;border-top:1px solid rgba(13,13,15,.14);font-size:13px;color:rgba(13,13,15,.5)}
.legalwrap .brk{color:var(--acd)}

/* ============ 2. РАСКЛАДКА — ТЕЛЕФОН (база) ============ */

/* Блоки работают по тому же принципу, что и шторка: прокручивается не страница,
   а закреплённая область ровно в экран устройства. Так адресная строка браузера
   не двигается во время прокрутки, высота не скачет, и в кадре всегда ровно
   один блок — соседний не выглядывает ни сверху, ни снизу. */
html,body{height:100%;overflow:hidden;position:relative}
/* -webkit-overflow-scrolling:touch здесь НЕ ставим: этот старый режим инерции
   на iOS глушит scroll-snap внутри вложенной области — прокрутка замирает между
   блоками. Инерция и без него работает по умолчанию с iOS 13. */
main{position:fixed;top:0;left:0;width:100%;height:var(--sh);
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:none;
  scroll-snap-type:y mandatory;scroll-padding:0;scrollbar-width:none}
main::-webkit-scrollbar{display:none}
main.doc-scroll{scroll-snap-type:none}
/* снап живёт на блоках, а не на секциях: секция — просто контейнер */
section{position:relative;height:auto;min-height:0;overflow:visible;background:var(--ink);display:block}
/* секции без колонок (герой, проекты) — сами по себе один экран */
/* экран-блок: класс вешает JS. #home становится экраном только если внутри нет колонок
   (на страницах площадок герой состоит из колонок — там экраны это они, а не секция) */
/* экран-блок */
.scr{min-height:var(--sh);scroll-snap-align:start;scroll-snap-stop:always}
/* Герой — экран сразу, с первой отрисовки: если ставить это классом из JS,
   после загрузки страница подпрыгивает на блок вниз (жёсткий снап пересчитывает
   ближайшую точку, когда высота меняется задним числом). */
#home{min-height:var(--sh);scroll-snap-align:start;scroll-snap-stop:always;padding:76px 0 56px}
/* но если герой страницы собран из колонок — экраны это они, а не секция */
#home:has(.col),#home.hascols{min-height:0;scroll-snap-align:none;padding:0}

.cols,.cols2{display:flex;flex-direction:column;height:auto;width:100%}
/* один селектор .col на всю базу: в десктопном блоке его перебивают
   .cols>.col и .cols2>.col — без войны специфичностей */
.col{flex:0 0 auto;width:100%;position:relative;display:flex;flex-direction:column;
  justify-content:center;min-height:var(--sh);height:auto;overflow:visible;
  scroll-snap-align:start;scroll-snap-stop:always;
  padding:clamp(84px,19vw,104px) clamp(20px,5.5vw,28px) clamp(56px,13vw,76px)}
/* фото-панель — такой же полноэкранный блок, как и текстовый */
.col.photo{min-height:var(--sh);padding:0;overflow:hidden;background-size:cover;background-position:center;
  background-color:var(--ink);background-blend-mode:luminosity}
.col.photo::after{content:"";position:absolute;inset:0;background:rgba(8,8,10,.25)}
.col.photo.tint::after{background:var(--acd);mix-blend-mode:color;opacity:.85}

/* воздух внутри блока */
.col .lbl{margin-bottom:14px}
.col .big{margin-top:0;margin-bottom:6px}
.col p{font-size:clamp(15px,1.05vw + 11px,16.5px);margin-top:14px}
.col p + p{margin-top:10px}
.linklist{margin-top:14px}
.linklist a{padding:15px 2px}
.pkg{padding:15px 0}
.pkg b{font-size:14px;letter-spacing:.1em}
.pblock{padding:15px 0}
.pblock b{font-size:14px;letter-spacing:.08em}
.qa2{padding:15px 0}
.qa2 b{font-size:15px}
.skill{margin-top:20px}
.skill .sr{font-size:11px;letter-spacing:.12em}
.skill .sb{margin-bottom:16px}
.certlist{margin-top:12px}
.certrow{flex-direction:column;align-items:flex-start;gap:4px;padding:12px 0}
.certrow .cn{font-size:14.5px;font-weight:600}
.certrow .cd{font-size:11.5px}
.col [style*="display:flex"][style*="gap"]{gap:12px 14px}

/* размеры заголовков */
.big{font-size:clamp(26px,7.2vw,44px)}
/* Подпись раздела на фотографии. Все значения — в пикселях, а не в процентах:
   процент считается от высоты панели, и стоит панели чуть отличаться по высоте —
   подписи разъезжаются по уровню. Одно правило на все разделы и все страницы. */
.stamp,.col.photo .stamp,.cell.photo .stamp{
  font-size:32px;line-height:1.06;left:24px;bottom:56px;right:auto;top:auto}

/* герой */
#home{align-items:center;justify-content:center;
  background:url(/bv/img/bg-home.jpg) center/cover;background-color:var(--ink);background-blend-mode:luminosity}
#home::before{content:"";position:absolute;inset:0;background:rgba(8,8,10,.62)}
#home .in{position:relative;z-index:8;text-align:center;padding:0 clamp(20px,6vw,30px);max-width:100%}
#home .ns{font-family:'Playfair Display',serif;font-style:normal;font-size:clamp(44px,13vw,86px);text-transform:uppercase;line-height:1}
#home .hh{font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(27px,7.6vw,46px);line-height:1.1;text-transform:uppercase;margin:10px 0 0}
#home .tag{margin-top:16px;font-size:14px;letter-spacing:.5em;text-transform:uppercase;color:var(--mut)}
#home .htxt{max-width:min(760px,100%);margin:18px auto 0;color:var(--mut);font-size:clamp(15px,1.1vw + 11px,17px);line-height:1.65}
#home .sig{margin-top:20px;font-size:clamp(11.5px,.5vw + 9.5px,14px);font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:rgba(242,242,242,.5);line-height:1.7}
#home .lbl{justify-content:center;flex-wrap:wrap}
#home .lbl::after{display:none}

/* кнопки — один рост и ритм */
.brk,.gowa,.mcta,.ovlwide .close,.order{display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;font-size:11.5px;letter-spacing:.2em;padding:0 22px;margin-top:22px;width:auto;max-width:100%}
/* Кнопка с иконкой. На телефоне иконка и подпись стоят рядом всегда —
   наведения тут нет. Сворачивание до одной иконки живёт в десктопном блоке. */
.icb{gap:10px}
.ic{width:16px;height:16px;flex:0 0 auto;display:block}
.icb .tx{white-space:nowrap}
.brk::before,.brk::after,.gowa::before,.gowa::after,.mcta::before,.mcta::after{width:10px}
/* группы кнопок столбиком: перебиваем инлайновые стили в разметке — единственное место с !important */
.col > div[style*="display:flex"],
.ovlwide div[style*="display:flex"]{display:flex!important;flex-direction:column;align-items:stretch;gap:12px!important}
.col > div[style*="display:flex"] > .brk,
.col > div[style*="display:flex"] > .gowa,
.col > div[style*="display:flex"] > a,
.ovlwide div[style*="display:flex"] > .gowa{width:100%;margin-top:0}

/* шапка и служебные кнопки на телефоне */
.logo{left:16px;top:12px;padding:6px;min-height:44px;display:flex;align-items:center}
.logo img{height:34px}
.menu-btn{right:14px;top:12px;font-size:11px;gap:8px;padding:12px 6px;min-height:44px}
.menu-btn .ln,.menu-btn .ln::before,.menu-btn .ln::after{width:22px}
.share{right:14px;bottom:calc(14px + env(safe-area-inset-bottom));padding:12px;min-height:44px;min-width:44px}
.back{right:18px;top:18px;font-size:11px;padding:8px 14px}
.dots{display:none}
.mov{padding:80px 20px 30px;overflow-y:auto;align-items:flex-start}
.mov a.mi{font-size:clamp(26px,7.5vw,40px);padding:6px 0}
.mov .subm{gap:12px 14px}
.mov .subm a{font-size:11px}
.shovl{flex-direction:column;gap:26px}
.shovl svg{width:42px;height:42px}
.snav{width:34px;height:34px}
.wnav2{display:flex;align-items:center;justify-content:center;width:46px;height:46px;
  top:50%;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;
  background:rgba(242,242,242,.92);color:var(--ink);font-size:20px;z-index:9}
.wnav2.prev{left:10px}
.wnav2.next{right:10px}
#works.nav-on .wnav2{opacity:1;visibility:visible}
/* информационный экран проектов: ссылки без адресов не должны выглядеть кликабельными */
.col.gen .linklist a{cursor:default}

/* ШТОРКА на телефоне: накрывает экран целиком, снизу вверх.
   1) панель переносит в <body> сам JS — внутри секции Safari зажимает position:fixed;
   2) высоту JS ставит инлайном в пикселях, dvh на iOS считается не всегда так, как ждём;
   3) закрытая панель скрыта через visibility, иначе создаёт лишнюю прокрутку;
   4) body при этом не трогаем вообще — вместо блокировки прокрутки overscroll-behavior. */
.ovlwide{position:fixed;top:0;left:0;right:auto;bottom:0;width:100%;height:100svh;height:100dvh;
  display:flex;flex-direction:column;justify-content:flex-start;
  transform:translateY(100%);visibility:hidden;
  transition:transform .5s cubic-bezier(.77,0,.18,1),visibility 0s linear .5s;
  padding:0 20px calc(40px + env(safe-area-inset-bottom));
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;z-index:80}
.ovlwide.open{transform:none;visibility:visible;
  transition:transform .5s cubic-bezier(.77,0,.18,1),visibility 0s}
.ovlwide>*{flex:0 0 auto}
.ovlwide h3{font-size:clamp(24px,7vw,34px)}
.ovlwide p,.ovlwide>p{font-size:15px}
/* «Закрыть» — липкая шапка шторки по центру, всегда на виду */
.ovlwide .close{position:sticky;top:0;left:auto;right:auto;bottom:auto;
  width:calc(100% + 40px);max-width:none;margin:0 -20px 14px;padding:0 46px;min-height:62px;flex:0 0 auto;
  justify-content:center;background:var(--cream);z-index:90}
.ovlwide .close::before,.ovlwide .close::after{top:12px;bottom:12px}
.ovlwide .close::before{left:20px}
.ovlwide .close::after{right:20px}
/* Низ шторки заявки: «Закрыть» и «Отправить в WhatsApp» стоят рядом. Кнопка
   отправки раньше жила внутри самого документа — её там не видно, пока не
   долистаешь, и она мешала читать собранное сообщение. */
.ovlfoot{position:sticky;top:0;z-index:90;display:flex;align-items:stretch;gap:10px;
  width:calc(100% + 40px);margin:0 -20px 14px;padding:0 14px;background:var(--cream)}
.ovlwide .ovlfoot .close{position:static;width:auto;flex:1 1 0;margin:0;padding:0 34px;min-height:62px}
.ovlwide .ovlfoot .close::before{left:8px}
.ovlwide .ovlfoot .close::after{right:8px}
/* На телефоне «Отправить в WhatsApp» — закреплённая полоса внизу экрана:
   «Закрыть» держит верх, отправка держит низ, между ними прокручивается
   документ заявки. Обе кнопки на виду в любой момент, листать не нужно. */
#bgo.ready{position:fixed;left:0;right:0;bottom:0;width:100%;
  margin:0;min-height:62px;padding:0 46px calc(env(safe-area-inset-bottom));
  background:var(--cream);z-index:95}
#bgo::before{left:20px}
#bgo::after{right:20px}
/* Кнопка отправки: тот же контурный стиль, что у всех кнопок сайта. Живёт под
   панелью конфигуратора, а не рядом с «Закрыть» — рядом они наезжали друг на
   друга, когда подпись «Закрыть» раскрывалась по наведению.
   Появляется только когда в заявке что-то выбрано. */
#bgo{display:none}
#bgo.ready{display:inline-flex}
.ovlwide.hasgo{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
.ovlcol{padding:24px 20px}

/* конфигуратор на телефоне */
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:20px 0 0;width:100%}
.tab{font-size:11.5px;padding:13px 8px;letter-spacing:.06em;white-space:normal;
  min-height:46px;display:flex;align-items:center;justify-content:center}
.bwrap{flex-direction:column;margin-top:0}
.docwrap{flex:none;width:100%;background:none;border:none;box-shadow:none}
.doc{padding:22px 18px;font-size:15px;line-height:2}
.doc-h .dtitle{font-size:18px}
.plh{border-left:none;border-top:1px solid rgba(13,13,15,.12);padding:20px 18px}
.grp{margin:18px 0 8px}
.chips{gap:8px}
.chip{font-size:12.5px;padding:10px 6px}
.slot{font-size:13.5px}

/* ПРОЕКТЫ на телефоне: лента карточек с фото-фоном, листается вбок */
#works{display:flex;flex-direction:column;justify-content:center;padding:0;position:relative;overflow:hidden;height:var(--sh)}
/* заголовок больше не нужен: перед лентой идёт отдельный экран-фотография «Проекты» */
#works::before{content:none}
#works .grid{display:flex;flex-direction:row;flex:1 1 auto;height:100%;width:100%;align-items:stretch;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  gap:0;padding:0;scrollbar-width:none;scroll-padding:0}
#works .grid::-webkit-scrollbar{display:none}
/* ПРОЕКТЫ на телефоне: карточка компании — фотография — карточка — фотография.
   Порядок в разметке шахматный (он нужен десктопу), поэтому чередование задаём
   через order: слайды перемешиваются только в этой ленте и только на телефоне. */
/* карточка проекта — целый экран, как и остальные блоки */
.cell{flex:0 0 100%;width:100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always;
  display:flex;flex-direction:column;justify-content:flex-end;border:none;
  padding:clamp(84px,19vw,104px) clamp(20px,5.5vw,28px) clamp(56px,13vw,76px);
  background-size:cover;background-position:center;position:relative;overflow:hidden}
#works .grid .cell.dark{background-color:var(--ink);background-image:none}
.cell.dark::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,8,10,0) 0%,rgba(8,8,10,.35) 100%);z-index:0}
/* описание компании прижато к низу карточки, а у соседней — к верху */
.cell.up{justify-content:flex-start}
.cell.photo{padding:0;background-color:var(--ink);background-blend-mode:normal;cursor:pointer}
.cell.photo::after{content:"";position:absolute;inset:0;background:rgba(8,8,10,.18)}
.cell.photo .stamp{position:absolute;z-index:3}
/* плюсик на телефоне виден сразу: наведения тут нет */
.cell.photo .plus{opacity:.9;transform:translate(-50%,-50%) scale(1);font-size:38px}
/* Текст внутри карточки поднимаем над затемнением. Декорации (рябь, плюсик,
   подпись) сюда не попадают: им нужен position:absolute, иначе плюсик уезжает
   из центра вниз, к концу содержимого. На этом уже обожглись. */
.cell > *:not(.phfx):not(.plus):not(.stamp){position:relative;z-index:1}
/* рябь и плюсик — поверх затемнения, иначе их не видно */
.cell .phfx{z-index:3}
.cell .plus{z-index:4}
/* подпись «Проекты» на карточках ленты не нужна: экран-заставка с этим словом уже был выше */
#works .cell .stamp{display:none}
.cell .big{font-size:clamp(21px,5.8vw,28px)}
.cell .dt{margin-top:10px;font-size:13px;line-height:1.8;color:var(--mut)}
.cell .dt b{color:var(--wh);font-weight:800;font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-right:10px}

/* юридические страницы на телефоне */
.legalsec{padding:70px 0 50px}
.legalwrap{padding:0 20px}
.legalwrap .big{font-size:clamp(24px,7vw,34px)}
.legalwrap h2{font-size:19px}
.legalwrap p,.legalwrap li{font-size:15px}

/* ============ 3. ДЕСКТОП ============ */
@media (min-width:901px){
  /* ОДНА СЕТКА ЛИНИЙ НА ВЕСЬ САЙТ. Шаг общий, а привязка — к окну, а не к панели
     (background-attachment:fixed). Поэтому линии на всех блоках стоят на одних и
     тех же местах: прокручиваешь страницу сверху донизу — сетка не сдвигается ни
     разу, где бы ни оказалась фотография. Капли скрипт ставит на те же линии. */
  :root{--pitch:120px}
  .phfx{background-attachment:fixed}
  body{padding-bottom:0}
  html,body{height:auto;overflow:hidden}
  main{position:static;width:auto;height:100vh;height:100svh;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none}
  main::-webkit-scrollbar{display:none}
  section{height:100vh;height:100svh;min-height:0;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always;display:block}
  #home,#works{min-height:0;scroll-snap-stop:always}

  /* три вертикальные панели и сплит 50/50 */
  .cols,.cols2{flex-direction:row;height:100%}
  .col{justify-content:center;padding:0 3.4vw;min-height:0;overflow:hidden;scroll-snap-align:none}
  .cols>.col{flex:0 0 33.3333%;width:33.3333%}
  .cols2>.col{flex:0 0 50%;width:50%}
  .cols>.col:first-child:not(.photo),.cols2>.col:first-child:not(.photo),
  .cols>.col:last-child:not(.photo),.cols2>.col:last-child:not(.photo){padding:0 3.4vw}
  .col.photo{min-height:0;padding:0}
  #contact .col.dark{padding:0 3.4vw}
  #contact .cols .col p{max-width:520px}
  .col .lbl{margin-bottom:0}
  .col .big{margin:16px 0 0}
  .col p{margin-top:22px}
  .col p + p{margin-top:22px}
  .col [style*="display:flex"][style*="gap"]{gap:inherit}

  .big{font-size:clamp(34px,3.6vw,56px);line-height:1.02}
  .stamp,.col.photo .stamp,.cell.photo .stamp{
    font-size:clamp(38px,4vw,64px);line-height:1.06;left:44px;bottom:44px;right:auto;top:auto}

  /* герой */
  #home,#home.scr,#home:has(.col),#home.hascols{min-height:0;padding:0;display:flex;scroll-snap-align:start}
  #home .in{padding:0 7vw}
  #home .ns{font-size:clamp(58px,11vw,140px)}
  #home .hh{font-size:clamp(38px,6vw,86px);line-height:1.05;margin:14px 0 0}
  #home .htxt{margin:26px auto 0;line-height:1.75}
  #home .sig{margin-top:30px;line-height:normal}

  /* кнопки в десктопном ритме */
  .brk,.gowa,.mcta,.order{display:inline-block;min-height:0;width:max-content;max-width:none;
    font-size:12.5px;letter-spacing:.3em;margin-top:34px}
  .brk{padding:14px 26px}
  .gowa,.mcta{padding:15px 30px;letter-spacing:.28em}
  .mcta{font-size:13px}
  .brk::before,.brk::after,.gowa::before,.gowa::after,.mcta::before,.mcta::after{width:12px}
  .col > div[style*="display:flex"],
  .ovlwide div[style*="display:flex"]{flex-direction:row;align-items:center}
  .col > div[style*="display:flex"] > .brk,
  .col > div[style*="display:flex"] > .gowa,
  .col > div[style*="display:flex"] > a,
  .ovlwide div[style*="display:flex"] > .gowa{width:auto;margin-top:34px}

  /* шапка и служебные кнопки */
  .logo{left:34px;top:22px;padding:0;min-height:0;display:block}
  .logo img{height:46px}
  .menu-btn{right:34px;top:30px;font-size:13px;gap:12px;padding:0;min-height:0}
  .menu-btn .ln,.menu-btn .ln::before,.menu-btn .ln::after{width:26px}
  .share{right:34px;bottom:26px;padding:6px;min-height:0;min-width:0}
  .back{right:34px;top:30px;font-size:13px;padding:10px 20px}
  .dots{display:flex}
  .mov{padding:0;overflow:visible;align-items:center}
  .mov a.mi{font-size:clamp(30px,5vw,54px);padding:8px 0}
  .mov .subm{gap:16px}
  .mov .subm a{font-size:12px}
  .shovl{flex-direction:row;gap:34px}
  .shovl svg{width:54px;height:54px}
  .snav{width:40px;height:40px;font-size:16px}
  .wnav2{display:block;width:44px;height:44px;font-size:18px;opacity:1;visibility:visible}
  .wnav2.prev{left:60px}
  .wnav2.next{right:60px}

  /* ШТОРКА на десктопе: раскрывается от черты блока до края секции */
  .ovlwide{position:absolute;top:0;left:33.3333%;right:0;bottom:0;width:auto;height:auto;
    justify-content:center;transform:translateX(103%);visibility:visible;
    transition:transform .7s cubic-bezier(.77,0,.18,1);
    padding:8vh 5vw;overflow-y:auto;overscroll-behavior:auto;scrollbar-width:thin;z-index:6}
  .ovlwide.open{transform:none;transition:transform .7s cubic-bezier(.77,0,.18,1)}
  .cols2 .ovlwide{left:50%}
  .ovlwide h3{font-size:clamp(30px,3.4vw,52px)}
  .ovlwide p{font-size:16.5px}
  .ovlwide>p{font-size:16px}
  /* «Закрыть» — всегда в правом верхнем углу шторки, на всех шторках сайта.
     Внизу она налезала на кнопку отправки, а в углу не пересекается ни с чем
     и находится там же, где её ищут по привычке. */
  .ovlwide .close{position:absolute;top:4vh;right:4vw;bottom:auto;left:auto;
    width:max-content;margin:0;padding:13px 26px;min-height:0;display:inline-block;
    background:none;font-size:12.5px;letter-spacing:.28em;z-index:8}
  .ovlwide .close::before,.ovlwide .close::after{top:0;bottom:0;width:12px}
  .ovlwide .close::before{left:0}
  .ovlwide .close::after{right:0}
  /* «Закрыть» слева, «Отправить» справа — по разным краям шторки. Рядом они
     читались как одна кнопка со значками по бокам, и было непонятно, куда жать. */
  .ovlfoot{position:absolute;bottom:6vh;left:5vw;right:5vw;top:auto;width:auto;
    margin:0;padding:0;background:none;align-items:center;justify-content:space-between;z-index:7}
  /* На десктопе кнопка стоит в потоке под панелью заявки. Подпись у неё
     не сворачивается: это главное действие шторки. */
  /* position:relative обязателен: скобки [ ] — это ::before/::after, и при
     static они считаются от ближайшего позиционированного предка, то есть
     улетают со шторки, и кнопка остаётся без рамки и без анимации. */
  #bgo.ready{position:relative;display:inline-flex;width:max-content;margin:26px 0 0;
    padding:0 30px;min-height:54px;background:none;box-shadow:none}
  #bgo::before{left:0}
  #bgo::after{right:0}
  .ovlwide .ovlfoot .close{position:relative}
  /* В шторке заявки «Закрыть» уходит в правый верхний угол: внизу теперь стоит
     кнопка отправки, и две кнопки на одной строке накладывались друг на друга.
     Наверху крестик не пересекается ни с чем и всегда на виду. */
  .ovlfoot{top:4vh;right:4vw;bottom:auto;left:auto;width:max-content;justify-content:flex-end}
  /* заголовку оставляем место под крестик, чтобы они не наезжали */
  .ovlwide h3{padding-right:110px}
  .ovlwide.hasgo{padding-bottom:10vh;padding-top:10vh}
  #bgo .tx{max-width:340px;padding-left:12px;opacity:1}
  /* Обе кнопки низа шторки — одна коробка: одинаковая высота и отступы,
     иначе скобки [ ] стоят на разной высоте и значки разъезжаются. */
  .ovlwide .ovlfoot .close,.ovlwide .ovlfoot .gowa{position:static;flex:0 0 auto;
    width:max-content;margin:0;padding:0 20px;min-height:54px;
    display:inline-flex;align-items:center;justify-content:center}
  .ovlwide .ovlfoot .close::before,.ovlwide .ovlfoot .gowa::before{left:0;top:0;bottom:0}
  .ovlwide .ovlfoot .close::after,.ovlwide .ovlfoot .gowa::after{right:0;top:0;bottom:0}
  .ovlfoot .tx{line-height:1}
  .ovlwide .ovlfoot .gowa{background:none;box-shadow:none;z-index:auto}
  /* Кнопка с иконкой на десктопе свёрнута до значка; при наведении подпись
     разъезжается вправо, а скобки [ ] смыкаются в рамку — как у всех кнопок.
     display обязателен: общее правило кнопок на десктопе ставит inline-block,
     а иконке с подписью нужен flex, иначе значок уезжает из центра рамки. */
  .icb,.ovlwide .close.icb{display:inline-flex;align-items:center;justify-content:center;
    gap:0;padding:0 18px;min-height:52px;width:max-content}
  .icb .tx{display:inline-block;max-width:0;padding-left:0;opacity:0;overflow:hidden;
    transition:max-width .45s cubic-bezier(.77,0,.18,1),padding-left .45s cubic-bezier(.77,0,.18,1),opacity .28s}
  .icb:hover .tx,.icb:focus-visible .tx{max-width:340px;padding-left:12px;opacity:1}
  .icb .ic{width:18px;height:18px}
  .ovlfoot{gap:26px}
  .ovlcol{padding:0 3.4vw}

  /* конфигуратор на десктопе */
  .tabs{display:flex;gap:8px;margin:30px 0 0}
  .tab{flex:1;font-size:13px;letter-spacing:.12em;padding:14px 10px;white-space:nowrap;min-height:0;display:block}
  .bwrap{flex-direction:row;gap:0}
  .docwrap{flex:1.5;width:auto}
  .doc{padding:30px 34px 26px;font-size:16.5px;line-height:2.15}
  .doc-h .dtitle{font-size:22px}
  .plh{border-left:1px solid rgba(13,13,15,.12);border-top:none;padding:26px}
  .grp{margin:26px 0 10px}
  .chips{gap:10px}
  .chip{font-size:14px;padding:11px 10px}
  .slot{font-size:14.5px}

  /* ПРОЕКТЫ на десктопе: шахматка 3×2 */
  #works{min-height:0;height:100vh;height:100svh;display:block;padding:0}
  #works::before{display:none}
  #works .grid{display:grid;grid-auto-flow:column;grid-template-rows:1fr 1fr;grid-auto-columns:33.3334%;
    height:100%;width:auto;overflow-x:auto;scroll-snap-type:x mandatory;gap:0;padding:0}
  .cell{flex:none;width:auto;min-height:0;scroll-snap-align:start;justify-content:center;
    padding:0 2.6vw;border:none;background:none}
  .cell::after{display:none}
  .cell.photo{display:flex;padding:0;cursor:crosshair;background-size:cover;background-position:center;
    background-color:var(--ink);background-blend-mode:luminosity}
  .cell.photo .plus{opacity:0;transform:translate(-50%,-50%) scale(.5);font-size:48px}
  .cell.dark::after{display:none}
  #works .cell .stamp{display:block}
  .cell.photo .stamp{position:absolute}
  #works .grid > .cell.clone{display:none}
  .cell.up{justify-content:center}
  .col.gen,section.gen{display:none}
  #works::before{content:none}
  .cell.photo::after{content:"";display:block;position:absolute;inset:0;background:rgba(8,8,10,.25);transition:.4s}
  .cell.photo:hover::after{background:rgba(8,8,10,.05)}
  .cell.dark,#works .grid .cell.dark{background:var(--ink);background-image:none}
  .cell .big{font-size:clamp(22px,2vw,32px)}
  .cell .dt{margin-top:0;font-size:14.5px;line-height:2}
  .cell .dt b{font-size:12px;letter-spacing:.2em}

  /* шкалы, сертификаты, списки */
  .skill{margin-top:26px}
  .skill .sr{font-size:12.5px;letter-spacing:.2em}
  .skill .sb{margin-bottom:22px}
  .certlist{margin-top:16px}
  .certrow{flex-direction:row;justify-content:space-between;align-items:baseline;gap:18px;padding:11px 0}
  .certrow .cn{font-size:15.5px}
  .certrow .cd{font-size:12.5px}
  .linklist{margin-top:10px}
  .linklist a{padding:clamp(14px,1.4vw,20px) 2px}
  .pkg{padding:18px 0}
  .pkg b{font-size:15px;letter-spacing:.14em}
  .pblock{padding:16px 0}
  .pblock b{font-size:15px;letter-spacing:.1em}
  .qa2{padding:16px 0}
  .qa2 b{font-size:16px}

  /* юридические страницы */
  .legalsec{padding:9vh 0 7vh}
  .legalwrap{padding:0 24px}
  .legalwrap .big{font-size:clamp(30px,3.4vw,48px)}
  .legalwrap h2{font-size:22px}
  .legalwrap p,.legalwrap li{font-size:16px}
}

/* ============ 4. ЧАСТНЫЕ СЛУЧАИ ============ */

/* очень узкие телефоны */
@media (max-width:400px){
  .chips{grid-template-columns:1fr}
  .big{font-size:clamp(24px,7.6vw,32px)}
  .doc{font-size:14.5px}
}

/* планшеты и небольшие ноутбуки */
@media (min-width:901px) and (max-width:1200px){
  .col{padding:0 3vw}
  .big{font-size:clamp(28px,3.4vw,44px)}
  .tab{padding:12px 8px;font-size:12px}
  /* Колонка тут около 300px — длинные подписи кнопок не помещаются в строку
     и вылезают за край экрана. Разрешаем перенос и ужимаем разрядку. */
  .brk,.gowa,.mcta,.order{max-width:100%;white-space:normal;text-align:center;
    letter-spacing:.16em;padding:12px 18px;line-height:1.35}
  .col > div[style*="display:flex"]{flex-wrap:wrap}
}

/* телефон лёжа: не растягиваем секции по высоте */
@media (max-height:520px) and (orientation:landscape){
  section{min-height:auto;padding:40px 0}
  #home{min-height:auto;padding:70px 0 50px}
}


/* ============ 5. ПРАВКИ 2026-08 (дизайн-система БВ) ============
   Добавлено блоком в конец: каскад отдаёт им приоритет, ничего выше не тронуто. */

/* Порядок на телефоне: в каждой секции сначала фотоблок, потом информационный. */
@media (max-width:900px){
  .cols > .col.photo,.cols2 > .col.photo{order:-1}
  /* Чипсы заявки — минимальная цель касания 44px (были 39px). */
  .chip{min-height:44px;display:flex;align-items:center;justify-content:center}
}

/* Короткая подпись на фотоблоке площадки: чем полезна площадка.
   Только телефон и планшет — там фотоблок идёт первым и должен объяснять страницу. */
.photocap{position:absolute;z-index:3;left:24px;right:24px;bottom:104px;
  font-family:'Manrope',sans-serif;font-size:14.5px;line-height:1.65;color:var(--mut);max-width:min(420px,100%)}
.photocap b{display:block;margin-bottom:8px;font-size:11px;font-weight:800;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ac)}

@media (min-width:901px){
  .photocap{display:none}
  /* Планшеты и небольшие ноутбуки: кнопку НЕ переносим на две строки —
     ужимаем кегль, разрядку и отступы, подпись остаётся в строку. */
  .brk,.gowa,.mcta,.order{white-space:nowrap}
  /* Меню прокручивается, если разделов больше, чем влезает в окно.
     Центрирование заменено авто-отступами: иначе верхний пункт уходит
     за начальный край скроллбокса и до него нельзя добраться. */
  .mov{padding:6vh 20px;overflow-y:auto;align-items:flex-start}
  .mov > div{margin:auto}
  /* Панель вкладок заявки: одна строка на все площадки. min-width:0 снимает
     минимум по длинному слову, длинные подписи переносятся внутри вкладки. */
  .tabs{flex-wrap:nowrap}
  .tab{flex:1 1 0;min-width:0;font-size:11.5px;letter-spacing:.02em;padding:12px 4px;
    white-space:normal;line-height:1.25;min-height:52px;display:flex;align-items:center;justify-content:center;text-align:center}
}
@media (min-width:901px) and (max-width:1200px){
  .brk,.gowa,.mcta,.order{font-size:11.5px;letter-spacing:.14em;padding:12px 14px;line-height:1.2}
  .lbl{gap:10px}
  .lbl::after{width:28px}
}
@media (min-width:901px) and (max-width:1010px){
  .col{padding:0 2.4vw}
  .brk,.gowa,.mcta,.order{font-size:11px;letter-spacing:.1em;padding:11px 12px}
  .lbl{font-size:11px;gap:8px}
  .lbl::after{width:20px}
}

/* «Закрыть» — липкая полоса по верху шторки, кнопка по центру подложки.
   Была absolute и уезжала вместе с содержимым при прокрутке. */
@media (min-width:901px){
  .ovlwide{justify-content:flex-start;padding:4vh 5vw 8vh;scrollbar-width:none}
  .ovlwide::-webkit-scrollbar{display:none}
  .ovlwide h3{margin-top:auto;padding-right:0}
  .ovlwide > *:last-child{margin-bottom:auto}
  .ovlwide.hasgo h3{margin-top:0}
  .ovlwide.hasgo > *:last-child{margin-bottom:0}
  .ovlwide .close{position:sticky;top:10px;left:auto;right:auto;bottom:auto;align-self:stretch;
    width:100%;max-width:none;margin:0 0 calc(3vh + 10px);padding:0 30px;min-height:52px;
    background:var(--cream);box-shadow:0 -10px 0 var(--cream),0 10px 0 var(--cream);
    display:flex;align-items:center;justify-content:center;z-index:9}
  .ovlwide .close::before{left:0;top:0;bottom:0}
  .ovlwide .close::after{right:0;top:0;bottom:0}
  .ovlfoot{position:sticky;top:10px;left:auto;right:auto;bottom:auto;align-self:stretch;
    width:100%;margin:0 0 calc(3vh + 10px);padding:0;background:var(--cream);
    box-shadow:0 -10px 0 var(--cream),0 10px 0 var(--cream);
    align-items:stretch;justify-content:stretch;z-index:9}
  .ovlwide .ovlfoot .close{position:static;flex:1 1 0;width:auto;margin:0;min-height:52px;box-shadow:none}
}