/* МК «Кров-Элит» — основной стиль */
:root{
  --green:#5cc782; --green-d:#43ad69; --green-l:#e9f7ee;
  --taupe:#a89d94; --taupe-d:#8f857b;
  --ink:#1f1f1f; --text:#3a3a3a; --muted:#6d6d6d; --line:#e4e1dc;
  --bg:#ffffff; --bg-soft:#f7f5f2; --red:#e8453c;
  --serif:"PT Serif","Times New Roman",Times,Georgia,serif;
  --wrap:1170px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--serif);font-size:16px;line-height:1.6;color:var(--text);background:var(--bg)}
img{max-width:100%;display:block}
a{color:var(--green-d)}
a:hover{color:var(--ink)}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);font-weight:700;line-height:1.2;margin:0 0 .6em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.center{text-align:center}

/* ---------- header ---------- */
.header{position:absolute;top:0;left:0;right:0;z-index:20}
.header.solid{position:relative;background:var(--taupe)}
.header__in{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.logo{display:block;width:136px;flex:none}
.nav{display:flex;gap:26px;align-items:center}
.nav a{color:#fff;text-decoration:none;font-size:13px;letter-spacing:.2px;padding:4px 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a.active{border-bottom-color:var(--green);color:#fff}
.nav a.active{color:var(--green-l)}
.btn{display:inline-block;background:var(--green);color:#fff;border:0;border-radius:30px;padding:11px 26px;font:700 13px var(--serif);text-decoration:none;cursor:pointer;transition:.2s;box-shadow:0 6px 18px rgba(92,199,130,.35)}
.btn:hover{background:var(--green-d);color:#fff}
.btn--out{background:transparent;color:var(--green);border:1.5px solid var(--green);box-shadow:none;padding:7px 26px;font-weight:400}
.btn--out:hover{background:var(--green);color:#fff}
.btn--lg{padding:14px 34px;font-size:15px}
.burger{display:none;background:none;border:0;width:36px;height:36px;cursor:pointer;padding:6px}
.burger span{display:block;height:2px;background:#fff;margin:6px 0}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--taupe) url(/assets/img/hero.svg) center/cover no-repeat;color:#fff;padding:150px 0 0;min-height:560px}
.hero__txt{max-width:600px;margin-left:120px}
.hero h1{color:#fff;font-size:46px;margin-bottom:18px}
.hero p{font-size:16px;max-width:460px;margin:0 0 26px;opacity:.95}
.offers{display:grid;grid-template-columns:repeat(3,1fr);max-width:860px;margin:60px auto 0;transform:translateY(30px);position:relative;z-index:2}
.offer{background:#fff;padding:22px 24px 26px;border-right:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.08)}
.offer:last-child{border-right:0}
.offer h3{color:var(--green);font-size:16px;margin-bottom:12px}
.offer p{color:var(--text);font-size:13px;line-height:1.5;margin:0}

/* page hero (inner) */
.phero{background:var(--taupe) url(/assets/img/hero.svg) center/cover no-repeat;color:#fff;padding:130px 0 70px}
.phero h1{color:#fff;font-size:40px;max-width:780px}
.phero p{max-width:640px;font-size:16px;margin:0;opacity:.95}
.crumbs{font-size:13px;margin-bottom:18px;opacity:.9}
.crumbs a{color:#fff}
.crumbs span{margin:0 6px}

/* ---------- sections ---------- */
.sec{padding:80px 0}
.sec--soft{background:var(--bg-soft)}
.sec--taupe{background:var(--taupe);color:#fff}
.sec--taupe h2,.sec--taupe h3{color:#fff}
.sec__title{text-align:center;font-size:34px;margin-bottom:14px}
.sec__lead{text-align:center;max-width:620px;margin:0 auto 46px;font-size:16px;color:var(--text)}
.sec__lead b{color:var(--ink)}
.first-sec{padding-top:110px}

/* benefits */
.benefits{display:grid;grid-template-columns:repeat(4,1fr);max-width:960px;margin:0 auto}
.benefit{padding:0 26px;border-right:1px solid var(--line)}
.benefit:last-child{border-right:0}
.benefit h3{font-size:19px;margin-bottom:14px}
.benefit p{font-size:13px;line-height:1.55;margin:0;color:var(--text)}

/* partners */
.partners{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.partner{background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.07);padding:26px 26px 28px;display:flex;flex-direction:column}
.partner__logo{display:flex;align-items:center;justify-content:center;height:120px;margin-bottom:18px;border-bottom:1px solid var(--line);padding-bottom:16px}
.partner__logo img{max-height:100px;max-width:100%;width:auto;object-fit:contain}
.partner h3{font-size:18px;margin-bottom:10px}
.partner p{font-size:14px;margin:0;line-height:1.6}

/* project cards */
.projects{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.pcard{background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.08);text-align:center;padding-bottom:24px;display:flex;flex-direction:column}
.pcard__img{display:block;aspect-ratio:16/11;overflow:hidden;background:var(--bg-soft)}
.pcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.pcard:hover .pcard__img img{transform:scale(1.04)}
.pcard h3{font-size:15px;margin:22px 12px 10px}
.pcard h3 a{color:var(--ink);text-decoration:none}
.pcard__meta{font-size:12px;color:var(--muted);line-height:1.6;margin-bottom:18px}
.pcard .btn--out{align-self:center;margin-top:auto;font-size:12px}
.more{text-align:center;margin-top:40px}

/* service cards */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.scard{background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.07);display:flex;flex-direction:column}
.scard__img{aspect-ratio:16/10;overflow:hidden}
.scard__img img{width:100%;height:100%;object-fit:cover}
.scard__b{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.scard h3{font-size:19px;color:var(--green-d)}
.scard h3 a{color:inherit;text-decoration:none}
.scard p{font-size:14px;margin:0 0 18px}
.scard .link{margin-top:auto;font-size:13px}

/* two-col */
.split{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.split--rev .split__img{order:2}
.split__img img{width:100%;box-shadow:0 14px 40px rgba(0,0,0,.12)}
.split h2{font-size:30px}
.ticks{list-style:none;padding:0;margin:0 0 24px}
.ticks li{position:relative;padding-left:28px;margin-bottom:10px;font-size:15px}
.ticks li:before{content:"";position:absolute;left:0;top:7px;width:14px;height:8px;border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg)}

/* tech columns */
.tech{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.07)}
.tech__col{padding:34px 30px;border-right:1px solid var(--line)}
.tech__col:last-child{border-right:0}
.tech__col h3{color:var(--green-d);font-size:20px}
.tech dl{margin:18px 0 0;font-size:14px}
.tech dt{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.6px}
.tech dd{margin:0 0 12px;color:var(--ink);font-weight:700}

/* roofing types */
.roofs{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.rcard{background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.07);text-align:center}
.rcard img{aspect-ratio:4/3;object-fit:cover;width:100%}
.rcard h3{font-size:16px;margin:18px 10px 6px}
.rcard p{font-size:13px;color:var(--muted);margin:0 16px 20px}
.rcard b{display:block;color:var(--green-d);font-size:15px;margin-bottom:20px}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);text-align:center}
.stat{padding:10px 20px;border-right:1px solid rgba(255,255,255,.35)}
.stat:last-child{border-right:0}
.stat b{display:block;font-size:46px;line-height:1.1;color:#fff}
.stat span{font-size:14px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:s}
.step{background:#fff;padding:28px 26px;box-shadow:0 8px 24px rgba(0,0,0,.06);position:relative}
.step:before{counter-increment:s;content:counter(s,decimal-leading-zero);font-size:38px;font-weight:700;color:var(--green);opacity:.35;position:absolute;right:20px;top:14px}
.step h3{font-size:18px;margin-right:50px}
.step p{font-size:14px;margin:0}

/* tables */
.tbl{width:100%;border-collapse:collapse;background:#fff;font-size:14px;margin:20px 0 28px}
.tbl th,.tbl td{border:1px solid var(--line);padding:11px 14px;text-align:left;vertical-align:top}
.tbl thead th{background:var(--green-l);color:var(--ink)}
.tbl tbody tr:nth-child(even) td{background:#fbfaf8}
.yes{color:var(--green-d);font-weight:700}
.no{color:#b0aaa2}

/* calc */
.calc{display:grid;grid-template-columns:1.2fr 1fr;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.08)}
.calc__f{padding:34px 36px}
.calc__r{background:var(--taupe);color:#fff;padding:34px 36px;display:flex;flex-direction:column;justify-content:center}
.calc__r b{font-size:36px;display:block;margin:8px 0 6px}
.calc label{display:block;font-size:13px;color:var(--muted);margin:0 0 6px}
.calc select,.calc input[type=range]{width:100%;margin-bottom:18px}
.calc select{padding:10px;border:1px solid var(--line);font:15px var(--serif);background:#fff}
.calc output{font-weight:700;color:var(--ink)}

/* reviews */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.review{background:#fff;padding:28px;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.review__h{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.ava{width:46px;height:46px;border-radius:50%;background:var(--green-l);color:var(--green-d);display:flex;align-items:center;justify-content:center;font-weight:700}
.review__h b{display:block;color:var(--ink)}
.review__h small{color:var(--muted)}
.review p{font-size:14px;margin:0}
.stars{color:#f0b429;letter-spacing:2px;font-size:13px}

/* faq */
.faq{max-width:860px;margin:0 auto}
.faq details{background:#fff;border-bottom:1px solid var(--line);padding:0 6px}
.faq summary{cursor:pointer;list-style:none;padding:18px 40px 18px 0;font-weight:700;color:var(--ink);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:6px;top:12px;font-size:26px;color:var(--green)}
.faq details[open] summary:after{content:"–"}
.faq details p{margin:0 0 18px;font-size:15px}

/* guarantees */
.icons4{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;text-align:center}
.ico{width:64px;height:64px;margin:0 auto 16px;border-radius:50%;border:1.5px solid var(--green);display:flex;align-items:center;justify-content:center}
.ico svg{width:30px;height:30px;stroke:var(--green-d);fill:none;stroke-width:1.6}
.icons4 h3{font-size:17px}
.icons4 p{font-size:14px;margin:0}

/* blog */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.post{background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.07);display:flex;flex-direction:column}
.post__img{aspect-ratio:16/9;overflow:hidden;display:block}
.post__img img{width:100%;height:100%;object-fit:cover}
.post__b{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.post__cat{font-size:12px;color:var(--green-d);text-decoration:none;text-transform:uppercase;letter-spacing:.6px;margin-bottom:8px}
.post h3{font-size:18px}
.post h3 a{color:var(--ink);text-decoration:none}
.post h3 a:hover{color:var(--green-d)}
.post p{font-size:14px;margin:0 0 16px;color:var(--text)}
.post__more{margin-top:auto;font-size:13px}
.cats{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:40px}
.cats a{border:1.5px solid var(--green);color:var(--green-d);text-decoration:none;border-radius:30px;padding:6px 18px;font-size:13px}
.cats a.on,.cats a:hover{background:var(--green);color:#fff}
.pager{display:flex;gap:8px;justify-content:center;margin-top:44px}
.pager a,.pager span{min-width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:14px;padding:0 10px}
.pager span{background:var(--green);border-color:var(--green);color:#fff}

/* article */
.layout{display:grid;grid-template-columns:1fr 300px;gap:50px;align-items:start}
.article{font-size:17px;line-height:1.75}
.article h2{font-size:26px;margin:1.6em 0 .6em}
.article h3{font-size:20px;margin:1.4em 0 .5em}
.article p{margin:0 0 1.1em}
.article ul,.article ol{padding-left:22px;margin:0 0 1.2em}
.article li{margin-bottom:.4em}
.article blockquote{margin:1.5em 0;padding:18px 24px;background:var(--green-l);border-left:4px solid var(--green);font-style:italic}
.article__cover{margin-bottom:30px;box-shadow:0 14px 40px rgba(0,0,0,.1)}
.article__meta{display:flex;gap:18px;font-size:13px;color:var(--muted);margin-bottom:24px}
.side{position:sticky;top:20px}
.box{background:var(--bg-soft);padding:24px;margin-bottom:24px}
.box h3{font-size:18px}
.box ul{list-style:none;padding:0;margin:0}
.box li{border-bottom:1px solid var(--line);padding:9px 0;font-size:14px}
.box li:last-child{border:0}
.box a{color:var(--ink);text-decoration:none}
.box a:hover{color:var(--green-d)}
.box--green{background:var(--taupe);color:#fff}
.box--green h3{color:#fff}
.prose{max-width:860px;margin:0 auto;font-size:16px;line-height:1.75}
.prose h2{font-size:26px;margin:1.5em 0 .6em}
.prose h3{font-size:20px;margin:1.3em 0 .5em}
.prose ul,.prose ol{padding-left:22px}

/* project page */
.proj{display:grid;grid-template-columns:1.4fr 1fr;gap:44px;align-items:start}
.proj__img img{width:100%;box-shadow:0 14px 40px rgba(0,0,0,.12)}
.proj__thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.spec{width:100%;border-collapse:collapse;font-size:15px;margin-bottom:26px}
.spec td{padding:10px 0;border-bottom:1px solid var(--line)}
.spec td:last-child{text-align:right;font-weight:700;color:var(--ink)}
.price{font-size:30px;color:var(--ink);font-weight:700;margin:0 0 4px}
.price small{display:block;font-size:13px;color:var(--muted);font-weight:400}
.plan{background:#fff;border:1px solid var(--line);padding:20px}

/* forms */
.form-sec{background:var(--taupe) url(/assets/img/hero.svg) center/cover;color:#fff}
.form-wrap{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.form-wrap h2{color:#fff;font-size:32px}
.form{background:#fff;padding:32px 34px;box-shadow:0 20px 50px rgba(0,0,0,.18);color:var(--text)}
.form h3{font-size:22px}
.field{margin-bottom:14px}
.field input,.field textarea,.field select{width:100%;padding:12px 14px;border:1px solid #d9d4cd;font:15px var(--serif);background:#fff;color:var(--ink);border-radius:2px}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:var(--green)}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.5;color:var(--muted);margin:6px 0 18px}
.agree input{margin:3px 0 0;width:16px;height:16px;flex:none;accent-color:var(--green)}
.agree a{color:var(--green-d)}
.form .btn{width:100%;padding:14px}
.form .btn[disabled]{opacity:.55;cursor:not-allowed;box-shadow:none}
.form-note{font-size:14px;margin-top:12px;display:none;padding:10px 12px;background:var(--green-l);color:var(--green-d)}
.form-note.err{background:#fdecea;color:#b3261e}
.hp{position:absolute;left:-9999px;opacity:0}

/* contacts */
.contacts{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.cinfo{background:var(--bg-soft);padding:34px}
.cinfo dl{margin:0}
.cinfo dt{font-size:12px;text-transform:uppercase;color:var(--muted);letter-spacing:.6px}
.cinfo dd{margin:2px 0 18px;font-size:17px;color:var(--ink)}
.map{background:#e9e5df url(/assets/img/map.svg) center/cover;min-height:360px;position:relative}

/* footer */
.footer{background:#2b2926;color:#c9c3bb;padding:60px 0 0;font-size:14px}
.footer a{color:#e6e1da;text-decoration:none}
.footer a:hover{color:var(--green)}
.footer__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:36px;padding-bottom:40px}
.footer h4{color:#fff;font-size:15px;margin-bottom:14px}
.footer ul{list-style:none;padding:0;margin:0}
.footer li{margin-bottom:8px}
.footer .logo{width:130px;margin-bottom:14px}
.socials{display:flex;gap:10px;margin-top:14px}
.socials span{width:36px;height:36px;border-radius:50%;border:1px solid #5a554f;display:flex;align-items:center;justify-content:center;cursor:default}
.socials svg{width:16px;height:16px;fill:#c9c3bb}
.footer__bottom{border-top:1px solid #45413c;padding:20px 0;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px}
.footer__bottom a{color:var(--green)}
.footer__legal{display:flex;gap:18px;flex-wrap:wrap}
.footer__legal a{color:#c9c3bb}

/* floating button + modal */
.fab{position:fixed;right:24px;bottom:24px;width:58px;height:58px;border-radius:50%;background:var(--red);box-shadow:0 8px 24px rgba(232,69,60,.45);display:flex;align-items:center;justify-content:center;z-index:40;border:0;cursor:pointer;animation:pulse 2.4s infinite}
.fab svg{width:26px;height:26px;fill:#fff}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(232,69,60,.5)}70%{box-shadow:0 0 0 18px rgba(232,69,60,0)}100%{box-shadow:0 0 0 0 rgba(232,69,60,0)}}
.modal{position:fixed;inset:0;background:rgba(20,18,16,.6);display:none;align-items:center;justify-content:center;z-index:60;padding:16px}
.modal.open{display:flex}
.modal .form{max-width:440px;width:100%;position:relative;max-height:95vh;overflow:auto}
.modal__x{position:absolute;right:12px;top:8px;background:none;border:0;font-size:28px;cursor:pointer;color:var(--muted)}

/* cookie */
.cookie{position:fixed;left:20px;bottom:20px;max-width:440px;background:#fff;box-shadow:0 14px 40px rgba(0,0,0,.2);padding:20px 22px;z-index:50;font-size:13.5px;display:none;border-top:3px solid var(--green)}
.cookie.show{display:block}
.cookie p{margin:0 0 14px}
.cookie .btn{padding:9px 24px}
.cookie .btn--out{margin-left:8px;padding:8px 18px}

/* 404 */
.e404{text-align:center;padding:90px 0 100px}
.e404 b{font-size:140px;line-height:1;color:var(--green);display:block}

/* responsive */
@media (max-width:1100px){
  .nav{gap:16px}
  .hero__txt{margin-left:0}
  .projects{grid-template-columns:repeat(3,1fr)}
  .roofs{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .burger{display:block}
  .nav{position:fixed;inset:72px 0 auto 0;background:var(--taupe-d);flex-direction:column;padding:20px;gap:14px;display:none}
  .nav.open{display:flex}
  .header .btn{display:none}
  .header{position:absolute}
  .benefits,.icons4{grid-template-columns:repeat(2,1fr);gap:30px 0}
  .benefit:nth-child(2){border-right:0}
  .partners,.services,.posts,.reviews,.steps,.tech{grid-template-columns:1fr 1fr}
  .tech__col{border-right:0;border-bottom:1px solid var(--line)}
  .projects{grid-template-columns:repeat(2,1fr)}
  .split,.form-wrap,.contacts,.layout,.proj,.calc{grid-template-columns:1fr}
  .split--rev .split__img{order:0}
  .footer__grid{grid-template-columns:1fr 1fr}
  .side{position:static}
  .stats{grid-template-columns:1fr 1fr;gap:24px}
  .stat:nth-child(2){border-right:0}
}
@media (max-width:620px){
  .hero{padding-top:110px}
  .hero h1{font-size:32px}
  .phero h1{font-size:30px}
  .offers{grid-template-columns:1fr;transform:none;margin-top:40px}
  .offer{border-right:0;border-bottom:1px solid var(--line)}
  .sec{padding:56px 0}
  .first-sec{padding-top:60px}
  .sec__title{font-size:27px}
  .benefits,.icons4,.partners,.services,.posts,.reviews,.steps,.tech,.projects,.roofs,.footer__grid{grid-template-columns:1fr}
  .benefit{border-right:0;border-bottom:1px solid var(--line);padding:0 0 20px}
  .tbl{font-size:13px;display:block;overflow-x:auto}
  .cookie{left:10px;right:10px;bottom:10px}
}