/* ═══════════════════════════════════════════════════════════════════════════ Оформление раздела /boilers/. ЭТО НЕ МОЙ ДИЗАЙН. Снято 04.09.2026 со страницы https://inzonex.co.uk/calc/laundry/ — владелец назвал её образцом: «сделать страницу бойлеров существующую в стиле calc/laundry». Белый фон, чёрный герой, Switzer, моноширинные служебные строки, statband с крупными числами, секции .blk с .shead. Изменено ровно два адреса: шрифты берутся локально из assets/fonts, а фотография героя — котельная вместо прачечной. Ни одно правило оформления не тронуто. ═══════════════════════════════════════════════════════════════════════════ */ :root{ --gold:#c9a23f;--gold-d:#8a6a1c;--gold-h:#dab44d;--on-gold:#211a0c; --ink:#0a0a0a;--dim:#5b636c;--faint:#969aa0; --cream:#f7f7f5;--cream2:#ffffff;--line:#e4e4e2;--paper:#ffffff; --red:#c0392b;--green:#0e8a47; --max:1180px;--r:0px;--disp:Switzer,Georgia,serif;--sans:Switzer,system-ui,-apple-system,Segoe UI,Arial,sans-serif} *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font:400 14px/1.6 var(--sans);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased} h1{font-size:clamp(30px,4.3vw,54px)} .lead{font-size:16px}.sub{font-size:15px} h2{font-size:clamp(23px,2.9vw,34px)} .kc .v,.rrow .rv2{font-size:clamp(24px,2.6vw,35px)} .wrap{max-width:var(--max);margin:0 auto;padding:0 24px} a{color:inherit;text-decoration:none} .rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)} .rv.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}} .eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:12.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-d)} .eyebrow::before{content:"";width:34px;height:1px;background:var(--gold)} nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} nav .wrap{display:flex;align-items:center;gap:18px;height:60px} nav .brandwrap{display:flex;flex-direction:column;gap:2px;line-height:1.05} nav .logo{display:inline-flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.01em;font-size:17px} nav .logo a{display:inline-flex;align-items:center;color:inherit} nav .logo img{height:22px;width:auto;display:block} nav .logo .sep{width:1px;height:18px;background:var(--line)} nav .logo .tag{color:var(--dim);font-weight:700;font-size:14px} nav .logo .tag:hover{color:var(--gold-d)} nav .powered{font-size:10.5px;font-weight:600;color:var(--faint);width:fit-content} nav .powered:hover{color:var(--gold-d)} nav .logo b{color:var(--gold)} nav .sp{margin-left:auto} .pill{display:inline-flex;align-items:center;gap:7px;background:var(--gold);color:var(--on-gold);font-weight:700;font-size:13.5px;letter-spacing:.01em;padding:9px 18px;border:0;cursor:pointer;transition:.2s} .pill:hover{background:var(--gold-h);transform:translateY(-1px)} .pill.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)} .pill.ghost:hover{background:var(--cream2);border-color:var(--gold);transform:none} .hero{position:relative;display:flex;align-items:center;min-height:clamp(420px,58vh,560px);background:#15171a url('https://inzonex.co.uk/boilers/img/hero.webp') center 50%/cover no-repeat} .hero::before{content:"";position:absolute;inset:0;background:linear-gradient(96deg,rgba(11,11,14,.78),rgba(11,11,14,.5) 50%,rgba(11,11,14,.18))} .hero .wrap{position:relative;z-index:2;padding-top:46px;padding-bottom:46px} h1{font-family:var(--disp);font-optical-sizing:auto;line-height:1.03;letter-spacing:-.015em;font-weight:500;max-width:18ch;margin-top:16px} h1 em{font-style:italic;color:var(--gold)} .freshness{font-size:12.5px;color:var(--faint);margin:10px 0 0} .lead{color:var(--dim);max-width:60ch;margin:18px 0 18px;line-height:1.55} .lead a.jump{color:var(--gold-d);font-weight:700;border-bottom:1px solid var(--line);white-space:nowrap} .lead a.jump:hover{border-color:var(--gold)} .trust{display:flex;flex-wrap:wrap;gap:10px} .chip{font-size:13px;background:#fff;border:1px solid var(--line);padding:7px 15px;color:var(--ink)} .chip b{color:var(--gold-d)} .hero .eyebrow{color:var(--gold-h)}.hero .eyebrow::before{background:var(--gold-h)} .hero h1{color:#fff}.hero h1 em{color:var(--gold-h)} .hero .freshness{color:rgba(255,255,255,.55)} .hero .lead{color:rgba(255,255,255,.87);max-width:62ch} .hero .lead a.jump{color:#fff;border-color:rgba(255,255,255,.35)} .hero .chip{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.24);color:#fff} .hero .chip b{color:var(--gold-h)} .kpiband{background:#fff;padding:32px 0 6px} .kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:34px 0 8px} .kc{border:1px solid var(--line);padding:22px;background:#fff;} .kc .l{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)} .kc .v{font-family:var(--disp);font-weight:500;letter-spacing:-.01em;margin:9px 0 4px;font-variant-numeric:tabular-nums;color:var(--gold-d)} .kc .v small{font-size:15px;font-weight:600;color:var(--dim);font-family:var(--sans)} .kc .s{font-size:12.5px;color:var(--dim)} .kpi-sub{font-size:13px;color:var(--faint);margin-top:13px;max-width:84ch} .proof{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:16px 0 2px} .pcard{border:1px solid #eedcb4;background:var(--cream2);padding:15px 18px} .pcard .pl{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-d)} .pcard .pv{font-family:var(--disp);font-size:24px;font-weight:500;color:var(--ink);margin:4px 0 2px} .pcard .ps{font-size:12.5px;color:var(--dim)} @media(max-width:720px){.proof{grid-template-columns:1fr}} section.blk{padding:54px 0} .kick{margin-bottom:13px} h2{font-family:var(--disp);line-height:1.08;letter-spacing:-.01em;font-weight:500} .sub{color:var(--dim);max-width:64ch;margin-top:13px} .area-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:30px 0 22px} .acard{appearance:none;text-align:left;border:1px solid var(--line);background:#fff;color:var(--ink);padding:0;cursor:pointer;display:flex;flex-direction:column;overflow:hidden;transition:transform .16s,box-shadow .16s,border-color .16s;position:relative} .acard:hover{transform:translateY(-3px);border-color:#e6cf9b;} .acard.active{border-color:var(--gold);} .acard .aph{display:block;width:100%;aspect-ratio:1/1;background:#15171a center/cover no-repeat} .acard .atxt{padding:14px 16px 16px;display:flex;flex-direction:column;gap:3px} .acard .at{font-family:var(--disp);font-size:18px;font-weight:500;letter-spacing:-.005em} .acard .as{font-size:12.5px;color:var(--dim)} .acard .aview{margin-top:8px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-d);display:inline-flex;align-items:center;gap:6px} .acard:not(.active) .aview{color:var(--faint)} .acard:not(.active) .aph{filter:saturate(.92) brightness(.97)} .acard.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--gold)} @media(max-width:780px){.area-cards{grid-template-columns:repeat(2,1fr)}} @media(max-width:430px){.area-cards{grid-template-columns:1fr 1fr}.acard .at{font-size:16px}} .panel{display:none;animation:fade .25s ease} .panel.active{display:block} @keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} .pintro{color:var(--dim);font-size:16px;max-width:72ch;margin:6px 0 18px} .pintro b{color:var(--ink)} .cfg{display:grid;grid-template-columns:1fr 350px;gap:28px;margin-top:6px;align-items:start} .areas{display:flex;flex-direction:column;gap:14px} .area{border:1px solid var(--line);overflow:hidden;background:#fff;transition:box-shadow .25s,border-color .25s} .area.open{border-color:#e6cf9b;} .area .head{cursor:pointer;display:flex;align-items:center;gap:15px;padding:18px 22px} .area .ph{width:84px;height:62px;object-fit:cover;flex:none;background:#15171a} @media(max-width:560px){.area .ph{width:60px;height:48px}} .area .htxt{flex:1} .area .htxt b{font-size:17px;font-weight:700;display:block} .area .htxt span{font-size:13px;color:var(--dim)} .area .badge{font-size:12.5px;font-weight:700;color:var(--gold-d);background:var(--cream2);border:1px solid #eedcb4;padding:5px 12px;white-space:nowrap} .area .chev{transition:transform .25s;color:var(--faint)} .area.open .chev{transform:rotate(180deg)} .items{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:0 22px;max-height:0;overflow:hidden;transition:max-height .34s ease,padding .34s ease} .area.open .items{max-height:2400px;padding:0 22px 20px} @media(max-width:560px){.items{grid-template-columns:1fr}} .item{display:flex;align-items:center;gap:11px;padding:12px 14px;border:1px solid var(--line);cursor:pointer;font-size:14.5px;transition:.16s;user-select:none;flex-wrap:wrap} .item:hover{border-color:#e6cf9b;background:var(--cream2)} .item.on{border-color:var(--gold);background:var(--cream2);} .item .bx{width:20px;height:20px;border:1.5px solid #d3cdbf;flex:none;display:grid;place-items:center;transition:.16s} .item.on .bx{background:var(--gold);border-color:var(--gold)} .item .bx svg{width:12px;height:12px;stroke:var(--on-gold);opacity:0;transition:.16s} .item.on .bx svg{opacity:1} .item .nm{flex:1;line-height:1.25} .item .sv{font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap} .item.on .sv{color:var(--gold-d);font-weight:700} .item .tune{flex-basis:100%;display:none;gap:12px;margin-top:11px;padding-top:11px;border-top:1px dashed var(--line)} .item.on .tune{display:flex} .item .tune label{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);display:inline-flex;flex-direction:column;gap:4px} .item .tune input{width:62px;padding:6px 8px;border:1px solid var(--line);font:inherit;font-size:13px;text-align:right;font-variant-numeric:tabular-nums;background:#fff;cursor:auto} .item .tune input:focus{outline:none;border-color:var(--gold);} .assume{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;font-size:12.5px;color:var(--dim)} .assume label{display:inline-flex;align-items:center;gap:6px} .assume input{width:88px;padding:6px 8px;border:1px solid var(--line);font:inherit;font-size:12.5px;text-align:right;background:#fff} .assume input:focus{outline:none;border-color:var(--gold);} .res{position:sticky;top:76px;border:1px solid #e6cf9b;background:linear-gradient(180deg,var(--cream2),#fff);padding:24px;} .res h3{font-family:var(--disp);font-size:19px;font-weight:500;margin-bottom:4px} .res .live{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--gold-d);font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:16px} .res .live::before{content:"";width:7px;height:7px;background:var(--gold);animation:bl 2s infinite} @keyframes bl{0%,100%{opacity:1}50%{opacity:.25}} .rrow{display:flex;justify-content:space-between;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line)} .rrow:last-of-type{border-bottom:0} .rrow .rl{font-size:13.5px;color:var(--dim)} .rrow .rv2{font-family:var(--disp);font-weight:500;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--gold-d)} .res .pill{width:100%;justify-content:center;margin-top:16px;font-size:14px;padding:12px 20px} .res .note{font-size:11.5px;color:var(--faint);text-align:center;margin-top:10px} .lead-form{max-width:640px;margin:26px 0 0;border:1px solid #e6cf9b;padding:24px;background:var(--cream)} .lead-form h3{font-family:var(--disp);font-weight:500;font-size:21px;margin-bottom:4px} .lead-form p{font-size:13.5px;color:var(--dim);margin-bottom:14px} .lead-form .row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start} .lead-form input[type=email],.lead-form input[type=text]{flex:1 1 200px;padding:12px 14px;border:1px solid #d9d3c4;font:inherit;font-size:15px;background:#fff} .lead-form input:focus{outline:none;border-color:var(--gold);} .lead-form .pill{flex:none} .assessment-intake{margin:0 0 16px} .assessment-intake .q{font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:9px} .ichips{display:flex;flex-wrap:wrap;gap:8px} .ichip{font-size:13.5px;font-weight:600;border:1px solid #d9d3c4;background:#fff;color:var(--ink);padding:8px 15px;cursor:pointer;user-select:none;transition:.15s;display:inline-flex;align-items:center;gap:7px} .ichip:hover{border-color:#e6cf9b;background:var(--cream2)} .ichip.on{border-color:var(--gold);background:var(--gold);color:var(--on-gold)} .ichip .d{width:7px;height:7px;border:1.5px solid #c9c2b0} .ichip.on .d{background:var(--on-gold);border-color:var(--on-gold)} .lead-form .consent{flex:1 1 100%;font-size:12px;color:var(--dim);display:flex;gap:7px;align-items:flex-start;margin-top:2px} .lead-form .consent input{margin-top:2px;accent-color:var(--gold)} .lead-form .lmsg{flex:1 1 100%;margin:6px 0 0;font-size:13px} .hp{position:absolute;left:-9999px;width:1px;height:1px} .gal{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding-bottom:6px} @media(max-width:760px){.gal{grid-template-columns:1fr}} .eq{border:1px solid var(--line);background:#fff;overflow:hidden;display:flex;flex-direction:column} .eq .ph{position:relative;aspect-ratio:16/10;background:#15171a center/cover no-repeat;border-bottom:1px solid var(--line)} .eq .ph .hot{position:absolute;top:10px;left:10px;font-size:10.5px;font-weight:700;color:#fff;background:var(--red);padding:3px 9px;letter-spacing:.02em} .eqb{padding:17px 18px 18px;display:flex;flex-direction:column;gap:10px;flex:1} .eqb h3{font-family:var(--disp);font-weight:500;font-size:18px;letter-spacing:-.005em} .tchip{display:inline-block;font-size:11.5px;font-weight:700;color:var(--gold-d);background:var(--cream2);border:1px solid #eedcb4;padding:2px 9px;vertical-align:middle;margin-left:4px} .copyslot{font-size:13.5px;color:var(--dim);line-height:1.5} .photoask{font-size:13px;line-height:1.5;color:var(--ink);background:var(--cream2);border:1px solid #eedcb4;border-left:3px solid var(--gold);padding:9px 12px} .eqlinks{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:auto} .toolnote{flex-basis:100%;font-size:11px;font-weight:600;color:var(--faint)} .btn{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:13.5px;padding:9px 15px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer} .btn.pri{background:var(--gold);border-color:var(--gold);color:var(--on-gold)} .btn.pri:hover{background:var(--gold-h)} .btn:hover{border-color:var(--gold)} .toolbanner{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:0 0 16px;padding:15px 18px;border:1px solid #eedcb4;border-left:3px solid var(--gold);background:var(--cream2);color:var(--ink);font-size:14px;line-height:1.5} .toolbanner .tb-cta{font-weight:800;color:var(--gold-d);white-space:nowrap} .whyband{padding:54px 0;background:#fff;border-top:1px solid var(--line)} .why{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px} .wcard{border:1px solid var(--line);overflow:hidden;background:#fff;display:flex;flex-direction:column} .wcard .wph{aspect-ratio:4/3;background:#15171a center/cover no-repeat;border-bottom:1px solid var(--line)} .wcard .wb{padding:20px 20px 22px} .wcard .tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-d);margin-bottom:8px} .wcard .wb h3{font-family:var(--disp);font-weight:500;font-size:19px;letter-spacing:-.005em;margin-bottom:8px;line-height:1.15} .wcard .wb p{font-size:13.5px;color:var(--dim);line-height:1.55} @media(max-width:780px){.why{grid-template-columns:1fr}} .faq{max-width:860px;margin:24px 0 0} .q{border-bottom:1px solid var(--line)} .q summary{list-style:none;cursor:pointer;padding:18px 4px;font-weight:600;font-size:16.5px;display:flex;justify-content:space-between;gap:14px;align-items:center} .q summary::-webkit-details-marker{display:none} .q summary::after{content:"+";color:var(--gold);font-size:24px;font-weight:400;transition:.2s} .q[open] summary::after{transform:rotate(45deg)} .q .a{padding:0 4px 18px;color:var(--dim);font-size:15px;line-height:1.6} .calc-cta{display:grid;grid-template-columns:1.1fr 1fr;margin:36px 0 6px;border:1px solid var(--line);overflow:hidden;background:var(--cream)} .calc-cta .cc-text{padding:30px 32px;display:flex;flex-direction:column;gap:14px;justify-content:center} .calc-cta .cc-text h2{font-size:22px} .calc-cta .cc-text p{color:var(--dim);font-size:14.5px;line-height:1.55} .btn.lg{align-self:flex-start;font-size:15px;padding:13px 24px} .calc-cta .cc-img{background:#15171a center/cover no-repeat;min-height:220px} @media(max-width:720px){.calc-cta{grid-template-columns:1fr}.calc-cta .cc-img{min-height:170px;order:-1}.calc-cta .cc-text{padding:22px 20px}} .guides{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px} .gcard{border:1px solid var(--line);padding:20px;background:#fff;transition:.2s} .gcard:hover{border-color:#e6cf9b;background:var(--cream2);transform:translateY(-2px)} .gcard b{display:block;margin-bottom:6px;color:var(--gold-d)} .gcard span{font-size:13px;color:var(--dim)} footer{border-top:1px solid var(--line);margin-top:46px;padding:32px 0 44px;font-size:13px;color:var(--dim);background:var(--cream)} footer a{color:var(--gold-d);font-weight:600} footer .flinks{display:flex;flex-wrap:wrap;gap:10px 22px;margin-bottom:18px;font-size:13.5px} footer .flinks a{color:var(--ink);font-weight:600} footer .flinks a:hover{color:var(--gold-d)} footer .fine{color:var(--faint);font-size:12px;margin-top:12px;line-height:1.6} @media(max-width:860px){.kpi{grid-template-columns:1fr 1fr}.cfg{grid-template-columns:1fr}.res{position:static;order:-1}.guides{grid-template-columns:1fr}} :root{ --gold:#c9a23f!important; --gold-d:#765816!important; --cream:#ffffff!important; --paper:#fff!important; --ink:#12110f!important; --mut:#595349!important; --line:#d8cdb9!important; } html,body{background:var(--cream)!important;color:var(--ink)!important} .nav,header:not(.hero),.site-header:not(.hero){ background:rgba(255,255,255,.82)!important; border-bottom:1px solid var(--line)!important; backdrop-filter:blur(14px) saturate(1.05)!important; } .brand img,.logo{ width:auto!important; height:20px!important; max-height:20px!important; object-fit:contain!important; } section:not(.hero),.section{background:var(--cream)!important} .kc,.pcard,.wcard,.gcard,.area,.res,.lead-form,.q,.calcbox,.panel,.card,article,details,.cta,table{ background:#fff!important; border-color:var(--line)!important; } .lead-form{background:#fff!important} .tag,.badge,.pcard .pl,.wcard .tag,.gcard b,.gold{color:var(--gold-d)!important} footer{ background:#ffffff!important; border-top:1px solid var(--line)!important; } @media(max-width:640px){ .brand img,.logo{height:19px!important;max-height:19px!important} } html,body{max-width:100%;overflow-x:hidden} .wrap,.calc-hero-split,.hero-copy,.start-card,.preset-strip,.tabs,.grid#calc,.card,.method-proof,.cta{min-width:0!important} @media(max-width:560px){ .wrap{max-width:100%!important;width:100%!important;padding-left:14px!important;padding-right:14px!important} main>.wrap:first-of-type{padding-top:12px!important} h1{font-size:23px;line-height:1.1!important;overflow-wrap:anywhere!important;word-break:normal!important;text-wrap:balance} .hero-copy{padding:14px!important} .sub,.hero-copy p{font-size:13.5px;line-height:1.45!important;overflow-wrap:anywhere!important;word-break:normal!important} .trust{display:grid!important;grid-template-columns:1fr!important;overflow:visible!important} .chip{white-space:normal!important} .start-list{grid-template-columns:1fr!important;gap:0!important} .start-list a{font-size:13.5px;line-height:1.25!important} .tabs{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;scrollbar-width:thin!important} .tab{flex:0 0 auto!important;font-size:13px;padding:8px 10px!important} .two,.three,.advanced-fields .three{grid-template-columns:1fr!important} .mgrid{grid-template-columns:1fr!important} .metric:first-child,.metric:nth-child(2){grid-column:auto!important} } @media(max-width:380px){ h1{font-size:22px} .brand .logo,.brand img[src*="inzonex_logo"]{height:18px!important;max-height:18px!important} } /* The three machine pages were reachable from nothing: Google reported "Referring page: None detected" and never crawled them. These proof cards sit high on the hub and already name exactly those three machines, so they become the links in. */ .proof a.pcard{display:block;text-decoration:none;color:inherit;transition:transform .18s,border-color .18s,box-shadow .18s} .proof a.pcard:hover{transform:translateY(-2px);border-color:var(--gold);} .proof a.pcard .pgo{margin-top:8px;font-size:12.5px;font-weight:700;color:var(--gold-d)} /* ---- canon design layer (apex / calc) ---------------------------------- */ :root{--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --sans:Switzer,"Helvetica Neue",Helvetica,Arial,sans-serif; --gold:#c9a23f;--gold-d:#8a6a1c;--gold-h:#c9a23f;--ink:#0a0a0a; --dim:#565a5f;--faint:#8b8f94;--line:#e4e4e2} body{font:400 16px/1.6 Switzer,"Helvetica Neue",Helvetica,Arial,sans-serif; color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased} h1{font-family:Switzer,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:61.6px;font-weight:600;letter-spacing:-.015em; line-height:1.04;margin:0 0 18px} h2{font-family:Switzer,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:40.5px;font-weight:600;letter-spacing:-.015em; line-height:1.12;margin:0 0 14px} h3,.answer-body h3,.lead-form h3,.res h3{font-family:Switzer,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:19.6px; font-weight:600;letter-spacing:-.01em;line-height:1.28} h4,.lcard h4{font-family:Switzer,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:16.4px;font-weight:600; letter-spacing:-.006em;margin:7px 0 5px} .lead,.hero .lead{font-size:15.2px;line-height:1.68;max-width:76ch;margin:16px 0 22px} .lead{color:var(--dim)} p,.answer-body p,.lcard p,.lead-form p{font-size:12.4px;line-height:1.72} /* content width matches apex and brewery */ :root{--max:1560px} .note,.muted,.answer-body .muted{font-size:11.6px;color:var(--dim)} /* the mono eyebrow is the loudest apex signal after the type scale */ .eyebrow,.k,.lcard .k,.ok,.answer-body .ok,.tag,.lbl,.role,.cap-note{ font-family:var(--mono);font-size:10.1px;font-weight:400;letter-spacing:.14em; line-height:1.55; text-transform:uppercase;color:var(--faint)} .eyebrow{gap:11px} .eyebrow::before{content:none;display:none} /* hero: near-black, side-weighted wash, nothing gold in the heading */ .hero{background-color:#0a0a0a} .hero::before{background:linear-gradient(92deg,rgba(10,10,10,.86) 0%, rgba(10,10,10,.52) 46%,rgba(10,10,10,.06) 100%)} .hero .wrap{padding:74px 24px 62px} .hero h1{color:#fff} .hero .lead{color:rgba(255,255,255,.86)} .hero .eyebrow{color:var(--gold)} .hero .hero .chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22); color:rgba(255,255,255,.9)} .hero .chip b{color:var(--gold)} /* flat surfaces: hairlines, no lift, no pill */ .chip{font-family:var(--mono);font-size:10.1px;letter-spacing:.06em; text-transform:uppercase;padding:7px 11px;background:#fff} .lcard,.card,.spoke,.sb,.kc,.faq,.lead-form,.answer-body{transition:border-color .18s} .lcard:hover,.card:hover,.spoke:hover,.sb:hover{border-color:var(--ink); transform:none} .pill,.btn,.ba-btn{font-family:Switzer,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:12.4px;font-weight:600; letter-spacing:0} .pill:hover,.btn:hover{transform:none;background:var(--gold-d);color:#fff} .go,.lcard .go{font-family:var(--mono);font-size:10.1px;letter-spacing:.1em; text-transform:uppercase;color:var(--gold-d);font-weight:500} /* section rhythm carried by rules, not by cream bands */ section.alt{background:#fff;border-top:1px solid var(--line); border-bottom:1px solid var(--line)} /* The light sticky bar's reference is the calc hub, not brewery: brewery's nav sits on its dark hero (white 16px), while /calc/ carries the same white bar this section has. Measured there: links 12.4px/400 in ink, bar white at 92%, 65px tall. The section was running 13.5px/600 in grey. */ nav{font-size:12.4px;background:rgba(255,255,255,.92); border-bottom:1px solid var(--line)} nav a,nav .links a{font-size:12.4px;font-weight:400;color:var(--ink); letter-spacing:normal} footer{font-size:11.6px;border-top:1px solid var(--line)} .mono,.n,.stat,.v,.s{font-family:var(--mono)} /* Hero titles are scoped by class on four pages, and those rules outrank a bare h1: .hdln h1 rendered the page title at 17px, and .hero-h.dsp came out at 42px on one case page and 72px on the other. One canon size for all. */ .hdln h1,h1.hero-h,.hero-h,h1.dsp,.hero h1{font-size:61.6px;font-weight:600; letter-spacing:-.015em;line-height:1.04; font-family:Switzer,"Helvetica Neue",Helvetica,Arial,sans-serif} h2.sec,.sec.dsp,h2.dsp{font-size:40.5px;font-weight:600;letter-spacing:-.015em; line-height:1.1;font-family:Switzer,"Helvetica Neue",Helvetica,Arial,sans-serif} /* an h2 inside a card is a card heading, not a section heading */ .card h2,.lcard h2,.pane h2{font-size:19.6px;font-weight:600;letter-spacing:-.01em} @media(max-width:900px){ .hdln h1,h1.hero-h,.hero-h,h1.dsp,.hero h1,h1{font-size:37px} h2.sec,.sec.dsp,h2.dsp,h2{font-size:26.5px} } /* canon: headings carry no gold accent */ h1 em,h1 i,h2 em,h2 i,.hero h1 em,.hero h1 i,header h1 em,header h1 i,.hero h2 em,header h2 em{font-style:normal;color:inherit} @media(max-width:900px){ table{display:block;width:max-content;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} nav .wrap{flex-wrap:wrap;row-gap:8px} nav .links{flex-wrap:wrap} nav,nav>*{max-width:100%} nav .pill,nav .btn{padding:7px 10px} section,header,footer,.hero{overflow-x:clip} html,body{overflow-x:hidden;max-width:100%} } /* Switzer - self-hosted, served from fonts/ (the one copy the whole site shares, verified 200 from this section). No third-party font domain. */ @font-face{font-family:Switzer;src:url(fonts/switzer-400.woff2)format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:Switzer;src:url(fonts/switzer-500.woff2)format('woff2');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:Switzer;src:url(fonts/switzer-600.woff2)format('woff2');font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:Switzer;src:url(fonts/switzer-700.woff2)format('woff2');font-weight:700;font-style:normal;font-display:swap} /* apex components, lifted verbatim from the live apex page */ :root{--bg:#ffffff; --ink:#0a0a0a; --dim:#565a5f; --faint:#8b8f94; --line:#e4e4e2; --line2:#111111; --gold:#c9a23f; --gold-d:#8a6a1c; --dark:#0a0a0a; --max:1560px; --mono:ui-monospace,"Cascadia Mono","JetBrains Mono",Consolas,monospace;} .wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(20px,3.2vw,56px)} .mono{font-family:var(--mono);font-size:10.1px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)} .ulink{display:inline-block;font-size:13.8px;font-weight:500;border-bottom:1px solid var(--ink);padding-bottom:2px;transition:border-color .2s,color .2s} .ulink:hover{color:var(--gold-d);border-color:var(--gold-d)} .rv{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)} .rv.in{opacity:1;transform:none} .rv.d1{transition-delay:.08s} .rv.d2{transition-delay:.16s} .rv.d3{transition-delay:.24s} nav.top .wrap{display:flex;align-items:center;gap:34px;height:68px;max-width:none;padding:0 clamp(20px,3.2vw,56px)} /* ===== HERO — black, full-bleed photo ===== */ .hero{position:relative;min-height:min(82svh,860px);background:var(--dark);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden} .hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:radial-gradient(125% 95% at 22% 58%,rgba(10,10,10,.94),rgba(10,10,10,.6) 42%,rgba(10,10,10,.15) 100%)} .hero .inner{position:relative;z-index:2;padding-top:92px;height:100%;display:flex;flex-direction:column;max-width:none !important;margin:0 !important;padding-left:clamp(24px,4vw,88px);padding-right:clamp(20px,3.2vw,56px)} .hero .block{margin-top:auto;margin-bottom:clamp(30px,4vh,58px);max-width:min(56vw,860px)} .hero .meta{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.16)} .hero .meta .mono{color:rgba(255,255,255,.6)} .hero .meta .mono b{color:#fff;font-weight:400} .hero .block p.sub{margin-top:20px} .hero p.sub{margin-bottom:22px;font-size:18.4px;color:rgba(255,255,255,.85);max-width:540px;margin-bottom:30px} .hero p.sub b{color:#fff} .hero .links2{display:flex;gap:24px;flex-wrap:wrap;margin-top:22px} .hero .ulink{border-color:#fff;color:#fff} .hero .ulink:hover{color:var(--gold);border-color:var(--gold)} .hero .cap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.16);padding:14px 0 20px;font-family:var(--mono);font-size:9.7px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55)} .hero .cap b{color:var(--gold);font-weight:400;margin-right:6px} .hero .cap .g{color:var(--gold)} /* ===== STATS — white ===== */ .statband{border-bottom:1px solid var(--line)} .statband .in4{display:grid;grid-template-columns:repeat(4,1fr)} .statband .st{padding:clamp(26px,3vw,44px) clamp(18px,2.4vw,40px) clamp(26px,3vw,44px) 0;border-right:1px solid var(--line2);margin-right:clamp(18px,2.4vw,40px)} .statband .st:last-child{border-right:none;margin-right:0} .statband b{display:block;font-weight:700;font-size:31.3px;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .statband span{font-family:var(--mono);font-size:9.7px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);display:block;margin-top:8px} .shead{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(24px,4vw,80px);align-items:start} .shead p.lede{font-size:15.2px;color:var(--dim);max-width:34em;margin-top:6px} .shead .mono .idx{color:var(--ink)} .flagship .no{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--gold)} .flagship .tag{font-family:var(--mono);font-size:9.7px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:8px;margin-top:12px} .flagship .tag::before{content:"";width:5px;height:5px;background:var(--gold);animation:bl 2s infinite} /* ===== MODULE ROWS (V1) ===== */ .mrows{border-top:1px solid var(--line2)} .mrow{cursor:pointer;display:grid;grid-template-columns:130px 1.05fr 1.5fr 40px;gap:clamp(16px,2.6vw,44px);align-items:center;padding:clamp(22px,2.8vw,38px) 0;border-bottom:1px solid var(--line);transition:background .3s} .mrow:hover{background:rgba(201,162,63,.05)} .mrow h3{transition:color .25s} .mrow:hover h3{color:var(--gold-d);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px} .mrow .arr{justify-self:end} .mrow .no{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--faint);transition:color .3s} .mrow:hover .no{color:var(--gold-d)} .mrow h3{font-size:20.2px;font-weight:600;letter-spacing:-.01em;line-height:1.2} .mrow .tag{font-family:var(--mono);font-size:9.7px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-d);display:inline-flex;align-items:center;gap:7px;margin-top:8px} .mrow .tag.live::before{content:"";width:5px;height:5px;background:var(--gold);animation:bl 2s infinite} .mrow p{font-size:12.9px;color:var(--dim);line-height:1.6} .mrow .arr{opacity:.45;font-size:17.4px;color:var(--faint);transition:transform .3s,color .3s} .mrow:hover .arr{transform:translateX(6px);color:var(--gold-d);opacity:1} .seeall{margin-top:30px;display:inline-block} .indband .mono{color:rgba(255,255,255,.45)} .indband .lede{color:rgba(255,255,255,.6)} .ind4 .mono{display:block;margin-bottom:12px} .prodband .mono{color:rgba(255,255,255,.45)} .speclist li .mono{flex:none;width:34px} .prodband .ulink{border-color:#fff;color:#fff} .prodband .ulink:hover{color:var(--gold);border-color:var(--gold)} /* one mobile step down — desktop sizes above are fixed on purpose */ /* ===== bare ↔ insulated slider ===== */ .vhs{position:relative;overflow:hidden;aspect-ratio:1360/880;background:#0a0a0a;margin-top:0;cursor:ew-resize;user-select:none;touch-action:pan-y} .vhs img{display:block;width:100%;height:auto;pointer-events:none} .vhs .ins{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(0 0 0 35%)} .vhs .div{position:absolute;top:0;bottom:0;left:35%;width:2px;background:var(--gold);pointer-events:none} .vhs .hnd{position:absolute;top:50%;left:35%;transform:translate(-50%,-50%);width:46px;height:46px;border:1px solid var(--gold); background:rgba(10,10,10,.7);color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:15px;letter-spacing:2px;pointer-events:none} .vhs .lbl{position:absolute;bottom:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase; background:rgba(10,10,10,.68);color:#fff;padding:6px 11px;pointer-events:none} .vhs .lbl.l{left:14px} .vhs .lbl.r{right:14px} .vhs .hint{position:absolute;top:14px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:10px;letter-spacing:.14em; text-transform:uppercase;color:rgba(255,255,255,.75);background:rgba(10,10,10,.6);padding:6px 12px;pointer-events:none;transition:opacity .4s} .vhs.touched .hint{opacity:0} @media(prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none;transition:none} } @media(max-width:760px){ .statband .in4{grid-template-columns:1fr 1fr} .statband .st:nth-child(2){border-right:none} } @media(max-width:760px){ .shead{grid-template-columns:1fr;gap:14px} } @media(max-width:960px){ .mrow{grid-template-columns:52px 1fr 30px;grid-template-rows:auto auto} .mrow p{grid-column:2} } @media(max-width:900px){ .mrow h3{font-size:15.2px} .statband b{font-size:20.8px} .hero .block p.sub{margin-top:20px} .hero p.sub{margin-bottom:22px;font-size:13.6px} .shead p.lede{font-size:12.8px} } @media(hover:none){ /* grow the hit area with an invisible overlay so the underline stays tight to the text */ .ulink,.go,.seeall,nav.top .navcta,.bothgrid .facts a,.rm,footer a{position:relative} .ulink::before,.go::before,.seeall::before,nav.top .navcta::before,.bothgrid .facts a::before,.rm::before,footer a::before{content:"";position:absolute;left:-6px;right:-6px;top:50%;transform:translateY(-50%);height:44px} .mrow{min-height:64px} } @media(max-width:900px){ /* hero text was capped at 56vw = 210px on a phone, wrecking the headline */ .hero .block{max-width:none} .hero .inner{padding-top:78px} .hero{min-height:min(88svh,780px)} .lede,.shead p.lede{font-size:15.5px;line-height:1.55} .hero p.sub{font-size:15.5px;line-height:1.55} .mrow p,.prodgrid p,.why3 p{font-size:15px;line-height:1.55} } @media(max-width:560px){ .hero .cap{font-size:9px;gap:8px} .vhs .lbl{font-size:9.5px;padding:5px 9px} .vhs .hnd{width:52px;height:52px} .statband .in4{grid-template-columns:1fr 1fr} } @media(min-width:761px) and (max-width:1024px){ .hero .block{max-width:min(78vw,720px)} } @media(max-width:640px){ /* keep the positioning line, drop the two spec rows above the headline */ .hero .meta{border-bottom:none;padding-bottom:6px} .hero .meta .mono:nth-child(2),.hero .meta .mono:nth-child(3){display:none} /* the four-step strip: just the verbs on a phone, one calm row */ .hero .cap{gap:14px;font-size:9.4px;padding-top:12px;flex-direction:row;flex-wrap:wrap;justify-content:flex-start} .hero .cap i{display:none} .hero .cap span{white-space:nowrap} /* pull the headline up out of the empty top third */ .hero{min-height:min(62svh,540px);justify-content:center} .hero .inner{padding-top:64px} .hero .block{margin-top:18px;margin-bottom:0} .hero h1{margin:18px 0 18px} } /* ---- hero: apex composition ------------------------------------------- */ .hero{position:relative;display:flex;align-items:center;overflow:hidden; min-height:min(88svh,780px);background:#0a0a0a} /* The canon layer paints .hero::before with a 92deg wash that runs rgba(10,10,10,.86) -> .52 -> .06 across the WHOLE hero. It sits above the photo, so every adjustment made to .hero .bg did nothing: measured, the picture arrived at 67 mean luminance against 140 in the source file. Killed here; the headline keeps its legibility from a text-shadow and a narrow scrim behind the text column only. */ /* The page paints two scrims over the photo: a linear one on ::before and a radial one on ::after that runs rgba(10,10,10,.94) at 22%/58% - between them the picture arrived at 63 mean luminance against 138 in the file. The linear one goes entirely; the radial stays, at roughly a third of its strength, and only where the headline sits, so the text keeps its contrast and the plant is still visible. */ .hero::before{background:none!important;content:none!important} .hero::after{content:""!important;position:absolute;inset:0;pointer-events:none; /* Владелец 05.09.2026: «этот экран затемнение сделай его светлее на 25%». Все три остановки радиального слоя умножены на 0.75, геометрия та же: .90 -> .675, .62 -> .465, .16 -> .12. */ background:radial-gradient(120% 95% at 20% 56%,rgba(10,10,10,.675),rgba(10,10,10,.465) 44%,rgba(10,10,10,.12) 84%)!important} .hero .bg{position:absolute;inset:0;background:url('https://inzonex.co.uk/boilers/img/hero.webp') center 42%/cover no-repeat} /* no scrim at all - the headline carries its own shadow */ .hero .bg::after{content:none} .hero .inner{position:relative;z-index:2;width:100%;padding-top:78px;padding-bottom:0} .hero .meta{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap; border-bottom:1px solid rgba(255,255,255,.22);padding-bottom:10px} .hero .meta .mono{color:rgba(255,255,255,.62)} .hero .block{max-width:min(78vw,760px);margin-top:38px} .hero h1{color:#fff;margin:0 0 18px;text-shadow:0 2px 10px rgba(0,0,0,.9),0 1px 32px rgba(0,0,0,.7)} .hero p.sub{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.9);font-size:15.5px;line-height:1.55;max-width:56ch;margin:0 0 22px} .hero .cap{margin-top:52px} /* ---- top bar -------------------------------------------------------- It is a bare