/* <button> carries a UA default border of 2px OUTSET, a 3D bevel that renders
   light on the top-left and dark on the bottom-right. With border-radius:100px that
   shows as pale arcs around the pill - the "partial white corners" on the nav CTA.
   .btn already set border:none; these did not. */
:root{--ink:#0a0d08;--ink2:#141a11;--paper:#fff;--cream:#f5f7f0;--neon:#C3F53C;--neon-d:#7fae00;--neon-txt:#547800;--muted:#5a625c;--line:#e4e8e0}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;color:var(--ink);background:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.w{max-width:1180px;margin:0 auto;padding:0 40px;position:relative;z-index:2}
.disp{font-family:'Bebas Neue',sans-serif;text-transform:uppercase;letter-spacing:.015em;line-height:.88}
.eyebrow{font-weight:700;font-size:13px;letter-spacing:.15em;text-transform:uppercase;color:var(--neon-txt)}
.sec-dark .eyebrow{color:var(--neon)}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--neon);color:var(--ink);font-family:'Bebas Neue';font-size:23px;letter-spacing:.5px;padding:15px 32px;border-radius:100px;cursor:pointer;border:none;transition:transform .15s,filter .15s}
/* A .btn is inline-flex with gap:10px, so ANY element inside the label becomes a flex
   item and the gap lands on both sides of it - 10px either side of the injected
   review count in "Read all 775+ reviews". The label is wrapped in .btn-t so the
   button has ONE flex child and the gap can only separate label from icon. */
.btn>.btn-t{display:inline;white-space:normal}

.btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn-lg{font-size:28px;padding:18px 42px}
.sec{padding:100px 0;position:relative;overflow:hidden}
.sec-dark{background:var(--ink);color:#fff}
.sec-cream{background:var(--cream)}
h2.disp{font-size:clamp(42px,6.2vw,92px)}
.lead{font-size:clamp(17px,1.7vw,21px);line-height:1.72;color:var(--muted);font-weight:400}
.sec-dark .lead{color:rgba(255,255,255,.72)}
.neon{color:var(--neon)}
/* EFFECTS: blobs + stripes */
.blob{position:absolute;border-radius:50%;filter:blur(100px);opacity:.5;pointer-events:none;z-index:0}
.blob.a{width:560px;height:560px;background:radial-gradient(circle,#C3F53C,transparent 68%);top:-160px;left:-120px}
.blob.b{width:520px;height:520px;background:radial-gradient(circle,#1f9d5c,transparent 66%);bottom:-180px;right:-120px;opacity:.42}
.sec-cream .blob,.sec:not(.sec-dark) .blob{opacity:.22}
.stripes{position:absolute;pointer-events:none;z-index:1}
.stripe{position:absolute;height:30px;border-radius:6px;transform:rotate(-19deg)}
.stripe.solid{background:var(--neon)}
.stripe.outline{border:3px solid var(--neon);background:transparent}
.stripe.pale{background:rgba(195,245,60,.42)}
.stripes-tr{top:0;right:0}
.stripes-tr .pale{width:460px;top:-16px;right:-80px;transform-origin:right center}
.stripes-tr .solid{width:300px;top:42px;right:-30px;transform-origin:right center}
.stripes-tr .outline{width:390px;top:100px;right:-120px;transform-origin:right center}
.stripes-bl{bottom:0;left:0}
.stripes-bl .pale{width:460px;bottom:-16px;left:-80px;transform-origin:left center}
.stripes-bl .solid{width:300px;bottom:42px;left:-30px;transform-origin:left center}
.stripes-bl .outline{width:390px;bottom:100px;left:-120px;transform-origin:left center}
/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:20px 48px;transition:background .25s ease,backdrop-filter .25s ease,padding .2s ease}
.nav.scrolled{background:rgba(10,13,8,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:12px 48px;border-bottom:1px solid rgba(255,255,255,.08)}
.nav .brand{font-family:'Bebas Neue';font-size:26px;letter-spacing:2px;color:var(--neon)}
.nav a.ph{color:var(--neon);font-weight:700;display:inline-flex;align-items:center;gap:8px;text-decoration:none}.nav a.ph svg{width:16px;height:16px;flex-shrink:0}
.nav .right{display:flex;align-items:center;gap:22px}
.nav .menu{color:#fff;font-weight:600}
/* HERO */
.hero{position:relative;min-height:100vh;color:#fff;display:flex;flex-direction:column;justify-content:center;text-align:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:url('/wp-content/uploads/kk/img/s4g-home-hero-2026.webp') center/cover;opacity:.42;z-index:0}
.hero-tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,11,7,.8),rgba(8,11,7,.5) 42%,rgba(8,11,7,.95));z-index:0}
.hero .blob{opacity:.4}
.hero-in{position:relative;z-index:2;padding:120px 24px 80px}
.hero h1{font-size:clamp(56px,10vw,150px)}
.hero h1 .star{color:var(--neon)}
.hero-sub{max-width:620px;margin:24px auto 0;font-size:clamp(17px,1.8vw,22px);color:rgba(255,255,255,.86);line-height:1.5}
.capture{margin:36px auto 0;display:flex;background:#fff;border-radius:100px;padding:7px;max-width:660px;box-shadow:0 24px 60px -16px rgba(0,0,0,.6)}
.capture input{flex:1;border:none;outline:none;background:none;font-size:15px;padding:0 22px;color:var(--ink);min-width:0}
.capture .btn{white-space:nowrap}
.hero-rate{margin-top:20px;font-size:14px;color:rgba(255,255,255,.72)}
.hero-rate .st{color:#ffb400;letter-spacing:2px}
.hero-note{margin-top:8px;font-size:13px;color:rgba(255,255,255,.5)}
.hero-wedge{display:none}
/* TICKER */
.ticker{background:var(--ink);border-top:2px solid var(--neon);border-bottom:2px solid var(--neon);overflow:hidden;white-space:nowrap;padding:16px 0;margin:52px 0 0;width:100vw;margin-left:calc(50% - 50vw);border-radius:0;max-width:none}
.ticker-in{display:inline-flex;gap:0;animation:tick 34s linear infinite}
.ti{font-family:'Bebas Neue';font-size:22px;letter-spacing:1px}
.ti.w{color:#fff}
.ti.n{color:var(--neon)}
.tstar{color:rgba(255,255,255,.32);padding:0 22px;font-size:15px;display:inline-flex;align-items:center}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* STORY */
.story{max-width:760px;margin:0 auto}
.story h2{margin-bottom:28px}
.story p{font-size:clamp(19px,2vw,24px);line-height:1.5;margin:0 0 22px;font-weight:500}
.story .hl{background:var(--neon);color:var(--ink);padding:0 6px}
.story .big{font-family:'Bebas Neue';text-transform:uppercase;font-size:clamp(30px,4vw,52px);line-height:.95;font-weight:400}
/* NUMBERS */
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);border-radius:20px;overflow:hidden;margin-top:50px}
.num{background:var(--ink);padding:40px 28px;text-align:center}
.num .n{font-family:'Bebas Neue';font-size:clamp(46px,6vw,78px);line-height:1;color:var(--neon)}
.num .l{font-size:13px;color:rgba(255,255,255,.6);margin-top:8px;font-weight:500}
/* PRESS */
.press{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:34px 44px;margin-top:40px}
.press img{height:29px;width:auto;filter:grayscale(100%);opacity:.6}
/* CARDS */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:50px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:40px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:22px 22px}
@media(max-width:760px){.card{padding:18px 18px}}
.sec-cream .card{background:#fff}
.sec-dark .card{background:var(--ink2);border-color:rgba(255,255,255,.1)}
.card .ico{width:52px;height:52px;border-radius:12px;background:var(--neon);display:grid;place-items:center;margin-bottom:18px}
.card h3{font-family:'Bebas Neue';font-size:26px;letter-spacing:.5px;margin-bottom:8px}
.card p{font-size:14.5px;line-height:1.6;color:var(--muted)}
.sec-dark .card p{color:rgba(255,255,255,.62)}
/* WHY list */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:50px}
.why-item{border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:28px 24px;background:var(--ink2)}
.why-item .k{font-family:'Bebas Neue';font-size:23px;color:var(--neon);margin-bottom:8px}
.why-item p{font-size:14px;color:rgba(255,255,255,.66);line-height:1.55}
/* BRANDS */
.brands{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px}
.brandcell{background:#fff;border:1px solid var(--line);border-radius:16px;min-height:130px;display:grid;place-items:center;padding:30px}
.brandcell img{max-height:52px;max-width:180px;width:auto;object-fit:contain}
/* CASES */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:46px}
.case{position:relative;min-height:340px;border-radius:18px;overflow:hidden;background-color:#000;background-size:cover;background-position:center;display:flex;align-items:flex-end}
.case::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,10,7,.92),transparent 65%)}
.case-in{position:relative;z-index:1;padding:26px}
.case-tag{display:inline-block;background:var(--neon);color:var(--ink);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:5px;margin-bottom:10px}
.case h3{font-family:'Bebas Neue';font-size:28px;color:#fff;letter-spacing:.5px}
.case p{font-size:13.5px;color:rgba(255,255,255,.72);margin-top:6px;line-height:1.5}
/* VIDS */
.vids{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:44px}
.vid{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background-color:#000;background-size:cover;background-position:center}
.vid .play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;background:rgba(195,245,60,.92);display:grid;place-items:center}
/* CALC */
.calc-wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.calc-slider{margin-top:24px}
.calc-slider label{display:block;font-size:15px;color:rgba(255,255,255,.8);margin-bottom:14px}
.calc-slider b{color:var(--neon);font-size:22px;font-family:'Bebas Neue'}
.calc-slider input[type=range]{-webkit-appearance:none;width:100%;height:8px;border-radius:10px;background:linear-gradient(90deg,var(--neon) var(--p,25%),rgba(255,255,255,.18) var(--p,25%));outline:none}
.calc-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--neon);cursor:pointer;border:3px solid #0a0d08;box-shadow:0 0 0 2px var(--neon)}
.calc-out{background:var(--ink2);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:30px}
.calc-row{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.calc-row span{color:rgba(255,255,255,.66);font-size:14px}
.calc-row b{font-family:'Bebas Neue';font-size:30px;color:var(--neon);letter-spacing:.5px}
/* REVIEWS */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:46px}
.rev{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px}
.rev .st{color:#ffb400;letter-spacing:2px;font-size:15px}
.rev p{font-size:15px;line-height:1.6;margin:14px 0 16px}
.rev .who{font-weight:700;font-size:14px}
.rev .loc{font-size:13px;color:var(--muted)}
/* MONITOR */
.monitor-card{background:var(--ink2);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:30px}
.mon-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.mon-row span{color:rgba(255,255,255,.6);font-size:14px}
.mon-row b{font-family:'Bebas Neue';font-size:26px}
.mon-bar{height:8px;border-radius:10px;background:rgba(255,255,255,.14);margin:16px 0 12px;overflow:hidden}
.mon-bar span{display:block;height:100%;background:var(--neon)}
.mon-note{font-size:12px;color:rgba(255,255,255,.45)}
/* BAND */
.band{background:var(--neon);color:var(--ink);text-align:center;padding:80px 0}
/* PROCESS */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:50px}
.step .no{font-family:'Bebas Neue';font-size:64px;color:var(--neon-txt);line-height:1}
.step h3{font-family:'Bebas Neue';font-size:26px;margin:6px 0 8px}
.step p{color:var(--muted);font-size:15px;line-height:1.6}
/* CHIPS + COMM FORM */
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:36px}
.chip{border:1px solid rgba(255,255,255,.25);color:#fff;font-size:14px;font-weight:500;padding:9px 16px;border-radius:100px;transition:all .15s}
.chip:hover{background:var(--neon);color:var(--ink);border-color:var(--neon)}
.commform{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:640px;margin:34px auto 0}
.commform input,.commform select{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:14px 16px;color:#fff;font-family:Inter;font-size:15px}
.commform input::placeholder{color:rgba(255,255,255,.45)}
/* CERTS */
.certs{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:44px}
.certcell{background:#fff;border:1px solid var(--line);border-radius:14px;min-height:96px;display:grid;place-items:center;padding:20px}
.certcell img{max-height:42px;width:auto;object-fit:contain}
/* LOCS */
.locs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:40px}
.loc{border:1.5px solid rgba(10,13,8,.16);background:transparent;color:var(--ink);font-size:14px;font-weight:600;padding:10px 20px;border-radius:100px;transition:all .18s}
.loc:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-2px)}
/* The coverage strip lists 17 towns out of 56 live location pages, with no way
   through to the rest. This pill is the route to the hub, so it is filled rather
   than outlined - it is a destination, not another town. */
.loc.loc-all{background:var(--ink);color:#fff;border-color:var(--ink)}
.loc.loc-all:hover{filter:brightness(1.35);transform:translateY(-2px)}

/* FAQ */
.faq{max-width:820px;margin:44px auto 0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:none}
.faq summary{list-style:none;cursor:pointer;padding:22px 26px;font-weight:600;font-size:16px;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;color:var(--neon-txt)}
.faq details[open] summary::after{content:"\2212"}
.faq .a{padding:0 26px 22px;color:var(--muted);font-size:14.5px;line-height:1.7}
/* FINAL + FOOT */
.final{text-align:center}
.final h2{font-size:clamp(44px,7vw,104px)}
.final h2 .star{color:var(--neon)}
.foot{background:var(--ink);color:rgba(255,255,255,.5);padding:44px 0;font-size:13px;border-top:1px solid rgba(255,255,255,.1)}
.foot .brand{font-family:'Bebas Neue';font-size:22px;letter-spacing:2px;color:var(--neon)}
@media(max-width:820px){.nums,.grid3,.why,.revs,.steps,.brands,.cases{grid-template-columns:1fr}.grid2,.vids,.calc-wrap,.comm-grid,.commform{grid-template-columns:1fr}.certs{grid-template-columns:repeat(3,1fr)}.w{padding:0 22px}.nav{padding:16px 22px}
.nav.scrolled{padding:10px 22px}.nav a.ph span{display:none}.nav a.ph svg{width:19px;height:19px}}
.lib-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:44px}
.lib-card{background:var(--ink2);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:32px;transition:transform .15s,border-color .15s;display:block}
.lib-card:hover{transform:translateY(-3px);border-color:var(--neon)}
.lib-type{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--neon)}
.lib-card h3{font-family:'Bebas Neue';font-size:32px;letter-spacing:.5px;color:#fff;margin:8px 0 14px;text-transform:uppercase}
.lib-links{display:flex;flex-wrap:wrap;gap:8px}
.lib-links span{font-size:12.5px;color:rgba(255,255,255,.78);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:100px;padding:6px 13px}
.lib-go{margin-top:18px;font-family:'Bebas Neue';font-size:19px;letter-spacing:.5px;color:var(--neon)}
@media(max-width:820px){.lib-grid{grid-template-columns:1fr}}
.hero-proof{margin-top:14px;font-size:13px;color:rgba(255,255,255,.6);display:flex;gap:8px 18px;justify-content:center;flex-wrap:wrap}
.hero-proof b{color:#fff;font-family:'Bebas Neue';font-size:17px;letter-spacing:.5px}
.app-card{background:#fff;border-radius:18px;padding:26px;color:var(--ink)}
.app-card .ah{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.04em}
.app-card .abig{font-family:'Bebas Neue';font-size:58px;color:#178049;line-height:1;margin:6px 0 2px}
.app-card .arow{display:flex;justify-content:space-between;font-size:13px;padding:10px 0;border-top:1px solid var(--line)}
.app-card .anote{font-size:11px;color:var(--muted);margin-top:12px}
a.certcell{position:relative;text-decoration:none}
a.certcell .cert-vf{position:absolute;bottom:6px;right:9px;font-size:9px;font-weight:700;color:var(--neon-txt);opacity:0;transition:opacity .15s}
a.certcell:hover .cert-vf{opacity:1}
.vtr-btn{position:absolute;top:12px;right:12px;z-index:3;display:inline-flex;align-items:center;gap:6px;background:rgba(13,20,16,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:11px;font-weight:600;padding:6px 11px;border-radius:980px;cursor:pointer}
.vtr-btn:hover{background:rgba(13,20,16,.82)}
.tr-modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:24px}
.tr-modal.open{display:flex}
.tr-modal-backdrop{position:absolute;inset:0;background:rgba(6,10,7,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.tr-modal-panel{position:relative;background:#fff;color:var(--ink);border-radius:18px;max-width:640px;width:100%;max-height:82vh;display:flex;flex-direction:column;overflow:hidden}
.tr-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px 24px;border-bottom:1px solid var(--line)}
.tr-modal-eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--neon-txt);display:block;margin-bottom:5px}
.tr-modal-head h3{font-family:'Bebas Neue';font-size:24px;letter-spacing:.5px}
.tr-modal-x{background:var(--ivory-2,#f4f6f0);border:none;width:34px;height:34px;border-radius:50%;font-size:20px;cursor:pointer;color:var(--muted);flex-shrink:0}
.tr-modal-body{padding:22px 24px;overflow-y:auto}
.tr-modal-body p{font-size:14px;line-height:1.72;color:var(--muted);margin:0 0 12px}
.letter-toggle{display:inline-flex;background:var(--ink);border-radius:100px;padding:5px;gap:4px;margin-top:24px}
.letter-toggle button{background:none;border:none;color:rgba(255,255,255,.72);font-family:'Bebas Neue';font-size:18px;letter-spacing:.5px;padding:10px 22px;border-radius:100px;cursor:pointer;transition:all .15s}
.letter-toggle button.on{background:var(--neon);color:var(--ink)}
.letter{max-width:680px;margin:52px auto 0}
.letter p{font-size:clamp(17px,1.6vw,19px);line-height:1.85;margin:0 0 26px;color:#1a1a1a}
.letter .pull{font-family:'Bebas Neue';text-transform:uppercase;font-size:clamp(28px,4.2vw,50px);line-height:1.02;margin:44px 0;color:var(--ink)}
.letter .hl{background:var(--neon);padding:0 6px}
.letter .sig{font-weight:700}
.letter .ps{margin-top:24px;font-style:italic;color:var(--muted);border-top:1px solid var(--line);padding-top:18px;font-size:16px}
.letter-hide{display:none}
.brand-marquee{overflow:hidden;margin-top:44px;-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.brand-track{display:flex;gap:0;width:max-content;align-items:center;animation:bscroll 28s linear infinite}
.brand-marquee:hover .brand-track{animation-play-state:paused}
.brand-track img{height:46px;width:auto;max-width:170px;object-fit:contain;flex-shrink:0}
@keyframes bscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.case-marquee{overflow:hidden;margin-top:44px;width:100vw;margin-left:calc(50% - 50vw);-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.case-track{display:flex;gap:0;width:max-content;animation:cscroll 55s linear infinite}
.case-marquee:hover .case-track{animation-play-state:paused}
.case-card{position:relative;width:340px;height:460px;flex-shrink:0;border-radius:18px;overflow:hidden;background-color:#0c120b;background-size:cover;background-position:center;display:flex;align-items:flex-end}
.case-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,10,7,.94),transparent 62%)}
.case-card-in{position:relative;z-index:1;padding:26px}
.case-card-tag{position:absolute;top:16px;left:16px;z-index:2;display:inline-block;background:var(--neon);color:var(--ink);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 11px;border-radius:5px}
.case-card h3{font-family:'Bebas Neue';font-size:30px;color:#fff;letter-spacing:.5px;line-height:1}
.case-card p{font-size:13px;color:rgba(255,255,255,.74);margin-top:8px;line-height:1.4;min-height:37px}
@keyframes cscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================================
   KING KONG DIAGONAL SYSTEM - single consolidated source of truth
   (replaces the 4 previously-stacked patch blocks; each selector declared once,
    source-order-last so no !important needed).
   - Sections carry NO z-index -> never a stacking context -> every skewed
     ::before panel sits at z:-1 in the ROOT layer -> ALL content always paints
     above ALL panels (clipping is structurally impossible).
   - Same --slice angle + transform-origin:center + zero margin -> adjacent
     diagonal edges are parallel lines through the same centre => they coincide
     into one clean seam.
   - ::before overshoots 2px top & bottom so the two panels always overlap
     across the seam regardless of sub-pixel rounding (no hairline gap).
   - Padding clamp >= corner-rise (width/2 x tan(angle)) keeps content clear.
   ============================================================================ */
:root{--slice:-8deg;--sage:#F0F9E5;--green-solid:#6EE268;--green-pale:#ECFEC6}
@media(min-width:768px){:root{--slice:-11deg}}
html,body{overflow-x:clip}                 /* contain intentional stripe edge-bleed */
.blob{display:none}

/* Padding must EXCEED the diagonal, not match it. .sec::before is skewY(-8deg), so a
   band intrudes into its neighbour by tan(8deg) x vw/2 = 7.03vw at the viewport edge.
   Padding was 7vw, which is the same number, so content touched the next section's
   diagonal exactly: measured 101px of skew against 100.8px of padding. 8.4vw leaves
   about 20px of daylight at 1440 and 26px at 1920. */
.sec{position:relative;z-index:auto;background:transparent;overflow:visible;margin-top:0;padding-top:clamp(72px,8.4vw,168px);padding-bottom:clamp(72px,8.4vw,168px)}
.sec::before{content:"";position:absolute;left:0;right:0;top:-2px;bottom:-2px;z-index:-1;transform:skewY(var(--slice));transform-origin:center;background:var(--paper)}
.sec-cream::before{background:var(--cream)}
#letter{z-index:1}
.sec-sage::before{background:var(--sage)}
.sec-dark::before{background:var(--ink)}#cost-waiting::before{background:var(--neon)}
.sec .w{position:relative;z-index:1}

.stripes{transform:skewY(var(--slice));transform-origin:center;z-index:0}
.stripe{transform:none;border-radius:0}
.stripe.solid{background:var(--green-solid)}
.stripe.pale{background:var(--green-pale);opacity:1}
.stripe.outline{border:3px solid var(--green-pale);background:transparent}

.hero-wedge{transform:skewY(var(--slice));transform-origin:center}

/* mobile: keep the long hero placeholder from truncating */

/* ===== FOOTER - ported verbatim from our v2 version (home-v2-preview) ===== */
.footer{--charcoal:#0d1410;--white:#fff;--orange:#1f9d5c;--display:'Bebas Neue',sans-serif;background:var(--charcoal);padding:60px 0 30px;border-top:1px solid rgba(195,245,60,.16);position:relative;z-index:2}
.footer-top-row{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr 1fr 1fr;gap:28px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.08)}
.f-brand-block{padding-right:8px}
.f-logo{font-family:var(--display);font-size:20px;color:var(--white);display:flex;align-items:center;gap:9px;margin-bottom:16px}
.f-legal-text{font-size:12px;font-weight:300;color:rgba(255,255,255,.32);line-height:1.65;margin-bottom:18px}
.f-address{display:flex;flex-direction:column;gap:2px;margin-bottom:16px;font-size:13px;color:rgba(255,255,255,.5)}
.f-address-label{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.25)}
.f-contact-item{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--orange);transition:color .15s;width:fit-content}
.f-contact-item svg{color:var(--orange);flex-shrink:0}
.f-contact-item:hover{color:var(--white)}
.f-social{display:flex;gap:10px}
.f-social-icon{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;color:rgba(255,255,255,.5);transition:all .2s;flex-shrink:0}
.f-social-icon:hover{background:var(--orange);border-color:var(--orange);color:var(--white)}
.f-col h4{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.25);margin-bottom:16px}
.f-col ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.f-col ul li a{font-size:13px;font-weight:300;color:rgba(255,255,255,.4)}
.f-col ul li a:hover{color:var(--white)}
.footer-locations{padding:32px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.footer-locations h4{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.25);margin-bottom:16px}
.f-locations-grid{display:flex;flex-wrap:wrap;gap:10px 20px}
.f-locations-grid a{font-size:13px;font-weight:300;color:rgba(255,255,255,.4)}
.f-locations-grid a:hover{color:var(--white)}
/* the see-all that ends the locations grid. WEIGHT only, no colour: the town links render
   full white on most templates and .4 on others, so a fixed colour here made the see-all
   DIMMER than the list on the majority of pages. Element selector under an existing
   class, so it cannot collide with anything in the one-file cascade. */
.f-locations-grid a b{font-weight:600}

.footer-bot{display:flex;justify-content:space-between;align-items:flex-start;padding-top:26px;flex-wrap:wrap;gap:20px}
.footer-bot-l{max-width:540px}
/* 6px left the Add to Preferred Sources button crowding the line above it. */
.f-app-note{font-size:12px;color:rgba(255,255,255,.35);font-weight:300;margin-bottom:14px}
.f-app-badges{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.f-trademark-note{font-size:11px;color:rgba(255,255,255,.2);font-weight:300;margin-bottom:12px}
.f-legal{font-size:12px;color:rgba(255,255,255,.2);font-weight:300}
.logo-sun{width:30px;height:30px;background:var(--orange);display:grid;place-items:center}
.app-badge{display:inline-flex;align-items:center;gap:9px;background:#000;border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:7px 14px;color:var(--white);transition:all .2s}
.app-badge:hover{background:#1a1a1a;border-color:rgba(255,255,255,.3)}
.app-badge span{display:flex;flex-direction:column;line-height:1.15}
.app-badge small{font-size:9px;font-weight:400;color:rgba(255,255,255,.75);letter-spacing:.02em}
.app-badge strong{font-size:14px;font-weight:600;letter-spacing:.01em}
@media(max-width:1100px){.footer-top-row{grid-template-columns:1fr 1fr 1fr}.f-brand-block{grid-column:1/-1}.f-locations-grid{gap:8px 16px}}
@media(max-width:768px){.footer-top-row{grid-template-columns:1fr}.footer-bot{flex-direction:column;align-items:flex-start}}

/* footer typography aligned to KK (Bebas display + tighter small-caps labels) */
.f-logo{font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:.04em}
.f-col h4,.footer-locations h4,.f-address-label{font-family:'Inter',sans-serif;font-weight:700;letter-spacing:.14em}
.f-col ul li a,.f-locations-grid a{font-family:'Inter',sans-serif}

/* ===== KK-style video results (big feature + auto-scrolling strip) ===== */
.vfeature{position:relative;display:block;aspect-ratio:16/9;max-width:940px;margin:46px auto 0;border-radius:22px;overflow:hidden;background:#000 center/cover;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.vfeature::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,10,7,.88),transparent 52%)}
.play-lg{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:112px;height:112px;border-radius:50%;background:var(--neon);display:grid;place-items:center;z-index:2;box-shadow:0 10px 34px rgba(0,0,0,.45);transition:transform .2s}
.vfeature:hover .play-lg{transform:translate(-50%,-50%) scale(1.06)}
.vfeature-cap{position:absolute;left:0;bottom:0;padding:30px;z-index:2;text-align:left}
.vtag,.vtag2{display:inline-block;background:var(--neon);color:var(--ink);font-weight:800;letter-spacing:.05em;text-transform:uppercase;border-radius:5px}
.vtag{font-size:11px;padding:4px 11px;margin-bottom:11px}
.vtag2{font-size:9px;padding:3px 8px;margin-bottom:7px}
.vfeature-cap h3{font-family:'Bebas Neue',sans-serif;font-size:36px;color:#fff;letter-spacing:.5px;line-height:1}
.vstrip-marquee{margin-top:20px;overflow:hidden;width:100vw;margin-left:calc(50% - 50vw);-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.vstrip-track{display:flex;gap:0;width:max-content;animation:vscroll 42s linear infinite}
.vstrip-marquee:hover .vstrip-track{animation-play-state:paused}
@keyframes vscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.vsmall{position:relative;flex-shrink:0;width:310px;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000 center/cover;display:block}
.vsmall::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,10,7,.82),transparent 58%)}
.vsmall .play{position:absolute;inset:0;margin:auto;width:66px;height:66px;border-radius:50%;background:var(--neon);display:grid;place-items:center;z-index:2}
.vsmall-cap{position:absolute;left:0;bottom:0;padding:16px;z-index:2}
.vsmall-cap h4{font-family:'Bebas Neue',sans-serif;font-size:21px;color:#fff;letter-spacing:.4px;line-height:1}
.vsoon{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;flex-shrink:0;width:310px;aspect-ratio:16/9;border-radius:14px;border:1.5px dashed rgba(255,255,255,.22);color:rgba(255,255,255,.55);font-size:13px;font-weight:600;line-height:1.35;text-align:center;padding:20px}
.vtr-btn{z-index:3}
@media(max-width:600px){.vfeature-cap h3{font-size:26px}.vfeature-cap{padding:20px}.play-lg{width:82px;height:82px}.vsmall,.vsoon{width:250px}}

/* ===== floating utilities: freephone + whatsapp + back-to-top ===== */
.s4g-fab{position:fixed;right:20px;bottom:20px;z-index:900;display:flex;flex-direction:column;gap:12px}
.fab{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;box-shadow:0 6px 22px rgba(0,0,0,.28);cursor:pointer;border:none;transition:transform .15s,box-shadow .15s;text-decoration:none}
.fab:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.34)}
.fab-call{background:#12140f;color:var(--neon)}
.fab-wa{background:#25D366;color:#fff}
.fab-top{background:#0a0d08;color:#fff;opacity:0;pointer-events:none}
.fab-top.show{opacity:1;pointer-events:auto}
@media(max-width:600px){.s4g-fab{right:14px;bottom:14px;gap:10px}.fab{width:50px;height:50px}}

/* thumbnails are pre-designed posters (title/tag baked in) -> hide our overlay captions + gradient */
.vfeature-cap,.vsmall-cap{display:none!important}
.vfeature::after,.vsmall::after{display:none!important}

/* 2. press two-row opposite marquees */
.press-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);margin-top:36px}
.press-marquee+.press-marquee{margin-top:24px}
.press-row{display:flex;align-items:center;gap:0;width:max-content}
.press-row.l{animation:pressL 36s linear infinite}
.press-row.r{animation:pressR 44s linear infinite}
.press-marquee:hover .press-row{animation-play-state:paused}
@keyframes pressL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes pressR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.press-row img{height:30px;width:auto;filter:grayscale(100%);opacity:.55;flex-shrink:0}

/* 3. animated play button (pulsing ring) */
.play-lg{position:absolute}
.play-lg::before,.play-lg::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(195,245,60,.55);animation:playPulse 2.2s ease-out infinite}
.play-lg::after{animation-delay:1.1s}
@keyframes playPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}}
.vsmall .play{position:absolute}
.vsmall .play::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(195,245,60,.5);animation:playPulse 2.2s ease-out infinite}

/* 4. compliance marquee, no white box */
.cert-marquee{overflow:hidden;margin-top:44px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.cert-track{display:flex;align-items:center;gap:0;width:max-content;animation:certScroll 30s linear infinite}
.cert-marquee:hover .cert-track{animation-play-state:paused}
@keyframes certScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.cert-marquee .certcell{position:relative;flex-shrink:0;background:none;border:none;border-radius:0;min-height:auto;padding:0;display:grid;place-items:center}
.cert-marquee .certcell img{max-height:56px;width:auto;object-fit:contain;filter:none}
.cert-marquee .cert-vf{display:none}
.cert-marquee .certcell:hover .cert-vf{opacity:1}

/* 5. reviews featured + vertical auto-scroll */
.reviews-layout{display:grid;grid-template-columns:1.05fr 1fr;gap:16px;margin-top:44px;align-items:stretch}
.review-featured{background:var(--ink);border-radius:20px;padding:40px;display:flex;flex-direction:column;justify-content:center;text-align:left}
.rf-stars{display:flex;gap:3px;margin-bottom:16px}
.rf-stars svg{width:17px;height:17px;fill:var(--neon)}
.rf-text{font-size:19px;color:#fff;line-height:1.55;margin-bottom:8px;font-weight:300}
.rf-author{display:flex;align-items:center;gap:13px;margin-top:24px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14)}
.rf-avi{width:44px;height:44px;border-radius:50%;background:var(--neon);color:var(--ink);display:grid;place-items:center;font-family:'Bebas Neue',sans-serif;font-size:16px;flex-shrink:0}
.rf-name{font-size:14px;font-weight:700;color:#fff}
.rf-loc{font-size:12px;color:rgba(255,255,255,.55);margin-top:2px}
.review-scroll{position:relative;height:452px;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 7%,#000 93%,transparent)}
.review-track{display:flex;flex-direction:column;gap:12px;animation:reviewScroll 34s linear infinite}
.review-scroll:hover .review-track{animation-play-state:paused}
@keyframes reviewScroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.rev-row{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px;text-align:left}
.rr-stars{display:flex;gap:2px;margin-bottom:9px}
.rr-stars svg{width:13px;height:13px;fill:var(--neon-d)}
.rr-text{font-size:14px;line-height:1.55;color:var(--ink);margin-bottom:9px}
.rr-meta{font-size:12px;color:#6b7280}
.rr-meta strong{color:var(--ink);font-weight:700}
@media(max-width:820px){.reviews-layout{grid-template-columns:1fr}.review-scroll{height:400px}}

/* 6. signature with photo */
.sig-lead{text-align:center;font-size:16px;font-style:italic;color:#4b5563;margin:30px 0 18px}
.sig-block{display:flex;flex-direction:column;align-items:center;gap:8px;margin:0}
.sig-photo{width:76px;height:76px;border-radius:50%;object-fit:cover;border:2px solid var(--neon);box-shadow:0 6px 18px rgba(0,0,0,.15)}
.sig-txt{text-align:center}
.sig-name{font-family:'Bebas Neue',sans-serif;font-size:30px;letter-spacing:.04em;line-height:1;color:var(--ink)}
.sig-role{font-size:13px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:#6b7280;margin-top:5px}

/* move contact FABs to bottom-left so the chat bubble owns bottom-right */
.s4g-fab{right:auto;left:20px}
@media(max-width:600px){.s4g-fab{left:14px;right:auto}}

/* ===== Intercom-style chat widget (preview mock) ===== */
.s4g-chat-bubble{position:fixed;right:22px;bottom:22px;z-index:955;width:60px;height:60px;border-radius:50%;background:#1f9d5c;display:grid;place-items:center;box-shadow:0 8px 26px rgba(0,0,0,.32);cursor:pointer;border:none;transition:transform .18s}
.s4g-chat-bubble:hover{transform:scale(1.06)}
.s4g-chat-bubble>span{position:absolute;display:grid;place-items:center;transition:opacity .2s,transform .25s}
.s4g-chat.open .ic-chat{opacity:0;transform:rotate(-90deg) scale(.6)}
.ic-x{opacity:0;transform:rotate(90deg) scale(.6)}
.s4g-chat.open .ic-x{opacity:1;transform:none}
.s4g-chat-badge{position:absolute;top:-2px;right:-2px;width:20px;height:20px;border-radius:10px;background:#EF4444;color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;border:2px solid #fff}
.s4g-chat.open .s4g-chat-badge{display:none}
.s4g-chat-panel{position:fixed;right:22px;bottom:96px;z-index:955;width:380px;max-width:calc(100vw - 28px);height:552px;max-height:calc(100vh - 130px);background:#fff;border-radius:16px;box-shadow:0 16px 50px rgba(0,0,0,.3);overflow:hidden;display:flex;flex-direction:column;opacity:0;transform:translateY(16px) scale(.98);pointer-events:none;transition:opacity .22s,transform .22s;font-family:'Inter',sans-serif}
.s4g-chat.open .s4g-chat-panel{opacity:1;transform:none;pointer-events:auto}
.cw-head{background:#1f9d5c;color:#fff;padding:17px 18px;display:flex;align-items:center;gap:12px}
.cw-ava{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;flex-shrink:0}
.cw-title{font-weight:700;font-size:15px;display:flex;align-items:center;gap:7px;line-height:1.2}
.cw-dot{width:8px;height:8px;border-radius:50%;background:#4ADE80;display:inline-block}
.cw-sub{font-size:12px;opacity:.85;margin-top:2px}
.cw-x{margin-left:auto;background:none;border:none;color:#fff;cursor:pointer;opacity:.85;font-size:20px;line-height:1;padding:4px}
.cw-body{flex:1;background:#F9FAFB;padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
.cw-msg{max-width:82%;padding:11px 14px;border-radius:15px;font-size:14px;line-height:1.45}
.cw-msg.bot{background:#fff;color:#1F2937;border-bottom-left-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.06);align-self:flex-start}
.cw-msg.me{background:#1f9d5c;color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.cw-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.cw-chip{background:#fff;border:1px solid #E5E7EB;border-radius:16px;padding:8px 13px;font-size:13px;color:#1f9d5c;font-weight:600;cursor:pointer;transition:background .15s}
.cw-chip:hover{background:#eefaf3}
.cw-foot{border-top:1px solid #E5E7EB;background:#fff;padding:9px 10px;display:flex;gap:8px;align-items:center}
.cw-input{flex:1;border:none;outline:none;font-size:14px;font-family:inherit;padding:8px 6px;color:#1F2937}
.cw-send{background:#1f9d5c;border:none;color:#fff;width:38px;height:38px;border-radius:9px;display:grid;place-items:center;cursor:pointer;flex-shrink:0}
.cw-note{text-align:center;font-size:10px;color:#9CA3AF;padding:6px;background:#fff}
@media(max-width:600px){.s4g-chat-panel{right:12px;left:12px;width:auto;bottom:88px;height:calc(100vh - 116px)}.s4g-chat-bubble{right:16px;bottom:16px}}

/* posters already have centred play buttons baked in -> hide our duplicate overlay buttons */


/* general readability: looser body text + card copy */
body{line-height:1.6}
.card p{line-height:1.7}
.rr-text,.rf-text{line-height:1.72}
.faq-a,details .faq-a,details div{line-height:1.75}
.lead{max-width:640px;margin-left:auto;margin-right:auto}

.lib-card{position:relative;overflow:hidden}
.lib-ico{position:absolute;right:16px;bottom:16px;width:118px;height:118px;color:var(--neon);opacity:.055;pointer-events:none}
.lib-card>:not(.lib-ico){position:relative;z-index:1}

/* signature: beat .letter p specificity, tighten spacing */
.letter .sig-lead{text-align:center;font-style:italic;color:#4b5563;font-size:16px;margin:30px 0 16px}
.letter .sig-block p{margin:0}
.letter .sig-name{font-family:'Bebas Neue',sans-serif;font-size:30px;letter-spacing:.04em;line-height:1;color:var(--ink)}
.letter .sig-role{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#6b7280;margin-top:6px}

/* FAQ two-column with sticky left */
.faq-layout{display:grid;grid-template-columns:.82fr 1.18fr;gap:52px;align-items:start;margin-top:20px}
.faq-aside{position:sticky;top:90px;text-align:left}
.faq-sub{margin-top:22px;color:var(--muted);font-size:15px;line-height:1.65;max-width:320px}
.faq-sub a{color:var(--neon-txt);font-weight:700}
.faq-layout .faq{max-width:none!important;margin:0!important}
@media(max-width:860px){.faq-layout{grid-template-columns:1fr;gap:26px}.faq-aside{position:static;text-align:center}.faq-sub{margin-left:auto;margin-right:auto}}

/* premium floating buttons: hover label pills + refined */
.s4g-fab{gap:14px}
.fab{position:relative;width:52px;height:52px;box-shadow:0 6px 18px rgba(0,0,0,.32),0 0 0 1.5px rgba(255,255,255,.22)}
.fab svg{transition:transform .18s}
.fab:hover{transform:translateY(-3px)}
.fab:hover svg{transform:scale(1.08)}
.fab::after{content:attr(data-tip);position:absolute;left:calc(100% + 14px);top:50%;transform:translateY(-50%) translateX(-6px);white-space:nowrap;background:#0a0d08;color:#fff;padding:9px 14px;border-radius:10px;font-size:13px;font-weight:600;font-family:'Inter',sans-serif;letter-spacing:.01em;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;box-shadow:0 6px 18px rgba(0,0,0,.28)}
.fab::before{content:"";position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%) translateX(-6px);border:6px solid transparent;border-right-color:#0a0d08;opacity:0;transition:opacity .18s,transform .18s}
.fab:hover::after,.fab:hover::before{opacity:1;transform:translateY(-50%)}
.fab-wa{background:#25D366}
.fab-wa::after{content:"WhatsApp us"}
/* gentle attention pulse on whatsapp */
.fab-wa{animation:fabPulse 2.6s ease-out infinite}
@keyframes fabPulse{0%{box-shadow:0 8px 24px rgba(0,0,0,.22),0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 8px 24px rgba(0,0,0,.22),0 0 0 12px rgba(37,211,102,0)}100%{box-shadow:0 8px 24px rgba(0,0,0,.22),0 0 0 0 rgba(37,211,102,0)}}
@media(max-width:600px){.fab::after,.fab::before{display:none}}
.nav-cta{background:var(--neon);color:var(--ink);font-family:'Inter',sans-serif;font-weight:700;font-size:14px;letter-spacing:.01em;padding:10px 20px;border-radius:100px;transition:transform .15s,background .15s;box-shadow:0 4px 14px rgba(195,245,60,.35);border:0}
.nav-cta:hover{background:#fff;transform:translateY(-1px)}
@media(max-width:600px){.nav-cta{padding:8px 15px;font-size:13px}}
/* See kk-chrome.css: at 320 the header's three groups do not fit, and pages failed two
   different ways depending on whether the label could wrap. */
.nav-cta{white-space:nowrap}
@media(max-width:359px){.nav{padding:14px 13px}.nav-cta{padding:7px 11px;font-size:12px}}.press-row a{display:inline-flex;flex-shrink:0}
.press-row a img{cursor:pointer}
@media(max-width:820px){[style*="1.1fr .9fr"],[style*="1fr 1fr;gap:48px"]{grid-template-columns:1fr!important;gap:28px!important}}@supports(padding:env(safe-area-inset-bottom)){.s4g-fab{bottom:calc(14px + env(safe-area-inset-bottom))}.s4g-chat-bubble{bottom:calc(16px + env(safe-area-inset-bottom))}.s4g-chat-panel{bottom:calc(90px + env(safe-area-inset-bottom))}}
/* ===== mobile-only sticky bottom contact bar (premium) ===== */
.mbar{display:none}
@media(max-width:600px){
  /* The fixed action bar is 96px tall and nothing reserved space for it, so the
     bottom 96px of every mobile page sat under it. Measured 23 Sep: on the brand
     pages it covered 56px of a 58px hero quote button at 390x600. Two fixes: take
     the bar out of the hero's height, and reserve room at the end of the page.
     svh is declared second so browsers that support it use the SMALL viewport,
     which is what is actually visible when the address bar is showing. */
  .hero{min-height:calc(100vh - 96px);min-height:calc(100svh - 96px)}
  body{padding-bottom:calc(104px + env(safe-area-inset-bottom))}
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:960;gap:8px;padding:10px 10px calc(10px + env(safe-area-inset-bottom));background:rgba(11,14,9,.9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid rgba(195,245,60,.22);box-shadow:0 -10px 34px rgba(0,0,0,.5)}
  .mbar-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 4px;border-radius:15px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);text-decoration:none;cursor:pointer;font-family:'Inter',sans-serif;transition:background .15s,transform .1s}
  .mbar-btn:active{background:rgba(255,255,255,.13);transform:scale(.97)}
  .mb-ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;box-shadow:0 4px 12px rgba(0,0,0,.35)}
  .mb-ic svg{width:19px;height:19px}
  .mbar-btn.call .mb-ic{background:var(--neon);color:var(--ink)}
  .mbar-btn.wa .mb-ic{background:#25D366;color:#fff}
  .mbar-btn.chat .mb-ic{background:#1f9d5c;color:#fff}
  .mb-l{font-family:'Inter',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.01em;color:#fff}
  .s4g-fab{display:none!important}
  .s4g-chat-bubble{display:none!important}
  /* Plain .btn had NO mobile size-down, only .btn-lg did, so it stayed at 23px with 32px
     side padding. At 390px "Read all 750+ reviews on Trustpilot" wrapped to three lines
     and rendered 346x104. Same treatment as .btn-lg. */
  .btn{font-size:18px;padding:14px 22px;line-height:1.25}
  .btn-lg{font-size:18px;padding:14px 26px;white-space:nowrap}  /* keep long CTAs on one line on mobile */
  .capture{flex-direction:column;border-radius:22px;gap:8px;padding:10px}
  .capture input{padding:10px 16px;text-align:center}
  .capture .btn{width:100%;justify-content:center}
  .stripes{display:none!important}   /* decorative stripes overlap text on narrow screens */
  /* The .mbar measures 100px (three 79px buttons plus 10px padding top and bottom),
     so reserving 80 left a 20px strip of every page permanently under the bar. The
     earlier 96px rule above was already 4px short. Reserve the real height. */
  body{padding-bottom:calc(104px + env(safe-area-inset-bottom))!important}
  .s4g-chat-panel{bottom:calc(84px + env(safe-area-inset-bottom))!important;height:calc(100vh - 168px)!important}
}

/* ===== Get-a-quote modal ===== */
.qm{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;padding:20px}
.qm.open{display:flex}
.qm-bd{position:absolute;inset:0;background:rgba(6,8,5,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.qm-card{position:relative;width:100%;max-width:480px;background:#ffffff;border:1px solid rgba(0,0,0,.08);border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.42);padding:38px 34px 30px;color:#0f1409;max-height:calc(100vh - 40px);overflow-y:auto;transform:translateY(14px) scale(.98);opacity:0;transition:transform .25s,opacity .25s}
.qm.open .qm-card{transform:none;opacity:1}
.qm-x{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.06);border:none;color:#0f1409;font-size:20px;line-height:1;cursor:pointer;transition:background .15s}
.qm-x:hover{background:rgba(0,0,0,.12)}
.qm-prog{display:flex;gap:6px;margin-bottom:22px}
.qm-prog span{flex:1;height:4px;border-radius:2px;background:rgba(0,0,0,.1);transition:background .3s}
.qm-prog span.on{background:var(--neon)}
.qm-eye{font-family:'Inter',sans-serif;font-weight:700;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:#4e8a10}
.qm-card h3{font-family:'Bebas Neue',sans-serif;text-transform:uppercase;font-size:clamp(30px,7vw,40px);line-height:.95;letter-spacing:.01em;margin:10px 0 12px;color:#0f1409}
.qm-sub{font-size:15px;color:#5f6b52;line-height:1.55;margin-bottom:22px}
.qm-in{width:100%;background:#f4f6ef;border:1.5px solid #dfe3d6;border-radius:12px;padding:15px 16px;font-size:16px;color:#0f1409;font-family:'Inter',sans-serif;margin-bottom:12px;transition:border-color .15s,box-shadow .15s}
.qm-in::placeholder{color:#9aa48c}
.qm-in:focus{outline:none;border-color:#9ccc2b;box-shadow:0 0 0 3px rgba(195,245,60,.28)}
.qm-in.err{border-color:#ff5a5a}
.qm .btn-lg{width:100%;justify-content:center;margin-top:6px}
.qm-trust{text-align:center;font-size:12.5px;color:#6b7360;margin-top:16px}
.qm-trust .st{color:#F5A623;letter-spacing:1px}
.qm-fine{font-size:12px;color:#8a9280;margin-top:14px;line-height:1.5;text-align:center}
.qm-back{background:none;border:none;color:#6b7360;font-size:13px;font-weight:600;cursor:pointer;padding:8px 0;margin-top:4px}
.qm-back:hover{color:#0f1409}
.qm-tick{width:66px;height:66px;border-radius:50%;background:var(--neon);color:var(--ink);display:grid;place-items:center;font-size:34px;margin:0 auto 6px;font-weight:700}
.qm-c{text-align:center}

.qm-field{margin-bottom:14px;text-align:left}
.qm-field>label{display:block;font-size:13px;font-weight:600;color:#3f473a;margin-bottom:8px}
.qm-seg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qm-seg-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 10px;border-radius:12px;background:#f4f6ef;border:1.5px solid #dfe3d6;color:#3f473a;font-family:'Inter',sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:all .15s}
.qm-seg-btn svg{width:18px;height:18px;flex-shrink:0}
.qm-seg-btn.on{background:#eef8d6;border-color:#9ccc2b;color:#0f1409}
.qm-err{color:#ff7a7a;font-size:13px;text-align:center;margin-top:10px}

/* seamless marquee loops: trailing margin per item (keeps translateX(-50%) landing on an exact boundary) */
.brand-track>img,.brand-track>a{margin-right:70px}
/* logos became links (they are on live, and it is where brand pages get their
   inbound links). The gap rule was a direct-child selector, so wrapping the img
   in an anchor silently removed every gap until this matched the anchor too. */
.brand-track>a{display:inline-flex;align-items:center;flex-shrink:0}
.case-track>.case-card{margin-right:18px}
.vstrip-track>*{margin-right:16px}
.press-row>*{margin-right:60px}
.cert-track>*{margin-right:70px}

/* what-we-install: 5 cards -> 3 + 2 centred (no odd empty 6th cell) */
.grid-c5{display:flex!important;flex-wrap:wrap;justify-content:center;gap:18px}
.grid-c5>.card{flex:0 0 calc(33.333% - 12px);max-width:calc(33.333% - 12px)}
@media(max-width:820px){.grid-c5>.card{flex-basis:100%;max-width:100%}}

/* ===== inline video lightbox (plays on-page, KK-style) ===== */
.vlb{position:fixed;inset:0;z-index:1300;display:none;align-items:center;justify-content:center;padding:24px}
.vlb.open{display:flex}
.vlb-bd{position:absolute;inset:0;background:rgba(4,6,3,.9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.vlb-frame{position:relative;width:100%;max-width:980px}
.vlb-embed{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:16px;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.65)}
.vlb-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vlb-x{position:absolute;top:-48px;right:0;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.14);border:none;color:#fff;font-size:22px;line-height:1;cursor:pointer;transition:background .15s}
.vlb-x:hover{background:rgba(255,255,255,.26)}
@media(max-width:600px){.vlb{padding:16px}.vlb-x{top:-42px}}
.vfeature,.vsmall{cursor:pointer}

/* intl-tel-input dark theme (quote phone) */
.qm .iti{width:100%;display:block;margin-bottom:12px}
.qm .iti input.qm-in{margin-bottom:0}
.qm .iti__selected-flag{background:transparent;border-radius:12px 0 0 12px}
.qm .iti--separate-dial-code .iti__selected-dial-code{color:#0f1409;font-family:'Inter',sans-serif}
.qm .iti__arrow{border-top-color:#5f6b52}
.qm .iti__country-list{background:#fff;color:#0f1409;border:1px solid #e0e4d8;box-shadow:0 12px 34px rgba(0,0,0,.22)}
.qm .iti__country.iti__highlight{background:#f1f5e6}
.qm .iti__country{color:#0f1409}
.qm .iti__dial-code{color:#8a9280}
.qm-fe{font-size:12px;color:#ff7a7a;margin:-8px 0 10px;display:none}
.qm-fe.show{display:block}

/* ===== King Kong mega-menu ===== */
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:88px}
.nav .menu{background:none;border:none;cursor:pointer;font-family:'Inter',sans-serif;color:#fff;font-weight:600;font-size:15px;padding:6px 2px;display:inline-flex;align-items:center;gap:11px}
.nav .menu:hover{color:var(--neon)}
.mbars{position:relative;width:28px;height:15px;flex-shrink:0}
.mbars i{position:absolute;left:0;height:3px;border-radius:3px;background:currentColor;transition:transform .32s cubic-bezier(.6,.2,.2,1),width .3s ease,top .3s ease,bottom .3s ease}
.mbars i:nth-child(1){top:1px;width:28px}
.mbars i:nth-child(2){bottom:1px;width:19px}
body.menu-open .mbars i:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg);width:28px}
body.menu-open .mbars i:nth-child(2){bottom:50%;transform:translateY(50%) rotate(-45deg);width:28px}
body.menu-open .nav{background:#0b0f0a}
@media(max-width:760px){.menu-word{display:none}.nav .menu{gap:0}}
.megamenu{position:fixed;inset:0;z-index:1000;overflow-y:auto;opacity:0;pointer-events:none;clip-path:inset(0 0 100% 0);
  background:radial-gradient(120% 80% at 82% 0%,rgba(195,245,60,.12),transparent 55%),#0b0f0a;
  padding:24px clamp(22px,5vw,66px) 40px;transition:opacity .34s ease,clip-path .44s cubic-bezier(.16,.84,.34,1)}
.megamenu.open{opacity:1;pointer-events:auto;clip-path:inset(0 0 0 0)}
@media(max-width:760px){.megamenu{padding-top:18px}.megamenu .mm-top{display:none}}
@media(prefers-reduced-motion:reduce){.megamenu{transition:opacity .2s ease}.megamenu,.megamenu.open{clip-path:none}}
.mm-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:clamp(26px,5vw,56px)}
.mm-brand{font-family:'Bebas Neue';font-size:26px;letter-spacing:2px;color:var(--neon)}
.mm-x{background:none;border:1px solid rgba(255,255,255,.22);color:#fff;width:44px;height:44px;border-radius:50%;
  font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .15s,transform .25s}
.mm-x:hover{background:rgba(255,255,255,.1);transform:rotate(90deg)}
.mm-body{position:relative;max-width:1080px;margin:0 auto;min-height:340px}
.mm-cat{background:none;border:none;cursor:pointer;text-align:left;width:100%;text-decoration:none;
  font-family:'Bebas Neue','Oswald','Arial Narrow',sans-serif;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(34px,5vw,58px);line-height:1.04;color:rgba(255,255,255,.5);padding:5px 0;
  display:flex;align-items:center;gap:14px;transition:color .15s}
.mm-cat .plus{margin-left:auto;font-family:'Inter';font-size:24px;color:var(--neon);font-weight:400;transition:transform .3s ease}
.mm-group.on .mm-cat,.mm-cat:hover{color:#fff}
.mm-group.on .mm-cat{color:var(--neon)}
.mm-sub{list-style:none;margin:0;padding:0}
.mm-sub a{color:rgba(255,255,255,.82);text-decoration:none;font:600 clamp(17px,2vw,21px)/1 'Inter',sans-serif;
  padding:13px 0;border-bottom:1px solid rgba(255,255,255,.09);display:flex;align-items:center;justify-content:space-between;
  transition:color .15s,padding-left .15s}
.mm-sub a::after{content:"\2192";opacity:0;color:var(--neon);transition:opacity .15s}
.mm-sub a:hover{color:var(--neon);padding-left:8px}
.mm-sub a:hover::after{opacity:1}
.mm-foot{max-width:1080px;margin:clamp(30px,6vw,58px) auto 0;display:flex;flex-wrap:wrap;align-items:center;
  gap:16px 26px;border-top:1px solid rgba(255,255,255,.12);padding-top:26px}
.mm-quote{background:var(--neon);color:var(--ink);font-family:'Bebas Neue';font-size:22px;letter-spacing:.03em;
  text-transform:uppercase;border:none;border-radius:100px;padding:13px 28px;cursor:pointer;display:inline-flex;gap:9px;align-items:center;transition:filter .15s}
.mm-quote:hover{filter:brightness(1.06)}
.mm-contact{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;color:rgba(255,255,255,.7);font-size:14px}
.mm-contact a{color:var(--neon);text-decoration:none;font-weight:700;display:inline-flex;gap:7px;align-items:center}
.mm-trust{margin-left:auto;color:rgba(255,255,255,.5);font-size:13px}
.mm-trust .stars{color:#ffb400;letter-spacing:1px}
/* desktop: two-panel - cats left, active sub floats top-right */
@media(min-width:761px){
  .mm-group{width:34%}
  .mm-cat .plus{display:none}
  .mm-sub{position:absolute;top:2px;left:42%;width:58%;display:block;opacity:0;visibility:hidden;
    transform:translateY(12px);transition:opacity .32s ease,transform .32s cubic-bezier(.2,.7,.3,1),visibility .32s}
  .mm-group.on .mm-sub{opacity:1;visibility:visible;transform:none}
  .mm-sub a,.mm-sub .mm-desc{opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease}
  .mm-group.on .mm-sub a,.mm-group.on .mm-sub .mm-desc{opacity:1;transform:none}
  .mm-group.on .mm-sub a{transition-delay:.06s}
}
@keyframes mmfade{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
.mm-desc{color:rgba(255,255,255,.6);font:400 15px/1.5 'Inter',sans-serif;margin:0 0 14px;max-width:36ch}
.mm-go{color:var(--neon)!important;font-weight:700;border-bottom:none!important}
.mm-go::after{content:none!important}
.mm-cols{column-count:2;column-gap:38px}
.mm-cols a{break-inside:avoid}
@media(max-width:760px){.mm-cols{column-count:1}}
/* mobile: accordion - tap a category to expand its list beneath it */
@media(max-width:760px){
  .mm-group{border-bottom:1px solid rgba(255,255,255,.12)}
  .mm-cat{font-size:30px;padding:16px 0}
  .mm-sub{max-height:0;overflow:hidden;padding:0;transition:max-height .42s cubic-bezier(.4,0,.2,1)}
  .mm-group.on .mm-cat .plus{transform:rotate(45deg)}
  .mm-trust{margin-left:0}
}
@media(prefers-reduced-motion:reduce){.megamenu,.mm-sub,.mm-x{transition:none;animation:none}}

/* ============================================================================
   TONE SYSTEM — single source of truth.  class="sec sec-<tone>"  AND
   data-tone="<tone>"  are fully equivalent.  Tones: dark cream sage neon white.
   NEVER put an inline background on a <section> (validator blocks it).
   ============================================================================ */
/* --- the skewed diagonal background --- */
.sec-dark::before ,.sec[data-tone="dark"]::before  {background:var(--ink)}
.sec-cream::before,.sec[data-tone="cream"]::before {background:var(--cream)}
.sec-sage::before ,.sec[data-tone="sage"]::before  {background:var(--sage)}
.sec-neon::before ,.sec[data-tone="neon"]::before  {background:var(--neon)}
.sec-white::before,.sec[data-tone="white"]::before {background:var(--paper)}
/* --- section text colour --- */
.sec-dark ,.sec[data-tone="dark"]  {color:#fff}
.sec-cream,.sec-sage,.sec-white,.sec[data-tone="cream"],.sec[data-tone="sage"],.sec[data-tone="white"]{color:var(--ink)}
.sec-neon ,.sec[data-tone="neon"]  {color:var(--ink)}
/* --- eyebrow --- */
.sec-dark .eyebrow,.sec[data-tone="dark"] .eyebrow{color:var(--neon)}
.sec-neon .eyebrow,.sec[data-tone="neon"] .eyebrow{color:#3a4a10}
/* --- lead --- */
.sec-dark .lead,.sec[data-tone="dark"] .lead{color:rgba(255,255,255,.72)}
.sec-neon .lead,.sec[data-tone="neon"] .lead{color:#25290f}
/* --- cards (background + text) per tone --- */
.sec-cream .card,.sec-sage .card,.sec-white .card,.sec[data-tone="cream"] .card,.sec[data-tone="sage"] .card,.sec[data-tone="white"] .card{background:#fff;border-color:var(--line)}
.sec-dark .card,.sec[data-tone="dark"] .card{background:var(--ink2);border-color:rgba(255,255,255,.1)}
.sec-dark .card h4,.sec[data-tone="dark"] .card h4{color:#fff}
.sec-dark .card p,.sec[data-tone="dark"] .card p{color:rgba(255,255,255,.62)}
.sec-neon .card,.sec[data-tone="neon"] .card{background:rgba(255,255,255,.62);border-color:rgba(0,0,0,.08)}
/* --- soft blobs --- */
.sec-dark .blob,.sec[data-tone="dark"] .blob{opacity:.4}
.sec:not(.sec-dark):not([data-tone="dark"]) .blob{opacity:.22}
/* --- GHOST FIX (generalised): the first section after ANY hero sits above the
       semi-transparent hero, so its diagonal ::before paints crisply (was #letter only) --- */
.hero + .sec{position:relative;z-index:1}
/* --- neon-on-neon button: a neon pill on a neon section is invisible → dark pill --- */
.sec-neon .btn,.sec[data-tone="neon"] .btn{background:var(--ink);color:#fff}
.sec-neon .btn:hover,.sec[data-tone="neon"] .btn:hover{background:#000}

/* ksel: the custom dropdown component. Lifted verbatim from kk-chrome.css 2026-08-13.
   It was defined only there, but home.html, commercial-solar-panel-installation-uk.html
   and solar-panel-for-home.html link kk-theme.css instead, so the component had no CSS
   at all on those pages: .ksel-list never got its display:none, so every option rendered
   stacked and permanently open as raw browser buttons. Keep the two copies identical. */
.ksel{position:relative}
.ksel-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:'Inter';font-size:15px;font-weight:600;padding:13px 15px;border:1.5px solid var(--line);border-radius:11px;background:var(--paper);color:var(--ink);cursor:pointer;text-align:left}
.ksel-btn:hover{border-color:var(--neon-txt)}
.ksel.open .ksel-btn{border-color:var(--neon-txt);box-shadow:0 0 0 3px rgba(195,245,60,.35)}
.ksel-ch{width:12px;height:8px;color:var(--neon-txt);flex:none;transition:transform .2s}
.ksel.open .ksel-ch{transform:rotate(180deg)}
.ksel-list{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 22px 46px -18px rgba(20,26,17,.45);padding:6px;max-height:268px;overflow:auto;display:none}
.ksel.open .ksel-list{display:block}
.ksel-list button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;font-family:'Inter';font-size:14.5px;font-weight:500;color:var(--read,#22271e);padding:11px 12px;border:0;border-radius:8px;background:transparent;cursor:pointer}
.ksel-list button:hover{background:var(--sage)}
.ksel-list button.on{color:var(--neon-txt);font-weight:700;background:var(--sage)}
.ksel-list button.on::after{content:'\2713';color:var(--neon-txt);font-weight:700}
.ksel[data-value=""] .ksel-val{color:var(--muted)}

/* f-legal-tm: the registered trade mark line in the footer. Same cause as .ksel above,
   defined only in kk-chrome.css, so on the four kk-theme pages it rendered at default
   paragraph size instead of 11px light grey. Copied verbatim; keep the copies identical. */
.footer .f-legal-tm{font-size:11px;font-weight:300;line-height:1.6;color:rgba(255,255,255,.85);margin-top:8px;white-space:nowrap}
@media(max-width:760px){.footer .f-legal-tm{white-space:normal}}

/* .ic: the benefit-card icon chip. Was never defined here, so the six cards on
   solar-panel-for-home rendered their emoji as bare text in an unstyled div. Swapping
   them for SVG without this rule made the cards 1,159px tall, because an SVG with no
   width fills its container. Matches the pattern already used on bird-proofing and the
   case studies. neon-d rather than neon: the cards are white, and #C3F53C on #fff is
   unreadable. */
.ic{flex:none;width:44px;height:44px;border-radius:12px;background:rgba(195,245,60,.14);border:1px solid rgba(127,174,0,.28);display:flex;align-items:center;justify-content:center;color:var(--neon-txt);margin-bottom:14px}
.ic svg{width:21px;height:21px}

/* .grid + g2/g3/g4: used by solar-panel-for-home and _styleguide and defined by
   NEITHER stylesheet, so four card groups on the pillar page stacked into one
   full-width column at every width. That is what read as "spacing and alignment":
   six near-empty rows the width of the page. Same fault as .ic directly above.
   home.html and commercial do not use .grid, so this reaches two pages. */
.grid{display:grid;gap:18px;align-items:stretch}
.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:960px){.grid.g3,.grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr;gap:14px}}

/* FAQ reveal + card hover, added 2026-08-14. Both reuse conventions already in the
   project rather than inventing new ones:
     card hover  copies .lib-card:hover exactly -- translateY(-3px), border-color neon,
                 .15s -- so cards behave the same wherever they appear
     FAQ         no page had a smooth <details> anywhere, including home. Native details
                 snaps open. Animating height needs a wrapper element inside .a, which
                 would mean editing 142 pages, so this fades and lifts the answer in
                 instead: no markup change, and the harsh jump goes. The +/- marker
                 rotates with it. */
.card{transition:transform .15s,border-color .15s}
.card:hover{transform:translateY(-3px);border-color:var(--neon)}
a.card:hover{text-decoration:none}
@keyframes faqReveal{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.faq details[open] .a,.faq details[open] .faq-a{animation:faqReveal .24s ease both}
.faq summary::after{transition:transform .22s ease}
.faq details[open] summary::after{transform:rotate(180deg)}
@media(prefers-reduced-motion:reduce){
 .card,.card:hover{transition:none;transform:none}
 .faq details[open] .a,.faq details[open] .faq-a{animation:none}
 .faq summary::after{transition:none}}

/* .imgband: full-bleed image with the eyebrow, heading and lead sitting ON it under a
   gradient, instead of a picture stacked beneath a heading. Lifted verbatim from
   commercial-solar-panel-installation-uk, where it and three other pages each carry
   their own inline copy. Moved here so solar-panel-for-home can use the SAME component
   rather than a fifth variant. The four inline copies are now redundant and should be
   removed when someone is next in those files. */
.imgband{position:relative;border-radius:20px;overflow:hidden;background:#0c120b;display:flex;flex-direction:column;justify-content:flex-end;min-height:470px}
.imgband>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.imgband::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(6,9,5,.94),rgba(6,9,5,.34) 58%,rgba(6,9,5,.06));z-index:1}
.imgband-in{position:relative;z-index:2;padding:44px 40px;color:#fff;max-width:660px}
.imgband-in .eyebrow{color:var(--neon)}
.imgband-in .disp{color:#fff;margin-top:8px}
.imgband-in .lead{color:#e8f0dc;margin-top:14px}
.imgband.centred{align-items:center;text-align:center}
.imgband.centred .imgband-in{max-width:720px}
@media(max-width:860px){.imgband{min-height:500px}.imgband-in{padding:26px 22px}}

/* .ib: two-column image and text, image one side, copy the other, with .rev to flip.
   Taken from solar-inverter/solar-pv-system/solar-ev-chargers-uk, where it is written as
   ".imgband .ib". Deliberately UNSCOPED here, and that is not sloppiness:
   .imgband means TWO DIFFERENT COMPONENTS in this project. On commercial it is the
   full-bleed overlay already in this file (dark ground, gradient, min-height 470px). On
   solar-inverter it is just a wrapper for this grid. Copying the scoping verbatim would
   have dropped a two-column layout inside a black overlay. Fourth instance of a
   component defined per page rather than shared, after .ksel, .grid/.ic and .imgband. */
.ib{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
/* fr shares are a MAXIMUM unless the children are allowed to shrink. Without this the
   postcode form in the closing CTA forced its column to min-content and the split came
   out 302/696 instead of near-equal. */
.ib>*{min-width:0}
.ib-rev .ib-txt{order:2}
.ib-img{border-radius:20px;overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,.12)}
.ib-img img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
@media(max-width:860px){.ib{grid-template-columns:1fr;gap:26px}.ib-rev .ib-txt{order:0}}

/* .aa-img: the card thumbnail from authors.html, copied verbatim. Reused here so the
   "More from Solar4Good" cards can carry a picture without inventing a sixth card
   variant. The hover zoom is hung off .card rather than .aa-card, because these keep
   the page's own card typography rather than importing the blog-card sizing. */
.aa-img{aspect-ratio:16/10;overflow:hidden;background:var(--sage);border-radius:12px;margin-bottom:14px}
/* .aa-img.wide: for the pre-designed 1200x630 blog cards, whose title and logo sit hard
   against the left edge. At 16/10 object-fit:cover shaved them off, so "Are solar panels"
   read as "re solar panels". Match the source ratio and nothing is cropped. */
.aa-img.wide{aspect-ratio:1200/630}
.aa-img img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.card:hover .aa-img img,.aa-card:hover .aa-img img{transform:scale(1.05)}

/* .csx: a case-study card WITHOUT a photograph, for pages that link out to case
   studies. The residential hub uses a background photo, but the only photographs of
   those homes are the live-WordPress family files, which carry GPS in their EXIF and
   name the household in the filename. Not something to spread to another page. The
   number is the hook anyway: "72% off the grid" beats a picture of a roof. Structure
   and typography follow the hub card (.cat, .stat, .hook) so the two read as one family. */
.csx{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:250px;padding:22px;border-radius:18px;background:var(--ink2);border:1px solid rgba(255,255,255,.10);text-decoration:none;overflow:hidden;transition:transform .15s,border-color .15s}
.csx:hover{transform:translateY(-3px);border-color:var(--neon)}
.csx .cat{position:absolute;top:16px;left:22px;font-family:var(--disp);font-size:12.5px;letter-spacing:.08em;color:var(--neon)}
.csx .stat{font-family:var(--disp);font-size:46px;line-height:.85;color:var(--neon)}
.csx h3{color:#fff;font-size:17px;margin:12px 0 0}
.csx .hook{font-size:13.5px;color:rgba(255,255,255,.78);margin-top:6px;line-height:1.45}
/* On one column the 250px floor plus bottom-aligned content left each card mostly empty:
   the location tag sat at the top, the stat at the bottom, and 200px of nothing between.
   Stacked, the content should set the height. */
@media(max-width:640px){.csx{min-height:0;padding:52px 20px 20px}}

/* Review-count link. The 4.9 / 1,000+ claim has to be traceable, so "1,000+ reviews"
   links to /reviews, where all four platforms are listed with their own scores. It
   inherits its colour deliberately: these sit inside trust strips and a default blue
   link would read as a stray element on 153 pages. The underline is the whole
   affordance. */
.revlink{color:inherit;text-decoration:underline;text-underline-offset:.18em;
  text-decoration-thickness:1px;text-decoration-color:currentColor;opacity:.94}
.revlink:hover,.revlink:focus-visible{opacity:1;text-decoration-thickness:2px}
/* On a .disp heading the font is ~76px and text-underline-offset:auto drops the rule
   ~16px below the baseline, so on a two-line heading it floats between the lines and
   reads as a stray rule through the second one. Hug the text, scaled to the type.
   Small-text .revlink (hero rate, ticker) keeps the browser default. */
.disp .revlink{text-underline-offset:.07em;text-decoration-thickness:.042em}
.disp .revlink:hover,.disp .revlink:focus-visible{text-decoration-thickness:.06em}


/* Short viewports: the hero centres its content vertically against min-height:100vh,
   so as the screen gets shorter the content rises until it sits UNDER the fixed 68px
   nav. Measured on home at 390x600: the eyebrow sat at top 31 against a nav bottom of
   68, so "The UK's most-reviewed premium installer" rendered straight through the logo
   and the Get a quote button as garbled text. Also hit solar-panel-for-home at 600.
   Top-align and clear the nav instead of centring in a space too small to centre in.
   Above 760px nothing changes, so the desktop and tall-phone layouts are untouched. */
@media (max-height:760px){.hero{justify-content:flex-start;padding-top:84px;box-sizing:border-box}}

/* LIVE CHAT, HIDDEN NOT DELETED. 26 Aug 2026. The button was visible on every mobile
   page and did nothing: it toggles #s4gChat, which no page renders, so tapping it threw
   "Cannot read properties of null". The markup and s4gChatToggle() are left in place so
   the button returns the day a chat service exists behind it (see
   docs/specs/smart-ai-chat-spec.md). .mbar is flex with flex:1 children, so the two
   remaining buttons expand to fill and no gap is left. */
.mbar-btn.chat{display:none}

/* WCAG 2.2.2 Pause, Stop, Hide. Six infinite marquees (brand, case, vstrip, cert,
   press, review) scroll for the life of the page. The only pause was :hover, which
   does not exist on touch, so a phone user who has asked the OS for reduced motion
   still got six moving strips on 153 of 155 pages. Freezing the track at its start
   position is the correct at-rest composition -- every marquee duplicates its content,
   so frame 0 shows the real first item rather than a mid-cycle crop. */
@media(prefers-reduced-motion:reduce){
 .brand-track,.case-track,.vstrip-track,.cert-track,.press-row,.review-track{
   animation:none!important}

 /* Frozen at frame 0, two things that are harmless while scrolling become permanent:
    the edge fade dims whatever sits at the first and last position (the Tesla logo,
    first in the row and first named in the copy, rendered almost invisible), and
    overflow:hidden puts everything past the first screenful out of reach for good.
    Swap the fade for a real scroller so reduced motion costs no content. */
 .brand-marquee,.case-marquee,.vstrip-marquee,.cert-marquee,.press-marquee{
   -webkit-mask:none!important;mask:none!important;
   overflow-x:auto!important;overflow-y:hidden!important}
 .review-scroll{-webkit-mask:none!important;mask:none!important;overflow-y:auto!important}
}

/* Tap targets, 17 Sep 2026, from the responsive audit. WCAG 2.5.8 (AA) wants 24x24 CSS px
   and every one of these was under it, worst the header phone link at 19x19 once its text
   label is hidden below 820px.

   TWO TECHNIQUES, ON PURPOSE. In the nav the layout must not move, so the hit area is grown
   with an ABSOLUTELY POSITIONED PSEUDO-ELEMENT: it is out of flow, so the flex row is
   untouched, and it still counts as part of the link for hit testing. The first attempt used
   padding with an equal negative margin, which reads as layout-neutral and is not: under
   justify-content:space-between the nav visibly shifted, caught by a pixel diff.

   In the footer, padding IS right: those links genuinely are too cramped, so growing them is
   the fix rather than a side effect, and the list gaps are reduced by what the padding adds
   so the rhythm barely changes. Pseudo-elements would be wrong there because at a 25px pitch
   two 24px hit areas would overlap and you would tap the wrong link. */
.nav a.ph,.nav .menu,.mm-contact a{position:relative}
.nav a.ph::after,.nav .menu::after,.mm-contact a::after{content:"";position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:max(100%,44px);height:max(100%,44px)}
.f-contact-item{padding:4px 0}
.f-col ul li a,.f-locations-grid a{display:inline-block;padding:4px 0}
.f-col ul{gap:1px}
.f-locations-grid{gap:2px 20px}

/* Sticky quote CTA (Mitesh, 26 Sep): once past the hero, anyone who does not want to
   read can go straight to a quote. It joins the existing .s4g-fab rail rather than
   inventing a second floating thing, and it is a labelled pill, not another icon,
   because the whole point is that it reads as the quote button at a glance.
   Selector is .s4g-fab .fab-quote so it beats the plain .fab width rules that appear
   later in this file inside media queries. */
.s4g-fab .fab-quote{width:auto;height:52px;padding:0 20px;border-radius:999px;background:var(--neon);color:var(--ink);font-weight:800;font-size:14px;letter-spacing:.02em;white-space:nowrap;opacity:0;pointer-events:none;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease}
.s4g-fab .fab-quote.show{opacity:1;pointer-events:auto;transform:none}
.s4g-fab .fab-quote::after{display:none}
@media (max-width:480px){.s4g-fab .fab-quote{height:46px;padding:0 15px;font-size:13px}}
@media (prefers-reduced-motion:reduce){.s4g-fab .fab-quote{transition:none}}

/* Mobile has no .s4g-fab rail (it is display:none under 600px), so Mitesh's "go
   straight to a quote" button joins the .mbar instead of floating over content.
   Four buttons at 390px leaves ~86px each, which fits the 11.5px label. */
.mbar-btn.quote .mb-ic{background:var(--neon);color:var(--ink)}
.mbar-btn.quote{font-family:'Inter',sans-serif}

/* Letter-bound quote pop-out (Shishir, 26 Sep). Slides in from the RIGHT edge while the
   letter is on screen and slides back out when it ends, so it reads as a companion to
   that one long passage rather than a permanent floating advert.
   Hidden below 900px: the mobile bar already carries a Get a quote button, and a panel
   pinned to the right edge of a phone would sit on the text. */
.qpop{position:fixed;right:0;top:50%;z-index:940;width:250px;
  transform:translate(calc(100% + 10px),-50%);
  background:var(--ink);color:#fff;border-radius:16px 0 0 16px;padding:18px 20px;
  box-shadow:-12px 16px 42px rgba(0,0,0,.34);opacity:0;pointer-events:none;
  will-change:transform,opacity;
  /* Longer, and eased so it decelerates almost to a stop rather than arriving and
     halting. Opacity runs slightly ahead of the slide on the way in so it reads as one
     movement, not a fade plus a slide. */
  transition:transform .72s cubic-bezier(.16,1,.3,1),opacity .5s cubic-bezier(.33,1,.68,1)}
.qpop.show{transform:translate(0,-50%);opacity:1;pointer-events:auto;
  transition:transform .72s cubic-bezier(.16,1,.3,1),opacity .38s cubic-bezier(.33,1,.68,1)}
.qpop-l{margin:0 0 12px;font-size:14px;line-height:1.45;color:rgba(255,255,255,.84);font-family:'Inter',sans-serif}
.qpop-btn{display:inline-flex;align-items:center;gap:8px;width:100%;justify-content:center;
  background:var(--neon);color:var(--ink);border:none;border-radius:100px;padding:12px 16px;
  font-family:'Bebas Neue',sans-serif;font-size:17px;letter-spacing:.4px;cursor:pointer;
  transition:transform .15s ease}
.qpop-btn:hover{transform:translateY(-2px)}
@media(max-width:900px){.qpop{display:none}}
@media(prefers-reduced-motion:reduce){.qpop{transition:opacity .2s ease;transform:translate(0,-50%)}
  .qpop:not(.show){opacity:0;pointer-events:none}.qpop-btn:hover{transform:none}}

/* Two mobile defects found by qa_layout_defects.mjs, both of which scroll the WHOLE
   page sideways at 390px - the worst kind, because every section then looks broken.
   1. the author-card avatar had no width constraint and rendered at its intrinsic
      600px inside a 390px screen (solar4good-recognised-by-fmb was 418px, the
      renewable-energy guide 600px).
   2. a raw https:// URL pasted into body copy is one unbreakable word.
   Fixed generically rather than per page, so the next post that does either is safe. */
.author .av img,.acard .av img{max-width:100%;height:auto;display:block}
/* The blog body is article.article, not .post-body - the first selector missed it
   and the page still scrolled sideways. Anchors need it explicitly: a bare URL is
   one unbreakable word and inherits nothing useful from the paragraph. */
.article p,.article li,.article a,.article td,
.post-body p,.post-body li,.post-body a,.locp,.letter p{overflow-wrap:break-word;word-break:break-word}


/* === CONSENT BANNER, DESKTOP LAYOUT =========================================
   Added 5 Oct 2026. Lives HERE, not in Complianz's Custom CSS, because that
   editor proved unreliable: it loads its own default template instead of the
   stored value, so every save from it is a gamble on the live banner. Two
   attempts went in and the generated stylesheet came back without this block
   while keeping everything before it. This file is versioned, reviewed and
   deployed by us, and it already loads on every page.

   WHAT IT FIXES, measured at 1470px before the change:
     accept 130px, deny 101px   -- a 29 percent difference. The ICO requires
                                   accepting and refusing to be equally easy,
                                   so unequal buttons are a compliance point,
                                   not a cosmetic one.
     view-preferences 490px     -- right edge at 1689px on a 1470px viewport,
                                   so 229px of it sat off screen.

   GUARDED AT 426px AND ABOVE. Below that Complianz already stacks all three at
   equal full width (326px each at 390px, verified). An earlier unguarded
   version of these rules overrode that and turned a compliant mobile layout
   into 130/101/59 -- it made the thing it was fixing worse. The guard is the
   whole point of the block.
   ========================================================================== */
/* ⚠️ 426px WAS THE WRONG BREAKPOINT. Shishir's iPhone reports 428px CSS width
   (iPhone Pro Max is 430px), so a real phone fell ABOVE this guard and got the
   desktop row layout: 130px against 101px, with "Choose" floating between them.
   Complianz's own mobile rules stop at max-width 425px, so 426-599px was a gap
   where NEITHER side had rules. 599px is now the floor, comfortably above every
   phone and below any tablet. Measured at 428px: 364/364/364, stacked. */
@media (max-width: 599px) {
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
    width: 100% !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }
}

@media (min-width: 600px) {
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
    flex-wrap: wrap;
    gap: 8px;
  }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept,
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences {
    flex: 1 1 100%;
    width: auto;
    max-width: 100%;
    text-align: center;
  }
}

/* --- the preferences panel ------------------------------------------------
   Added 5 Oct 2026, after Shishir's screenshots of the expanded "Choose" view.

   1. Complianz labels each toggle with <span class="screen-reader-text">, which
      is meant to be read aloud and never seen. This theme does not define that
      class, so WordPress's convention silently did not apply and every category
      rendered its name TWICE -- once as the title on the left, once beside its
      switch. Measured before: both spans 62px and 1px wide respectively once
      this rule applies; without it the second one is fully visible.
   2. The switches rendered amber, which is off-brand and reads as a warning on
      a control whose "on" state is a positive choice. Lime when on, a muted
      grey-green when off, from the KK palette.
   3. Two .cmplz-divider elements extended past the banner's right edge.
   ------------------------------------------------------------------------- */
#cmplz-cookiebanner-container .screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
#cmplz-cookiebanner-container .cmplz-category .cmplz-banner-checkbox .cmplz-label {
  background-color: #c9cfc2 !important;
}
#cmplz-cookiebanner-container .cmplz-category .cmplz-banner-checkbox input:checked + .cmplz-label {
  background-color: #C3F53C !important;
}
#cmplz-cookiebanner-container .cmplz-divider {
  max-width: 100% !important;
}

/* --- banner title alignment ------------------------------------------------
   5 Oct 2026. Shishir: "why is there a gap before Two cookies?"
   Complianz centres the title in its own grid cell while the body underneath
   reads left, so a title that wraps renders as a ragged indent.

   The header is a 3-column grid and its columns are CONTENT-SIZED, not fixed.
   Its three children are .cmplz-logo (empty on this site, 0x0), .cmplz-title
   and .cmplz-close. An earlier version of this fix moved the title into column
   1 -- which is the LOGO column. Measured at 428px that column was 100px wide,
   so the title wrapped to EIGHT lines, one word per line. Do not place the
   title in column 1, and do not span it 1 / -1 either: spanning every column
   pushes the close X onto its own grid row and opens a gap under the title.

   What works: pin all three children to row 1, give the title column 2 and let
   that column take the slack (1fr), leaving the X in column 3. Column 1
   collapses to 0 because the logo is empty, so the title starts flush with the
   body text below it.

   Verified in a browser against the live banner at 390 / 428 / 1440 px:
   title 2 / 2 / 1 lines, title left edge == body left edge at all three,
   title and X on the same row, no overlap with the X, no horizontal scroll.
   -------------------------------------------------------------------------- */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header {
  grid-template-columns: auto 1fr auto !important;
  align-items: start !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header .cmplz-logo {
  grid-column: 1 !important;
  grid-row: 1 !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header .cmplz-title {
  grid-column: 2 / 3 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  text-align: left !important;
  width: auto !important;
  padding-right: 12px !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header .cmplz-close {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

/* --- hide the floating "Manage consent" tab --------------------------------
   5 Oct 2026. Shishir: "I haven't seen any website which still shows this
   after accepting or rejecting." He is right -- a permanently pinned tab is
   unusual, and on a dark page this one rendered as a white blob.

   ⚠️ THIS IS ONLY SAFE BECAUSE A REPLACEMENT EXISTS. Consent must be as easy to
   WITHDRAW as to give, so the tab cannot simply be deleted. Verified before
   adding this rule: /privacy-policy/ carries Complianz's revoke widget (3
   markers in the page) and "Privacy Policy" is already linked in the footer of
   every page. If that link or that widget is ever removed, this rule MUST come
   out with it, or the site offers no way back.
   -------------------------------------------------------------------------- */
.cmplz-manage-consent { display: none !important; }