/* Poppins, self-hosted.
Google Fonts was loading from fonts.googleapis.com on every page, which is a third-party
request to Google (and an IP disclosure) BEFORE anyone has consented to anything. A cookie
banner that blocks the map while the fonts still phone home is theatre. Self-hosted = no
third-party request at all, and one less round trip. */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
src:url('fonts/poppins-400-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
src:url('fonts/poppins-400-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;
src:url('fonts/poppins-500-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;
src:url('fonts/poppins-500-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
src:url('fonts/poppins-600-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
src:url('fonts/poppins-600-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
src:url('fonts/poppins-700-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
src:url('fonts/poppins-700-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;
src:url('fonts/poppins-800-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;
src:url('fonts/poppins-800-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
:root{
--red:#DA2828; --red-d:#b81f1f; --red-wash:#fdecec; --red-tint:#fef4f4;
--navy:#0B1F3A; --navy-2:#0d1b31; --ink:#0d1420;
--paper:#ffffff; --mist:#f6f8fb; --line:#e7ecf3; --muted:#5f6b7e; --muted-d:#98a2b3;
--gold:#F5B301;
--r:26px; --rs:16px; --maxw:1340px; --gutter:26px;
--sans:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;font-family:var(--sans);background:var(--paper);color:var(--navy);-webkit-font-smoothing:antialiased;line-height:1.55;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.08;letter-spacing:-.02em}
p{margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.slash{font-size:14px;font-weight:600;color:var(--muted)}
.slash::before{content:"/";color:var(--red);margin-right:2px}
.dim{color:var(--muted-d)}
/* pill button with circular arrow */
.btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--sans);font-size:15px;font-weight:600;border:0;border-radius:999px;padding:8px 8px 8px 24px;cursor:pointer;transition:transform .18s,background .18s,box-shadow .18s;white-space:nowrap}
.btn .ic{width:36px;height:36px;border-radius:999px;display:grid;place-items:center;flex:none}
.btn .ic svg{width:17px;height:17px}
.btn-dark{background:var(--navy);color:#fff}.btn-dark .ic{background:#fff;color:var(--navy)}
.btn-dark:hover{background:#12294d;transform:translateY(-2px)}
.btn-red{background:var(--red);color:#fff}.btn-red .ic{background:#fff;color:var(--red)}
.btn-red:hover{background:var(--red-d);transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--navy)}.btn-white .ic{background:var(--red);color:#fff}
.btn-white:hover{transform:translateY(-2px)}
.btn-plain{padding:13px 24px;gap:9px}.btn-plain .ic{display:none}
.stars{display:inline-flex;gap:2px;color:var(--gold)}.stars svg{width:16px;height:16px}
/* honest slots */
.slot{border:1.5px dashed #cbb2b2;background:repeating-linear-gradient(45deg,#fbf4f4,#fbf4f4 10px,#f6ecec 10px,#f6ecec 20px);border-radius:var(--rs);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;color:#9c6a6a;padding:20px;min-height:120px}
.slot svg{width:24px;height:24px;opacity:.7}
.slot .lab{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.slot .note{font-size:11.5px;color:#b48c8c;max-width:230px;line-height:1.45}
.flag{display:inline-block;font-size:11px;font-weight:600;color:#b04a4a;background:#fbeaea;border:1px solid #f0cccc;border-radius:999px;padding:4px 12px}
.ph{position:absolute;top:12px;left:12px;z-index:4;font-size:10.5px;font-weight:600;color:#fff;background:rgba(0,0,0,.4);border:1px dashed rgba(255,255,255,.5);border-radius:999px;padding:4px 10px}
/* HERO */
.hero{position:relative;margin:12px 12px 0;border-radius:34px;overflow:hidden;min-height:clamp(660px,92vh,900px);display:flex;flex-direction:column;color:#fff}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(110deg,rgba(11,25,50,.82) 0%,rgba(11,25,50,.5) 42%,rgba(11,25,50,.12) 72%,rgba(11,25,50,.35) 100%)}
.hero-inner,.hero-body,.hero-foot{position:relative;z-index:2}
/* sticky top nav: logo standalone left, links+CTA in a pill right (Aquora-style) */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px clamp(18px,3.5vw,40px);transition:background .3s,padding .3s,box-shadow .3s}
.site-nav.scrolled{background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 6px 24px -14px rgba(0,0,0,.22);padding-top:12px;padding-bottom:12px}
/* Real Arktek logo. The wordmark is dark, so it needs a WHITE variant on dark
backgrounds (the hero photo, the footer) and the dark variant once the nav
goes solid white on scroll. Two files, swapped, so no filter hacks. */
.brand{display:flex;align-items:center;line-height:0}
.brand img{height:38px;width:auto;display:block}
.brand .logo-dark{display:none}
.site-nav.scrolled .brand .logo-light{display:none}
.site-nav.scrolled .brand .logo-dark{display:block}
.foot-brand .brand img{height:42px}
.nav-pill{display:flex;align-items:center;gap:4px;background:#fff;border-radius:999px;padding:7px 7px 7px 8px;box-shadow:0 14px 40px -18px rgba(0,0,0,.45);transition:box-shadow .3s,background .3s}
.site-nav.scrolled .nav-pill{box-shadow:none;background:transparent}
.navmid{display:flex;align-items:center;gap:2px}
.navmid a{font-size:14.5px;font-weight:500;color:var(--navy);padding:9px 15px;border-radius:999px;transition:.15s}
.navmid a:hover{background:var(--mist)}
.site-nav.scrolled .navmid a:hover{background:rgba(11,31,58,.06)}
.hamb{display:none;width:44px;height:44px;border-radius:999px;background:var(--navy);color:#fff;border:0;cursor:pointer;align-items:center;justify-content:center}
.hamb svg{width:22px;height:22px}
/* Constrain hero CONTENT to the same width + gutter as .wrap so it lines up with
every section below. The hero PHOTO stays full-bleed (it's on .hero, not here). */
/* Two-column hero: copy left, quote form right, vertically aligned with each other.
(Aquora pinned a small STAT card bottom-right; a tall quote form there left the
headline and the form diagonally opposed and disconnected.) */
.hero-inner{flex:1;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:clamp(28px,4.5vw,64px);width:100%;max-width:var(--maxw);margin:0 auto;padding:clamp(96px,11vw,130px) var(--gutter) clamp(44px,5vw,70px)}
.hero-copy{max-width:660px}
.hero-copy .hero-rev{margin-top:30px}
.hero-inner .qcard{justify-self:end;width:100%;max-width:450px}
.hero-body{flex:1;display:flex;flex-direction:column;justify-content:center;width:100%;max-width:var(--maxw);margin:0 auto;padding:clamp(20px,4vw,54px) var(--gutter)}
.hero h1{font-size:clamp(2.6rem,6vw,5.2rem);font-weight:700;letter-spacing:-.03em;max-width:15ch}
.hero-sub{font-size:clamp(16px,1.4vw,18px);color:rgba(255,255,255,.86);margin:22px 0 30px;max-width:44ch;line-height:1.6}
.hero-cta-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.hero-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;flex-wrap:wrap;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter) clamp(26px,4vw,50px)}
.hero-rev .rt{font-size:14px;font-weight:600;margin-top:6px}
/* glass quote card */
.qcard{width:min(420px,100%);background:rgba(255,255,255,.1);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.28);border-radius:24px;padding:22px}
.qcard h2,.qcard h3{font-size:19px;font-weight:700}
.qcard .qsub{font-size:12.5px;color:rgba(255,255,255,.82);margin:5px 0 14px}
.qrow{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.field{margin-bottom:9px}
.field input,.field select{width:100%;font-family:var(--sans);font-size:13.5px;padding:11px 13px;border:1px solid rgba(255,255,255,.3);border-radius:12px;background:rgba(255,255,255,.92);color:var(--navy)}
.field input::placeholder{color:#9aa2b3}
.field input:focus,.field select:focus{outline:none;border-color:#fff;background:#fff}
.qcard .btn{width:100%;justify-content:center;margin-top:4px;padding-left:24px}
.qnext{font-size:11px;color:rgba(255,255,255,.75);margin-top:10px;text-align:center}
/* trust strip */
/* TRUST BAR: a pill that floats UP over the hero's bottom edge.
Two things this needs to get right:
1. The BAND behind it is the same light grey as the section below (--mist), not white.
Otherwise you get a white stripe between the hero and the grey section.
2. The overlap is done with a negative margin on the PILL, not on the band. Pulling the
band up would drag its grey background over the hero's bottom edge. */
.trust{position:relative;z-index:5;background:var(--mist);
display:flex;justify-content:center;
padding:0 26px clamp(34px,4vw,56px)}
.trust-pill{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;
margin-top:-42px;
gap:clamp(32px,3.6vw,64px);
background:#fff;border:1px solid var(--line);border-radius:999px;
padding:20px clamp(36px,3.6vw,56px);
box-shadow:0 30px 60px -30px rgba(11,31,58,.42)}
.trust-pill img{width:auto;height:40px;opacity:.95;transition:opacity .2s}
.trust-pill img:hover{opacity:1}
@media(max-width:640px){
.trust{padding-bottom:30px}
.trust-pill{margin-top:-30px;gap:22px;padding:14px 22px;border-radius:30px}
.trust-pill img{height:26px}
}
.tbadge{display:inline-flex;align-items:center;gap:10px;background:var(--mist);border:1px solid var(--line);border-radius:14px;padding:13px 20px;font-weight:700;font-size:14px;color:var(--navy)}
.tbadge svg{width:20px;height:20px;color:#0a8a3e}
.tbadge.slot{min-height:0;padding:13px 18px;flex-direction:row;gap:9px}
section{padding:clamp(64px,8vw,116px) 0}
.sec-eyebrow{display:block;margin-bottom:16px}
.h2{font-size:clamp(2rem,4.2vw,3.3rem);font-weight:700;letter-spacing:-.03em}
/* A heading that sits in a column, not centred across the full page, steps down one size.
Two sizes on purpose beats six by accident. */
.h2.h2-col{font-size:clamp(1.75rem,3vw,2.5rem)}
.lede{color:var(--muted);font-size:17px;line-height:1.6;margin-top:16px;max-width:52ch}
/* ABOUT split + stats */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center}
.about-photo{border-radius:var(--r);overflow:hidden;min-height:420px;position:relative}
.about-photo img{width:100%;height:100%;object-fit:cover}
.statband{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:clamp(48px,6vw,80px);padding-top:clamp(40px,5vw,60px);border-top:1px solid var(--line)}
.statband .n{font-size:clamp(2.4rem,4.6vw,3.4rem);font-weight:700;letter-spacing:-.04em;color:var(--navy)}
.statband .n em{font-style:normal;color:var(--red)}
.statband .l{font-size:14.5px;color:var(--muted);margin-top:4px}
/* WHY split with feature cards + portrait */
.why-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,5vw,64px);align-items:center}
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px}
.feat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 24px}
.feat .fi{width:44px;height:44px;border-radius:12px;background:var(--red-wash);display:grid;place-items:center;margin-bottom:16px}
.feat .fi svg{width:23px;height:23px;color:var(--red)}
.feat h3,.feat h4{font-size:1.15rem;font-weight:700;margin-bottom:7px}
.feat p{font-size:14px;color:var(--muted);line-height:1.55}
.sat{background:var(--red-tint);border:1px solid var(--red-wash);border-radius:var(--r);padding:26px 24px;margin-top:16px;display:flex;flex-direction:column;gap:12px}
.sat h3,.sat h4{font-size:1.1rem;font-weight:700}.sat p{font-size:13.5px;color:var(--muted)}
.why-photo{border-radius:var(--r);overflow:hidden;min-height:480px;position:relative}
.why-photo img{width:100%;height:100%;object-fit:cover}
/* HOW IT WORKS (dark timeline) */
/* full-bleed navy band: no rounded corners, no side margin, so it spans edge to edge */
.how{background:var(--navy);color:#fff}
.how .h2{color:#fff}.how .lede{color:rgba(255,255,255,.68)}
.how-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,5vw,70px);align-items:start}
.timeline{position:relative;padding-left:34px}
.timeline::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;background:rgba(255,255,255,.16)}
.tstep{position:relative;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:24px 26px;margin-bottom:16px}
.tstep::before{content:"";position:absolute;left:-30px;top:28px;width:12px;height:12px;border-radius:999px;background:var(--red);box-shadow:0 0 0 4px rgba(218,40,40,.2)}
.tstep .ti{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.1);display:grid;place-items:center;margin-bottom:14px}
.tstep .ti svg{width:23px;height:23px;color:#fff}
.tstep h3,.tstep h4{font-size:1.2rem;font-weight:700;margin-bottom:7px}
.tstep p{font-size:14px;color:rgba(255,255,255,.72);line-height:1.55}
/* SERVICES */
.svc-head{text-align:center;max-width:640px;margin:0 auto}
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:48px}
.svc{position:relative;border-radius:var(--r);overflow:hidden;min-height:340px;display:flex;align-items:flex-end;color:#fff}
.svc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .6s ease}
.svc:hover img{transform:scale(1.05)}
.svc::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,25,50,.15) 0%,rgba(11,25,50,.35) 45%,rgba(9,18,36,.92) 100%)}
.svc-body{position:relative;z-index:2;padding:clamp(24px,3vw,34px);width:100%}
.svc .tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:var(--red);color:#fff;border-radius:999px;padding:5px 12px;margin-bottom:12px}
.svc h3{font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:700;margin-bottom:8px}
.svc p{font-size:14.5px;color:rgba(255,255,255,.85);margin-bottom:18px;max-width:42ch;line-height:1.5}
.svc .go{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600}
.svc .go .ic{width:34px;height:34px;border-radius:999px;background:#fff;color:var(--navy);display:grid;place-items:center}
.svc .go .ic svg{width:16px;height:16px}
/* TWO WAYS TO PAY (tiered cards) */
.pay{background:var(--mist)}
.pay-head{text-align:center;max-width:640px;margin:0 auto}
.pay-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;margin-top:48px;align-items:stretch}
.plan{border-radius:var(--r);padding:30px 28px;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line)}
.plan.tint{background:var(--red-tint);border-color:var(--red-wash)}
.plan.dark{background:var(--navy);color:#fff;border-color:transparent}
.plan .pt{display:flex;align-items:center;justify-content:space-between;gap:10px}
.plan .ptag{font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--red)}
.plan.dark .ptag{color:var(--gold)}
.plan .pop{font-size:11px;font-weight:700;background:#fff;color:var(--navy);border-radius:999px;padding:5px 12px}
.plan h3{font-size:1.5rem;font-weight:700;margin:12px 0 6px}
.plan .pd{font-size:14px;color:var(--muted);margin-bottom:20px;line-height:1.55}
.plan.dark .pd{color:rgba(255,255,255,.72)}
.plan .btn{width:100%;justify-content:center;margin:2px 0 22px;padding-left:24px}
.plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:14.5px}
.plan li{display:flex;align-items:flex-start;gap:10px}
.plan li svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--red)}
.plan.dark li svg{color:var(--gold)}
.plan .pnote{font-size:12px;color:var(--muted);margin-top:16px}
.plan.dark .pnote{color:rgba(255,255,255,.55)}
/* REVIEWS + accreditation */
.rev-head{text-align:center;max-width:640px;margin:0 auto}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
/* FAQ */
.faq{background:var(--mist)}
.faq-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,64px);align-items:start}
.faq-list{display:flex;flex-direction:column;gap:12px}
details{background:#fff;border:1px solid var(--line);border-radius:18px;padding:4px 24px;transition:border-color .2s}
details[open]{border-color:var(--red)}
summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 0;font-size:16px;font-weight:600}
summary::-webkit-details-marker{display:none}
.faq-ic{width:32px;height:32px;border-radius:999px;background:var(--mist);display:grid;place-items:center;flex:none;transition:.25s}
.faq-ic svg{width:16px;height:16px}
details[open] .faq-ic{transform:rotate(45deg);background:var(--red);color:#fff}
details p{padding:0 0 22px;font-size:15px;color:var(--muted);line-height:1.65}
/* CTA + FOOTER (dark) */
.end{background:var(--ink);color:#fff}
/* closing CTA */
.cta{text-align:center;padding:clamp(76px,9vw,120px) 24px clamp(70px,8vw,104px);
display:flex;flex-direction:column;align-items:center}
.cta .sec-eyebrow{color:rgba(255,255,255,.6)}
.cta .h2{color:#fff;max-width:24ch;margin:14px auto 0}
.cta .h2 .accent{color:var(--red)}
.cta p{color:rgba(255,255,255,.7);max-width:64ch;margin:18px auto 32px;font-size:16.5px;line-height:1.7}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* footer.
The grid was 4 columns but the markup has FIVE children (brand + 4 link columns), so the
last one silently wrapped onto its own row. Track count must match the children. */
footer{padding:0 0 0;border-top:1px solid rgba(255,255,255,.1)}
.foot-top{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:clamp(28px,3vw,44px);align-items:start;
padding:clamp(56px,6vw,80px) 0 clamp(40px,4.5vw,56px);
border-bottom:1px solid rgba(255,255,255,.1)}
.foot-brand .brand{color:#fff;margin-bottom:18px}
.foot-brand p{color:rgba(255,255,255,.6);font-size:14px;max-width:300px;line-height:1.7}
.foot-badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.foot-badges span{font-size:11px;font-weight:600;color:rgba(255,255,255,.72);
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
border-radius:999px;padding:5px 10px}
.fcol h3,.fcol h3,.fcol h4{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
color:rgba(255,255,255,.45);margin-bottom:16px}
.fcol a,.fcol span{display:block;color:rgba(255,255,255,.8);font-size:14px;padding:5px 0;line-height:1.5}
.fcol a{transition:color .15s}
.fcol a:hover{color:#fff}
.fcol .fdim{color:rgba(255,255,255,.45);font-size:14px;padding:5px 0;line-height:1.5}
/* the finance line and the company line are both small print: same size, same colour, one block */
.foot-small{display:flex;flex-direction:column;gap:6px;max-width:74ch}
.foot-small span{font-size:12px;line-height:1.65;color:rgba(255,255,255,.5)}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
padding:12px 0 clamp(22px,2.4vw,30px);color:rgba(255,255,255,.45);font-size:12.5px}
.foot-legal{display:flex;gap:22px}
.foot-legal a{color:rgba(255,255,255,.6);font-size:12.5px;transition:color .15s}
.foot-legal a:hover{color:#fff}
.rise{opacity:0;transform:translateY(20px);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.08s}.d2{animation-delay:.18s}.d3{animation-delay:.28s}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rise{animation:none;opacity:1;transform:none}}
@media(max-width:940px){
.navmid{display:none}.hamb{display:flex}
.nav-cta{display:none} /* the CTA moves into the drawer on mobile, so the bar is just brand + burger */
.nav-pill{padding:0;background:none;box-shadow:none}
.site-nav.scrolled .nav-pill{background:none}
.hero-inner{grid-template-columns:1fr;gap:32px;padding-top:clamp(110px,18vw,130px)}
.hero-inner .qcard{justify-self:stretch;max-width:none}
.hero-foot{flex-direction:column;align-items:stretch}
.qcard{width:100%}
.about-grid,.why-grid,.how-grid,.faq-grid{grid-template-columns:1fr}
.about-photo{min-height:320px;order:-1}.why-photo{min-height:340px}
.statband{grid-template-columns:1fr 1fr;gap:24px}
.feat-grid,.svc-grid,.pay-grid,.rev-grid{grid-template-columns:1fr}
.foot-top{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}
.foot-bottom{justify-content:center;text-align:center}
.foot-small{align-items:center}
}
/* ===== inner-page header (compact navy hero, nav sits over it) ===== */
/* INNER-PAGE HERO (option C): dark, centred, orbs, NO photo.
Deliberately image-free. A hero photo is the most exposed image on a page and there is very
little real Arktek photography yet; stock there would undo the honesty the rest of the site
is built on. Imagery lands further down the page, where it earns its place. */
.page-hero{position:relative;overflow:hidden;margin:12px 12px 0;border-radius:34px;color:#fff;
background:radial-gradient(1000px 520px at 82% -20%,#173157,var(--navy) 62%);
padding:clamp(112px,13vw,148px) 0 clamp(80px,9vw,112px);text-align:center}
.page-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:
radial-gradient(700px 440px at 12% 18%, rgba(255,255,255,.10), transparent 62%),
radial-gradient(760px 480px at 88% 82%, rgba(255,255,255,.08), transparent 64%),
radial-gradient(520px 380px at 62% 6%, rgba(255,255,255,.06), transparent 60%)}
.page-hero .wrap{position:relative;z-index:1;max-width:920px}
.page-hero .slash{color:rgba(255,255,255,.72)}
.page-hero h1{font-size:clamp(2.2rem,4.8vw,3.7rem);font-weight:700;letter-spacing:-.03em;margin:14px auto 0}
.page-hero h1 .accent{color:var(--red)}
.page-hero .psub{color:rgba(255,255,255,.84);font-size:17.5px;line-height:1.65;margin:18px auto 0;max-width:62ch}
.page-hero .pcta{margin-top:32px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.page-hero .pcta{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}
.page-wm{position:absolute;right:-2vw;bottom:-4vw;z-index:0;font-size:clamp(8rem,22vw,22rem);font-weight:800;letter-spacing:-.06em;line-height:.8;color:rgba(255,255,255,.045);pointer-events:none;user-select:none}
/* breadcrumb-ish approach band reuse: .approach uses .about-grid */
/* ===== inner-page distinct sections ===== */
.statement{font-size:clamp(1.55rem,3.1vw,2.5rem);font-weight:600;line-height:1.3;letter-spacing:-.02em;max-width:22ch}
.statement .u{color:var(--red)}
.story-cols{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:32px}
.story-cols p{color:var(--muted);font-size:15.5px;line-height:1.7}
/* whole-house heat-loss grid */
.hl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:42px}
.hl-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;transition:border-color .2s,transform .2s}
.hl-card:hover{border-color:var(--red);transform:translateY(-3px)}
.hl-card .pct{font-size:clamp(2rem,3.6vw,2.7rem);font-weight:800;color:var(--red);letter-spacing:-.03em;line-height:1}
.hl-card h3,.hl-card h4{font-size:1.1rem;font-weight:700;margin:10px 0 6px}
.hl-card p{font-size:13.5px;color:var(--muted);line-height:1.5}
/* credentials strip */
.creds{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px}
.cred{background:var(--mist);border:1px solid var(--line);border-radius:18px;padding:22px}
.cred .ct{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cred .cv{font-size:1.05rem;font-weight:700;margin-top:6px;color:var(--navy)}
/* areas chips */
.areas-band{background:var(--navy);color:#fff;border-radius:34px;margin:0 12px}
.areas-band .h2{color:#fff}.areas-band .lede{color:rgba(255,255,255,.7)}
.area-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.area-chips span{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:10px 18px;font-size:14px;font-weight:500}
@media(max-width:900px){.story-cols,.hl-grid,.creds{grid-template-columns:1fr}}
/* section tone rhythm: alternate fresh-white with subtle mist so sections separate */
.tint{background:var(--mist)}
/* ===== centered section header (site-wide standard) =====
Every section intro (eyebrow + h2 + lede) is centered. Split "header in a column
next to a photo" layouts were converted to: centered header on top, content below. */
/* Centred section headers used to cap at 820px, which forced every headline and tagline into
a narrow column of short lines. The container is what constrains them, so widening .lede
alone does nothing: .sec-center has to go too, and .lede must drop its own 52ch cap. */
.sec-center{text-align:center;max-width:1080px;margin:0 auto clamp(38px,5vw,54px)}
.sec-center .lede{max-width:none}
.sec-center .h2{margin-left:auto;margin-right:auto}
.sec-center .lede{margin-left:auto;margin-right:auto}
.sec-center .sec-eyebrow{display:block}
/* full-width photo banner (replaces the old side-by-side photo column) */
.photo-banner{border-radius:var(--r);overflow:hidden;position:relative;min-height:clamp(260px,32vw,420px)}
.photo-banner img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
/* 4-up feature row now that it spans the full width */
.feat-grid.four{grid-template-columns:repeat(4,1fr)}
.feat-grid.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:940px){.feat-grid.three{grid-template-columns:1fr}}
.sat.center{max-width:820px;margin-left:auto;margin-right:auto;text-align:center;align-items:center}
.timeline.narrow{max-width:860px;margin:0 auto}
.faq-list.narrow{max-width:860px;margin:0 auto}
@media(max-width:940px){.feat-grid.four{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.feat-grid.four{grid-template-columns:1fr}}
/* ===== nav active state ===== */
.navmid a.on{background:var(--red-wash);color:var(--red)}
.site-nav.scrolled .navmid a.on{background:var(--red-wash);color:var(--red)}
/* ===== get-a-quote page ===== */
.quote-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:start}
.quote-form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(26px,3vw,38px);box-shadow:0 30px 70px -50px rgba(11,31,58,.5)}
.quote-form-card.solo{max-width:760px;margin-left:auto;margin-right:auto}
label.field{display:block}
.quote-form-card .field > span,.quote-form-card .field label{display:block;font-size:12.5px;font-weight:700;color:var(--navy);margin-bottom:6px}
.quote-form-card .field > span .opt-tag{display:inline-block;margin-bottom:0}
.quote-form-card .field input,.quote-form-card .field select,.quote-form-card .field textarea{width:100%;font-family:var(--sans);font-size:14.5px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--mist);color:var(--navy)}
.quote-form-card .field textarea{resize:vertical}
.quote-form-card .field input:focus,.quote-form-card .field select:focus,.quote-form-card .field textarea:focus{outline:none;border-color:var(--red);background:#fff}
.quote-side .tstep.light{background:var(--mist);border:1px solid var(--line);color:var(--navy)}
.quote-side .tstep.light h4{color:var(--navy)}
.quote-side .tstep.light p{color:var(--muted)}
.quote-side .timeline::before{background:var(--line)}
.quote-side .tstep::before{background:var(--red)}
/* ===== savings calculator ===== */
.calc-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,40px);align-items:stretch}
.calc-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(26px,3vw,38px)}
.calc-card .field{margin-bottom:18px}
.calc-card .field label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;font-weight:700;color:var(--navy);margin-bottom:8px}
.calc-card .field select{width:100%;font-family:var(--sans);font-size:14.5px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--mist);color:var(--navy)}
.calc-card input[type=range]{width:100%;accent-color:var(--red)}
.calc-val{font-weight:800;color:var(--red)}
.calc-result{background:var(--navy);color:#fff;border-radius:var(--r);padding:clamp(26px,3vw,40px);display:flex;flex-direction:column}
.calc-figs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.calc-fig{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:20px}
.cf-n{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:800;letter-spacing:-.03em;color:var(--gold)}
.cf-l{font-size:12.5px;color:rgba(255,255,255,.7);margin-top:6px;line-height:1.4}
.calc-note{font-size:14px;color:rgba(255,255,255,.8);margin-top:20px}
.calc-disclaim{font-size:11.5px;color:rgba(255,255,255,.55);margin-top:auto;padding-top:22px;line-height:1.6}
.calc-disclaim .flag{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#ffd7d7}
/* ===== legal pages ===== */
.legal-body{max-width:820px;margin:0 auto}
.legal-body h2{font-size:1.35rem;font-weight:700;margin:34px 0 12px}
.legal-body p,.legal-body li{color:var(--muted);font-size:15.5px;line-height:1.75}
.legal-body p+p{margin-top:12px}
.legal-body ul{margin:12px 0;padding-left:22px}
.legal-body li{margin-bottom:8px}
.legal-body a{color:var(--red);font-weight:600}
.legal-updated{display:inline-block;font-size:12.5px;color:var(--muted);background:var(--mist);border:1px solid var(--line);border-radius:999px;padding:6px 14px;margin-bottom:10px}
@media(max-width:940px){
.quote-layout,.calc-layout{grid-template-columns:1fr}
.calc-figs{grid-template-columns:1fr}
}
/* hero eyebrow (dark hero: light text, red slash) */
.hero .hero-eyebrow{display:block;color:rgba(255,255,255,.8);margin-bottom:18px;font-weight:600;letter-spacing:.01em}
.hero h1{max-width:18ch}
.hero .hero-sub{max-width:54ch}
/* ===== hero legibility + emphasis =====
The photo is bright (sky + brick), so white text needs a real scrim, not just a
light gradient. A directional scrim + a soft shadow keeps the image visible while
making the copy read cleanly. */
.hero-shade{background:
linear-gradient(102deg, rgba(6,16,34,.90) 0%, rgba(6,16,34,.78) 30%, rgba(6,16,34,.42) 52%, rgba(6,16,34,.20) 70%, rgba(6,16,34,.42) 100%),
linear-gradient(180deg, rgba(6,16,34,.55) 0%, rgba(6,16,34,0) 26%, rgba(6,16,34,0) 68%, rgba(6,16,34,.45) 100%)}
.hero h1{font-size:clamp(3rem,7vw,6.2rem);line-height:1.02;text-shadow:0 2px 28px rgba(4,12,28,.42);max-width:16ch}
.hero h1 .accent{color:var(--red);text-shadow:0 2px 20px rgba(4,12,28,.5)}
/* section headings accent their key words too. .accent was hero-only, so an .h2 needs its own
rule or the span renders in the default navy and the highlight does nothing. */
.h2 .accent{color:var(--red)}
.how .h2 .accent,.trust-close h3 .accent{color:var(--red)}
/* "Your Home." gets its own line on desktop. Kept as display:block in a media query rather
than a hard
, so it reflows naturally on mobile instead of stranding two short lines. */
@media(min-width:901px){
#why .h2 .accent{display:block}
#story .h2 .accent{display:block}
/* .brk = "put this accent on its own line on desktop". Opt-in per headline, because the
default must stay inline (FAQ's "Question?" would look absurd on its own line). */
.page-hero h1 .accent.brk{display:block}
/* the closing CTA, on every page: "Starts Here." drops to its own line on desktop */
.cta .h2 .accent{display:block}
}
.hero .hero-sub{text-shadow:0 1px 16px rgba(4,12,28,.5);color:rgba(255,255,255,.94)}
.hero .hero-eyebrow{text-shadow:0 1px 12px rgba(4,12,28,.5)}
.hero .hero-rev .rt{text-shadow:0 1px 12px rgba(4,12,28,.5)}
/* ===== hero savings calculator (the hero box) ===== */
.hcalc h3{font-size:20px;font-weight:700}
.hc-field{margin-bottom:14px}
.hc-field label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.9);margin-bottom:8px}
.hc-val{font-weight:800;color:var(--gold)}
.hcalc input[type=range]{width:100%;accent-color:var(--red)}
.hcalc select{width:100%;font-family:var(--sans);font-size:14px;padding:11px 13px;border:1px solid rgba(255,255,255,.3);border-radius:12px;background:rgba(255,255,255,.92);color:var(--navy)}
.hc-check{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.9);cursor:pointer;margin-bottom:16px}
.hc-check input{width:16px;height:16px;accent-color:var(--red)}
.hc-out{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.hc-fig{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:14px}
.hc-n{font-size:1.5rem;font-weight:800;letter-spacing:-.03em;color:var(--gold);line-height:1}
.hc-l{font-size:11px;color:rgba(255,255,255,.72);margin-top:5px}
.hcalc .btn{width:100%;justify-content:center;padding-left:24px}
.hc-back{background:none;border:0;color:rgba(255,255,255,.75);font-family:var(--sans);font-size:12.5px;font-weight:600;cursor:pointer;padding:0;margin-bottom:12px}
.hc-back:hover{color:#fff}
/* ===== OPTION B: frosted panel behind BOTH the copy and the calculator =====
Add class "frosted" to .hero-inner to try it. */
.hero-inner.frosted{align-items:stretch}
.hero-inner.frosted .hero-copy{background:rgba(8,20,40,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.14);border-radius:28px;padding:clamp(28px,3vw,44px);max-width:none;align-self:center}
.hero-inner.frosted .qcard{background:rgba(8,20,40,.6);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-color:rgba(255,255,255,.18);align-self:center}
/* with a frosted panel the heavy scrim is no longer needed, so the photo shows more */
.hero.frosted-hero .hero-shade{background:linear-gradient(180deg,rgba(6,16,34,.45) 0%,rgba(6,16,34,.15) 30%,rgba(6,16,34,.15) 70%,rgba(6,16,34,.4) 100%)}
.hero.frosted-hero .hero-copy h1,.hero.frosted-hero .hero-sub{text-shadow:none}
/* ===== ONE-BOX HERO (default) =====
Copy + calculator inside a SINGLE frosted panel: two columns on desktop, stacked on
mobile. One box everywhere, so the mobile and desktop story is the same. */
.hero-inner{display:block} /* override the old 2-col grid */
.hero-panel{background:rgba(8,20,40,.58);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
border:1px solid rgba(255,255,255,.16);border-radius:30px;
padding:clamp(24px,2.6vw,42px);
display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,3vw,48px);align-items:center;
box-shadow:0 40px 90px -50px rgba(0,0,0,.7)}
.hero-panel .hero-copy{max-width:none}
.hero-panel .hcalc{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
backdrop-filter:none;-webkit-backdrop-filter:none;width:100%;max-width:none;border-radius:22px}
/* photo now shows through: the heavy scrim is no longer doing the legibility work */
.hero .hero-shade{background:linear-gradient(180deg,rgba(6,16,34,.5) 0%,rgba(6,16,34,.18) 28%,rgba(6,16,34,.18) 70%,rgba(6,16,34,.45) 100%)}
.hero-panel h1,.hero-panel .hero-sub,.hero-panel .hero-eyebrow,.hero-panel .rt{text-shadow:none}
.hero-panel h1{font-size:clamp(2.4rem,4.4vw,4rem);max-width:14ch}
.hc-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hc-msg{font-size:12px;line-height:1.55;color:rgba(255,255,255,.82);margin:0 0 14px;
background:rgba(255,255,255,.07);border-left:2px solid var(--red);border-radius:8px;padding:9px 12px}
@media(max-width:1000px){
.hero-panel{grid-template-columns:1fr;gap:26px}
.hero-panel h1{max-width:none}
.hc-row{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
.hero-panel{padding:20px;border-radius:24px}
.hc-row{grid-template-columns:1fr}
}
/* interested-in chips (capture step) */
.hc-int{margin:4px 0 14px}
.hc-int-lab{display:block;font-size:12px;font-weight:600;color:rgba(255,255,255,.85);margin-bottom:8px}
.hc-int-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hc-chip{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:9px 13px;font-size:13px;font-weight:600;color:#fff;cursor:pointer;transition:.15s}
.hc-chip:hover{background:rgba(255,255,255,.14)}
.hc-chip input{width:15px;height:15px;accent-color:var(--red);margin:0}
.hc-chip:has(input:checked){background:rgba(218,40,40,.24);border-color:rgba(255,120,120,.5)}
.hc-hint{font-weight:500;color:rgba(255,255,255,.6);font-size:11.5px}
/* ===== hero scale: taller hero, headline back to full size =====
The one-box panel had shrunk the h1 to 4rem. Restore the impact. */
.hero{min-height:clamp(760px,98vh,1080px)}
.hero-panel{grid-template-columns:1.15fr .85fr;padding:clamp(28px,3vw,52px)}
.hero-panel h1{font-size:clamp(2.8rem,5.6vw,5.4rem);max-width:12ch;line-height:1.01}
.hero-panel .hero-sub{font-size:clamp(16px,1.25vw,18.5px);max-width:46ch;margin:20px 0 28px}
.hero-panel .hero-eyebrow{margin-bottom:20px}
@media(max-width:1000px){
.hero{min-height:auto}
.hero-panel h1{font-size:clamp(2.5rem,7vw,3.6rem);max-width:none}
}
/* ===== "Starts Here." on its own line (desktop) ===== */
.hero-panel h1 .accent{display:block}
.hero-panel h1{font-size:clamp(2.2rem,4.5vw,4.5rem);max-width:none}
/* ===== MOBILE HERO: tighten it right down =====
Was an endless scroll with a crushed nav and wrapping buttons. */
@media(max-width:760px){
/* nav: logo needs room, so the pill collapses to just the burger */
.site-nav{padding:12px 14px}
.brand img{height:30px}
.nav-pill{background:transparent;box-shadow:none;padding:0}
.nav-pill .btn-dark{display:none} /* CTA already lives in the hero */
.hamb{display:flex;width:42px;height:42px}
.hero{margin:8px;border-radius:24px}
.hero-panel{padding:22px 18px;gap:20px;border-radius:22px}
.hero-panel h1{font-size:clamp(2rem,8.4vw,2.7rem);line-height:1.06}
.hero-panel .hero-eyebrow{margin-bottom:12px;font-size:12px}
.hero-panel .hero-sub{font-size:15px;margin:14px 0 20px;max-width:none}
/* buttons: equal width, side by side, no ragged wrap */
.hero-cta-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hero-cta-row .btn{width:100%;justify-content:center;padding:12px 14px;font-size:14px;gap:8px}
.hero-cta-row .btn .ic{width:28px;height:28px}
.hero-cta-row .btn-plain{padding:12px 14px}
.hero-copy .hero-rev{margin-top:18px}
.hero-rev .rt{font-size:12.5px;line-height:1.4}
/* calculator: compact */
.hcalc{padding:18px}
.hcalc h3{font-size:18px}
.hcalc .qsub{margin-bottom:12px}
.hc-field{margin-bottom:12px}
.hc-row{grid-template-columns:1fr;gap:0}
.hc-out{gap:8px;margin-bottom:12px}
.hc-fig{padding:11px}
.hc-n{font-size:1.25rem}
.hc-l{font-size:10.5px}
.hc-msg{font-size:11.5px;padding:8px 10px}
.hc-int-grid{grid-template-columns:1fr 1fr}
}
/* ===== calculator: FIXED height, no jumping =====
Ticking "add a heat pump" reveals two extra fields (+144px) and the capture step is
shorter (-100px). Reserve the tallest state and pin the CTA to the bottom, so options
fill the space rather than resizing the card. */
.hero-panel .hcalc{display:flex;flex-direction:column;min-height:724px}
.hcalc #hcStep1,.hcalc #hcStep2{display:flex;flex-direction:column;flex:1}
.hcalc #hcStep1 > .btn,.hcalc #hcStep2 > .btn{margin-top:auto}
.hc-msg{min-height:52px} /* the note swaps length; hold its space too */
@media(max-width:760px){
.hero-panel .hcalc{min-height:0} /* on mobile the page reflows anyway */
.hc-msg{min-height:0}
}
/* GUARD: any `display` rule beats the `hidden` attribute (which is only display:none from
the UA sheet). Without this, `.hcalc #hcStep2{display:flex}` silently un-hid the capture
form and rendered it under the calculator. Keep this last. */
[hidden]{display:none !important}
/* ============================================================================
HOMEPAGE v2 — hero (no form), interactive house, projects rail, 6-up why, process
========================================================================== */
/* Hero now carries copy only, so the panel is a single centred column, not a 2-col grid. */
.hero-panel.solo{grid-template-columns:1fr;max-width:900px;text-align:left}
.hero-panel.solo .hero-copy{max-width:760px}
/* ---------- 3. interactive house ---------- */
.ex-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,3vw,44px);align-items:stretch;margin-top:38px}
/* The house column stretches to match the chart card's height. The SVG keeps its aspect ratio
and centres inside, and the hotspots live in .ex-house-in (which tracks the SVG box), so the
pins never drift when the column is taller than the drawing. */
.ex-house{position:relative;align-self:stretch;display:flex;justify-content:center;align-items:center;
/* The cutaway PNG is background-removed (transparent), so no card here: it floats on the section
tint. The drop-shadow below follows the house SILHOUETTE, not a box, for a 3D lift. */
background:transparent}
.ex-house-in{position:relative;width:100%}
.ex-house svg{display:block;width:100%;height:auto}
.ex-photo{display:block;width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(11,25,50,.42)) drop-shadow(0 8px 14px rgba(11,25,50,.18))}
/* Every zone dims by default; the selected one lifts. This is what makes the house read as
interactive rather than decorative. */
.hz{cursor:pointer;opacity:.42;transition:opacity .3s ease,filter .3s ease}
.hz.on{opacity:1;filter:drop-shadow(0 6px 14px rgba(11,25,50,.28))}
.hz-rays{opacity:0;transition:opacity .35s ease}
.hz.on .hz-rays{opacity:1}
.hz.on .hz-fan{transform-origin:719px 452px;animation:hzspin 2.4s linear infinite}
@keyframes hzspin{to{transform:rotate(360deg)}}
.hs{position:absolute;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;
border:2px solid #fff;background:var(--navy);color:#fff;cursor:pointer;
display:grid;place-items:center;font-size:16px;line-height:1;
box-shadow:0 8px 20px -6px rgba(11,25,50,.55);transition:transform .22s ease,background .22s ease}
.hs svg{width:19px;height:19px}
.hs:hover{transform:translate(-50%,-50%) scale(1.12)}
.hs.on{background:var(--red);transform:translate(-50%,-50%) scale(1.14)}
/* pulse only while nothing is hovered, to draw the eye without being a nightclub */
.hs::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--red);opacity:0}
/* all pins pulse gently at rest so the photo reads as interactive; the active one pulses harder */
.hs::after{animation:hspulse 2.6s ease-out infinite}
.hs.on::after{animation:hspulse 1.5s ease-out infinite;border-width:2.5px}
@keyframes hspulse{0%{opacity:.5;transform:scale(.8)}100%{opacity:0;transform:scale(1.5)}}
/* active pin casts a soft spotlight over its element on the photo */
.hs.on{box-shadow:0 8px 20px -6px rgba(11,25,50,.55),0 0 0 8px rgba(218,40,40,.18),0 0 46px 14px rgba(218,40,40,.28)}
@media (prefers-reduced-motion:reduce){.hs::after{animation:none}}
.ex-panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,2vw,30px);box-shadow:0 24px 60px -44px rgba(11,25,50,.5)}
.ex-tag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--red);background:var(--red-tint);border:1px solid var(--red-wash);padding:5px 11px;border-radius:999px}
.ex-panel h3{font-size:clamp(1.3rem,1.6vw,1.6rem);font-weight:700;margin:14px 0 8px;color:var(--navy)}
.ex-desc{font-size:14.5px;color:var(--muted);line-height:1.6;min-height:3.2em}
.ex-save{margin:20px 0 18px}
.ex-save-lab{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:8px}
.ex-bar{height:10px;border-radius:999px;background:var(--mist);border:1px solid var(--line);overflow:hidden}
.ex-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--red),#ff6a5e);transition:width .6s cubic-bezier(.4,0,.2,1)}
.ex-fig{margin-top:10px;font-size:1.35rem;font-weight:800;color:var(--navy)}
.ex-fig span{color:var(--muted);font-weight:600;font-size:.7em;vertical-align:super}
.ex-list{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:9px}
.ex-list li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--navy);font-weight:500}
.ex-list svg{width:16px;height:16px;flex:0 0 16px;margin-top:2px;color:#1c8f4f}
.ex-panel .btn{width:100%;justify-content:center}
.ex-total{margin-top:30px;background:var(--navy);color:#fff;border-radius:var(--r);padding:clamp(24px,2.4vw,34px);
display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.ex-total .sec-eyebrow{color:rgba(255,255,255,.7)}
.ex-total h3{font-size:1rem;font-weight:600;color:rgba(255,255,255,.86);margin:8px 0 4px}
.ex-count{font-size:clamp(2.4rem,4.6vw,3.6rem);font-weight:800;letter-spacing:-.02em;line-height:1;color:#fff}
.ex-disc{margin-top:14px;font-size:11.5px;line-height:1.6;color:var(--muted);max-width:70ch}
/* ---------- 3. interactive home: chart (left) + house (right) ---------- */
.ex-chart{background:#fff;border:1px solid var(--line);border-radius:var(--r);
padding:clamp(24px,2.4vw,34px);box-shadow:0 26px 60px -46px rgba(11,31,58,.5);
display:flex;flex-direction:column}
/* the card flips in place between the chart and the booking form */
.ex-face{display:flex;flex-direction:column;flex:1;animation:exFade .28s ease}
@keyframes exFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ex-unflip{align-self:flex-start;background:none;border:0;padding:0;margin-bottom:14px;cursor:pointer;
font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--muted)}
.ex-unflip:hover{color:var(--red)}
.ex-formsub{font-size:13.5px;color:var(--muted);line-height:1.6;margin:10px 0 20px}
.ex-form{display:flex;flex-direction:column}
.ex-form .field label{display:block;font-size:12px;font-weight:700;color:var(--navy);margin-bottom:5px}
.ex-form .field input{width:100%;min-width:0;font-family:var(--sans);font-size:13.5px;padding:11px 13px;
border:1px solid var(--line);border-radius:11px;background:var(--mist);color:var(--navy)}
.ex-form .field input:focus{outline:none;border-color:var(--red);background:#fff}
.ex-form .hc-int{margin:6px 0 4px}
.ex-form .hc-int-lab{display:block;font-size:12px;font-weight:700;color:var(--navy);margin-bottom:9px}
.ex-form .hc-int-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ex-form .hc-chip{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--navy);
border:1px solid var(--line);background:var(--mist);border-radius:11px;padding:9px 11px;cursor:pointer}
.ex-form .hc-chip:has(input:checked){border-color:var(--red);background:var(--red-tint);color:var(--red)}
.ex-form .hc-chip input{accent-color:var(--red)}
.ex-gdpr{font-size:11.5px;line-height:1.55;color:var(--muted);margin:16px 0 12px}
.ex-gdpr a{color:var(--red);text-decoration:underline;text-underline-offset:2px}
.ex-form .btn{width:100%;justify-content:center;padding-left:24px}
.ex-flagline{margin-top:12px;text-align:center}
.ex-chart h3{font-size:clamp(1.3rem,1.7vw,1.6rem);font-weight:700;color:var(--navy);margin:10px 0 22px}
.bars{display:flex;flex-direction:column;gap:14px}
.bar{display:block;width:100%;text-align:left;background:none;border:0;padding:0;cursor:pointer}
.b-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:7px}
.b-lab{font-size:13.5px;font-weight:700;color:var(--navy)}
.b-val{font-size:13px;font-weight:800;color:var(--muted);transition:color .2s ease}
.b-track{display:block;height:12px;border-radius:999px;background:var(--mist);border:1px solid var(--line);overflow:hidden}
.b-track i{display:block;height:100%;width:0;border-radius:999px;
background:linear-gradient(90deg,#9fb0c6,#c3ceda);
transition:width .9s cubic-bezier(.4,0,.2,1),background .25s ease}
/* bars only grow once the chart scrolls into view */
.ex-chart.go .b-track i{width:var(--w)}
.bar:hover .b-val,.bar.on .b-val{color:var(--red)}
.bar.on .b-track i{background:linear-gradient(90deg,var(--red),#ff6a5e)}
.bar:hover .b-track i{background:linear-gradient(90deg,#7c8ea6,#a9b6c6)}
.bar.on:hover .b-track i{background:linear-gradient(90deg,var(--red),#ff6a5e)}
.ex-say{margin-top:24px;padding-top:22px;border-top:1px solid var(--line);min-height:132px}
.ex-say h3,.ex-say h4{font-size:1.05rem;font-weight:700;color:var(--navy);margin-bottom:8px}
.ex-say p{font-size:13.8px;line-height:1.65;color:var(--muted)}
.ex-foot{margin-top:auto;padding-top:22px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ex-combo{display:flex;flex-direction:column;gap:2px}
.ex-combo .l{font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.ex-combo .v{font-size:1.05rem;font-weight:800;color:var(--navy)}
@media(max-width:520px){
.ex-foot{flex-direction:column;align-items:stretch}
.ex-foot .btn{width:100%;justify-content:center}
}
.ex-disc{margin-top:18px;font-size:11.5px;line-height:1.6;color:var(--muted);max-width:78ch}
/* ======================================================================
INSULATION PAGE
====================================================================== */
/* ---------- where heat escapes ----------
One cutaway, five hotspots. The SVG groups and the key buttons both carry data-zone, so the
same click handler serves both and they can never disagree about which zone is selected. */
.heat{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,3.6vw,56px);align-items:center;
margin-top:clamp(34px,4vw,50px)}
@media(max-width:960px){.heat{grid-template-columns:1fr}}
.heat-stage{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:10px}
.heat-svg{display:block;width:100%;height:auto}
.h-ground{fill:var(--line)}
.h-roof{fill:#26374f;stroke:var(--navy);stroke-width:2;stroke-linejoin:round}
.h-loftfill{fill:#e6ecf4;stroke:var(--navy);stroke-width:1.5}
.h-wall{fill:#dfe6ef;stroke:var(--navy);stroke-width:2}
.h-room{fill:#fbfcfe;stroke:var(--navy);stroke-width:2}
.h-win{fill:#cfe0f2;stroke:var(--navy);stroke-width:2}
.h-door{fill:#26374f;stroke:var(--navy);stroke-width:2}
.h-floor{fill:#dfe6ef;stroke:var(--navy);stroke-width:2}
.h-draught{fill:none;stroke:#9fb2c9;stroke-width:2.5;stroke-linecap:round;opacity:.5}
/* the escaping-heat arrows only show on the selected zone: five sets at once is noise */
.h-esc{fill:none;stroke:#ff6a3d;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
opacity:0;transition:opacity .3s}
.h-zone{cursor:pointer;outline:none}
.h-zone:focus-visible .h-wall,.h-zone:focus-visible .h-roof,
.h-zone:focus-visible .h-win,.h-zone:focus-visible .h-floor{stroke:var(--red);stroke-width:3}
.h-zone.is-on .h-esc{opacity:1}
.h-zone.is-on .h-wall,.h-zone.is-on .h-floor,.h-zone.is-on .h-loftfill{fill:#ffd9c9;stroke:var(--red)}
.h-zone.is-on .h-roof{fill:#7a4436;stroke:var(--red)}
.h-zone.is-on .h-win{fill:#ffc9b3;stroke:var(--red)}
.h-zone.is-on .h-door{fill:#7a4436;stroke:var(--red)}
.h-zone.is-on .h-draught{stroke:#ff6a3d;opacity:1}
.h-zone:hover .h-wall,.h-zone:hover .h-roof,.h-zone:hover .h-win,
.h-zone:hover .h-floor,.h-zone:hover .h-loftfill,.h-zone:hover .h-door{stroke:var(--red)}
.hz-panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);
padding:clamp(24px,2.6vw,32px)}
.hz-pct{display:inline-block;font-size:2.4rem;font-weight:800;color:var(--red);line-height:1;
letter-spacing:-.02em}
.hz-panel h3{font-size:1.15rem;font-weight:700;color:var(--navy);margin:12px 0 10px}
.hz-panel p{font-size:14px;line-height:1.75;color:var(--muted)}
.heat-keys{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.heat-key{cursor:pointer;font:inherit;font-size:12.5px;font-weight:600;color:var(--navy);
background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 13px;
transition:border-color .18s,background .18s,color .18s}
.heat-key b{color:var(--muted);font-weight:800;margin-left:4px}
.heat-key:hover{border-color:var(--red-wash)}
.heat-key.is-on{background:var(--red);border-color:var(--red);color:#fff}
.heat-key.is-on b{color:rgba(255,255,255,.75)}
.heat-note{margin-top:18px;font-size:12px;line-height:1.65;color:var(--muted)}
/* ---------- the five measures, as one slider ----------
All five slides stay in the DOM and the track translates. Same pattern as the recommender:
overflow:hidden on the stage does the hiding, so nothing has to be re-rendered. */
.islide{margin-top:clamp(34px,4vw,48px)}
.istabs{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:26px}
.istab{cursor:pointer;font:inherit;font-size:13.5px;font-weight:600;color:var(--navy);
background:#fff;border:1px solid var(--line);border-radius:999px;padding:11px 18px;
transition:background .18s,border-color .18s,color .18s}
.istab:hover{border-color:var(--red-wash);color:var(--red)}
.istab.is-on{background:var(--red);border-color:var(--red);color:#fff}
.istage{overflow:hidden;border-radius:var(--r)}
.itrack{display:flex;align-items:stretch;transition:transform .5s cubic-bezier(.22,.7,.2,1)}
.islide-item{flex:0 0 100%;min-width:0;display:grid;grid-template-columns:1.1fr .9fr;
gap:clamp(28px,3.6vw,60px);align-items:center;
background:#fff;border:1px solid var(--line);border-radius:var(--r);
padding:clamp(28px,3.2vw,44px)}
@media(max-width:900px){.islide-item{grid-template-columns:1fr;gap:26px}}
.islide-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px}
.idots{display:flex;gap:7px}
.idot{width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;
background:var(--line);transition:background .2s,transform .2s}
.idot:hover{background:var(--red-wash)}
.idot.is-on{background:var(--red);transform:scale(1.25)}
.iarrows{display:flex;gap:8px}
.islide-foot .btn{margin-left:auto}
@media(max-width:640px){.islide-foot .btn{margin-left:0;width:100%;justify-content:center}}
/* ---------- slide content: copy left, cross-section right ---------- */
.ins-n{display:block;font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--red);margin-bottom:12px}
.ins-copy h3{font-size:clamp(1.4rem,2.2vw,1.85rem);font-weight:700;color:var(--navy);margin-bottom:18px}
.ins-copy h3,.ins-copy h4{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
color:var(--muted);margin:18px 0 8px}
.ins-copy p{font-size:14.5px;line-height:1.78;color:var(--muted);max-width:60ch}
.ins-bens{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.ins-bens li{position:relative;padding-left:28px;font-size:14px;color:var(--navy);font-weight:500}
.ins-bens li::before{content:'';position:absolute;left:0;top:4px;width:17px;height:17px;border-radius:50%;
background:var(--red-tint);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23da2828' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
background-size:10px;background-repeat:no-repeat;background-position:center}
.ins-media{background:var(--mist);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.ins-art{display:block;width:100%;height:auto}
/* every shape in the cross-sections needs an explicit fill: an SVG with no fill is BLACK */
.ia-brick{fill:#dfe6ef;stroke:var(--navy);stroke-width:2}
.ia-fill{fill:#ffd9c9;stroke:var(--red);stroke-width:2}
.ia-skin{fill:#26374f;stroke:var(--navy);stroke-width:2}
.ia-hatch{fill:none;stroke:var(--red);stroke-width:1.6;opacity:.65}
.ia-arrow{fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ia-lab{fill:var(--muted);font-size:10px;font-weight:700;text-anchor:middle}
/* ---------- which type does my home need ---------- */
.which-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4.5vw,72px);align-items:center}
@media(max-width:900px){.which-in{grid-template-columns:1fr}}
.which-copy .lede{margin:16px 0 0;max-width:46ch}
.which-close{margin:20px 0 26px;font-size:15px;font-weight:700;color:var(--navy);max-width:40ch}
.which-list{list-style:none;margin:0;padding:0;background:#fff;border:1px solid var(--line);
border-radius:var(--r);overflow:hidden}
.which-list li{display:flex;flex-direction:column;gap:4px;padding:20px clamp(20px,2vw,26px);
border-bottom:1px solid var(--line)}
.which-list li:last-child{border-bottom:0}
.which-list b{font-size:14.5px;color:var(--navy)}
.which-list span{font-size:13.3px;line-height:1.65;color:var(--muted)}
/* ======================================================================
SOLAR PAGE
====================================================================== */
/* ---------- nav: services dropdown ----------
.dropwrap is a transparent padded bridge. Without it the pointer crosses a dead gap between
the link and the panel, the :hover drops, and the menu closes under the cursor. */
.navdrop{position:relative}
.navdrop > a{display:inline-flex;align-items:center;gap:5px}
.navchev{width:13px;height:13px;transition:transform .2s}
.navdrop:hover .navchev{transform:rotate(180deg)}
.dropwrap{position:absolute;top:100%;left:0;padding-top:12px;z-index:60;
opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility .18s}
.navdrop:hover .dropwrap,.navdrop:focus-within .dropwrap{opacity:1;visibility:visible;transform:none}
.dropmenu{display:flex;flex-direction:column;gap:2px;min-width:300px;padding:10px;
background:#fff;border:1px solid var(--line);border-radius:18px;
box-shadow:0 30px 60px -30px rgba(11,31,58,.45)}
.dropmenu a{display:flex;flex-direction:column;gap:2px;padding:11px 14px;border-radius:12px;
text-decoration:none;transition:background .15s}
.dropmenu a:hover{background:var(--mist)}
.dm-t{font-size:14.5px;font-weight:600;color:var(--navy)}
.dm-d{font-size:12.5px;color:var(--muted)}
.dm-all{flex-direction:row!important;align-items:center;gap:7px!important;margin-top:4px;
border-top:1px solid var(--line);border-radius:0 0 12px 12px;
font-size:13px;font-weight:700;color:var(--red)}
.dm-all svg{width:14px;height:14px}
.dm-all:hover{background:var(--red-tint)!important}
/* ---------- solar vs solar+battery comparison ---------- */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:clamp(38px,4vw,54px)}
@media(max-width:880px){.cmp{grid-template-columns:1fr}}
.cmp-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);
padding:clamp(24px,2.4vw,32px)}
.cmp-card.win{border-color:var(--red);box-shadow:0 30px 60px -40px rgba(218,40,40,.4)}
.cmp-tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.06em;
text-transform:uppercase;color:var(--red);background:var(--red-tint);
border-radius:999px;padding:6px 12px}
.cmp-tag.plain{color:var(--muted);background:var(--mist)}
.cmp-svg{display:block;width:100%;height:auto;margin:22px 0 6px}
.cmp-card > p{font-size:13.5px;line-height:1.7;color:var(--muted)}
.cbox{fill:#fff;stroke:var(--line);stroke-width:1.5}
.cicon{fill:none;stroke:var(--navy);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.clabel{fill:var(--muted);font-size:11px;font-weight:700;text-anchor:middle}
.cnode.home .cbox{stroke:var(--red);stroke-width:2}
.cnode.home .cicon{stroke:var(--red)}
.cw{fill:none;stroke:var(--line);stroke-width:2.5;stroke-linecap:round}
.cw.ret{stroke-dasharray:3 7;stroke:#bfe6d2}
.cdot{fill:var(--red)}
.cdot.exp{fill:#4aa3ff}
.cdot.store{fill:#2fa96b}
.cmp-ret{fill:#2fa96b;font-size:10.5px;font-weight:700;text-anchor:middle}
.bcard-grid.five{grid-template-columns:repeat(5,1fr)}
@media(max-width:1100px){.bcard-grid.five{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.bcard-grid.five{grid-template-columns:1fr}}
/* ---------- solar benefit cards ----------
NOT .ben: that class is already the homepage photo-card component. Same name, two components,
and whichever rule block came last silently won. */
.bcard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(38px,4vw,54px)}
@media(max-width:980px){.bcard-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.bcard-grid{grid-template-columns:1fr}}
.bcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);
padding:clamp(24px,2.4vw,32px);transition:transform .25s,box-shadow .25s,border-color .25s}
.bcard:hover{transform:translateY(-3px);border-color:var(--red-wash);
box-shadow:0 30px 56px -40px rgba(11,31,58,.45)}
.bcard-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;
background:var(--red-tint);color:var(--red);margin-bottom:18px}
.bcard-ic svg{width:24px;height:24px}
.bcard h3{font-size:1.05rem;font-weight:700;color:var(--navy);line-height:1.35;margin-bottom:10px}
.bcard p{font-size:14px;line-height:1.72;color:var(--muted)}
/* ---------- the energy-flow scene ----------
ONE svg, two moods. Day/evening differ only in CSS custom properties + which dot group runs,
so there is no second copy of the artwork to drift out of sync. Every colour transitions, which
is what makes the flip read as dusk falling rather than as a channel change. */
.flow{margin-top:clamp(34px,4vw,48px);
--sky-a:#8ec5f0; --sky-b:#dfeeff; --ground:#cfe3d2; --ground-ln:#a9cbb0;
--wall:#f4f6fa; --roof:#26374f; --stroke:#0b1f3a; --panel:#1d2b40; --panel-ln:#4a6a99;
--win:#cfe0f2; --door:#26374f; --pylon:#8ea3bd; --batt:#ffffff; --star:0; --glow:0;
--sun-o:1; --moon-o:0; --label:#5b6b80}
.flow[data-mode="night"]{
--sky-a:#081428; --sky-b:#16294a; --ground:#12203a; --ground-ln:#25375a;
--wall:#1e2f4b; --roof:#132340; --stroke:#0a1526; --panel:#0f1c33; --panel-ln:#33507d;
--win:#ffc46b; --door:#132340; --pylon:#3d5a86; --batt:#22355a; --star:1; --glow:1;
--sun-o:0; --moon-o:1; --label:#94a7c2}
/* Layout B: scene left, headline + controls + caption right. The caption changes right next to
the control that changed it, which is where the eye already is. */
.flow-split{display:grid;grid-template-columns:1.5fr .9fr;gap:clamp(28px,3.4vw,56px);
align-items:center;margin-top:clamp(30px,3.4vw,44px)}
@media(max-width:1040px){.flow-split{grid-template-columns:1fr;gap:32px}}
.flow-stage{min-width:0}
.flow-side .h2{margin:10px 0 14px}
.flow-side .lede{margin:0 0 26px;font-size:14.5px;max-width:none}
.flow-split .flow-cap{margin:0;text-align:left;max-width:none}
.flow-tabs{display:flex;width:max-content;gap:4px;padding:5px;margin:0 0 22px;border-radius:999px;
background:#fff;border:1px solid var(--line)}
.flow-tab{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;font:inherit;
font-size:13.5px;font-weight:700;color:var(--muted);background:none;border-radius:999px;
padding:10px 20px;transition:background .2s,color .2s}
.flow-tab svg{width:16px;height:16px}
.flow-tab:hover{color:var(--navy)}
.flow-tab.is-on{background:var(--red);color:#fff}
.flow-svg{display:block;width:100%;height:auto;max-width:1100px;margin:0 auto;
border-radius:24px;box-shadow:0 40px 90px -60px rgba(11,31,58,.6)}
.flow-svg *{transition:fill .7s ease,stroke .7s ease,opacity .7s ease}
.sky-a{stop-color:var(--sky-a)}
.sky-b{stop-color:var(--sky-b)}
.ground{fill:var(--ground)}
.ground-line{stroke:var(--ground-ln);stroke-width:2}
.stars circle{fill:#fff;opacity:var(--star)}
.sun{opacity:var(--sun-o)}
.moon{opacity:var(--moon-o)}
.sun-body{fill:#ffce4f}
.sun-rays{stroke:#ffce4f;stroke-width:5;stroke-linecap:round;fill:none}
.moon-body{fill:#e8eefc}
.house .wall{fill:var(--wall);stroke:var(--stroke);stroke-width:2}
.house .roofline{fill:var(--roof);stroke:var(--stroke);stroke-width:2;stroke-linejoin:round}
.house .panel{fill:var(--panel);stroke:var(--stroke);stroke-width:2;stroke-linejoin:round}
.house .panel-line{stroke:#5b7fb3;stroke-width:1.6;fill:none;opacity:.55}
.house .window{fill:var(--win);stroke:var(--stroke);stroke-width:2}
.house .door{fill:var(--door);stroke:var(--stroke);stroke-width:2}
.win-glow{opacity:var(--glow)}
.batt-body{fill:var(--batt);stroke:var(--stroke);stroke-width:2}
.batt-line{stroke:#7f92ad;stroke-width:2.4;stroke-linecap:round}
.pylon{fill:none;stroke:var(--pylon);stroke-width:3;stroke-linecap:round}
.fw{fill:none;stroke:#da2828;stroke-width:3;stroke-linecap:round;opacity:.32;stroke-dasharray:2 9}
.flow[data-mode="night"] .fw.day{opacity:.08}
.flow[data-mode="night"] .fdots.day{opacity:0}
.flow[data-mode="day"] .fdots.night{opacity:0}
.fdot{fill:var(--red)}
.fdot.sun{fill:#ffce4f}
.fdot.store{fill:#2fd18a}
.fdot.export{fill:#4aa3ff}
.fdot.import{fill:#c3d0e2}
.flabel{fill:var(--label);font-size:15px;font-weight:700;text-anchor:middle}
.sun-label{opacity:var(--sun-o)}
.moon-label{opacity:var(--moon-o)}
.flow-cap{max-width:70ch;margin:26px auto 0;text-align:center;font-size:14px;line-height:1.75;
color:var(--muted)}
.flow-cap strong{color:var(--navy)}
/* ---------- SEG banner ---------- */
/* Same light treatment as .page-hero: a base radial to lift one corner, then soft washes on a
::before. Discrete circles read as objects sitting ON the navy; these read as light IN it. */
.seg-band{position:relative;overflow:hidden;color:#fff;padding:clamp(52px,6vw,84px) 0;
background:radial-gradient(1000px 520px at 82% -20%,#173157,var(--navy) 62%)}
.seg-band::before{content:"";position:absolute;inset:0;pointer-events:none;background:
radial-gradient(700px 440px at 12% 18%, rgba(255,255,255,.10), transparent 62%),
radial-gradient(760px 480px at 88% 82%, rgba(255,255,255,.08), transparent 64%),
radial-gradient(520px 380px at 62% 6%, rgba(255,255,255,.06), transparent 60%)}
.seg-in{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto;
gap:clamp(32px,5vw,80px);align-items:center}
@media(max-width:900px){.seg-in{grid-template-columns:1fr;gap:36px}}
.seg-band .h2{color:#fff;margin-top:10px}
.seg-band .sec-eyebrow{color:rgba(255,255,255,.72)}
.seg-copy p{margin-top:16px;font-size:14.5px;line-height:1.78;color:rgba(255,255,255,.76);max-width:66ch}
.seg-mark{display:grid;place-items:center;padding:clamp(24px,2.6vw,34px) clamp(30px,3.2vw,44px);
border-radius:var(--r);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
backdrop-filter:blur(6px)}
.seg-mark img{display:block;width:clamp(170px,15vw,230px);height:auto}
/* ---------- is solar right for me ---------- */
.fit-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:clamp(38px,4vw,52px)}
@media(max-width:1040px){.fit-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.fit-grid{grid-template-columns:1fr}}
.fit-card{background:var(--mist);border:1px solid var(--line);border-radius:var(--r);
padding:clamp(22px,2.2vw,28px);transition:border-color .22s,background .22s}
.fit-card:hover{background:#fff;border-color:var(--red-wash)}
.fit-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;
background:#fff;border:1px solid var(--line);color:var(--red);margin-bottom:16px}
.fit-card:hover .fit-ic{border-color:var(--red-wash)}
.fit-ic svg{width:22px;height:22px}
.fit-card h3{font-size:1.05rem;font-weight:700;color:var(--navy);margin-bottom:9px}
.fit-card p{font-size:13.5px;line-height:1.7;color:var(--muted)}
/* ---------- pair with a battery ---------- */
/* Battery cross-sell band. Navy with the same soft radial washes as the heroes and the SEG band.
It sits between two white sections, so the contrast still does the work of a coloured band
without the red competing with every red CTA on the page. */
.pair-red{position:relative;overflow:hidden;color:#fff;padding:clamp(56px,6vw,88px) 0;
background:radial-gradient(1000px 520px at 18% -20%,#1b3a66,var(--navy) 64%)}
.pair-red::before{content:"";position:absolute;inset:0;pointer-events:none;background:
radial-gradient(680px 420px at 8% 18%, rgba(255,255,255,.12), transparent 62%),
radial-gradient(740px 470px at 90% 86%, rgba(255,255,255,.09), transparent 64%),
radial-gradient(520px 380px at 58% 4%, rgba(255,255,255,.06), transparent 60%)}
.pair-red .wrap{position:relative;z-index:1}
.pair-red .sec-eyebrow{color:rgba(255,255,255,.72)}
.pair-red .h2{color:#fff;margin-top:10px}
.pair-red .h2 .accent{color:var(--red)}
.pair-red .pair-copy p{color:rgba(255,255,255,.78);max-width:52ch}
.pair-red .btn-white{background:#fff;color:var(--navy)}
.pair-red .btn-white .ic{background:var(--red);color:#fff}
.pair-red .pair-media{border-color:rgba(255,255,255,.2)}
.pair{padding:clamp(56px,6vw,88px) 0}
.pair-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4.5vw,68px);align-items:center}
@media(max-width:900px){.pair-in{grid-template-columns:1fr}}
.pair-copy p{margin:14px 0 26px;font-size:15px;line-height:1.75;color:var(--muted);max-width:52ch}
.pair-media{aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.pair-media img{width:100%;height:100%;object-fit:cover}
.btn-outline{background:#fff;color:var(--navy);border:1px solid var(--line)}
.btn-outline:hover{border-color:var(--navy)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:#123055}
/* ---------- flexible finance ---------- */
.fin-in{max-width:1040px;margin:0 auto;text-align:center}
.fin-in .h2{margin-top:10px}
/* headline monthly price on the finance band */
.fin-price{margin:18px auto 0;text-align:center}
.fin-price .fin-from{display:block;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.fin-price b{font-size:clamp(30px,5vw,42px);font-weight:800;color:var(--ink)}
.fin-in .lede{margin:16px auto 0} /* .lede carries its own max-width, so it needs auto sides too */
.fin-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.fin-note{margin-top:26px;font-size:12px;line-height:1.7;color:var(--muted);max-width:88ch;
margin-left:auto;margin-right:auto}
/* benefit ticks on the finance band (benefit-led layout). Even-handed across solar and boiler,
no scheme-specific claims, so it stays symmetrical. */
.fin-bens{display:flex;justify-content:center;gap:16px 34px;flex-wrap:wrap;margin:22px auto 0;max-width:820px}
.fin-ben{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--ink);font-weight:600}
.fin-ben svg{width:21px;height:21px;color:var(--red);flex:0 0 auto}
.steps3.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:960px){.steps3.four{grid-template-columns:1fr;gap:30px}}
/* ---------- book-a-survey page: 3-step timeline, solo form, direct-contact strip ---------- */
/* The connector is drawn on the , not between the - s, so it cannot end up hanging off
the last step. It stops short of the final number by design. */
/* The connector is drawn per-step (li::after), not as one bar across the
. A single bar
has to guess where the last number is and always overshoots it. Each step draws the line to
the NEXT step, and the last step draws nothing. */
.steps3{--s3gap:clamp(24px,3vw,44px);--s3dot:52px;
list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
gap:var(--s3gap);margin:clamp(40px,4.5vw,60px) 0 0;padding:0}
.steps3 li{position:relative}
.steps3 li::after{content:'';position:absolute;top:calc(var(--s3dot) / 2 - 1px);
left:calc(var(--s3dot) + 14px);right:calc(-1 * var(--s3gap) - 14px);height:2px;
background:var(--line)}
.steps3 li:first-child::after{background:linear-gradient(90deg,var(--red-wash),var(--line))}
.steps3 li:last-child::after{display:none}
@media(max-width:820px){
.steps3{grid-template-columns:1fr;gap:30px}
.steps3 li{padding-left:70px}
.steps3 li::after{top:var(--s3dot);left:calc(var(--s3dot) / 2 - 1px);right:auto;bottom:-30px;
width:2px;height:auto}
}
.s3-n{display:grid;place-items:center;width:var(--s3dot);height:var(--s3dot);border-radius:50%;
background:var(--red);color:#fff;font-size:1.15rem;font-weight:800;
box-shadow:0 0 0 8px #fff;margin-bottom:20px;position:relative;z-index:1}
@media(max-width:820px){.s3-n{position:absolute;left:0;top:0;margin:0}}
.steps3 h3{font-size:1.15rem;font-weight:700;color:var(--navy);margin-bottom:10px}
.steps3 p{font-size:14px;line-height:1.75;color:var(--muted)}
.quote-form-card.solo h2{font-size:clamp(1.45rem,2.4vw,1.9rem);font-weight:700;color:var(--navy);margin:10px 0 6px}
.opt-tag{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
background:var(--mist);border:1px solid var(--line);border-radius:999px;padding:2px 8px;margin-left:6px}
.direct{padding:clamp(44px,5vw,64px) 0;border-top:1px solid var(--line)}
.direct-in{text-align:center}
.direct-in h3{font-size:1.25rem;font-weight:700;color:var(--navy);margin-bottom:10px}
.direct-in p{font-size:15px;color:var(--muted)}
.direct-in a{font-weight:700;color:var(--navy);text-decoration:none;border-bottom:2px solid var(--red-wash);
transition:color .18s,border-color .18s}
.direct-in a:hover{color:var(--red);border-color:var(--red)}
/* ---------- services tiles (layout E): copy over a photo ----------
Legibility is the whole problem with copy-on-photo: one gradient works on the photo you
designed against and fails on the next one. So there are TWO layers here, a heavy bottom
gradient AND a frosted scrim behind the text block. That holds up on a bright, busy image,
which a gradient alone does not. */
.svc-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:40px}
@media(max-width:1160px){.svc-tiles{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.svc-tiles{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.svc-tiles{grid-template-columns:1fr}}
.svc-tile{position:relative;display:flex;align-items:flex-end;min-height:clamp(380px,32vw,470px);
border-radius:var(--r);overflow:hidden;text-decoration:none;color:#fff;isolation:isolate}
.svc-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
transition:transform .7s cubic-bezier(.2,.6,.2,1)}
.svc-tile:hover img{transform:scale(1.06)}
.svc-scrim{position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg,rgba(9,18,36,.20) 0%,rgba(9,18,36,.42) 34%,rgba(9,18,36,.86) 62%,rgba(9,18,36,.97) 100%)}
.svc-body{position:relative;z-index:2;display:flex;flex-direction:column;width:100%;padding:22px}
.svc-tag{display:block;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#ff9a90;
text-shadow:0 1px 10px rgba(4,12,28,.8)}
.svc-h{display:block;font-size:1.15rem;font-weight:700;line-height:1.3;margin:7px 0 8px;
min-height:2.6em; /* reserve 2 lines so every tag sits at the same height */
text-shadow:0 2px 14px rgba(4,12,28,.7)}
.svc-p{display:block;font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.96);
min-height:6.6em; /* reserve 4 lines, same reason */
text-shadow:0 1px 12px rgba(4,12,28,.85)}
.svc-go{display:inline-flex;align-items:center;align-self:flex-start;gap:7px;margin-top:auto;padding-top:16px;font-size:13px;font-weight:700;color:#fff}
.svc-go svg{width:15px;height:15px;flex:0 0 15px;transition:transform .25s}
.svc-tile:hover .svc-go svg{transform:translateX(4px)}
/* ---------- recommender ---------- */
/* One question at a time. Every slide stays in the DOM (FormData needs them all) and the
track translates; overflow:hidden on the stage does the hiding. */
.quiz{max-width:760px;margin:0 auto}
.quiz-top{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.quiz-count{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--muted)}
.quiz-count span{color:var(--red)}
.quiz-bar{flex:1;height:4px;border-radius:99px;background:var(--line);overflow:hidden}
.quiz-fill{display:block;height:100%;width:25%;border-radius:99px;background:var(--red);
transition:width .45s cubic-bezier(.2,.6,.2,1)}
.quiz-stage{overflow:hidden;border-radius:var(--r)}
.quiz-track{display:flex;align-items:stretch;
transition:transform .5s cubic-bezier(.22,.7,.2,1)}
.q{flex:0 0 100%;min-width:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);
padding:clamp(24px,2.6vw,34px);opacity:.25;transition:opacity .4s}
.q.is-on{opacity:1}
.quiz-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px}
.quiz-nav .btn{margin-left:auto}
.quiz-back{display:inline-flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;
font:inherit;font-size:13px;font-weight:700;color:var(--muted);padding:10px 4px;transition:color .18s}
.quiz-back:hover{color:var(--navy)}
.quiz-back svg{width:15px;height:15px}
.quiz-nav .btn:disabled{opacity:.4;pointer-events:none}
.q h3{display:flex;align-items:center;gap:11px;font-size:1.05rem;font-weight:700;color:var(--navy);margin-bottom:14px}
.q-n{flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:var(--red);color:#fff;
display:grid;place-items:center;font-size:12px;font-weight:800}
.q-hint{font-size:12.5px;color:var(--muted);margin:-6px 0 12px}
.opts{display:flex;flex-direction:column;gap:9px}
.opt{display:flex;align-items:center;gap:11px;cursor:pointer;
border:1px solid var(--line);background:var(--mist);border-radius:12px;padding:11px 14px;
font-size:14px;font-weight:500;color:var(--navy);transition:border-color .18s,background .18s}
.opt:hover{border-color:var(--red-wash);background:#fff}
.opt input{accent-color:var(--red);width:16px;height:16px;flex:0 0 16px;margin:0}
.opt:has(input:checked){border-color:var(--red);background:var(--red-tint);font-weight:600;color:var(--red)}
.opt-none{margin-top:4px;border-style:dashed}
.quiz-go{grid-column:1/-1;display:flex;justify-content:center;margin-top:8px}
.quiz-go .btn{padding-left:26px}
.reco{max-width:1100px;margin:0 auto}
.reco-head{text-align:center;margin-bottom:30px}
.reco-head h3{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:700;color:var(--navy);margin-top:10px}
.reco-head h3 .accent{color:var(--red)} /* the h3 colour out-specifies bare .accent */
.reco-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:760px){.reco-cards{grid-template-columns:1fr}}
.reco-card{position:relative;display:flex;flex-direction:column;background:#fff;
border:1px solid var(--line);border-radius:var(--r);padding:clamp(26px,2.6vw,34px);
text-decoration:none;color:inherit;transition:transform .25s,box-shadow .25s,border-color .25s}
.reco-card:hover{transform:translateY(-4px);border-color:var(--red-wash);box-shadow:0 30px 56px -36px rgba(11,31,58,.45)}
.reco-card:first-child{border-color:var(--red);box-shadow:0 26px 54px -34px rgba(218,40,40,.4)}
.reco-num{position:absolute;top:20px;right:24px;font-size:2.6rem;font-weight:800;color:var(--red);opacity:.14;line-height:1}
.reco-rank{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--red)}
.reco-card h3,.reco-card h4{font-size:1.3rem;font-weight:700;color:var(--navy);margin:8px 0}
.reco-card p{font-size:14px;line-height:1.7;color:var(--muted);flex:1}
.reco-go{display:inline-flex;align-items:center;gap:7px;margin-top:20px;font-size:13px;font-weight:700;color:var(--navy)}
.reco-go svg{width:15px;height:15px;flex:0 0 15px;transition:transform .25s}
.reco-card:hover .reco-go{color:var(--red)}
.reco-card:hover .reco-go svg{transform:translateX(4px)}
.reco-none{grid-column:1/-1;background:#fff;border:1px solid var(--line);border-radius:var(--r);
padding:clamp(26px,2.6vw,34px);text-align:center}
.reco-none h3,.reco-none h4{font-size:1.2rem;color:var(--navy);margin-bottom:8px}
.reco-none p{font-size:14px;color:var(--muted);line-height:1.7;max-width:60ch;margin:0 auto}
.reco-foot{margin-top:28px;text-align:center}
.reco-foot p{font-size:12.5px;color:var(--muted);max-width:64ch;margin:0 auto 18px;line-height:1.65}
.reco-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* ---------- book a survey: argument left, form right ---------- */
.book-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:center}
@media(max-width:900px){.book-grid{grid-template-columns:1fr;gap:36px}}
.accent.line{display:block} /* force an accent phrase onto its own line (both) */
.nb{white-space:nowrap} /* keep a phrase from breaking mid-way */
.line-mob{display:inline} /* force onto its own line on mobile only */
@media(max-width:760px){.line-mob{display:block}}
.book-copy .h2{font-size:clamp(1.75rem,3vw,2.5rem)}
.book-copy .accent{display:block} /* keeps 'Home Survey.' whole on its own line */
.book-copy .lede{margin-top:14px}
.book-points{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.book-points li{position:relative;padding-left:30px;font-size:14.5px;line-height:1.65;color:var(--muted)}
.book-points li::before{content:'';position:absolute;left:0;top:6px;width:18px;height:18px;border-radius:50%;
background:var(--red-tint);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23da2828' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
background-size:11px;background-repeat:no-repeat;background-position:center}
.book-call{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:30px;padding-top:24px;
border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.book-call a{font-size:1.15rem;font-weight:700;color:var(--navy);text-decoration:none}
.book-call a:hover{color:var(--red)}
.book-grid .quote-form-card{margin:0}
.qf-lead{font-size:14.5px;margin-bottom:20px}
/* ---------- 3a. services: photo card, outcome-led copy ---------- */
.ben-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:38px}
@media(max-width:1000px){.ben-grid{grid-template-columns:1fr 1fr}}
@media(max-width:660px){.ben-grid{grid-template-columns:1fr}}
.ben{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
border-radius:var(--r);overflow:hidden;text-decoration:none;color:inherit;
transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
a.ben:hover{transform:translateY(-4px);border-color:var(--red-wash);box-shadow:0 30px 56px -36px rgba(11,31,58,.45)}
/* the photo. rounded, inset from the card edge so the card frame still reads. */
.ben-media{position:relative;margin:14px 14px 0;border-radius:var(--rs);overflow:hidden;
aspect-ratio:16/10;background:var(--mist)}
.ben-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
a.ben:hover .ben-media img{transform:scale(1.05)}
/* where we have no real photo yet, an honest slot rather than a stock stand-in */
.ben-media.slot{min-height:0;border-radius:var(--rs)}
.ben-body{display:flex;flex-direction:column;flex:1;padding:20px clamp(20px,1.8vw,26px) clamp(22px,2vw,28px)}
.ben h3{font-size:1.18rem;font-weight:700;color:var(--navy);line-height:1.3}
.ben-lead{font-size:14px;font-weight:700;color:var(--red);margin:8px 0 10px;line-height:1.45}
.ben p{font-size:13.8px;color:var(--muted);line-height:1.65}
.ben-body>p:last-of-type{flex:1}
.ben-go{display:inline-flex;align-items:center;gap:7px;margin-top:18px;font-size:13px;font-weight:700;color:var(--navy)}
.ben-go svg{width:15px;height:15px;transition:transform .25s ease}
a.ben:hover .ben-go{color:var(--red)}
a.ben:hover .ben-go svg{transform:translateX(4px)}
/* the last cell is a CTA. it carries a photo too, so the slot needs a dark variant:
the default .slot is a pink-on-cream dashed box that would look broken on navy. */
.ben-media.slot.dark{border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.72);
background:repeating-linear-gradient(45deg,rgba(255,255,255,.05),rgba(255,255,255,.05) 10px,rgba(255,255,255,.09) 10px,rgba(255,255,255,.09) 20px)}
.ben-media.slot.dark .note{color:rgba(255,255,255,.5)}
.ben-cta{background:var(--navy);border-color:var(--navy);color:#fff}
.ben-cta h3{color:#fff}
.ben-cta .ben-lead{color:#ff8b80}
.ben-cta p{color:rgba(255,255,255,.76)}
.ben-cta .btn{margin-top:20px;align-self:flex-start}
/* ---------- accreditation logo row ----------
The logos keep their real brand colours everywhere, which means on a dark section they need
white behind them. Two treatments:
.feather (dark sections) — a white band that is SOLID white through the middle and dissolves
to nothing at each end. The fade comes from the gradient itself, NOT from opacity. That
distinction is the whole point: a translucent/frosted band lets the navy bleed through and
dirties the marks (Gas Safe's yellow turns olive). Solid centre = true colours.
.rounded (footer) — a white card. Same reason, just contained.
Do NOT try to white-out these logos with a filter. They are knockout marks: MCS is white type
punched out of a black square, Gas Safe is black type on a yellow triangle. A filter turns
them into a blank square and a blank triangle. */
.accred{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:clamp(20px,2.6vw,40px)}
.accred img{width:auto;object-fit:contain}
/* on a white section: bare logos, spread across the space beside the label */
.accred.lg{justify-content:space-around;gap:clamp(30px,4vw,70px)}
.accred.lg img{height:70px;opacity:.95;transition:opacity .2s}
.accred.lg img:hover{opacity:1}
/* On a dark section: a FROSTED feathered band.
The tension: a frosted panel is translucent, but these logos need white behind them or their
colours go muddy (at 72% white the Gas Safe yellow turned olive). The resolution is to keep
the white high (90%) and get the glass character from a real backdrop-filter instead of from
low opacity, then feather the ends with a mask. Glass look, colours intact. */
.accred.feather{position:relative;width:100%;padding:32px 24px;gap:clamp(30px,5vw,72px);
background:rgba(255,255,255,.90);
backdrop-filter:blur(22px) saturate(150%);
-webkit-backdrop-filter:blur(22px) saturate(150%);
border-top:1px solid rgba(255,255,255,.5);
border-bottom:1px solid rgba(255,255,255,.25);
-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.6) 15%,#000 34%,#000 66%,rgba(0,0,0,.6) 85%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.6) 15%,#000 34%,#000 66%,rgba(0,0,0,.6) 85%,transparent 100%)}
.accred.feather img{height:48px;transition:transform .2s ease}
.accred.feather img:hover{transform:translateY(-2px)}
/* footer: mono-white logos, hairline spacers between. No white plaque, so the row sits into
the dark rather than on top of it. Uses the re-authored *-white.svg files: these marks CANNOT
be filtered white (MCS is knocked out of a black box, Gas Safe out of a yellow triangle). */
.accred.divided{width:100%;max-width:320px;margin-top:26px;justify-content:flex-start;gap:0}
.accred.divided .p{display:grid;place-items:center;padding:0 clamp(14px,1.4vw,20px);
border-right:1px solid rgba(255,255,255,.16)}
.accred.divided .p:first-child{padding-left:0}
.accred.divided .p:last-child{border-right:0;padding-right:0}
.accred.divided img{height:24px;opacity:.72;transition:opacity .2s}
.accred.divided .p:hover img{opacity:1}
@media(max-width:700px){
.accred.lg{gap:30px}
.accred.lg img{height:44px}
.accred.feather{padding:22px 16px;gap:26px}
.accred.feather img{height:32px}
.accred.divided .p{padding:0 12px}
.accred.divided img{height:20px}
}
/* ---------- dark band (the trust / accreditation section) ----------
Frosted glass needs something BEHIND it to blur, or it is just a flat translucent panel. So
the band carries two soft colour glows, and the cards frost over them. On a plain navy the
backdrop-filter would have done nothing at all. */
.dark-band,.how{position:relative;overflow:hidden}
.dark-band{background:var(--navy);color:#fff}
.dark-band::before,.how::before{content:"";position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(700px 440px at 12% 18%, rgba(255,255,255,.10), transparent 62%),
radial-gradient(760px 480px at 88% 82%, rgba(255,255,255,.08), transparent 64%),
radial-gradient(520px 380px at 62% 6%, rgba(255,255,255,.06), transparent 60%)}
.dark-band > *,.how > *{position:relative;z-index:1}
.dark-band .h2{color:#fff}
.dark-band .lede{color:rgba(255,255,255,.78)}
.dark-band .sec-eyebrow{color:rgba(255,255,255,.78)}
/* the band breaks OUT of the 1080px header column so it spans the section width */
.dark-band .sec-center{position:relative}
.dark-band .sec-center .accred.feather{margin:0 calc(50% - 50vw) 34px;width:100vw;max-width:100vw}
.dark-band .h2 .accent{color:var(--red)}
/* frosted cards */
.dark-band .feat,
.dark-band .trust-close{
background:rgba(255,255,255,.08);
backdrop-filter:blur(18px) saturate(140%);
-webkit-backdrop-filter:blur(18px) saturate(140%);
border:1px solid rgba(255,255,255,.18);
box-shadow:0 24px 60px -40px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12)}
.dark-band .feat h4,.dark-band .trust-close h3{color:#fff}
.dark-band .feat p,.dark-band .trust-close p{color:rgba(255,255,255,.78)}
.dark-band .fi{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.14)}
/* ---------- homepage trust (layout A): argument left, evidence right ---------- */
.tr-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(34px,5vw,76px);align-items:center}
@media(max-width:960px){.tr-grid{grid-template-columns:1fr;gap:36px}}
.tr-copy .h2{margin-top:12px}
.tr-copy .lede{max-width:46ch}
.tr-copy .btn{margin-top:28px}
.tr-items{display:flex;flex-direction:column;gap:14px}
.tr-item{display:grid;grid-template-columns:46px 1fr;gap:18px;align-items:start;
border-radius:var(--r);padding:22px 24px;
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
box-shadow:0 24px 60px -40px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12);
transition:transform .22s ease,border-color .22s ease}
.tr-item:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.3)}
.tr-ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);color:#fff}
.tr-ic svg{width:21px;height:21px}
.tr-item h3{font-size:1.05rem;font-weight:700;color:#fff;margin-bottom:6px}
.tr-item p{font-size:13.4px;line-height:1.7;color:rgba(255,255,255,.74)}
/* the logos close the section as a footer rule rather than opening it as a separate band */
.tr-foot{margin-top:clamp(36px,4vw,56px);padding-top:30px;border-top:1px solid rgba(255,255,255,.14);
display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.tr-claim{font-size:14.5px;font-weight:600;color:rgba(255,255,255,.82);max-width:52ch}
.tr-logos{display:flex;align-items:center;gap:clamp(24px,3.2vw,52px);flex-wrap:wrap}
.tr-logos img{height:30px;width:auto;opacity:.8;transition:opacity .2s}
.tr-logos img:hover{opacity:1}
@media(max-width:640px){
.tr-foot{flex-direction:column;align-items:flex-start}
.tr-logos{gap:22px}
.tr-logos img{height:24px}
}
/* ---------- 3b. trust / accreditation (old, unused) ---------- */
.trust-close{margin-top:clamp(28px,3vw,42px);background:var(--navy);color:#fff;border-radius:var(--r);
padding:clamp(30px,3.4vw,48px);text-align:center;
display:flex;flex-direction:column;align-items:center;gap:14px}
/* run wide: the box is full-width, so a 22ch headline stacked into a narrow column inside it */
.trust-close h3{font-size:clamp(1.5rem,2.6vw,2.2rem);font-weight:700;line-height:1.25;max-width:38ch}
.trust-close p{font-size:15px;line-height:1.7;color:rgba(255,255,255,.78);max-width:none}
.trust-close .btn{margin-top:8px}
@media(max-width:1100px){.foot-top{grid-template-columns:1.4fr repeat(2,1fr)}}
@media(max-width:560px){.foot-top{grid-template-columns:1fr}}
/* ---------- our story ----------
Two real columns (a grid, not CSS `columns`), so each paragraph stays whole instead of being
sliced in half across the gutter. The closing line then spans the full width. */
.story-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,64px);max-width:1140px;margin:0 auto;align-items:start}
.story-cols p{margin:0;font-size:15.5px;line-height:1.8;color:var(--muted)}
@media(max-width:820px){.story-cols{grid-template-columns:1fr;gap:22px}}
.story-close{max-width:960px;margin:clamp(36px,4vw,54px) auto 0;text-align:center;
font-size:clamp(1.05rem,1.6vw,1.35rem);line-height:1.6;font-weight:600;color:var(--navy)}
.story-close .u{position:relative;white-space:nowrap}
.story-close .u::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:8px;
background:var(--red-wash);border-radius:4px;z-index:-1}
.story-close .u{z-index:1}
/* ---------- whole-home panel (philosophy version of the house) ---------- */
.wh-lead{font-size:14.5px;font-weight:700;color:var(--red);margin:8px 0 12px;line-height:1.5}
.wh-desc{font-size:14px;line-height:1.75;color:var(--muted);margin:0 0 20px}
.wh-why{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
color:var(--navy);margin-bottom:12px}
.wh-cta{margin-top:auto;padding-top:24px;border-top:1px solid var(--line)}
.wh-cta h3,.wh-cta h4{font-size:1.05rem;font-weight:700;color:var(--navy);margin-bottom:6px}
.wh-cta p{font-size:13.5px;color:var(--muted);margin-bottom:16px;line-height:1.6}
.wh-cta .btn{width:100%;justify-content:center;padding-left:24px}
.wh-list{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:10px}
.wh-list li{display:flex;align-items:flex-start;gap:9px;font-size:13.8px;color:var(--navy);font-weight:500}
.wh-list svg{width:16px;height:16px;flex:0 0 16px;margin-top:3px;color:#1c8f4f}
#whole-home .ex-chart h3{font-size:1.5rem;margin:10px 0 0}
/* ---------- trusted & accredited (layout D): copy left, divided list right ---------- */
.td-layout{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(36px,5vw,84px);align-items:start}
@media(max-width:920px){.td-layout{grid-template-columns:1fr;gap:34px}}
.td-copy .h2{margin-top:12px}
.td-copy .lede{max-width:46ch}
.td-logos{display:flex;align-items:center;flex-wrap:wrap;gap:clamp(20px,2.4vw,34px);margin-top:30px}
.td-logos img{height:34px;width:auto;opacity:.95}
.td-items{display:flex;flex-direction:column}
.td-item{display:grid;grid-template-columns:52px 1fr;gap:22px;
padding:28px 0;border-bottom:1px solid var(--line)}
.td-item:first-child{padding-top:0}
.td-item:last-child{border-bottom:0;padding-bottom:0}
.td-ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
background:var(--red-tint);color:var(--red);border:1px solid var(--red-wash)}
.td-ic svg{width:23px;height:23px}
.td-body h3{font-size:1.15rem;font-weight:700;color:var(--navy);margin-bottom:8px}
.td-body p{font-size:14px;line-height:1.75;color:var(--muted)}
.td-meta{margin-top:12px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--navy)}
.td-rating{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.td-rating .stars{display:inline-flex;gap:2px;color:var(--gold)}
.td-rating .stars svg{width:18px;height:18px}
.td-rating .rt{font-size:13px;color:var(--muted)}
.td-rating .rt strong{color:var(--navy);font-weight:700}
/* ---------- accreditation cards (dark band, unused on the why page now) ---------- */
.acc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:6px}
@media(max-width:980px){.acc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.acc-grid{grid-template-columns:1fr}}
.acc-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:var(--r);
padding:clamp(22px,2vw,28px);
backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
box-shadow:0 24px 60px -40px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12)}
.acc-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.acc-card h3,.acc-card h4{font-size:1.05rem;font-weight:700;color:#fff}
.acc-ref{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
border-radius:999px;padding:4px 10px;white-space:nowrap}
.acc-card p{font-size:13.6px;line-height:1.7;color:rgba(255,255,255,.76)}
/* the nudge that tells people the house is actually clickable */
.sec-prompt{margin-top:18px;display:inline-flex;align-items:center;gap:8px;
font-size:13px;font-weight:700;color:var(--red);
background:var(--red-tint);border:1px solid var(--red-wash);border-radius:999px;padding:9px 18px}
.sec-prompt::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);
animation:promptPulse 1.9s ease-out infinite}
@keyframes promptPulse{
0%{box-shadow:0 0 0 0 rgba(218,40,40,.5)}
100%{box-shadow:0 0 0 8px rgba(218,40,40,0)}
}
.ast{color:var(--red);font-weight:800;font-size:.68em;margin-left:1px}
.sec-note .ast{margin-left:0;margin-right:3px}
.sec-note{margin-top:clamp(24px,2.6vw,34px);text-align:center;font-size:12px;color:var(--muted)}
/* ---------- FAQ as cards, not a stacked list ----------
Two columns of self-contained cards. Each stays a , so it is still keyboard
accessible and still works with JS off. */
.faq-page .wrap{max-width:1100px}
.faq-group{margin-bottom:clamp(40px,4.5vw,62px)}
.faq-group:last-child{margin-bottom:0}
.faq-group-h{font-size:clamp(1.3rem,2vw,1.65rem);font-weight:700;color:var(--navy);
padding-bottom:14px;margin-bottom:20px;border-bottom:1px solid var(--line);
display:flex;align-items:center;gap:12px}
.faq-group-h::before{content:"";width:4px;height:20px;border-radius:2px;background:var(--red);flex:0 0 4px}
.faq-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media(max-width:860px){.faq-cards{grid-template-columns:1fr}}
.faq-card{background:#fff;border:1px solid var(--line);border-radius:var(--rs);
padding:20px 22px;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.faq-card:hover{border-color:var(--red-wash);box-shadow:0 20px 40px -30px rgba(11,31,58,.4)}
.faq-card[open]{border-color:var(--red-wash);box-shadow:0 24px 48px -32px rgba(11,31,58,.45)}
.faq-card summary{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
cursor:pointer;list-style:none;font-size:15px;font-weight:700;color:var(--navy);line-height:1.45}
.faq-card summary::-webkit-details-marker{display:none}
.faq-card .faq-ic{flex:0 0 26px;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
background:var(--red-tint);color:var(--red);border:1px solid var(--red-wash);transition:transform .25s ease}
.faq-card .faq-ic svg{width:14px;height:14px}
.faq-card[open] .faq-ic{transform:rotate(45deg)}
.faq-card p{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
font-size:14px;line-height:1.75;color:var(--muted)}
.tint .faq-card{background:#fff}
/* the finance disclaimer, inline under the answer it applies to */
.faq-note{display:block;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);
font-size:11.5px;line-height:1.6;color:var(--muted)}
/* ---------- 4. why choose (6-up) ---------- */
.feat-grid.six{grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.feat-grid.six{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.feat-grid.six{grid-template-columns:1fr}}
/* ---------- 5. projects rail ---------- */
.proj-rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:34px 2px 6px;
scrollbar-width:none}
.proj-rail::-webkit-scrollbar{display:none}
.proj{flex:0 0 clamp(260px,30%,360px);aspect-ratio:4/3;scroll-snap-align:start;border-radius:var(--r)}
.proj-nav{display:flex;align-items:center;gap:12px;margin-top:22px}
.proj-nav .btn{margin-left:auto}
.rail-btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--navy);
cursor:pointer;display:grid;place-items:center;transition:background .2s ease,color .2s ease}
.rail-btn svg{width:19px;height:19px}
.rail-btn:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
/* ---------- section-level CTA (sits under a card grid) ---------- */
.sec-cta{display:flex;justify-content:center;margin-top:clamp(30px,3.4vw,44px)}
/* ---------- coverage (layout E): dark band, areas as the feature ---------- */
.cov-band{position:relative;overflow:hidden;background:var(--navy);color:#fff;
padding:clamp(64px,7.5vw,100px) 0}
.cov-band::before{content:"";position:absolute;inset:0;pointer-events:none;background:
radial-gradient(700px 440px at 12% 18%, rgba(255,255,255,.10), transparent 62%),
radial-gradient(760px 480px at 88% 82%, rgba(255,255,255,.08), transparent 64%)}
.cov-band > *{position:relative;z-index:1}
.cov-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(32px,4.5vw,72px);align-items:center}
@media(max-width:900px){.cov-grid{grid-template-columns:1fr;gap:34px}}
.cov-band .h2{color:#fff;margin-top:12px}
.cov-band .lede{color:rgba(255,255,255,.78);max-width:54ch}
.cov-band .sec-eyebrow{color:rgba(255,255,255,.72)}
.cov-band .h2 .accent{color:var(--red)}
.cov-band .area-chips{margin:28px 0 0}
.cov-band .area-chips span{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff}
.cov-band .area-chips .more{background:rgba(218,40,40,.18);border-color:rgba(218,40,40,.45);color:#fff}
.cov-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:30px}
.cov-hq{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:rgba(255,255,255,.62)}
.cov-hq svg{width:17px;height:17px;color:var(--red);flex:0 0 17px}
.cov-map{border-radius:var(--r);overflow:hidden;aspect-ratio:1/1;border:1px solid rgba(255,255,255,.16);
box-shadow:0 40px 90px -50px rgba(0,0,0,.8);background:#0e2244}
.cov-map img{width:100%;height:100%;object-fit:cover}
.cov-map iframe{display:block;width:100%;height:100%;border:0}
@media(max-width:900px){.cov-map{aspect-ratio:16/10}}
/* ---------- 5. where we work (homepage): copy left, image right ---------- */
.cov-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);align-items:center}
@media(max-width:900px){.cov-layout{grid-template-columns:1fr}}
.cov-copy .lede{max-width:52ch;margin-top:16px}
.cov-copy .h2{margin-top:10px}
.area-chips{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 20px}
.area-chips span{font-size:13px;font-weight:600;color:var(--navy);background:#fff;
border:1px solid var(--line);border-radius:999px;padding:8px 14px}
.area-chips .more{background:var(--red-tint);border-color:var(--red-wash);color:var(--red)}
.cov-note{font-size:13.5px;color:var(--muted);margin-bottom:20px}
.cov-media{aspect-ratio:4/3;border-radius:var(--r);min-height:0;overflow:hidden;border:1px solid var(--line)}
.cov-media img{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){.cov-media{aspect-ratio:16/10}}
/* ---------- 6. reviews ---------- */
.rev-top{display:grid;grid-template-columns:1fr 1.4fr;gap:20px;margin:34px 0 20px}
.rev-score{min-height:180px}
.rev-video{min-height:180px;aspect-ratio:auto}
@media(max-width:820px){.rev-top{grid-template-columns:1fr}}
/* the process section is two columns: the timeline (left) and the booking form (right) */
/* stretch, not start: the timeline column matches the form's height so the two sides line up */
.proc-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4vw,64px);align-items:stretch;margin-top:8px}
@media(max-width:980px){.proc-layout{grid-template-columns:1fr}}
/* the timeline runs vertically inside the column, whatever the viewport.
flex + space-between spreads the four steps evenly down the FULL height of the form, rather
than bunching them at the top with dead space underneath. */
.timeline-h.vertical{display:flex;flex-direction:column;justify-content:space-between;
height:100%;grid-template-columns:none;gap:0}
/* Bigger numerals, so the copy column narrows and the lines stop running thin and wide.
The connector's left offset is half the dot, so it stays centred through them. */
.timeline-h.vertical::before{top:30px;bottom:30px;left:29px;right:auto;width:2px;height:auto;
background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.3),rgba(255,255,255,.08))}
.timeline-h.vertical .tl-step{display:grid;grid-template-columns:60px 1fr;column-gap:24px;padding-bottom:0}
.timeline-h.vertical .tl-dot{width:60px;height:60px;font-size:20px}
.timeline-h.vertical .tl-step h3,.tl-step h4{max-width:30ch}
.timeline-h.vertical .tl-step p{max-width:46ch}
.timeline-h.vertical .tl-dot{margin-bottom:0}
.timeline-h.vertical .tl-step h3,.tl-step h4{grid-column:2;margin-top:10px}
.timeline-h.vertical .tl-step p{grid-column:2}
/* on mobile the form drops below, so the steps go back to a normal stacked rhythm */
@media(max-width:980px){
.timeline-h.vertical{height:auto;justify-content:flex-start}
.timeline-h.vertical .tl-step{padding-bottom:34px}
.timeline-h.vertical .tl-step:last-child{padding-bottom:0}
}
/* the form is a white card on the navy band, so it reads as the thing to actually do */
.how .quote-form-card{background:#fff;color:var(--navy)}
.how .quote-form-card h3{font-size:1.5rem;color:var(--navy);margin:10px 0 6px}
.qf-sub{font-size:13.8px;color:var(--muted);line-height:1.6;margin-bottom:20px}
.qf-gdpr{font-size:11.5px;line-height:1.55;color:var(--muted);margin:14px 0 12px}
.qf-gdpr a{color:var(--red);text-decoration:underline;text-underline-offset:2px}
.quote-form-card .btn{width:100%;justify-content:center;padding-left:24px}
/* Web3Forms honeypot: a real person never sees or fills this; a bot that ticks it gets its
submission silently dropped. position/opacity rather than display:none so headless bots that
skip hidden fields still see it. */
.hp-check{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
/* ---------- 7. the process: horizontal timeline ----------
The connector is drawn on the as a single line behind the dots, not as a border on each
step, so it never leaves a stub hanging off the first or last node. It is hidden on mobile,
where the timeline flips to a vertical rail down the left. */
.timeline-h{list-style:none;margin:0;padding:0;position:relative;
display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,34px)}
.timeline-h::before{content:"";position:absolute;top:22px;left:12%;right:12%;height:2px;
background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.28),rgba(255,255,255,.08))}
.tl-step{position:relative;padding-top:0}
.tl-dot{position:relative;z-index:1;display:grid;place-items:center;
width:44px;height:44px;border-radius:50%;margin-bottom:20px;
background:var(--red);color:#fff;font-weight:800;font-size:15px;
box-shadow:0 0 0 6px var(--navy)} /* the ring punches a hole in the connector line */
.tl-step h3,.tl-step h4{font-size:1.05rem;font-weight:700;color:#fff;line-height:1.35;margin-bottom:9px}
.tl-step p{font-size:13.6px;line-height:1.65;color:rgba(255,255,255,.7)}
@media(max-width:900px){
/* vertical rail: the line runs down the left, through the dots */
.timeline-h{grid-template-columns:1fr;gap:0}
.timeline-h::before{top:22px;bottom:22px;left:21px;right:auto;width:2px;height:auto;
background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.28),rgba(255,255,255,.08))}
.tl-step{display:grid;grid-template-columns:44px 1fr;column-gap:18px;padding-bottom:30px}
.tl-dot{margin-bottom:0}
.tl-step h3,.tl-step h4{grid-column:2;margin-top:10px}
.tl-step p{grid-column:2}
.tl-step:last-child{padding-bottom:0}
}
/* ---------- 7. process (old, unused) ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:38px}
.step{position:relative;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r);padding:26px 22px}
.step .sn{width:40px;height:40px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-weight:800;margin-bottom:16px}
.step h3,.step h4{font-size:1.05rem;font-weight:700;color:#fff;margin-bottom:8px}
.step p{font-size:13.5px;color:rgba(255,255,255,.72);line-height:1.6}
/* connector arrows between steps, desktop only */
.step:not(:last-child)::after{content:"";position:absolute;right:-14px;top:50%;width:8px;height:8px;
border-top:2px solid rgba(255,255,255,.3);border-right:2px solid rgba(255,255,255,.3);transform:translateY(-50%) rotate(45deg)}
@media(max-width:1000px){.steps{grid-template-columns:1fr 1fr}.step:not(:last-child)::after{display:none}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
/* A grid item's min-width defaults to auto (= min-content), and a text input's min-content
is its default `size=20`, about 177px. Two of those in a .qrow is ~364px that refuses to
shrink, which burst the hero panel out of a 338px slot on mobile. Any grid item wrapping
an input needs an explicit min-width:0 or it will not shrink below its content. */
.hero-panel,.hero-panel>*,.qcard,.qrow,.field,.hc-int-grid,.hc-chip{min-width:0}
.field input,.field select{min-width:0}
/* .hero-inner is a grid. `align-items:center` centres the panel inside its ROW, but the row
itself defaults to align-content:start, so it hugged the top of the hero: 130px above vs
221px below. align-content is what centres the row track in the leftover space. */
.hero-inner{align-content:center}
/* The hero form pops when "Book a Free Survey" is clicked: it is already on screen, so a nudge
beats scrolling the page somewhere else. */
@keyframes qpop{
0%{transform:scale(1);box-shadow:0 0 0 0 rgba(218,40,40,0)}
35%{transform:scale(1.025);box-shadow:0 0 0 8px rgba(218,40,40,.22)}
100%{transform:scale(1);box-shadow:0 0 0 0 rgba(218,40,40,0)}
}
.qcard.pop{animation:qpop .62s cubic-bezier(.34,1.4,.5,1)}
/* GDPR consent line: sits ABOVE the submit so it is read before the click, not after. */
.qgdpr{font-size:11.5px;line-height:1.5;color:rgba(255,255,255,.72);margin:14px 0 12px}
.qgdpr a{color:rgba(255,255,255,.92);text-decoration:underline;text-underline-offset:2px}
.qgdpr a:hover{color:#fff}
/* ============================================================================
RESPONSIVE OVERRIDES — MUST STAY LAST.
A later unconditional rule beats an earlier media query at equal specificity.
`.hero-panel{grid-template-columns:1.15fr .85fr}` was appended after the mobile
query and so kept 2 columns on a 390px screen, pushing the calculator off-canvas.
Any new base-layer rule goes ABOVE this block.
========================================================================== */
@media(max-width:1000px){
.ex-layout{grid-template-columns:1fr}
.ex-desc{min-height:0}
.ex-total{flex-direction:column;align-items:flex-start;text-align:left}
.ex-total-cta,.ex-total .btn{width:100%;justify-content:center}
.hero-panel{grid-template-columns:1fr;gap:24px;align-items:start}
.hero-panel .hcalc{min-height:0;justify-self:stretch;max-width:none;width:100%}
.hero-panel h1{max-width:none}
.hero{min-height:auto}
}
@media(max-width:600px){
/* Side by side, the two CTAs need ~430px. The panel is ~300px wide here, so stack them
full-width rather than let the secondary one hang off the edge.
display:flex must be re-asserted: the base rule is scoped to a wider breakpoint, so
without it the row is a block and the two lay out inline, straight off the edge. */
.hero-cta-row{display:flex;flex-direction:column;align-items:stretch;gap:12px}
.hero-cta-row .btn{width:100%;justify-content:center}
}
/* ======================================================================
COOKIE CONSENT
====================================================================== */
.cookie-fab{position:fixed;left:18px;bottom:18px;z-index:80;width:48px;height:48px;border-radius:50%;
display:grid;place-items:center;cursor:pointer;border:1px solid var(--line);background:#fff;
color:var(--navy);box-shadow:0 18px 40px -20px rgba(11,31,58,.5);
transition:transform .2s,color .2s,border-color .2s}
.cookie-fab:hover{transform:translateY(-2px);color:var(--red);border-color:var(--red-wash)}
.cookie-fab svg{width:24px;height:24px}
@media(max-width:640px){.cookie-fab{width:44px;height:44px;left:14px;bottom:14px}}
.cookie-banner{position:fixed;left:14px;right:14px;bottom:14px;z-index:90;
background:#fff;border:1px solid var(--line);border-radius:22px;
box-shadow:0 40px 90px -40px rgba(11,31,58,.6);padding:clamp(18px,2vw,24px)}
.ck-in{display:flex;align-items:center;gap:clamp(18px,3vw,44px);max-width:1200px;margin:0 auto}
@media(max-width:820px){.ck-in{flex-direction:column;align-items:stretch;gap:16px}}
.ck-copy h3{font-size:1.02rem;font-weight:700;color:var(--navy);margin-bottom:6px}
.ck-copy p{font-size:13.2px;line-height:1.65;color:var(--muted);max-width:78ch}
.ck-copy a{color:var(--red);font-weight:600}
.ck-actions{display:flex;gap:8px;margin-left:auto;flex-shrink:0}
@media(max-width:820px){.ck-actions{margin-left:0}.ck-actions .btn{flex:1;justify-content:center}}
.ck-sm{padding:11px 18px;font-size:13px}
.ck-sm .ic{display:none}
.cookie-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px}
.ck-scrim{position:absolute;inset:0;background:rgba(9,18,36,.55);backdrop-filter:blur(3px)}
.ck-panel{position:relative;width:min(560px,100%);max-height:86vh;overflow:auto;background:#fff;
border-radius:24px;padding:clamp(22px,2.6vw,30px);box-shadow:0 50px 100px -40px rgba(11,31,58,.7)}
.ck-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.ck-head h3{font-size:1.25rem;font-weight:700;color:var(--navy)}
.ck-x{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;
cursor:pointer;display:grid;place-items:center;color:var(--muted)}
.ck-x:hover{color:var(--navy);border-color:var(--navy)}
.ck-x svg{width:16px;height:16px}
.ck-row{display:flex;align-items:flex-start;gap:18px;padding:18px 0;border-bottom:1px solid var(--line)}
.ck-row h3,.ck-row h4{font-size:14.5px;font-weight:700;color:var(--navy);margin-bottom:5px}
.ck-row p{font-size:13px;line-height:1.6;color:var(--muted)}
.ck-row p b{color:var(--navy)}
label.ck-row{cursor:pointer}
.ck-always{flex-shrink:0;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
color:var(--muted);background:var(--mist);border:1px solid var(--line);border-radius:999px;padding:6px 11px}
.ck-toggle{position:relative;flex-shrink:0;width:46px;height:26px}
.ck-toggle input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.ck-toggle i{position:absolute;inset:0;border-radius:999px;background:var(--line);transition:background .2s}
.ck-toggle i::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
background:#fff;transition:transform .2s;box-shadow:0 2px 6px rgba(11,31,58,.3)}
.ck-toggle input:checked + i{background:var(--red)}
.ck-toggle input:checked + i::after{transform:translateX(20px)}
.ck-foot{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:20px}
@media(max-width:560px){.ck-foot .btn{flex:1;justify-content:center}}
/* a blocked embed says so, and offers the unlock in place */
.consent-block{position:relative}
.consent-veil{position:absolute;inset:0;z-index:2;display:grid;place-content:center;justify-items:center;
gap:6px;text-align:center;padding:24px;background:var(--navy);color:#fff}
.consent-block.is-unlocked .consent-veil{display:none}
.consent-veil svg{width:26px;height:26px;color:var(--red);margin-bottom:4px}
.consent-veil h3,.consent-veil h4{font-size:1rem;font-weight:700}
.consent-veil p{font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.7);max-width:34ch;margin-bottom:12px}
.consent-veil .btn{background:#fff;color:var(--navy);padding:10px 18px;font-size:13px}
/* ======================================================================
LEGAL PAGES (terms / privacy / cookies / policies)
====================================================================== */
.legal{padding:clamp(48px,6vw,84px) 0}
.legal-wrap{display:grid;grid-template-columns:230px 1fr;gap:clamp(30px,5vw,72px);align-items:start}
/* Short single-statement policies (Quality, H&S, Environmental, CSR) have no sections to link to,
so they ship without the "On this page" rail. Without this the body would land in the 230px
sidebar column. */
.legal-wrap.no-toc{grid-template-columns:1fr}
@media(max-width:900px){.legal-wrap{grid-template-columns:1fr;gap:26px}}
.legal-toc{position:sticky;top:100px;border-left:2px solid var(--line);padding-left:18px}
@media(max-width:900px){.legal-toc{position:static;border-left:0;border-top:1px solid var(--line);
padding:16px 0 0;display:flex;flex-wrap:wrap;gap:6px}}
.legal-toc h2,.legal-toc h3,.legal-toc h4{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
color:var(--muted);margin-bottom:12px}
@media(max-width:900px){.legal-toc h2,.legal-toc h3,.legal-toc h4{width:100%;margin-bottom:6px}}
.legal-toc a{display:block;font-size:13.5px;color:var(--muted);text-decoration:none;padding:6px 0;
transition:color .15s}
.legal-toc a:hover{color:var(--red)}
@media(max-width:900px){.legal-toc a{background:var(--mist);border-radius:999px;padding:7px 13px;font-size:12.5px}}
.legal-body{max-width:74ch}
.legal-body h2{font-size:1.25rem;font-weight:700;color:var(--navy);margin:36px 0 14px;
scroll-margin-top:110px}
.legal-body h2:first-of-type{margin-top:0}
.legal-body p{font-size:14.6px;line-height:1.8;color:var(--muted);margin-bottom:14px}
.legal-body a{color:var(--red);font-weight:600}
.legal-updated{font-size:13px;padding:14px 18px;background:var(--mist);border:1px solid var(--line);
border-radius:14px;margin-bottom:32px}
.legal-list{margin:0 0 16px;padding-left:20px}
.legal-list li{font-size:14.6px;line-height:1.8;color:var(--muted);margin-bottom:8px}
.legal-list b{color:var(--navy)}
/* Review date at the foot of a policy page, taken from the client's source document. */
.legal-updated{margin-top:32px;padding-top:18px;border-top:1px solid var(--line);
font-size:13px;color:var(--muted)}
.legal-facts{list-style:none;margin:0 0 18px;padding:0;border:1px solid var(--line);border-radius:14px;
overflow:hidden}
.legal-facts li{display:flex;gap:16px;padding:12px 16px;border-bottom:1px solid var(--line);
font-size:13.8px}
.legal-facts li:last-child{border-bottom:0}
.legal-facts span{flex:0 0 150px;color:var(--muted)}
.legal-facts b{color:var(--navy);font-weight:600}
@media(max-width:560px){.legal-facts li{flex-direction:column;gap:2px}.legal-facts span{flex:none}}
.legal-table{width:100%;border-collapse:collapse;margin:8px 0 18px;font-size:13.4px}
.legal-table th,.legal-table td{text-align:left;padding:11px 13px;border:1px solid var(--line);
color:var(--muted)}
.legal-table th{background:var(--mist);color:var(--navy);font-weight:700}
/* An unfinished legal clause has to LOOK unfinished. A tidy placeholder is how a site goes live
with a cooling-off period nobody ever wrote. */
.todo{border-left:3px solid var(--red);background:var(--red-tint);border-radius:0 12px 12px 0;
padding:16px 18px;font-size:13.6px;line-height:1.75;color:var(--navy)}
.todo b{color:var(--red)}
/* ---------- policies index ---------- */
.pol-group{margin-bottom:clamp(38px,4vw,56px)}
.pol-group h2{font-size:1.15rem;font-weight:700;color:var(--navy);margin-bottom:18px;
padding-bottom:12px;border-bottom:1px solid var(--line)}
.pol-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:820px){.pol-grid{grid-template-columns:1fr}}
.pol{display:flex;gap:16px;padding:22px;background:#fff;border:1px solid var(--line);
border-radius:var(--r);text-decoration:none;transition:border-color .2s,transform .2s,box-shadow .2s}
.pol:hover{border-color:var(--red-wash);transform:translateY(-2px);
box-shadow:0 26px 50px -36px rgba(11,31,58,.4)}
.pol-ic{flex:0 0 42px;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
background:var(--red-tint);color:var(--red)}
.pol-ic svg{width:21px;height:21px}
.pol-body{display:flex;flex-direction:column;gap:5px}
.pol-t{font-size:14.8px;font-weight:700;color:var(--navy)}
.pol-d{font-size:13.2px;line-height:1.65;color:var(--muted)}
.pol-go{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:12.5px;
font-weight:700;color:var(--red)}
.pol-go svg{width:13px;height:13px}
.pol-note{background:var(--mist);border:1px solid var(--line);border-radius:var(--r);
padding:clamp(24px,2.6vw,32px);text-align:center}
.pol-note h3{font-size:1.1rem;font-weight:700;color:var(--navy);margin-bottom:8px}
.pol-note p{font-size:14px;color:var(--muted);line-height:1.7}
.pol-note a{color:var(--red);font-weight:600}
/* ---------- skip link + footer socials ---------- */
.skip{position:absolute;left:-9999px;top:12px;z-index:200;background:var(--red);color:#fff;
padding:12px 20px;border-radius:999px;font-size:14px;font-weight:700;text-decoration:none}
.skip:focus{left:16px}
.fsocial{display:flex;gap:8px;margin-top:16px}
.fsocial a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.72);
transition:background .18s,color .18s,border-color .18s}
.fsocial a:hover{background:var(--red);border-color:var(--red);color:#fff}
.fsocial svg{width:17px;height:17px}
/* ---------- thank-you + 404 ---------- */
#next{padding:clamp(48px,6vw,80px) 0}
#next .steps3{margin-top:0}
.ty-echo{max-width:760px;margin:clamp(34px,4vw,48px) auto 0;text-align:center;
background:var(--mist);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.ty-echo-lab{display:block;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
color:var(--muted);margin-bottom:12px}
.ty-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.ty-chips span{font-size:13px;font-weight:600;color:var(--red);background:var(--red-tint);
border:1px solid var(--red-wash);border-radius:999px;padding:7px 14px}
.ty-actions{text-align:center;margin-top:clamp(40px,5vw,60px)}
.ty-actions > p{font-size:15px;color:var(--muted);margin-bottom:18px}
.ty-links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.ty-call{margin-top:26px;font-size:14px;color:var(--muted)}
.ty-call a{color:var(--navy);font-weight:700;text-decoration:none;border-bottom:2px solid var(--red-wash)}
.ty-call a:hover{color:var(--red);border-color:var(--red)}
.lost-in{text-align:center;padding:clamp(20px,3vw,36px) 0 clamp(48px,6vw,80px)}
.lost-lead{font-size:1.1rem;font-weight:600;color:var(--navy);margin-bottom:clamp(28px,3vw,40px)}
.lost-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:680px;margin:0 auto}
@media(max-width:560px){.lost-grid{grid-template-columns:1fr}}
.lost-card{display:flex;flex-direction:column;gap:4px;padding:22px;text-align:left;
background:#fff;border:1px solid var(--line);border-radius:var(--r);text-decoration:none;
transition:border-color .2s,transform .2s,box-shadow .2s}
.lost-card:hover{border-color:var(--red-wash);transform:translateY(-2px);
box-shadow:0 24px 46px -34px rgba(11,31,58,.4)}
.lost-t{font-size:1.05rem;font-weight:700;color:var(--navy)}
.lost-d{font-size:13px;color:var(--muted)}
/* form validation nudge */
.field-err,.field-err:focus{border-color:var(--red)!important;background:var(--red-tint)!important}
/* ---------- contact page ---------- */
.contact{padding:clamp(48px,6vw,84px) 0}
.contact-info .lede{margin:16px 0 0;max-width:42ch}
.contact-list{list-style:none;margin:clamp(28px,3vw,40px) 0 0;padding:0;display:flex;flex-direction:column;gap:20px}
.contact-list li{display:flex;gap:16px;align-items:flex-start}
.ci-ic{flex:0 0 46px;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
background:var(--red-tint);color:var(--red)}
.ci-ic svg{width:22px;height:22px}
.ci-lab{display:block;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.contact-list a{font-size:1.05rem;font-weight:700;color:var(--navy);text-decoration:none}
.contact-list a:hover{color:var(--red)}
.ci-plain{font-size:14.5px;line-height:1.6;color:var(--navy)}
.contact-social{display:flex;gap:10px;margin-top:30px}
.contact-social a{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
border:1px solid var(--line);color:var(--muted);transition:background .18s,color .18s,border-color .18s}
.contact-social a:hover{background:var(--red);border-color:var(--red);color:#fff}
.contact-social svg{width:18px;height:18px}
.contact .quote-form-card h2{font-size:clamp(1.35rem,2.2vw,1.7rem);font-weight:700;color:var(--navy);margin:8px 0 4px}
/* ---------- inline form success panel ---------- */
.form-done{background:#fff;border:1px solid var(--line);border-radius:var(--r);
padding:clamp(30px,3.4vw,44px);text-align:center;box-shadow:0 30px 70px -50px rgba(11,31,58,.5)}
.fd-check{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;margin:0 auto 20px;
background:var(--red-tint);color:var(--red)}
.fd-check svg{width:30px;height:30px}
.form-done h2{font-size:clamp(1.35rem,2.2vw,1.7rem);font-weight:700;color:var(--navy);margin-bottom:12px}
.form-done p{font-size:14.5px;line-height:1.7;color:var(--muted);max-width:44ch;margin:0 auto}
.fd-alt{margin-top:16px!important;font-size:13.5px!important}
.fd-alt a{color:var(--navy);font-weight:700;text-decoration:none;border-bottom:2px solid var(--red-wash)}
.fd-alt a:hover{color:var(--red);border-color:var(--red)}
/* ---------- heat pump flow ---------- */
.hpflow{margin-top:clamp(34px,4vw,48px)}
.hpflow-svg{display:block;width:100%;height:auto;max-width:980px;margin:0 auto}
.hpw{fill:none;stroke:var(--line);stroke-width:2.5;stroke-linecap:round}
.hpflow .fdot{fill:var(--red)}
.hpflow .fdot.air{fill:#7fb2e6}
.hpflow .fdot.warm{fill:#ff7a3d}
.hpflow .fdot.water{fill:#3aa6c9}
.hpflow-cap{max-width:66ch;margin:24px auto 0;text-align:center;font-size:14px;line-height:1.75;color:var(--muted)}
@media(max-width:640px){.hpflow-svg .clabel{font-size:15px}}
/* ---------- comparison lists (old vs modern heating) ---------- */
.cmp-list{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.cmp-list li{position:relative;padding-left:30px;font-size:14px;line-height:1.6;color:var(--muted)}
.cmp-list li::before{content:'';position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;
background-repeat:no-repeat;background-position:center;background-size:11px}
.cmp-list.old li::before{background-color:var(--mist);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2395a3b8' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E")}
.cmp-list.new li{color:var(--navy)}
.cmp-list.new li::before{background-color:var(--red-tint);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23da2828' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
/* ---------- Boiler Upgrade Scheme grant band ---------- */
.grant-band{position:relative;overflow:hidden;color:#fff;padding:clamp(48px,5.5vw,76px) 0;
background:radial-gradient(1000px 520px at 82% -20%,#1b3a66,var(--navy) 64%)}
.grant-band::before{content:"";position:absolute;inset:0;pointer-events:none;background:
radial-gradient(680px 420px at 8% 18%, rgba(255,255,255,.10), transparent 62%),
radial-gradient(720px 460px at 92% 86%, rgba(255,255,255,.08), transparent 64%)}
.grant-in{position:relative;z-index:1;display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(30px,4.5vw,64px);align-items:center}
@media(max-width:900px){.grant-in{grid-template-columns:1fr;gap:32px}}
.grant-band .h2{color:#fff;margin-top:10px}
.grant-band .sec-eyebrow{color:rgba(255,255,255,.72)}
.grant-copy p{margin-top:14px;font-size:14.5px;line-height:1.75;color:rgba(255,255,255,.8);max-width:60ch}
.grant-figures{display:flex;gap:16px}
@media(max-width:420px){.grant-figures{flex-direction:column}}
.grant-fig{flex:1;text-align:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
border-radius:var(--r);padding:clamp(22px,2.4vw,30px) 16px;backdrop-filter:blur(6px)}
.gf-amount{display:block;font-size:clamp(2.1rem,3.6vw,2.9rem);font-weight:800;letter-spacing:-.02em;color:#fff;line-height:1}
.gf-lab{display:block;margin-top:10px;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#ff9a90}
.grant-note{position:relative;z-index:1;margin-top:clamp(24px,3vw,36px);font-size:12px;line-height:1.65;color:rgba(255,255,255,.55);text-align:left}
/* ---------- mobile drawer ---------- */
.mobmenu{position:fixed;inset:0;z-index:200}
.mobmenu[hidden]{display:none}
.mm-scrim{position:absolute;inset:0;background:rgba(9,18,36,.5);backdrop-filter:blur(2px);
animation:mmFade .25s ease}
.mm-panel{position:absolute;top:0;right:0;bottom:0;width:min(360px,86vw);background:#fff;
display:flex;flex-direction:column;padding:20px clamp(20px,5vw,26px) 26px;
box-shadow:-30px 0 80px -30px rgba(9,18,36,.5);animation:mmSlide .3s cubic-bezier(.2,.7,.2,1);overflow-y:auto}
@keyframes mmFade{from{opacity:0}}
@keyframes mmSlide{from{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.mm-scrim,.mm-panel{animation:none}}
.mm-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.mm-head img{height:34px;width:auto}
.mm-x{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--navy);
cursor:pointer;display:grid;place-items:center;flex:none}
.mm-x svg{width:18px;height:18px}
.mm-x:hover{background:var(--mist)}
.mm-links{display:flex;flex-direction:column;padding:6px 0 18px}
.mm-links a,.mm-acc{display:flex;align-items:center;justify-content:space-between;gap:8px;
text-align:left;font:inherit;font-size:1.05rem;font-weight:600;color:var(--navy);
background:none;border:0;border-bottom:1px solid var(--line);padding:15px 2px;cursor:pointer;width:100%}
.mm-links a:hover,.mm-acc:hover{color:var(--red)}
.mm-acc svg{width:18px;height:18px;transition:transform .25s}
.mm-acc.open svg{transform:rotate(180deg)}
.mm-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.mm-acc.open + .mm-sub{grid-template-rows:1fr}
.mm-sub > *{overflow:hidden;min-height:0}
.mm-sub{overflow:hidden}
.mm-sub a{font-size:.95rem;font-weight:500;color:var(--muted);border-bottom:1px solid var(--line);
padding:13px 2px 13px 16px}
.mm-sub a:hover{color:var(--red)}
.mm-sub .mm-all{color:var(--red);font-weight:700}
.mm-panel > .btn{justify-content:center;width:100%;margin-top:auto}
/* ---------- solar "how it works": interactive photo ---------- */
.flow-photo{display:grid;grid-template-columns:1.5fr .9fr;gap:clamp(28px,3.4vw,56px);
align-items:center;margin-top:clamp(30px,3.4vw,44px)}
@media(max-width:1040px){.flow-photo{grid-template-columns:1fr;gap:30px}}
.fp-stage{position:relative;border-radius:var(--r);overflow:hidden;
box-shadow:0 30px 70px -46px rgba(11,25,50,.5)}
.fp-img{display:block;width:100%;height:auto}
/* the hotspot pins reuse the .hs component from the interactive house */
.flow-photo .flow-side .h2{margin:10px 0 14px}
.flow-photo .flow-side .lede{margin:0 0 22px;font-size:14.5px}
.fp-chips{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.fpc-row{display:flex;align-items:center;gap:8px}
.fpc-row .fp-chip{flex:1;text-align:center;padding-left:6px;padding-right:6px}
.fpc-arrow{flex:none;color:var(--muted);font-size:15px;font-weight:700}
.fpc-turn{display:flex;justify-content:flex-end;padding-right:calc(16.66% - 7px)}
.fp-chip{cursor:pointer;font:inherit;font-size:13px;font-weight:600;color:var(--navy);
background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 15px;
transition:background .18s,border-color .18s,color .18s}
.fp-chip:hover{border-color:var(--red-wash);color:var(--red)}
.fp-chip.is-on{background:var(--red);border-color:var(--red);color:#fff}
.fp-info{background:#fff;border:1px solid var(--line);border-radius:var(--r);
padding:clamp(22px,2.4vw,28px);min-height:130px}
.fp-info h3{font-size:1.15rem;font-weight:700;color:var(--navy);margin-bottom:10px}
.fp-info p{font-size:14px;line-height:1.75;color:var(--muted)}
/* flow overlay on the solar photo: thin connector lines + drifting dots showing the energy path */
.fp-flow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.fp-wires use{fill:none;stroke:rgba(255,255,255,.7);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:2 10}
.fp-dot{fill:#fff;filter:drop-shadow(0 0 5px rgba(255,255,255,.9))}
.fp-dot.warm{fill:#ffce4f;filter:drop-shadow(0 0 6px rgba(255,206,79,.9))}
.fp-dot.store{fill:#2fd18a;filter:drop-shadow(0 0 6px rgba(47,209,138,.9))}
.fp-dot.export{fill:#4aa3ff;filter:drop-shadow(0 0 6px rgba(74,163,255,.9))}
.fp-dot.paid{fill:#ffce4f;filter:drop-shadow(0 0 7px rgba(255,206,79,1))}
.fp-stage .hs{z-index:2}
.hs.paid{background:#c8901f}
.hs.paid.on{background:#e0a52a;box-shadow:0 8px 20px -6px rgba(11,25,50,.55),0 0 0 8px rgba(224,165,42,.2),0 0 46px 14px rgba(224,165,42,.3)}
@media (prefers-reduced-motion:reduce){.fp-dot animateMotion{display:none}.fp-dot{display:none}}
/* ============================================================================
ACCREDITATION LOGO SET (added 2026-07-17)
One markup pattern for every accreditation strip. Replaces the old monochrome
white-SVG treatment: the real supplied logos are full-colour raster, so on dark
backgrounds each sits on a frosted light card (.acc-set.on-dark) rather than
being knocked out to white. Cards keep every logo legible regardless of whether
the source art has transparency (HIES/PAS2030/GasSafe) or a white box (the ISOs,
Kiwa, Constructionline).
========================================================================== */
.acc-set{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));
gap:10px;width:100%;align-items:stretch}
.acc{display:grid;place-items:center;padding:9px 11px;border-radius:12px;
background:#fff;border:1px solid var(--line,#e6e9ee);min-height:70px}
/* logos vary from 0.7 (tall) to 2.4 (wide) aspect, so cap BOTH axes and let
object-fit letterbox each one: sizing by height alone renders the tall
badges (Gas Safe, Green Deal) as illegible specks next to the wide ones. */
.acc img{max-height:44px;max-width:100%;width:auto;height:auto;object-fit:contain;display:block}
/* on a dark section: frosted light card behind each logo */
.acc-set.on-dark .acc{background:rgba(255,255,255,.92);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.55);
box-shadow:0 1px 2px rgba(0,0,0,.18)}
/* full-width strip (homepage trust foot + why-arktek): 14 logos, forced to an even
7x2 so the row never wraps to a ragged orphan count. */
.acc-set.wide{grid-template-columns:repeat(7,1fr);gap:12px}
@media(max-width:1180px){.acc-set.wide{grid-template-columns:repeat(5,1fr)}}
@media(max-width:820px){.acc-set.wide{grid-template-columns:repeat(4,1fr)}}
@media(max-width:520px){.acc-set.wide{grid-template-columns:repeat(3,1fr)}}
/* footer grid: tighter, sits under the blurb */
/* footer: 14 logos as a 5-wide grid (5/5/4) under the brand blurb. auto-fit gave a
ragged 4/4/4/2. */
.acc-set.foot{grid-template-columns:repeat(5,1fr);gap:7px;max-width:none;margin-top:22px}
@media(max-width:900px){.acc-set.foot{grid-template-columns:repeat(6,1fr)}}
@media(max-width:520px){.acc-set.foot{grid-template-columns:repeat(4,1fr)}}
.acc-set.foot .acc{padding:7px 8px;min-height:52px;border-radius:10px}
.acc-set.foot .acc img{max-height:30px}
/* hero pill: wider now it carries the full set */
.trust-pill.pill-wide{max-width:min(1180px,calc(100% - 32px));flex-wrap:wrap;
gap:14px 20px;padding:16px 26px}
.trust-pill.pill-wide img{height:34px}
@media(max-width:900px){
.trust-pill.pill-wide{gap:12px 14px;padding:12px 14px}
.trust-pill.pill-wide img{height:24px}
.acc-set{grid-template-columns:repeat(auto-fit,minmax(80px,1fr))}
.acc{min-height:56px}
.acc img{max-height:32px}
}
/* ============================================================================
ACCREDITATIONS v4 (2026-07-20) — motion removed, set curated.
(a) .trust-row — off-white band under the hero; 7 consumer badges, STATIC.
(b) .acc-panel — frosted box on dark; same 7 badges.
(c) .acc-secondary — why-arktek only; the procurement badges that were diluting (a) and (b).
v3 scrolled 14 logos. The motion read as a generic partner marquee, competed with the hero
CTA, and gave ISO/Constructionline the same weight as MCS and Gas Safe.
========================================================================== */
/* Static curated accreditation row. Was an infinite-scroll marquee of 14 logos; the motion read
as a generic "brands we work with" widget, competed with the hero CTA, and 14 equal-weight logos
buried the three a homeowner actually recognises. Now 7 consumer-facing badges, no animation.
The procurement badges (ISO, Kiwa, Constructionline, SafeContractor, Green Deal) live on
why-arktek.html, where a commercial reader will look for them. */
.trust-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:22px 52px;
width:100%;background:var(--mist);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
padding:22px clamp(16px,4vw,40px)}
.trust-row img{height:40px;width:auto;flex:0 0 auto;object-fit:contain}
@media(max-width:700px){.trust-row{gap:18px 30px;padding:16px}.trust-row img{height:30px}}
.acc-panel{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
gap:24px 40px;width:100%;padding:26px 30px;border-radius:18px;
background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,.5);box-shadow:0 12px 34px rgba(0,0,0,.18)}
.acc-panel img{height:42px;width:auto;object-fit:contain}
.acc-panel.foot-accred{grid-column:1 / -1;margin-top:12px}
@media(max-width:700px){.acc-panel{gap:18px 26px;padding:20px}.acc-panel img{height:32px}}
/* Secondary credentials, why-arktek only. Real accreditations, but procurement-facing, so they sit
here rather than diluting the homeowner trust row on every page. */
.acc-secondary{max-width:900px;margin:0 auto;text-align:center}
.acc-secondary h3{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
color:var(--muted);margin-bottom:18px}
.acc-secondary .acc-grid{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:24px 44px}
.acc-secondary img{height:38px;width:auto;object-fit:contain;opacity:.85}
@media(max-width:700px){.acc-secondary img{height:30px}.acc-secondary .acc-grid{gap:18px 28px}}