@font-face{font-family:"Montserrat";font-style:normal;font-weight:500 900;font-display:swap;
  src:url(../fonts/montserrat-cyrillic.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:500 900;font-display:swap;
  src:url(../fonts/montserrat-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ink:#272525; --red:#ed1d25; --grey:#9a9898; --muted:#636363; --bg:#f5f5f5; --band:#fcfcfc;
  --shadow:0 4px 8px rgba(0,0,0,.12);
  --gap:100px;
  font-family:"Montserrat","Gilroy","Segoe UI",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-size:16px;line-height:1.4;font-weight:500;overflow-x:hidden}
img{display:block;max-width:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
a:focus-visible,button:focus-visible{outline:3px solid #0d64a8;outline-offset:3px}
html.modal-open{overflow:hidden}

.wrap{width:min(1300px,calc(100% - 40px));margin-inline:auto;position:relative}

/* ---------- HERO ---------- */
.hero{position:relative;overflow:hidden;background:var(--bg);min-height:880px;padding-bottom:70px}
.hero__bg{position:absolute;left:calc(50% - 1074px);top:-137px;width:2901px;height:1934px;
  background-repeat:no-repeat;background-size:cover;background-position:center;transform:scaleX(-1);pointer-events:none}
.hero__bg--faded{background-image:url(img/hero-bg-faded.webp);opacity:.15}
.hero__bg--main{background-image:url(img/hero-bg.webp)}
.hero>.wrap:not(.hero__content){z-index:3}
/* порядок слоёв как в макете: фон-подложка < заголовок < фото крыши (труба перекрывает слово) < остальной текст */
.hero__bg--faded{z-index:0}
.hero__bg--main{z-index:2}
.hero h1{position:relative;z-index:1}
.hero__sub,.hero__feats,.btn-red{position:relative;z-index:3}
.header{display:flex;justify-content:space-between;align-items:flex-start;padding-top:10px;z-index:3}
.logo{display:flex;align-items:flex-start;gap:9px;flex:none}
.logo img{height:62px;width:auto}
.logo__text{display:flex;flex-direction:column;gap:6px;padding-top:10px;font-weight:600;font-size:15px;line-height:1.15;text-transform:uppercase;letter-spacing:.01em;white-space:nowrap}
.logo--light{color:#fff}
.header__right{display:flex;flex-direction:column;align-items:flex-end;gap:15px}
.header__top{display:flex;align-items:center;gap:30px}
.tel{display:inline-flex;align-items:center;gap:4px;font-weight:800;font-size:19px;letter-spacing:.03em;white-space:nowrap}
.tel--light{color:#fff}
.soc{display:inline-flex;gap:20px;align-items:center}
.soc a{position:relative;display:block;flex:none}
.soc__yt{border-radius:50%;background:var(--ink)}
.soc__yt-glyph{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.soc--big{gap:20px}
.soc--big .soc__yt-glyph{width:24px;height:18px}
.menu{display:flex;gap:0;justify-content:space-between;width:671px;max-width:100%;font-weight:600;font-size:19px;letter-spacing:.03em;color:var(--grey)}
.menu a{display:inline-flex;align-items:center;gap:5px;padding:2px 0}
.menu a.is-current{color:var(--ink)}
.menu__drop img{transform:rotate(180deg)}
.menu a:hover{color:var(--red)}

.notice{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px;padding:16px 24px;
  background:var(--red);color:#fff;border-radius:4px;box-shadow:0 8px 24px rgba(237,29,37,.35);
  font-weight:700;font-size:22px;line-height:1.3;text-align:center}
.notice__icon{flex:none}

.hero__content{display:block;padding-top:60px}
.hero h1{font-weight:900;font-size:clamp(38px,6.9vw,90px);line-height:1.05;color:var(--ink);letter-spacing:-.01em}
.hero__sub{margin-top:14px;font-weight:600;font-size:clamp(20px,3.4vw,44px);line-height:1.25;color:var(--ink)}
.hero__feats{display:flex;flex-wrap:wrap;gap:16px 45px;margin-top:34px}
.hero__feats li{display:flex;align-items:center;gap:16px;font-weight:800;font-size:clamp(18px,2.2vw,28px);color:var(--red)}
.hero__feats img{width:30px;height:30px}
.btn-red{display:inline-block;margin-top:40px;padding:20px 35px;background:var(--red);color:#fff;border-radius:2px;
  font-weight:600;font-size:18px;letter-spacing:.05em;text-transform:uppercase;line-height:1.3}
.btn-red:hover{background:#d3141b}

.call-fab{position:absolute;left:calc(50% + 703px);top:848px;width:77px;height:77px;z-index:4}
.hero .call-fab{top:calc(100% - 118px)}
.call-fab img{position:absolute}
.fab-ring--1{left:-18px;top:-18px;width:113px;height:113px}
.fab-ring--2{left:-10px;top:-10px;width:97px;height:97px}
.fab-ring--3{left:0;top:0;width:77px;height:77px}
.fab-icon{left:calc(50% - 19.5px);top:calc(50% - 15.5px);width:36px;height:36px}

/* ---------- COMMON ---------- */
.h2{display:flex;align-items:center;gap:5px;font-weight:600;font-size:32px;line-height:48px;color:var(--ink)}
.h2 img{width:17px;height:24px;transform:rotate(180deg)}
.sec{padding-top:var(--gap)}
.band{background:var(--band);padding-block:60px;position:relative;overflow:hidden}
.band .wrap{z-index:2}

/* ---------- SERVICES ---------- */
.sec--services{padding-top:90px}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 20px;margin-top:30px}
.svc{position:relative;display:block;aspect-ratio:420/320;overflow:hidden;background:#d9d9d9;border-radius:2px;isolation:isolate}
.svc img{position:absolute;left:-36.4%;top:-9.4%;width:171.9%;height:129.1%;object-fit:cover;max-width:none;transition:transform .4s}
.svc i{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(102,102,102,0) 0,rgba(0,0,0,.5) 84.14%);margin:0}
.svc span{position:absolute;left:6%;right:4%;bottom:11.25%;color:#fff;font-weight:800;font-size:clamp(22px,2.5vw,32px);line-height:1.17}
.svc:hover img{transform:scale(1.04)}

/* ---------- WHY ---------- */
.band--why{margin-top:70px;padding-block:60px 70px}
.why-grid{display:grid;grid-template-columns:repeat(3,410px);justify-content:space-between;gap:30px 0;margin-top:40px;padding-top:15px}
.why{position:relative;height:190px;background:#fff;box-shadow:var(--shadow)}
.why__ico{position:absolute;left:25px;top:-15px;width:90px;height:95px;background:var(--red);overflow:hidden}
.why__ico img{position:absolute}
.why h3{position:absolute;left:125px;right:12px;top:43px;transform:translateY(-50%);font-weight:700;font-size:20px;line-height:1.25}
.why p{position:absolute;left:25px;width:355px;top:133px;transform:translateY(-50%);font-weight:500;font-size:16px;line-height:1.3}

/* ---------- STEPS ---------- */
.sec--steps{padding-top:150px}
.steps{position:relative;display:flex;justify-content:space-between;margin-top:40px}
.steps::before{content:"";position:absolute;left:59px;right:calc(25% - 18px);top:31px;border-top:1px dotted var(--grey);width:auto;z-index:0}
.steps::before{right:auto;width:calc(100% - 59px - 59px - 216px)}
.step{position:relative;width:275px;display:flex;flex-direction:column;gap:10px;z-index:1}
.step__n{display:flex;align-items:center;justify-content:center;width:59px;padding:10px;border:1px dashed var(--grey);background:var(--bg);font-weight:700;font-size:32px;line-height:1.3;color:var(--red)}
.step h3{font-weight:700;font-size:20px;line-height:1.3}
.step p{font-size:16px;line-height:1.3;color:var(--muted)}

/* ---------- FAQ ---------- */
.band--faq{margin-top:100px;min-height:638px}
.faq__img{position:absolute;left:calc(50% - 501px);top:0;width:1912px;height:1276px;object-fit:cover;transform:translateY(-50%);pointer-events:none;z-index:0}
.faq{display:flex;flex-direction:column;gap:30px;width:min(805px,100%);margin-top:40px}
.faq__row{display:flex;align-items:center;justify-content:space-between;width:100%;padding-left:15px;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.12);font-weight:500;font-size:18px;overflow:hidden}
.faq__row i{display:flex;align-items:center;justify-content:center;width:62px;height:62px;background:var(--red);flex:none}
.faq__row i img{width:24px;height:24px;transform:rotate(90deg) scaleY(-1)}
.faq__row:hover{box-shadow:0 6px 20px rgba(0,0,0,.2)}

/* ---------- REPAIR ---------- */
.sec--repair{padding-top:100px}
.repair{display:flex;gap:17px;align-items:center;margin-top:40px}
.repair__text{flex:none;width:475px;font-weight:600;font-size:16px;line-height:22px}
.repair__text p+p{margin-top:22px}
.rcard{position:relative;flex:1 1 0;min-width:0;min-height:394px;padding:20px;background:var(--band);border-radius:4px;box-shadow:var(--shadow);align-self:stretch}
.rcard h3{font-weight:700;font-size:28px;line-height:48px;color:var(--red);padding-bottom:20px;margin-bottom:15px;border-bottom:2px solid var(--red);width:360px;max-width:100%}
.rcard p{font-weight:600;font-size:18px;line-height:26px}
.rcard em,.house em{font-style:normal;color:var(--red)}

/* ---------- HOUSE ---------- */
.band--house{margin-top:100px;padding-block:60px;min-height:710px}
.house__img{position:absolute;left:calc(50% - 0px);top:-71px;width:1354px;height:886px;object-fit:cover;transform:scaleX(-1);pointer-events:none;z-index:0}
.house{width:min(805px,100%);margin-top:40px;display:flex;flex-direction:column;gap:20px}
.house .muted{font-weight:600;font-size:16px;line-height:22px;color:var(--muted)}
.bul{display:flex;flex-direction:column;gap:20px}
.bul li{position:relative;padding-left:20px;font-weight:600;font-size:16px;line-height:20px}
.bul li::before{content:"";position:absolute;left:0;top:5px;width:11px;height:11px;background:var(--red)}

/* ---------- WORKS ---------- */
.sec--works{padding-top:100px}
.works-head{display:flex;align-items:center;justify-content:space-between;gap:40px}
.more{font-weight:600;font-size:18px;line-height:16px;color:var(--red);text-decoration:underline;white-space:nowrap}
.works{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px}
.work{position:relative;display:block;aspect-ratio:640/445;overflow:hidden;background:#d9d9d9}
.work img{position:absolute;left:-8.75%;top:-.22%;width:119.4%;height:127.6%;object-fit:cover;transition:transform .4s}
.work:hover img{transform:scale(1.03)}

/* ---------- PARTNERS ---------- */
.sec--partners{padding-top:120px}
.partners{display:grid;grid-template-columns:repeat(5,1fr);gap:20px 19px;margin-top:34px}
.pt{position:relative;display:block;height:123px;background:#fff}
.pt img{position:absolute;object-fit:cover}
.pt:nth-child(n+6){overflow:visible}
.pt:nth-child(-n+5),.pt:nth-child(7),.pt:nth-child(8),.pt:nth-child(9){overflow:hidden}
.pt:nth-child(10) img{z-index:1}

/* ---------- CTA + FOOTER ---------- */
.cta{position:relative;overflow:hidden;margin-top:100px;background:#111;color:#fff;min-height:654px}
.cta__bg{position:absolute;left:0;right:0;top:-89px;height:1220px;background:#000 url(img/cta-bg.webp) center/cover no-repeat;transform:scaleX(-1);pointer-events:none}
.cta__bg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.7)}
.cta__in{display:flex;justify-content:space-between;gap:40px;padding-block:80px 70px;z-index:2}
.cta__text{width:min(750px,100%)}
.cta__text p{font-weight:600;font-size:19px;line-height:28px}
.cta__text p+p{margin-top:22px}
.cta__h1{font-weight:900!important;font-size:clamp(40px,5vw,62px)!important;line-height:1.05!important;color:var(--red)}
.cta__h2{font-weight:600!important;font-size:clamp(26px,3.6vw,44px)!important;line-height:1.2!important;margin:8px 0 28px!important}
.cta__btns{flex:none;width:420px;display:flex;flex-direction:column;align-items:center;gap:25px;padding-top:168px}
.wbtn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:15px 35px;background:#fff;color:var(--ink);border-radius:4px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.12));font-weight:600;font-size:20px;line-height:22px}
.wbtn--tel{font-weight:800;letter-spacing:.03em;gap:4px}
.wbtn:hover{background:#f1f1f1}
.cta__cb{color:var(--red);text-decoration:underline;font-weight:600;font-size:20px;line-height:16px}
.maxmark{display:inline-block;flex:none;width:20px;height:20px;background:linear-gradient(135deg,#3b82f6,#8b3ffd);-webkit-mask:url(img/max.svg) center/contain no-repeat;mask:url(img/max.svg) center/contain no-repeat}

.footer{background:var(--ink);color:#fff;padding-block:40px 40px}
.footer__top{display:flex;align-items:flex-start;justify-content:space-between;gap:30px 20px;padding-bottom:30px}
.footer__contacts{display:flex;flex-direction:column;gap:5px;max-width:470px}
.footer__tels{display:flex;gap:30px;flex-wrap:wrap}
.footer__hours{color:var(--red);font-weight:600;font-size:19px;letter-spacing:.03em;line-height:1.3}
.footer__bottom{display:flex;align-items:center;justify-content:space-between;gap:20px 30px;padding-top:20px;border-top:1px solid #636363}
.footer__copy{white-space:nowrap}
.footer__legal{width:751px;max-width:100%;color:#636363;font-size:16px}
.footer__policy{color:var(--red);font-weight:500;white-space:nowrap}
.footer__policy:hover{text-decoration:underline}

/* ---------- MODAL ---------- */
.modal{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;color:var(--ink)}
.modal:not([open]){display:none}
.modal[open]{display:flex;align-items:center;justify-content:center;padding:16px}
.modal::backdrop{background:rgba(20,18,18,.72);backdrop-filter:blur(2px)}
.modal__box{position:relative;width:min(520px,100%);max-height:100%;overflow:auto;background:#fff;border-radius:6px;padding:36px 32px 30px;border-top:6px solid var(--red);box-shadow:0 24px 60px rgba(0,0,0,.4)}
.modal__x{position:absolute;right:10px;top:8px;width:44px;height:44px;font-size:34px;line-height:1;text-align:center;color:var(--muted);border-radius:50%}
.modal__x:hover{color:var(--red);background:#f5f5f5}
.modal h2{font-weight:800;font-size:28px;line-height:1.2;padding-right:40px}
.modal__lead{margin-top:10px;color:var(--muted);font-size:15px;line-height:1.45}
.modal__tels,.modal__links{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.modal__tels a,.modal__links a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:12px 20px;border-radius:4px;font-size:18px;font-weight:600;border:1px solid #e3e3e3;background:#fff;box-shadow:var(--shadow);transition:background .15s}
.modal__tels a{font-weight:800;font-size:21px;letter-spacing:.03em;background:var(--red);border-color:var(--red);color:#fff}
.modal__tels a img{filter:brightness(0) invert(1)}
.modal__tels a:hover{background:#d3141b}
.modal__links a:hover{background:#f5f5f5}
.modal__hours{margin-top:20px;text-align:center;color:var(--red);font-weight:600;font-size:15px}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1340px){
  .hero__bg{left:calc(50% - 1000px)}
  .why-grid{grid-template-columns:repeat(3,1fr);gap:30px 24px}
  .why{width:100%}
  .why h3,.why p{right:12px;width:auto}
  .repair{flex-wrap:wrap}
  .repair__text{width:100%}
  .rcard{min-height:0}
  .call-fab{left:auto;right:30px}
  .hero .call-fab{left:auto;right:30px}
  .house__img{left:55%}
  .faq__img{left:46%}
}
@media (max-width:1100px){
  :root{--gap:70px}
  .header{flex-direction:column;gap:12px}
  .header__right{align-items:flex-start;width:100%}
  .header__top{flex-wrap:wrap;gap:8px 22px}
  .menu{width:100%;flex-wrap:wrap;gap:6px 26px;justify-content:flex-start}
  .hero{min-height:0}
  .hero__bg{left:-45%;width:240%;height:130%;top:0;background-position:right bottom}
  .steps{flex-wrap:wrap;gap:30px 20px}
  .steps::before{display:none}
  .step{width:calc(50% - 10px)}
  .partners{grid-template-columns:repeat(3,1fr)}
  .pt:nth-child(n){overflow:hidden}
  .cta__in{flex-direction:column;padding-block:60px}
  .cta__btns{width:min(420px,100%);padding-top:0;align-self:flex-start}
  .band--faq,.band--house{min-height:0}
  .faq__img,.house__img{position:relative;left:auto;top:auto;width:100%;height:auto;aspect-ratio:3/2;margin-top:36px}
  .faq__img{transform:none;object-position:bottom}
  .house__img{transform:scaleX(-1)}
  .house__img{order:2}
  .band--house,.band--faq{display:flex;flex-direction:column}
  .band--house .wrap,.band--faq .wrap{order:1}
  .footer__top{flex-wrap:wrap}
}
@media (max-width:760px){
  :root{--gap:54px}
  .hero{padding-bottom:300px}
  .hero__bg{top:auto;bottom:0;left:-40%;width:210%;height:330px;background-position:right bottom}
  .hero__bg--faded{display:none}
  body{font-size:15px}
  .logo__text{font-size:12px;padding-top:8px}
  .tel{font-size:16px}
  .menu{font-size:16px}
  .notice{font-size:16px;padding:12px 14px;gap:10px}
  .notice__icon{width:22px;height:22px}
  .hero__content{padding-top:34px}
  .btn-red{font-size:14px;padding:16px 20px;margin-top:28px}
  .h2{font-size:24px;line-height:36px}
  .sec--services{padding-top:50px}
  .svc-grid{grid-template-columns:1fr 1fr;gap:14px}
  .svc span{font-size:18px}
  .band--why{margin-top:54px;padding-block:44px 50px}
  .why-grid{grid-template-columns:1fr;gap:34px}
  .sec--steps{padding-top:70px}
  .step{width:100%}
  .band--faq{margin-top:70px;padding-block:44px}
  .faq__row{font-size:16px}
  .repair__text{font-size:15px}
  .rcard h3{font-size:24px}
  .rcard p{font-size:16px;line-height:24px}
  .works{grid-template-columns:1fr}
  .works-head{flex-wrap:wrap;gap:8px 20px}
  .more{font-size:16px}
  .partners{grid-template-columns:repeat(2,1fr);gap:14px}
  .sec--partners{padding-top:70px}
  .cta{margin-top:70px}
  .cta__text p{font-size:16px;line-height:24px}
  .cta__btns{align-self:stretch;width:100%}
  .wbtn{font-size:18px}
  .footer__hours{font-size:16px}
  .footer__bottom{flex-direction:column;align-items:flex-start}
  .footer__legal{font-size:14px}
  .call-fab{position:fixed;right:22px;bottom:22px;left:auto;top:auto;width:64px;height:64px}
  .hero .call-fab{position:fixed;top:auto;bottom:22px;right:26px;left:auto}
  .fab-ring--1{width:94px;height:94px;left:-15px;top:-15px}
  .fab-ring--2{width:80px;height:80px;left:-8px;top:-8px}
  .fab-ring--3{width:64px;height:64px}
  .modal__box{padding:30px 20px 24px}
  .modal h2{font-size:24px}
  .modal__tels a{font-size:18px;letter-spacing:0;white-space:nowrap;padding-inline:12px}
  .modal__links a{font-size:16px;padding-inline:12px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
