/* «БРУ Улитино» — направление A «Красная кабина».
   Кирпично-алый H4 #B3271E (кабина бетонного узла), сливочные карточки #FBF3E7 как у образца, графит #201E1D. Merriweather (заголовки) + Carlito (текст). */
:root{
  --bg:#fff;--soft:#FBF3E7;--soft2:#F6E9D4;--text:#22201E;--head:#141210;--muted:#625C57;--line:#EADFCF;
  --acc:#B3271E;--acc-d:#951F17;--acclt:#F3A79E;--dark:#201E1D;--dtext:#D6D0CA;
  --r:6px;--sh:0 12px 30px rgba(32,30,29,.08);
  --fh:'Merriweather',Georgia,serif;--f:'Carlito','Segoe UI',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font:400 18px/1.55 var(--f);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--soft);color:var(--acc);flex:none}
.h2{font:900 clamp(26px,3vw,38px)/1.2 var(--fh);color:var(--head);margin-bottom:22px}
.h2 em{font-style:normal;color:var(--acc)}
.h2.c{position:relative;padding-bottom:18px}
.h2.c:after{content:"";position:absolute;left:50%;bottom:0;width:70px;height:4px;margin-left:-35px;background:var(--acc);border-radius:2px}
.c{text-align:center}
.lead{font-size:19px;color:var(--muted);max-width:820px;margin-bottom:30px}
.lead.c{margin-left:auto;margin-right:auto}
.sec{padding:84px 0}
.sec--soft{background:var(--soft)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 30px;border-radius:var(--r);background:var(--acc);color:#fff;font:700 18px/1.2 var(--f);text-align:center;transition:background .2s,color .2s}
.btn:hover{background:var(--acc-d)}
.btn--line{background:#fff;color:var(--acc);box-shadow:inset 0 0 0 2px var(--acc)}
.btn--line:hover{background:var(--acc);color:#fff}
.btn--white{background:#fff;color:var(--acc)}
.btn--white:hover{background:var(--head);color:#fff}
.btn--sm{min-height:44px;padding:0 20px;font-size:16.5px}
.btn--wide{width:100%}
.inp{width:100%;min-height:54px;border:1px solid var(--line);border-radius:var(--r);padding:0 16px;font:400 17px var(--f);color:var(--head);background:#fff}
textarea.inp{padding:14px 16px;min-height:120px;resize:vertical}
.inp:focus{outline:2px solid var(--acc);outline-offset:1px}
.inp::placeholder{color:#8E877F}
.cns{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted);line-height:1.4}
.cns input{margin-top:2px;width:17px;height:17px;accent-color:var(--acc);flex:none}
.cns--inv{color:#F6D7D3}
.cns--inv input{accent-color:#fff}
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0}
.lnk{font-weight:700;color:var(--acc);border-bottom:1px solid rgba(179,39,30,.4)}
.lnk:hover{border-color:var(--acc)}
.tnote{margin-top:14px;color:var(--muted);font-size:16px}

/* шапка */
.hdr{background:#fff;position:relative;z-index:6}
.topb{background:var(--soft);font-size:15px;color:var(--muted);border-bottom:1px solid var(--line)}
.topb__in{display:flex;align-items:center;gap:28px;min-height:38px}
.topb__in span,.topb__in a{display:inline-flex;align-items:center;gap:7px}
.topb .i{width:16px;height:16px;color:var(--acc)}
.topb a:hover{color:var(--acc)}
.topb__p{margin-left:auto}
.hdr__in{display:flex;align-items:center;gap:24px;min-height:90px}
.logo{display:flex;flex-direction:column;line-height:1;margin-right:auto}
.logo__w{font:900 29px/1 var(--fh);color:var(--head);white-space:nowrap}
.logo__w b{color:var(--acc);font-weight:900}
.logo small{font-size:14px;color:var(--muted);margin-top:7px}
.logo--inv .logo__w{color:#fff}.logo--inv .logo__w b{color:var(--acclt)}.logo--inv small{color:var(--dtext)}
.hdr__c{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.hdr__c small{font-size:15px;color:var(--muted)}
.hdr__tel{font:900 23px var(--fh);color:var(--head)}
.hdr__tel:hover{color:var(--acc)}
.hdr__burger,.hdr__call{display:none}
.nav{background:var(--dark)}
.nav__in{display:flex;align-items:center;min-height:56px;gap:2px}
.nav a{padding:16px 15px;color:#fff;font-weight:700;font-size:16px;letter-spacing:.05em;text-transform:uppercase;transition:color .2s}
.nav a:hover{color:var(--acclt)}
.nav__cta{margin-left:auto}

/* первый экран: фото завода и сливочная карточка */
.hero{padding:36px 0 70px;background:linear-gradient(#fff 0,#fff 70%,var(--soft) 70%)}
.hero__in{display:grid;grid-template-columns:1.08fr .92fr;gap:26px;align-items:stretch}
.hero__img{width:100%;height:auto;border-radius:var(--r);box-shadow:var(--sh);align-self:start}
.hero__card{background:var(--soft);border:1px solid var(--line);border-radius:var(--r);padding:32px 32px 30px;box-shadow:var(--sh);display:flex;flex-direction:column}
.hero__card h1{font:900 clamp(26px,2.7vw,36px)/1.2 var(--fh);color:var(--head);margin-bottom:20px}
.ticks{display:grid;gap:11px;margin-bottom:26px}
.ticks li{display:flex;gap:12px;align-items:flex-start;color:var(--head);font-size:17.5px;line-height:1.4}
.ticks .i{width:24px;height:24px;padding:4px;background:var(--acc);color:#fff;border-radius:50%;stroke-width:3;margin-top:-1px}
.hero__card .btn{align-self:flex-start;margin-top:auto}

/* о заводе */
.oz{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.oz__t p{margin-bottom:14px}
.rule{background:var(--soft);border-left:5px solid var(--acc);border-radius:var(--r);padding:18px 22px;margin-top:20px}
.rule b{font:900 18px var(--fh);color:var(--acc)}
.rule p{margin:6px 0 0}
.oz__g{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.oz__g figure{margin:0}
.oz__g img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.oz__g figcaption{font-size:14.5px;color:var(--muted);margin-top:5px}
.callout{margin-top:34px;background:var(--soft);border-radius:var(--r);padding:18px 24px;font-size:18.5px;color:var(--head);text-align:center}
.callout a{font-weight:700;color:var(--acc);white-space:nowrap}

/* преимущества */
.adv{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.adv__i{background:#fff;border-radius:var(--r);padding:26px 16px 22px;text-align:center;box-shadow:var(--sh)}
.adv__c{display:grid;place-items:center;width:66px;height:66px;margin:0 auto 14px;border-radius:50%;background:var(--soft);color:var(--acc)}
.adv__c .i{width:32px;height:32px;stroke-width:1.7}
.adv h3{font:900 16.5px/1.25 var(--fh);color:var(--head);margin-bottom:6px}
.adv p{font-size:15.5px;color:var(--muted);line-height:1.4}

/* продукция: бетонные кубы на CSS */
.prod{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.prod__i{background:var(--soft);border-radius:var(--r);padding:28px 26px 26px;display:flex;flex-direction:column;align-items:flex-start}
.cube{position:relative;width:132px;height:132px;margin:6px auto 24px;border-radius:8px;background:radial-gradient(circle at 20% 25%,rgba(0,0,0,.08) 0 1.5px,transparent 2px) 0 0/11px 13px,radial-gradient(circle at 70% 60%,rgba(0,0,0,.07) 0 1px,transparent 1.5px) 0 0/7px 9px,linear-gradient(145deg,#C9C6C0,#9F9B95);box-shadow:inset -10px -12px 0 rgba(0,0,0,.08),0 14px 24px rgba(32,30,29,.18);display:grid;place-items:center}
.cube span{font:900 16px/1.2 var(--fh);color:#4E4A45;text-align:center;text-shadow:0 1px 0 rgba(255,255,255,.5);padding:0 10px}
.prod__i h3{font:900 21px var(--fh);color:var(--head);margin-bottom:8px}
.prod__i p{color:var(--muted);margin-bottom:18px}
.prod__i .btn{margin-top:auto}

/* прайс */
.tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:22px}
.tabs__b{padding:11px 18px;border-radius:var(--r);background:#fff;border:1px solid var(--line);font-weight:700;color:var(--head);transition:background .2s,color .2s}
.tabs__b:hover{border-color:var(--acc);color:var(--acc)}
.tabs__b.on{background:var(--acc);border-color:var(--acc);color:#fff}
.pl{display:none}
.pl.on{display:block}
.pl__d{text-align:center;color:var(--muted);margin-bottom:16px}
.tb{background:#fff;font-size:17px;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.tb th{background:var(--dark);color:#fff;font-weight:700;text-align:left;padding:13px 18px}
.tb td{padding:12px 18px;border-bottom:1px solid var(--line)}
.tb td b{color:var(--head)}
.tb .pr{font-weight:700;color:var(--head)}
.tb td:last-child{text-align:right}

/* расчёт */
.sec--red{background:var(--acc);color:#fff}
.sec--red .h2{color:#fff;margin-bottom:10px}
.sec--red p{color:#FBE3E0}
.rs{display:grid;grid-template-columns:1fr 1.1fr;gap:34px;align-items:center}
.rs__f{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:center}
.rs__f .inp{border-color:transparent}
.rs__f .cns{grid-column:1/-1}

/* доставка */
.fleet{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:30px}
.fleet__i{display:flex;gap:14px;align-items:flex-start;background:var(--soft);border-radius:var(--r);padding:20px}
.fleet__c{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--acc);color:#fff;flex:none}
.fleet__c .i{width:28px;height:28px}
.fleet h3{font:900 17px/1.25 var(--fh);color:var(--head);margin-bottom:4px}
.fleet p{font-size:15.5px;color:var(--muted);line-height:1.4}
.towns{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.towns li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px;align-items:center;border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;font-weight:700;color:var(--head);font-size:16px}
.towns .i{color:var(--acc);grid-row:1/3}
.towns em{grid-column:2;font-style:normal;font-weight:400;color:var(--muted);font-size:14.5px}

/* материалы и услуги */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.card{background:#fff;border-radius:var(--r);padding:16px 16px 22px;box-shadow:var(--sh);display:flex;flex-direction:column}
.sec:not(.sec--soft) .card{background:var(--soft);box-shadow:none}
.card img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:4px;margin-bottom:16px}
.card h3{font:900 21px var(--fh);color:var(--head);margin-bottom:6px;padding:0 6px}
.card p{color:var(--muted);margin-bottom:18px;padding:0 6px}
.card .btn{margin:auto 6px 0;align-self:flex-start}

/* советы */
.tips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 30px}
.tips li{display:flex;gap:16px;align-items:flex-start}
.tips__n{font:900 44px/1 var(--fh);color:var(--acc);min-width:34px}
.tips h3{font:900 18px var(--fh);color:var(--head);margin-bottom:4px}
.tips p{color:var(--muted);font-size:16.5px}

/* назначение */
.use{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.use__i{margin:0;background:var(--soft);border-radius:var(--r);overflow:hidden}
.use__i img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.use__i figcaption{padding:12px 14px 14px}
.use__i b{display:block;font:900 16.5px/1.25 var(--fh);color:var(--head)}
.use__i span{font-size:15px;color:var(--acc);font-weight:700}

/* отзывы */
.revs{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:960px;margin:0 auto}
.rev{background:#fff;border-radius:var(--r);padding:28px 30px;box-shadow:var(--sh);border-top:4px solid var(--acc)}
.rev p{font-size:19px;font-style:italic;color:var(--head)}
.rev footer{margin-top:14px;font-weight:700;color:var(--acc)}

/* вопросы */
.faq-w{max-width:980px}
.faq{display:grid;gap:10px}
.faq__i{background:var(--soft);border-radius:var(--r)}
.faq__i summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;font-weight:700;color:var(--head);cursor:pointer;list-style:none}
.faq__i summary::-webkit-details-marker{display:none}
.faq__p{display:grid;place-items:center;width:30px;height:30px;color:var(--acc);flex:none;transition:transform .25s}
.faq__i[open] .faq__p{transform:rotate(45deg)}
.faq__i p{padding:0 20px 18px;color:var(--muted)}

/* вопрос */
.vq__f{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:980px;margin:0 auto}
.vq__m{grid-column:1/-1}
.vq__f .btn{grid-column:1/-1;justify-self:center;min-width:260px}
.vq__f .cns{grid-column:1/-1;justify-content:center}

/* контакты */
.kont{display:grid;grid-template-columns:420px 1fr;gap:30px;align-items:stretch}
.kont__c{background:var(--soft);border-radius:var(--r);padding:34px}
.kont__l{display:grid;gap:16px;margin:6px 0 28px}
.kont__l li{display:flex;gap:14px;align-items:center}
.kont__l .ico{background:#fff}
.kont__l small{display:block;color:var(--muted);font-size:14px}
.kont__l a,.kont__l span{font-weight:700;color:var(--head);overflow-wrap:anywhere}
.kont__tel{font-size:22px}
.kont__map{border-radius:var(--r);overflow:hidden;min-height:440px;background:#EDE6DB}
.kont__map iframe{width:100%;height:100%;min-height:440px;border:0;display:block}

/* подвал */
.ftr{background:var(--dark);color:var(--dtext);padding:60px 0 0;font-size:16px}
.ftr__in{display:grid;grid-template-columns:1.3fr 1fr 1.2fr;gap:44px;padding-bottom:42px}
.ftr__brand p{margin-top:18px;max-width:340px}
.ftr h3{font:900 17px var(--fh);color:#fff;margin-bottom:14px}
.ftr__nav{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}
.ftr a:hover{color:var(--acclt)}
.ftr__c{display:grid;gap:8px;align-content:start}
.ftr__c a{color:#fff;font-weight:700}
.ftr__b{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;font-size:14px}
.ftr__b .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.mcta{display:none}

/* окно */
.dlg{border:0;border-radius:10px;padding:0;max-width:460px;width:calc(100% - 32px);margin:auto;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.dlg::backdrop{background:rgba(32,30,29,.66)}
.dlg__f{position:relative;padding:38px 32px 28px;display:grid;gap:12px}
.dlg__x{position:absolute;right:12px;top:12px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--muted)}
.dlg__x:hover{background:var(--soft);color:var(--head)}
.dlg__t{font:900 25px/1.2 var(--fh);color:var(--head);padding-right:34px}
.dlg__d{color:var(--muted);font-size:16.5px;white-space:pre-line;margin-bottom:4px}

.page-msg{padding:110px 0;text-align:center}
.page-msg .lead{margin:0 auto 30px}
.btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

@media (max-width:1180px){
  .nav a{padding:16px 10px;font-size:15px}
  .adv{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fleet{grid-template-columns:repeat(2,minmax(0,1fr))}
  .towns{grid-template-columns:repeat(4,minmax(0,1fr))}
  .use{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rs{grid-template-columns:1fr}
}
@media (max-width:980px){
  .sec{padding:66px 0}
  .topb__p{display:none}
  .nav__cta{display:none}
  .hdr__burger,.hdr__call{display:grid;place-items:center;width:46px;height:46px;border-radius:var(--r)}
  .hdr__call{background:var(--acc);color:#fff}
  .hdr__burger{background:var(--soft);color:var(--acc)}
  .hdr__burger .i,.hdr__call .i{width:22px;height:22px}
  .nav{display:none}
  .nav.open{display:block}
  .nav__in{flex-direction:column;align-items:stretch;padding-top:4px;padding-bottom:10px}
  .nav a{border-bottom:1px solid rgba(255,255,255,.1)}
  .hero__in{grid-template-columns:1fr}
  .oz,.kont{grid-template-columns:1fr}
  .prod,.cards{grid-template-columns:1fr 1fr}
  .tips{grid-template-columns:1fr 1fr}
  .ftr__in{grid-template-columns:1fr 1fr}
  .ftr__brand{grid-column:1/-1}
}
@media (max-width:760px){
  body{padding-bottom:78px;font-size:17px}
  .wrap{padding:0 16px}
  .sec{padding:54px 0}
  .lead{font-size:17px}
  .topb__in{gap:14px;font-size:13.5px}
  .topb__in>span:first-child{display:none}
  .hdr__in{min-height:74px;gap:10px}
  .hdr__c{display:none}
  .logo__w{font-size:22px}
  .logo small{font-size:12px}
  .hero{padding:18px 0 46px}
  .hero__card{padding:24px 18px 22px}
  .hero__card .btn{width:100%}
  .ticks li{font-size:16.5px}
  .adv{grid-template-columns:1fr 1fr;gap:12px}
  .adv__i{padding:20px 12px 18px}
  .prod,.cards{grid-template-columns:1fr}
  .tabs__b{padding:9px 12px;font-size:15.5px}
  .tb{font-size:16px}
  .tb th,.tb td{padding:10px 12px}
  .rs__f{grid-template-columns:1fr}
  .fleet{grid-template-columns:1fr}
  .towns{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tips{grid-template-columns:1fr;gap:20px}
  .use{grid-template-columns:1fr 1fr;gap:10px}
  .use__i:last-child{grid-column:1/-1}
  .use__i:last-child img{aspect-ratio:2/1}
  .revs{grid-template-columns:1fr}
  .vq__f{grid-template-columns:1fr}
  .vq__f .btn{width:100%;min-width:0}
  .kont__c{padding:26px 20px}
  .kont__c .btn{width:100%}
  .kont__map,.kont__map iframe{min-height:340px}
  .ftr{padding-top:46px}
  .ftr__in{grid-template-columns:1fr;gap:28px}
  .mcta{position:fixed;left:12px;right:12px;bottom:12px;z-index:30;display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;border-radius:var(--r);background:var(--acc);color:#fff;font-weight:700;font-size:18px;box-shadow:0 12px 28px rgba(32,30,29,.35);transform:translateY(160%);transition:transform .3s}
  body.mcta-on .mcta{transform:none}
  .dlg__f{padding:34px 20px 22px}
}
@media (max-width:380px){
  .logo__w{font-size:19px}
  .adv,.use,.towns{grid-template-columns:1fr}
  .use__i:last-child img{aspect-ratio:4/3}
}

/* логотип — локап в кривых */
.logo:has(.logo__svg){display:inline-flex;align-items:flex-start;flex:none}
.logo__svg{display:block;height:60px;width:auto}
@media (max-width:760px){.logo__svg{height:38px}}