/* ═══════════════════════════════════════════════════════════
   СудБокс — общие блоки страниц услуг: «Приёмка», «Строительная экспертиза»,
   «Тепловизионное обследование». Подключать после vellum.css. Скрипты — service.js
   ═══════════════════════════════════════════════════════════ */

/* заголовок блока */
.pr-head{max-width:840px;margin-bottom:34px}
.pr-head .heading{margin-top:16px}
.pr-head .muted{margin-top:14px;font-size:17px;line-height:1.55}

/* длинное слово в H1 («Тепловизионное») не помещается на узких телефонах — уменьшаем кегль */
.hero-inner .htext{min-width:0}
@media(max-width:440px){.hero-inner .display.long{font-size:min(34px,7.4vw)}}

/* первый экран с видео: затемнение слева, чтобы текст читался на светлых кадрах */
.hero-img:has(>video)::after{background:linear-gradient(90deg,rgba(15,14,18,.6),rgba(15,14,18,0) 900px),linear-gradient(180deg,rgba(15,14,18,.05),rgba(15,14,18,.42))}

/* сетка карточек с фото: зоны и виды (3:2), приборы (4:3) */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pgrid.c3{grid-template-columns:repeat(3,1fr)}
.pcard{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:rgba(255,255,255,.6)}
.pcard .ph{aspect-ratio:3/2;background:#dcdbd5;display:flex;align-items:center;justify-content:center;text-align:center;padding:14px;font-size:12.5px;line-height:1.4;color:#5e5955;overflow:hidden}
.pgrid.eq .pcard .ph{aspect-ratio:4/3}
.eq-note{margin-top:16px;font-size:14px;line-height:1.5;color:#66615d;max-width:760px}
.pcard .ph:has(img){padding:0}
.pcard .ph picture{display:block;width:100%;height:100%}
.pcard .ph img{width:100%;height:100%;object-fit:cover}
.pcard .tx{padding:18px 20px 22px}
.pcard h3{font-weight:500;font-size:17px;line-height:1.25}
.pcard p{margin-top:8px;font-size:14px;line-height:1.5;color:#66615d}
.pnote{margin-top:20px;font-size:14px;color:#66615d}
@media(max-width:1100px){.pgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){.pgrid,.pgrid.c3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.pgrid,.pgrid.c3{grid-template-columns:1fr}.pgrid.eq{grid-template-columns:1fr 1fr;gap:10px}.pgrid.eq .pcard .tx{padding:12px 14px 16px}.pgrid.eq .pcard h3{font-size:15px}.pgrid.eq .pcard p{font-size:13px}}
@media(max-width:374px){.pgrid.eq{grid-template-columns:1fr}}

/* шаги: номер + содержание */
.steps{border-top:1px solid var(--line)}
.steps li{list-style:none;display:grid;grid-template-columns:90px 1fr;gap:20px;padding:26px 0;border-bottom:1px solid var(--line)}
.steps .sn{font-weight:300;font-size:clamp(26px,3vw,36px);line-height:1;color:var(--mercury)}
.steps h3{font-weight:400;font-size:clamp(18px,2vw,22px);line-height:1.25}
.steps p{margin-top:8px;font-size:15px;line-height:1.6;color:#66615d;max-width:720px}
@media(max-width:560px){.steps li{grid-template-columns:48px 1fr;gap:12px}}

/* что получаете + синий блок о специалистах */
.get .feats li span:last-child{text-align:right}
.get .feats.solo li{justify-content:flex-start}
.split .feats.solo li span:last-child{color:var(--carbon);text-align:left}
.spec{border-radius:32px;background:var(--blue-deep);color:#fff;padding:40px}
.spec .heading{color:#fff;margin-top:16px;font-size:clamp(22px,2.4vw,28px)}
.split .body .spec p{margin-top:16px;color:rgba(255,255,255,.75);font-size:15px;line-height:1.6;max-width:none}

/* FAQ: кнопки внутри ответов, заготовки */
.acc .a .btn{margin-top:18px}
.acc .a p+p{margin-top:10px}
.acc .item.draft .q h4{color:#8b8580}
.draft-tag{display:inline-block;margin-left:10px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--red);border:1px dashed var(--red);border-radius:6px;padding:3px 7px;vertical-align:middle}

/* что дальше */
.next-cards .scard{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:34px}
.next-cards .scard h3{margin:0;font-weight:400;font-size:clamp(19px,2.2vw,24px)}
.next-cards .scard span{font-size:22px;color:var(--blue)}
.cgrid.c3.next-cards{grid-template-columns:repeat(3,1fr)}
@media(max-width:980px){.cgrid.c3.next-cards{grid-template-columns:1fr}}

/* плашка с цифрами (3 в ряд) */
.mrow.m3{grid-template-columns:repeat(3,1fr)}
@media(max-width:980px){.mrow.m3{grid-template-columns:1fr}}

/* метки-объекты */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips span{font-size:15px;padding:12px 18px;border-radius:100px;border:1px solid var(--line);background:rgba(255,255,255,.7)}

/* информационный блок с акцентной линией */
.info{border-left:4px solid var(--red);padding:6px 0 6px 28px;max-width:860px}
.info p{font-size:clamp(17px,1.8vw,20px);line-height:1.6;color:var(--carbon)}
.info.dark{border-left-color:var(--blue)}

/* акцентная плашка */
.plate{display:inline-block;margin-top:22px;padding:14px 20px;border-radius:14px;background:rgba(220,20,25,.08);color:var(--red-deep);font-size:15.5px;line-height:1.45}

/* список «термин — пояснение» (состав отчёта) */
.rlist{list-style:none;border-top:1px solid var(--line);max-width:900px}
.rlist li{padding:20px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.55;color:#4a4542}
.rlist li b{font-weight:500;color:var(--carbon)}

/* маркированный список «когда проводится» */
.dots{list-style:none;display:flex;flex-direction:column;gap:12px;max-width:760px}
.dots li{position:relative;padding-left:22px;font-size:16.5px;line-height:1.5}
.dots li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;background:var(--red)}

/* схема из шагов со стрелками; на мобильных — вертикально */
.scheme{display:flex;align-items:stretch;gap:14px}
.scheme .sc{flex:1;border:1px solid var(--line);border-radius:20px;padding:24px 22px;background:rgba(255,255,255,.65)}
.scheme .sc b{display:block;font-weight:300;font-size:30px;line-height:1;color:var(--mercury)}
.scheme .sc span{display:block;margin-top:12px;font-size:15.5px;line-height:1.45}
.scheme .ar{flex:none;align-self:center;color:var(--blue);font-size:22px}
@media(max-width:860px){.scheme{flex-direction:column}.scheme .ar{transform:rotate(90deg)}}

/* короткие шаги в ряд (как проходит обследование) */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:fl}
.flow li{list-style:none;border-top:2px solid var(--carbon);padding-top:16px;font-size:15.5px;line-height:1.5}
.flow li::before{counter-increment:fl;content:"0" counter(fl);display:block;font-weight:300;font-size:26px;color:var(--mercury);margin-bottom:10px}
@media(max-width:860px){.flow{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.flow{grid-template-columns:1fr}}

/* памятка */
.memo{border:1px solid var(--line);border-radius:28px;padding:36px 40px;background:rgba(255,255,255,.7);max-width:960px}
.memo h3{font-weight:500;font-size:18px;margin-top:26px}
.memo h3:first-child{margin-top:0}
.memo ul{margin-top:12px;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.memo li{font-size:15.5px;line-height:1.55;color:#4a4542}
.memo .memo-note{margin-top:24px;font-size:14.5px;font-style:italic;color:#66615d}
.memo-btns{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.memo-btns small{font-size:13px;color:#8b8580}
@media(max-width:560px){.memo{padding:26px 22px}}

/* пример из практики: галерея + карточка итога */
.ex{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:28px;align-items:start}
.gal-main{display:block;width:100%;aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:#e7e6e0;border:0;padding:0;cursor:zoom-in}
.gal-main img{width:100%;height:100%;object-fit:cover}
.gal-thumbs{margin-top:12px;display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.gal-thumbs button{aspect-ratio:1;border-radius:12px;overflow:hidden;border:2px solid transparent;padding:0;background:#e7e6e0;cursor:pointer}
.gal-thumbs button.on{border-color:var(--blue)}
.gal-thumbs img{width:100%;height:100%;object-fit:cover}
.ex-card{border:1px solid var(--line);border-radius:24px;padding:32px;background:#fff}
.ex-card .sum-l{font-size:14px;color:#66615d}
.ex-card .sum{font-weight:300;font-size:clamp(34px,3.6vw,46px);line-height:1.05;color:var(--red);margin-top:6px}
.ex-card h4{margin-top:24px;font-weight:500;font-size:16px}
.ex-card ul{margin-top:10px;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:15px;line-height:1.5}
.ex-card p{margin-top:16px;font-size:15px;line-height:1.6;color:#4a4542}
.ex-card small{display:block;margin-top:16px;font-size:12.5px;color:#8b8580;line-height:1.5}
.ex-card .btn{margin-top:22px}
.ex-card .ex-link{display:inline-block;margin-top:14px;font-size:14px;color:var(--blue);font-weight:500}
@media(max-width:900px){.ex{grid-template-columns:1fr}}

/* лайтбокс */
.lbox{position:fixed;inset:0;z-index:240;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(15,14,18,.86);opacity:0;pointer-events:none;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
.lbox.open{opacity:1;pointer-events:auto;visibility:visible;transition-delay:0s}
.lbox img{max-width:min(1280px,100%);max-height:88vh;border-radius:12px;object-fit:contain;background:#111}
.lbox img.up{width:min(960px,100%);height:auto}
.lbox button{position:absolute;width:46px;height:46px;border-radius:100px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:#fff;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lbox button:hover{background:#fff;color:var(--carbon)}
.lbox .lb-x{top:18px;right:18px}
.lbox .lb-p{left:18px;top:50%;transform:translateY(-50%)}
.lbox .lb-n{right:18px;top:50%;transform:translateY(-50%)}
.lbox .lb-c{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:rgba(255,255,255,.75);font-size:14px}

/* ═══ Страницы споров, надзора и сопровождения (правки 11.10) ═══ */

/* карточки с иконкой: проблемы, для кого, что делаем, направления */
.icards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.icards.c4{grid-template-columns:repeat(4,1fr)}
.icard{border:1px solid var(--line);border-radius:24px;padding:28px 26px 30px;background:rgba(255,255,255,.6)}
.icard .ic{width:52px;height:52px;border-radius:var(--r-pill);background:var(--blue-deep);color:#fff;display:flex;align-items:center;justify-content:center}
.icard .ic svg{width:24px;height:24px}
.icard h3{margin-top:22px;font-weight:500;font-size:18px;line-height:1.3}
.icard p{margin-top:10px;font-size:15px;line-height:1.55;color:#66615d}
.icards.big .icard{padding:34px 32px 36px}
.icards.big .icard h3{font-weight:400;font-size:clamp(20px,2vw,24px)}
.icards.big .icard p{font-size:15.5px}
.icards-note{margin-top:20px;font-size:15.5px;color:#66615d}
@media(max-width:1000px){.icards,.icards.c4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.icards,.icards.c4{grid-template-columns:1fr}}

/* плашки: что можно взыскать, что входит, почему мы */
.plates{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:1040px}
.plates .pl{border:1px solid var(--line);border-radius:18px;padding:20px 22px;background:rgba(255,255,255,.6);font-size:15.5px;line-height:1.55;color:#4a4542}
.plates .pl b{display:block;margin-bottom:4px;font-weight:500;font-size:16.5px;color:var(--carbon)}
.plates .pl small{display:block;margin-top:6px;font-size:13px;color:var(--mercury)}
.plates .pl.total{grid-column:1/-1;background:var(--blue-deep);border-color:transparent;color:#fff;font-weight:300;font-size:clamp(18px,2vw,22px);padding:24px 26px}
.plates.c3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.plates.c3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.plates,.plates.c3{grid-template-columns:1fr}}

/* список с галочками: что можно взыскать, что входит, почему мы */
.ticks{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 36px;margin:0;padding:0}
.ticks.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ticks li{display:flex;gap:14px;align-items:flex-start;padding-top:18px;border-top:1px solid var(--line)}
.ticks .tk{flex:none;width:28px;height:28px;border-radius:50%;background:var(--blue-deep);color:#fff;display:flex;align-items:center;justify-content:center}
.ticks .tk svg{width:15px;height:15px}
.ticks b{display:block;font-weight:500;font-size:16.5px;line-height:1.35;color:var(--carbon)}
.ticks .d{display:block;margin-top:6px;font-size:15px;line-height:1.55;color:#66615d}
.ticks-total{margin-top:28px;border-radius:18px;padding:24px 26px;background:var(--blue-deep);color:#fff;font-weight:300;font-size:clamp(18px,2vw,22px)}
@media(max-width:900px){.ticks,.ticks.n4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.ticks,.ticks.n4{grid-template-columns:1fr}}

/* этапы группами со сроком у группы */
.stg+.stg{margin-top:44px}
.stg-h{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;margin-bottom:14px}
.stg-h h3{font-weight:500;font-size:clamp(18px,2vw,21px)}
.term{display:inline-block;font-size:13.5px;line-height:1.3;color:var(--blue);border:1px solid rgba(0,60,115,.28);border-radius:var(--r-pill);padding:6px 14px;white-space:nowrap}
.steps h3 .term{margin-left:10px;vertical-align:middle;font-weight:400}
.steps .nt{font-style:italic;color:var(--mercury);font-weight:400}

/* две карточки рядом: оплата, форматы работы */
.duo{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.duo .dc{border:1px solid var(--line);border-radius:28px;padding:34px;background:rgba(255,255,255,.6)}
.duo .dc.dark{background:var(--blue-deep);border-color:transparent;color:#fff}
.duo .dc h3{font-weight:400;font-size:clamp(20px,2.2vw,26px);line-height:1.2}
.duo .dc p{margin-top:14px;font-size:16px;line-height:1.6;color:#4a4542}
.duo .dc.dark p{color:rgba(255,255,255,.8)}
@media(max-width:800px){.duo{grid-template-columns:1fr}.duo .dc{padding:28px 24px}}

/* памятка шагами; главный шаг выделен */
.msteps{list-style:none;counter-reset:ms;display:flex;flex-direction:column;gap:12px;max-width:920px}
.msteps>li{counter-increment:ms;position:relative;border:1px solid var(--line);border-radius:20px;padding:22px 26px 22px 78px;background:rgba(255,255,255,.6)}
.msteps>li::before{content:counter(ms,decimal-leading-zero);position:absolute;left:26px;top:19px;font-weight:300;font-size:24px;line-height:1.1;color:var(--mercury)}
.msteps h3{font-weight:500;font-size:17px;line-height:1.35}
.msteps p{margin-top:6px;font-size:15.5px;line-height:1.6;color:#4a4542}
.msteps>li.warn{background:rgba(220,20,25,.06);border-color:rgba(220,20,25,.4)}
.msteps>li.warn::before{color:var(--red)}
.msteps>li.warn h3{display:flex;align-items:center;gap:10px;color:var(--red-deep)}
.msteps>li.warn h3 .wi{display:inline-flex;width:22px;height:22px;color:var(--red);flex:none}
.msteps>li.warn h3 .wi svg{width:22px;height:22px}
.msteps>li.warn p b{color:var(--carbon);font-weight:600}
.msteps blockquote{margin-top:12px;padding-left:14px;border-left:2px solid rgba(220,20,25,.35);font-style:italic;font-size:14.5px;line-height:1.55;color:#66615d}
@media(max-width:560px){.msteps>li{padding:54px 20px 20px}.msteps>li::before{top:18px;left:20px}}

/* вкладки */
.tab-btns{display:inline-flex;flex-wrap:wrap;gap:6px;padding:5px;margin-bottom:26px;border:1px solid var(--line);border-radius:var(--r-pill);background:rgba(255,255,255,.6)}
.tab-btns [role=tab]{border:0;background:none;font:inherit;font-size:15px;padding:11px 20px;border-radius:var(--r-pill);color:#66615d;cursor:pointer;transition:background .25s,color .25s}
.tab-btns [role=tab][aria-selected=true]{background:var(--carbon);color:#fff}
.tab-btns [role=tab]:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.scheme .sc small{display:block;margin-top:8px;font-size:13px;line-height:1.45;color:#66615d}
.scheme.long .sc{padding:22px 18px}
.scheme.long .sc b{font-size:24px}
@media(max-width:1100px) and (min-width:861px){.scheme.long{flex-wrap:wrap}.scheme.long .ar{display:none}.scheme.long .sc{flex:1 1 30%}}

/* пример из практики — заготовка */
.ex-draft{border:1px dashed rgba(50,45,42,.3);border-radius:24px;padding:44px 28px;text-align:center;color:#66615d;font-size:15.5px;line-height:1.6;background:rgba(255,255,255,.4)}
.ex-draft .draft-tag{margin:0 0 12px}
.ex-more{margin-top:28px}

/* одна плашка «Стоимость» */
.price-card{max-width:860px;border-radius:28px;padding:34px 36px;background:#fff;border:1px solid var(--line)}
.price-card h3{font-weight:400;font-size:clamp(22px,2.4vw,28px)}
.price-card p{margin-top:14px;font-size:16px;line-height:1.65;color:#4a4542}
@media(max-width:560px){.price-card{padding:26px 22px}}

/* правки по проверке части 2 */
/* вкладки на телефоне — две равные кнопки в одной рамке */
@media(max-width:520px){
  .tab-btns{display:grid;grid-template-columns:1fr 1fr;width:100%;border-radius:26px}
  .tab-btns [role=tab]{padding:10px 8px;font-size:14px;line-height:1.25;text-align:center}
}
/* нечётная последняя плашка — на всю ширину, без «висячей» карточки */
.plates .pl:last-child:nth-child(odd){grid-column:1/-1}
/* срок этапа на телефоне — под названием, ровно по левому краю */
@media(max-width:560px){.steps h3 .term{display:table;margin:8px 0 0}}