/* sipdom29 — «холодный север»: туман, морской синий, древесина OSB; тепловая гамма только там, где уходит тепло. Ubuntu + Ubuntu Mono. */
:root{
 --tuman:#E6ECF0; --tuman-2:#F3F6F8; --more:#16324A; --more-2:#2B4E6B; --sizy:#5E7385; --sizy-s:#8D9DAA; --lin:#D3DCE3; --sneg:#fff;
 --osb:#D8B47F; --osb-t:#9A7442;
 --t1:#F7C548; --t2:#F39A2B; --t3:#E8632A; --t4:#D63A26; --holod:#7FA7C4;
 --ok:#2F8A5B; --ok-f:#E5F2EA; --net:#C2412C; --net-f:#FBEAE6;
 --rel:76px; --pole:56px;
 --sh:'Ubuntu',Arial,sans-serif; --mono:'Ubuntu Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--tuman);color:var(--more);font:400 16px/1.6 var(--sh);overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:var(--more-2)}
[hidden]{display:none!important}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.015em}
h2{font-size:clamp(28px,3.2vw,44px);line-height:1.1}
h3{font-size:18px;line-height:1.3}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* рейка-термометр */
.reika{position:fixed;left:0;top:0;bottom:0;width:var(--rel);background:linear-gradient(90deg,#dfe7ec,#e9eff3);border-right:1px solid var(--lin);z-index:20;padding:22px 0}
.reika ol{list-style:none;margin:0;padding:0;height:100%;display:flex;flex-direction:column;justify-content:space-between;position:relative}
.reika ol::before{content:"";position:absolute;left:21px;top:6px;bottom:6px;width:4px;border-radius:2px;background:#cdd8e0}
.reika .rtut{position:absolute;left:21px;top:6px;width:4px;border-radius:2px;height:var(--rt,0%);background:linear-gradient(180deg,var(--t3),var(--t2) 60%,var(--t1));transition:height .25s}
.reika li{position:relative;z-index:1}
.reika a{display:block;text-decoration:none;color:var(--sizy-s);padding-left:36px;font-size:10px;line-height:1.2;transition:color .2s}
.reika a b{display:block;font:700 12px var(--mono);color:var(--sizy)}
.reika a::before{content:"";position:absolute;left:17px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--tuman);border:2px solid #b9c7d2;transition:all .2s}
.reika a.tek{color:var(--more)}
.reika a.tek b{color:var(--t3)}
.reika a.tek::before{background:var(--t3);border-color:var(--t3);box-shadow:0 0 0 4px rgba(232,99,42,.18)}
.reika a:hover{color:var(--more)}
main,.podval{margin-left:var(--rel)}
.ram{max-width:1260px;margin:0 auto;padding:0 var(--pole)}

/* первый экран */
.geroj{position:relative;min-height:600px;overflow:hidden;background:#eef2f5}
.geroj>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:65% 60%}
.geroj::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(243,246,248,.96) 0,rgba(243,246,248,.8) 32%,rgba(243,246,248,0) 55%)}
.geroj .ram{position:relative;z-index:2;padding-top:110px;padding-bottom:80px}
.logo{display:inline-flex;align-items:center;gap:10px;font:700 18px var(--sh);color:var(--more);text-decoration:none;margin-bottom:56px;letter-spacing:-.01em}
.logo svg{width:30px;height:30px}
.geroj h1{font-size:clamp(36px,4vw,58px);line-height:1.05;max-width:600px;letter-spacing:-.03em}
.geroj p{font-size:19px;color:var(--sizy);max-width:470px;margin:22px 0 28px}
.plashka{display:inline-flex;align-items:center;gap:12px;background:rgba(255,255,255,.85);border:1px solid var(--lin);border-radius:6px;padding:10px 16px;font-size:14px;color:var(--sizy);backdrop-filter:blur(4px)}
.plashka b{font:700 22px var(--mono);color:var(--more)}
.sneg{position:absolute;inset:0;z-index:1;pointer-events:none}

/* разделы */
.razd{padding:68px 0 0}
.razd-sh{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:40px;align-items:end;margin-bottom:34px}
.razd-sh .nom{font:700 13px var(--mono);color:var(--t3);display:block;margin-bottom:8px;letter-spacing:.06em}
.razd-sh p{margin:0;color:var(--sizy);font-size:15.5px}
.karta{background:var(--sneg);border:1px solid var(--lin);border-radius:10px}

/* калькулятор */
.kalk{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.72fr) minmax(0,1.2fr);gap:0;overflow:hidden}
.kalk form{padding:28px 26px;display:grid;grid-template-columns:132px 1fr;gap:12px 16px;align-items:center;font-size:14px;border-right:1px solid var(--lin)}
.kalk label,.kalk .lbl{color:var(--sizy)}
.kalk select,.kalk input[type=number]{width:100%;font:500 15px var(--mono);color:var(--more);border:1px solid #c6d2db;border-radius:6px;padding:9px 12px;background:#fff}
.kalk select{font-family:var(--sh)}
.kalk input:focus,.kalk select:focus{outline:none;border-color:var(--more-2);box-shadow:0 0 0 3px rgba(43,78,107,.12)}
.seg{display:inline-flex;border:1px solid #c6d2db;border-radius:6px;overflow:hidden}
.seg button{font:500 14px var(--mono);white-space:nowrap;border:0;background:#fff;color:var(--more);padding:9px 13px;cursor:pointer;border-left:1px solid #c6d2db}
.seg button:first-child{border-left:0}
.seg button[aria-pressed=true]{background:var(--more);color:#fff}
.kalk .itog{padding:28px 26px;background:linear-gradient(180deg,#f6f9fb,#eef3f6);display:flex;flex-direction:column;gap:20px;border-right:1px solid var(--lin)}
.itog dt{font-size:13px;color:var(--sizy)}
.itog dd{margin:2px 0 0;font:700 34px/1.05 var(--mono);color:var(--more)}
.itog dd small{font:500 15px var(--sh);color:var(--sizy)}
.itog .pod{font-size:12px;color:var(--sizy-s);margin-top:2px;font-family:var(--sh)}
.itog .norma{font-size:12.5px;line-height:1.45;padding:10px 12px;border-radius:6px}
.itog .norma.net{background:var(--net-f);color:var(--net)}
.itog .norma.da{background:var(--ok-f);color:var(--ok)}
.dom-razrez{padding:70px 70px 50px}
.dr-in{position:relative}
.dr-in img{width:100%}
.dr-in svg.potoki{position:absolute;overflow:visible;pointer-events:none}
.potoki text{font-family:var(--sh)}
.potoki .str{transition:stroke-width .4s}

/* куда уходит */
.kuda{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:36px;align-items:center}
.kuda .dom-razrez{padding:70px 60px 60px}
.stolb{padding:26px 28px}
.stolb h3{margin-bottom:16px}
.stolb ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.stolb li{display:grid;grid-template-columns:110px 1fr 56px;gap:12px;align-items:center;font-size:14px}
.stolb .pol{height:22px;border-radius:3px;background:#edf1f4;overflow:hidden}
.stolb .pol i{display:block;height:100%;width:var(--w);background:var(--c);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.stolb li b{font:700 15px var(--mono);text-align:right}
.stolb .zam{margin-top:18px;font-size:13px;color:var(--sizy);background:var(--tuman-2);padding:12px 14px;border-radius:6px;display:flex;gap:10px}

/* сравнение */
.sravn{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.25fr);gap:18px;align-items:stretch}
.sv{padding:0 0 18px;overflow:hidden}
.sv img{aspect-ratio:16/10;object-fit:cover;width:100%;margin-bottom:14px}
.sv h3{padding:0 18px;font-size:16px;margin-bottom:10px}
.sv dl{margin:0;padding:0 18px;display:grid;gap:8px;font-size:13px;color:var(--sizy)}
.sv dd{margin:0;font:700 19px var(--mono);color:var(--more)}
.sv dd.mimo{color:var(--net)}
.tabl{padding:20px 22px}
.tabl h3{margin-bottom:12px;font-size:16px}
.tabl table{width:100%;border-collapse:collapse;font-size:13px}
.tabl th,.tabl td{padding:8px 6px;border-bottom:1px solid var(--lin);text-align:right}
.tabl th:first-child,.tabl td:first-child{text-align:left;color:var(--sizy)}
.tabl td{font-family:var(--mono);font-size:14px}
.tabl .trb{margin-top:14px;padding-top:12px;border-top:2px solid var(--t3);font-size:13px;color:var(--sizy)}
.tabl .trb b{display:block;font:700 22px var(--mono);color:var(--more)}

/* стена */
.stena{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;align-items:center}
.stena-ris{position:relative}
.stena-ris ol{list-style:none;margin:0;padding:0;position:absolute;left:0;top:4%;bottom:4%;display:flex;flex-direction:column;justify-content:space-between;width:40%}
.stena-ris li{font-size:13px;line-height:1.25;border-bottom:1px solid #b6c4cf;padding-bottom:4px;color:var(--more)}
.stena-ris li small{display:block;color:var(--sizy-s);font-size:11.5px}
.stena-ris img{margin-left:36%;width:64%}
.graf{padding:20px 22px}
.graf h3{margin-bottom:6px}
.graf p{margin:0 0 10px;font-size:13px;color:var(--sizy)}
.graf svg{width:100%;height:auto;overflow:visible}
.graf .vyb{display:inline-flex;margin-bottom:8px}

/* вентиляция */
.vent{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:30px;align-items:center}
.vent .dom-razrez{padding:60px 60px 30px}
.vent-cifry{display:grid;grid-template-columns:1fr 1fr;gap:0;overflow:hidden}
.vent-cifry>div{padding:22px 24px}
.vent-cifry>div+div{border-left:1px solid var(--lin);background:var(--tuman-2)}
.vent-cifry dt{font-size:14px;font-weight:700}
.vent-cifry dt small{display:block;font-weight:400;color:var(--sizy);font-size:12px}
.vent-cifry dd{margin:10px 0 0;font:700 34px var(--mono)}
.vent-cifry dd small{display:block;font:400 13px var(--sh);color:var(--sizy)}
.vent-txt{margin-top:16px;font-size:14.5px;color:var(--sizy)}

/* север */
.sever{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.sv3{display:grid;grid-template-columns:44% 1fr;overflow:hidden}
.sv3 img{height:100%;object-fit:cover}
.sv3 div{padding:18px 20px}
.sv3 h3{margin-bottom:6px;font-size:16px}
.sv3 p{margin:0;font-size:13.5px;color:var(--sizy)}
.sv3 b.c{display:block;font:700 22px var(--mono);margin:8px 0 2px;color:var(--more)}

/* вопросы */
.voprosy{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;align-items:start}
.voprosy details{background:#fff;border:1px solid var(--lin);border-radius:8px}
.voprosy summary{cursor:pointer;list-style:none;padding:15px 44px 15px 18px;position:relative;font-weight:500;font-size:15px}
.voprosy summary::-webkit-details-marker{display:none}
.voprosy summary::after{content:"";position:absolute;right:18px;top:20px;width:9px;height:9px;border-right:2px solid var(--sizy);border-bottom:2px solid var(--sizy);transform:rotate(45deg);transition:transform .2s}
.voprosy details[open] summary::after{transform:rotate(-135deg);top:24px}
.voprosy details p{margin:0;padding:0 18px 16px;color:var(--sizy);font-size:14.5px}

.podval{margin-top:90px;position:relative;overflow:hidden;background:linear-gradient(180deg,var(--tuman),#dbe4ea)}
.podval .ram{display:flex;gap:30px;align-items:flex-end;justify-content:space-between;padding-top:40px;padding-bottom:40px;font-size:12.5px;color:var(--sizy)}
.podval p{margin:0;max-width:520px}
.podval .les{position:absolute;left:0;right:0;bottom:0;height:70px;opacity:.35;pointer-events:none}

.rv{opacity:0;transform:translateY(16px);transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1)}
.rv.vid{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}html{scroll-behavior:auto}.sneg{display:none}}

@media (max-width:1180px){
 :root{--pole:32px}
 .kalk{grid-template-columns:1fr 1fr}
 .kalk .dom-razrez{grid-column:1/-1;border-top:1px solid var(--lin)}
 .kalk .itog{border-right:0}
 .sravn{grid-template-columns:repeat(3,minmax(0,1fr))}
 .tabl{grid-column:1/-1}
 .sever{grid-template-columns:1fr}
}
@media (max-width:860px){
 :root{--rel:0px;--pole:16px}
 .reika{top:auto;bottom:0;left:0;right:0;width:auto;height:46px;padding:0 10px;border-right:0;border-top:1px solid var(--lin);background:rgba(233,239,243,.96);backdrop-filter:blur(6px)}
 .reika ol{flex-direction:row;align-items:center;height:100%}
 .reika ol::before{left:6px;right:6px;top:auto;bottom:4px;width:auto;height:3px}
 .reika .rtut{left:6px;top:auto;bottom:4px;height:3px;width:var(--rt,0%)}
 .reika a{padding:0 4px;font-size:0;text-align:center}
 .reika a b{font-size:12px}
 .reika a::before{display:none}
 body{padding-bottom:46px}
 .geroj{min-height:0}
 .geroj>img{position:relative;height:240px;object-position:78% 60%}
 .geroj::after{display:none}
 .geroj .ram{padding-top:24px;padding-bottom:26px;margin-top:-240px;padding-top:262px}
 .logo{position:absolute;top:14px;left:16px;margin:0;background:rgba(255,255,255,.85);padding:6px 10px;border-radius:6px}
 .geroj p{font-size:16px}
 .razd{padding-top:60px}
 .razd-sh{grid-template-columns:1fr;gap:10px}
 .kalk{grid-template-columns:1fr}
 .kalk form{grid-template-columns:1fr;gap:4px 0;border-right:0;border-bottom:1px solid var(--lin);padding:20px 18px}
 .kalk form label,.kalk form .lbl{margin-top:10px}
 .itog dd{font-size:28px}
 .kuda,.stena,.vent{grid-template-columns:1fr}
 .sravn{grid-template-columns:1fr}
 .vent-cifry{grid-template-columns:1fr}
 .vent-cifry>div+div{border-left:0;border-top:1px solid var(--lin)}
 .sv3{grid-template-columns:38% 1fr}
 .voprosy{grid-template-columns:1fr}
 .stena-ris ol{position:static;width:auto;display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;margin-bottom:12px}
 .stena-ris img{margin:0 auto;width:80%}
 .podval .ram{flex-direction:column;align-items:flex-start}
}
.kalk .dom-razrez{padding:64px 46px 40px;align-self:center}
@media (max-width:860px){.potoki text{font-size:5.4px}.potoki text.pc{font-size:6.6px}.dom-razrez,.kalk .dom-razrez,.kuda .dom-razrez,.vent .dom-razrez{padding:56px 34px 40px}}