/* <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. */
/* Megamenu + footer + nav, extracted from kk-chrome.css by the classes the
   markup actually uses. The full stylesheet cannot be loaded on blog pages:
   both files define .nav .btn .brand .faq, and chrome makes .nav
   position:fixed while the blog makes it sticky.
   Variables are scoped to the chrome, never :root: blog.css owns --sage and
   --neon-d and ours were overriding the article's TOC tint and link colour.
   Regenerate with scripts/fix_blog_chrome.py. */
nav.kk-nav-swapped,.megamenu,footer.footer,.qm{--charcoal:#0d1410;--display:'Bebas Neue',sans-serif;--ink:#0a0d08;--line:#e4e8e0;--neon:#C3F53C;--neon-d:#7fae00;--neon-txt:#547800;--orange:#1f9d5c;--sage:#F0F9E5;--white:#fff}
.w{max-width:1180px;margin:0 auto;padding:0 40px;position:relative;z-index:2}
.qm .btn, .megamenu .btn, footer.footer .btn, nav.kk-nav-swapped .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. That put 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 the label from an icon,
   which is what it is for. */
.btn>.btn-t{display:inline;white-space:normal}

.qm .btn:hover, .megamenu .btn:hover, footer.footer .btn:hover, nav.kk-nav-swapped .btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn-lg{font-size:28px;padding:18px 42px}
.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}
.qm .capture .btn, .megamenu .capture .btn, footer.footer .capture .btn, nav.kk-nav-swapped .capture .btn{white-space:nowrap}
.hero-rate .st{color:#ffb400;letter-spacing:2px}
.rev .st{color:#ffb400;letter-spacing:2px;font-size:15px}
.foot .brand{font-family:'Bebas Neue';font-size:22px;letter-spacing:2px;color:var(--neon)}
@media(max-width:820px){.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}}
.sec .w{position:relative;z-index:1}
.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}
.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}}
.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}
.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}}

/* At 320px the header's three groups do not fit, and pages were failing two different
   ways by accident: where the label could wrap it did, giving a 52px-tall button under a
   36px one; where it could not, the nav rendered 348px wide inside a 320px viewport and
   the whole page scrolled sideways. nowrap makes the failure consistent, then the padding
   comes in to make it fit. The phone icon stays: on mobile it is the only tap-to-call in
   the header, and the fixed bottom bar is below the fold on first paint. */
.nav-cta{white-space:nowrap}

@media(max-width:359px){.nav{padding:14px 13px}.nav-cta{padding:7px 11px;font-size:12px}}
@media(max-width:600px){.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}.btn-lg{font-size:18px;padding:14px 26px;white-space:nowrap}.qm .capture .btn, .megamenu .capture .btn, footer.footer .capture .btn, nav.kk-nav-swapped .capture .btn{width:100%;justify-content:center}}
.qm{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease,visibility 0s linear .28s}
.qm.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .28s ease}
.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(18px) scale(.975);opacity:0;transition:transform .34s cubic-bezier(.22,.61,.36,1),opacity .3s ease;will-change:transform,opacity}
.qm.open .qm-card{transform:none;opacity:1}
@media(prefers-reduced-motion:reduce){.qm{transition:opacity .12s ease}.qm-card{transition:none}}
.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-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-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}
.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}
.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}}
.qm .sec-neon .btn, .megamenu .sec-neon .btn, footer.footer .sec-neon .btn, nav.kk-nav-swapped .sec-neon .btn, .qm .sec[data-tone="neon"] .btn, .megamenu .sec[data-tone="neon"] .btn, footer.footer .sec[data-tone="neon"] .btn, nav.kk-nav-swapped .sec[data-tone="neon"] .btn{background:var(--ink);color:#fff}
.qm .sec-neon .btn:hover, .megamenu .sec-neon .btn:hover, footer.footer .sec-neon .btn:hover, nav.kk-nav-swapped .sec-neon .btn:hover, .qm .sec[data-tone="neon"] .btn:hover, .megamenu .sec[data-tone="neon"] .btn:hover, footer.footer .sec[data-tone="neon"] .btn:hover, nav.kk-nav-swapped .sec[data-tone="neon"] .btn:hover{background:#000}
.footer a, .footer .f-address, .footer .f-contact-item, .footer .f-col ul li a, .footer .f-locations-grid a, .footer .f-legal-text, .footer .f-app-note{color:#fff}
.footer .f-col ul li a:hover, .footer .f-locations-grid a:hover{color:var(--neon)}
.footer .footer-locations h4, .footer .f-address-label, .footer .f-col-title, .footer h4{color:rgba(255,255,255,.7)}
.footer .f-legal, .footer .f-trademark-note{color:rgba(255,255,255,.6)}

/* live mega-menu CSS (verbatim from home-v3-kk.html) */
.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:#C3F53C;letter-spacing:1px}
@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}}
.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}}
@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}}


/* header always dark (per Shishir) */
.nav{background:rgba(10,13,8,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)}

.qm .faqband .in, .megamenu .faqband .in, footer.footer .faqband .in, nav.kk-nav-swapped .faqband .in{max-width:1160px;margin:0 auto;padding:0 34px;display:grid;grid-template-columns:.8fr 1.2fr;gap:54px;align-items:start}

.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}

.qm .ctaAnim .ar, .megamenu .ctaAnim .ar, footer.footer .ctaAnim .ar, nav.kk-nav-swapped .ctaAnim .ar{display:inline-block;transition:transform .22s ease}

.qm .ctaAnim:hover .ar, .megamenu .ctaAnim:hover .ar, footer.footer .ctaAnim:hover .ar, nav.kk-nav-swapped .ctaAnim:hover .ar{transform:translateX(6px)}
.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}}


/* 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}

@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}}


/* ── .aa-img ─────────────────────────────────────────────────────────────────
   Image wrapper for a card or an .ib grid column. Copied VERBATIM from
   kk-theme.css so the class name means exactly one thing on this site. The two
   sheets are never loaded together (checked: no page loads both), so this is a
   second copy rather than a cascade conflict — but keep them identical. The
   .imgband name already drifted into two different components across these two
   sheets and it is one copy-paste away from causing damage.
   Added 2026-08-15: solar-pv-system used .aa-img and neither its stylesheet nor
   its inline CSS defined it, so the image rendered raw at 1200px and broke the
   grid. Same class of bug as .ksel, .grid, .ic, .ib. */
.aa-img{aspect-ratio:16/10;overflow:hidden;background:var(--sage);border-radius:12px;margin-bottom:14px}

.qm .aa-img.wide, .megamenu .aa-img.wide, footer.footer .aa-img.wide, nav.kk-nav-swapped .aa-img.wide{aspect-ratio:1200/630}

.card:hover .aa-img img, .aa-card:hover .aa-img img{transform:scale(1.05)}


/* ── .slinks ─────────────────────────────────────────────────────────────────
   "Where to go next" - the related-pages block at the foot of 18 pages. Moved
   here from a per-page <style> block in the BODY of each of those 18 files. All
   18 copies were byte-identical, so this is a lift-and-shift, not a merge.
   (Worth knowing for next time: those body blocks are why a head-only search
   reports .slinks as undefined. It is not.)
   Redesigned at the same time because it read as a footer afterthought: a 26px
   heading and four 36px pills in a 244px strip. Same markup, no HTML change
   beyond deleting the old <style> - the links become real cards in a grid, and
   the hub link takes the lead. Hover matches .card elsewhere on the site. */
.slinks{background:#fff;border-top:1px solid var(--line,#e3e7dc);padding:clamp(54px,6vw,86px) 0}

.qm .slinks .in, .megamenu .slinks .in, footer.footer .slinks .in, nav.kk-nav-swapped .slinks .in{max-width:1160px;margin:0 auto;padding:0 34px}

/* Every one of the 18 blocks has exactly 4 links, one of them the hub - counted,
   not assumed - so an explicit layout beats auto-fit. auto-fit gave 4 columns with
   the hub spanning 2, which left the fourth card stranded alone on a second row. */
.qm .slinks .row, .megamenu .slinks .row, footer.footer .slinks .row, nav.kk-nav-swapped .slinks .row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

/* Cards carry the destination page's own hero as a thumbnail, so "Warehouses" is a
   picture of a warehouse roof rather than a word in a box. Thumbnails are 640x400
   derivatives in dist/img/next/, not the heroes themselves - the commercial hub's
   hero alone is 2.2MB, and four of those at the foot of every page would be absurd.
   13 thumbnails, 13-37KB each, ~100KB per page, all lazy. */
.qm .slinks .row a, .megamenu .slinks .row a, footer.footer .slinks .row a, nav.kk-nav-swapped .slinks .row a{display:flex;flex-direction:column;align-items:stretch;padding:0;overflow:hidden;
  border-radius:14px;border:1px solid var(--line,#e3e7dc);background:#fbfcf8;color:#25332a;
  font-weight:600;font-size:16px;line-height:1.3;text-decoration:none;
  transition:transform .15s,border-color .15s,background .15s}

.qm .slinks .row a:hover, .megamenu .slinks .row a:hover, footer.footer .slinks .row a:hover, nav.kk-nav-swapped .slinks .row a:hover{transform:translateY(-3px);border-color:var(--neon-d,#7fae00);background:#fff}

.qm .slinks .row a:hover .sl-th img, .megamenu .slinks .row a:hover .sl-th img, footer.footer .slinks .row a:hover .sl-th img, nav.kk-nav-swapped .slinks .row a:hover .sl-th img{transform:scale(1.05)}

.qm .slinks .row a.hub .sl-d, .megamenu .slinks .row a.hub .sl-d, footer.footer .slinks .row a.hub .sl-d, nav.kk-nav-swapped .slinks .row a.hub .sl-d{color:rgba(255,255,255,.72);font-size:15px;margin-top:8px}

/* No measure cap on the hub description: capped at 62ch it wrapped to two short
   lines and left the right 40% of a very wide dark card empty, which is what made
   it look unfinished. Uncapped it runs to one line across the card. */
/* The hub is the parent page, so it leads: full first row, and horizontal rather than
   stacked so a wide card does not become a wide photograph. */
.qm .slinks .row a.hub, .megamenu .slinks .row a.hub, footer.footer .slinks .row a.hub, nav.kk-nav-swapped .slinks .row a.hub{grid-column:1/-1;display:grid;grid-template-columns:290px 1fr;align-items:stretch;
  background:var(--ink,#0a0d08);color:#fff;border-color:var(--ink,#0a0d08)}

.qm .slinks .row a.hub:hover, .megamenu .slinks .row a.hub:hover, footer.footer .slinks .row a.hub:hover, nav.kk-nav-swapped .slinks .row a.hub:hover{background:#141a11;border-color:var(--neon,#C3F53C)}

.qm .slinks .row a.hub .sl-th, .megamenu .slinks .row a.hub .sl-th, footer.footer .slinks .row a.hub .sl-th, nav.kk-nav-swapped .slinks .row a.hub .sl-th{aspect-ratio:auto;min-height:132px}

.qm .slinks .row a.hub .sl-t, .megamenu .slinks .row a.hub .sl-t, footer.footer .slinks .row a.hub .sl-t, nav.kk-nav-swapped .slinks .row a.hub .sl-t{align-self:center;padding:24px 30px;font-size:20px}

@media(max-width:820px){.qm .slinks .in, .megamenu .slinks .in, footer.footer .slinks .in, nav.kk-nav-swapped .slinks .in{padding:0 22px}
 .qm .slinks .row, .megamenu .slinks .row, footer.footer .slinks .row, nav.kk-nav-swapped .slinks .row{grid-template-columns:1fr}
 .qm .slinks .row a.hub, .megamenu .slinks .row a.hub, footer.footer .slinks .row a.hub, nav.kk-nav-swapped .slinks .row a.hub{grid-column:auto;grid-template-columns:1fr;font-size:17px}
 .qm .slinks .row a.hub .sl-th, .megamenu .slinks .row a.hub .sl-th, footer.footer .slinks .row a.hub .sl-th, nav.kk-nav-swapped .slinks .row a.hub .sl-th{aspect-ratio:16/10;min-height:0}
 .qm .slinks .row a.hub .sl-t, .megamenu .slinks .row a.hub .sl-t, footer.footer .slinks .row a.hub .sl-t, nav.kk-nav-swapped .slinks .row a.hub .sl-t{padding:15px 18px;font-size:17px}}

@media(prefers-reduced-motion:reduce){
 .qm .slinks .row a, .megamenu .slinks .row a, footer.footer .slinks .row a, nav.kk-nav-swapped .slinks .row a, .qm .slinks .row a:hover, .megamenu .slinks .row a:hover, footer.footer .slinks .row a:hover, nav.kk-nav-swapped .slinks .row a:hover, .slinks .sl-th img, .qm .slinks .row a:hover .sl-th img, .megamenu .slinks .row a:hover .sl-th img, footer.footer .slinks .row a:hover .sl-th img, nav.kk-nav-swapped .slinks .row a:hover .sl-th img{transition:none;transform:none}}


/* ── .cta.onimg ──────────────────────────────────────────────────────────────
   Photographic variant of the big end-of-page CTA, the sibling of .midcta.onimg.
   The difference that matters: .cta .in is CENTRED (max-width:840px, margin auto,
   text-align:center), so the copy sits across the middle of the frame and the
   left-to-right scrim used by .midcta.onimg would leave the headline half-lit.
   This one uses an even wash plus a soft vignette, so the picture survives at the
   edges while the middle stays dark enough to hold white text at any viewport.
   .cta is inlined into 68 pages and already carries position:relative and
   overflow:hidden, so any of them can opt in by adding the class and one <img>. */
.cta.onimg{background:#0a0d08}


/* 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 puts the rule
   ~16px below the baseline - far enough that on a two-line heading it floats between
   the lines and reads as a stray rule cutting through the second one. Hug the text
   instead, and scale with the type so it holds at every heading size. Small-text
   .revlink instances (hero rate, ticker) keep the browser default, which is correct
   there. */
.disp .revlink{text-underline-offset:.07em;text-decoration-thickness:.042em}
.disp .revlink:hover,.disp .revlink:focus-visible{text-decoration-thickness:.06em}



/* Related-stories card thumbnail. The .im slot shipped as a gradient plus a letter
   watermark on all 28 case studies; the photograph goes underneath the watermark,
   which is absolutely positioned, so both read. */
.qm .relc .im img, .megamenu .relc .im img, footer.footer .relc .im img, nav.kk-nav-swapped .relc .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.92;transition:transform .3s ease}

.qm .relc:hover .im img, .megamenu .relc:hover .im img, footer.footer .relc:hover .im img, nav.kk-nav-swapped .relc:hover .im img{transform:scale(1.05)}

.qm .relc .im .wm, .megamenu .relc .im .wm, footer.footer .relc .im .wm, nav.kk-nav-swapped .relc .im .wm, .qm .relc .im .cat, .megamenu .relc .im .cat, footer.footer .relc .im .cat, nav.kk-nav-swapped .relc .im .cat, .qm .relc .im .chip, .megamenu .relc .im .chip, footer.footer .relc .im .chip, nav.kk-nav-swapped .relc .im .chip{z-index:1}


/* 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}
/* blog.css underlines bare <a>; the site footer and menu do not. */
.footer a,.megamenu a{text-decoration:none}
.footer a:hover,.megamenu a:hover{text-decoration:underline}

/* #autocta is the MOBILE cta: blog.css hides it above 1080px on purpose.
   It is position:fixed at the bottom and nearly full width on a phone, so
   once the footer existed it sat on top of the footer links. Fade it out
   while the footer is on screen rather than removing a working CTA. */
#autocta.at-footer{opacity:0;pointer-events:none;transform:translateY(14px)}

/* The site nav is position:fixed, 82px tall, and on main pages it is a
   TRANSPARENT overlay on heroes designed for it. The blog hero is not: its
   breadcrumbs, category chip and H1 sat underneath the header.

   The nav is 82px and the offset is MORE than that on purpose: at exactly
   82px the breadcrumbs and the hero image sit flush against it.

   Padded on .hero, not on body. Body padding worked for layout but left a
   white band between the dark header and the hero's pale green, because the
   hero background started below the padding. Padding the hero grows .bg
   with it (absolute, inset 0) so the colour reaches the header.
   .hero-card is the one child pinned to top:0, so it moves explicitly; the
   others (.fduo, .ftint, .fdots) sit inside the card and follow it.
   Scoped: this file only loads on blog pages. */
.hero{padding-top:118px}
.hero .hero-card{top:118px}
@media(max-width:600px){.hero{padding-top:96px}.hero .hero-card{top:96px}}

/* PRE-EXISTING blog bug, not introduced here. Verified against an untouched
   copy of the page: identical before any of this work.

   blog.css collapses the hero to one column on mobile with
     @media(max-width:1080px){.hero-main{grid-column:1}}
   but a LATER, unconditional rule outranks it on specificity:
     .brand-hero .hero-main{grid-column:2}   (0,2,0) beats (0,1,0)
   so 160 of 167 posts keep a two-column hero on a phone. The headline and
   author sit in a 149px strip on a 390px screen, on the half of traffic
   whose click-through rate is three times desktop.

   Fixed from here rather than by editing blog.css, so it is scoped to the
   pages we already touch and trivially reversible. */
@media(max-width:1080px){.brand-hero .hero-main{grid-column:1}}

/* 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}

/* 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}

/* Video lightbox. reviews.html loads kk-chrome.css ONLY, and these rules lived in
   kk-theme.css, so the lightbox markup added on 26 Sep to fix the dead videos would
   have rendered completely unstyled there. Same three-stylesheet trap as always:
   patching one sheet does nothing on pages that load another. Keep these identical. */
.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)}
.vlb{padding:16px}
.vlb-x{top:-42px}