/* Renewable Energy for Businesses — Net-zero planner: theme layer (SEO Dons, 2026-10-22). Loaded after the template CSS; tokens + a few components only. */
@font-face{font-family:"Outfit";src:url(/theme/fonts/outfit-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url(/theme/fonts/dm-sans-latin-wght-normal.woff2) format("woff2");font-weight:100 1000;font-style:normal;font-display:swap}
:root{--font-sans:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--font-display:"Outfit","DM Sans",system-ui,sans-serif;--color-brand-50:#effaf3;--color-brand-100:#d7f1e0;--color-brand-200:#b0e2c3;--color-brand-300:#7fcb9f;--color-brand-500:#27804f;--color-brand-600:#23774a;--color-brand-700:#1c5f3c;--color-brand-800:#164a30;--color-brand-900:#0e3020;--color-accent-300:#ffc4b3;--color-accent-400:#ff9f86;--color-accent-500:#ff7e5f;--color-accent-600:#f2643f;--color-accent-700:#c9482a;--color-surface-0:#fffdf9;--color-surface-50:#faf6ef;--color-surface-100:#f3ede2;--color-surface-200:#e6dccb;--color-neutral-50:#faf6ef;--color-neutral-100:#f3ede2;--color-neutral-200:#e6dccb;--color-text-primary:#1d2a22;--color-text-secondary:#4f5b53;--color-text-muted:#5f6a63;--radius-xs:8px;--radius-md:14px;--radius-lg:20px;--radius-xl:28px;--radius-2xl:36px;--gradient-accent:linear-gradient(135deg,#ff7e5f 0%,#f2643f 100%);--gradient-hero-dark:linear-gradient(180deg,#1c5f3c 0%,#0e3020 100%);--gradient-mesh:radial-gradient(at 0% 0%,#1c5f3c 0%,transparent 50%),radial-gradient(at 100% 100%,#27804f 0%,transparent 50%);--shadow-glow-accent:0 0 24px rgba(255,126,95,.4);}
h1,h2,h3,h4,h5,h6{letter-spacing:-.02em;font-weight:600;}
.text-display{letter-spacing:-.03em;font-weight:700;}
.eyebrow{color:#23774a}
.bg-dark .eyebrow,.bg-mesh .eyebrow{color:#ffc4b3}
.bg-dark .stat-value,.bg-mesh .stat-value{background:linear-gradient(135deg,#ffd6c9,#ff9f86)!important;-webkit-background-clip:text!important;background-clip:text!important}
.btn{border-radius:999px}
.btn-primary{color:#0e3020}.btn-primary:hover{color:#0e3020}
header[data-mega-menu] a.btn{border-radius:999px;color:#0e3020!important;background:var(--gradient-accent)!important}
a{text-underline-offset:3px}
header[data-mega-menu]>.container-wide>a[href="/"]{display:inline-flex;align-items:center;gap:.55em;font-family:var(--font-display);letter-spacing:-.01em;text-decoration:none!important}
header[data-mega-menu]>.container-wide>a[href="/"]::before{content:"";flex:0 0 auto;width:1.65em;height:1.65em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='16' fill='%231c5f3c'/%3E%3Cpath d='M9 21c0-7 5-12 14-12 0 9-5 14-12 14l-2-2z' fill='%237fcb9f'/%3E%3Cpath d='M10 22l8-8' stroke='%231c5f3c' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='24' cy='24' r='4' fill='%23ff7e5f'/%3E%3C/svg%3E") center/contain no-repeat}
.timeline-number{border-color:#ff7e5f!important;color:#1c5f3c!important}
footer a:not(.btn):not([class*="bg-"]){color:rgba(255,255,255,.86);text-decoration-color:rgba(255,255,255,.28)}
footer a:not(.btn):not([class*="bg-"]):hover{color:#fff;text-decoration-color:currentColor}
a[class*="bg-[var(--color-accent-"],button[class*="bg-[var(--color-accent-"]{color:#0e3020!important}
[class*="text-[var(--color-accent-"]:not(.bg-mesh *):not(.bg-dark *):not(footer *):not(header *):not([class*="bg-[var(--color-brand-7"] *):not([class*="bg-[var(--color-brand-8"] *):not([class*="bg-[var(--color-brand-9"] *){color:#23774a}
.badge-accent{background:color-mix(in srgb,var(--color-accent-300) 45%,#fff);color:var(--color-brand-900)}
:is([class*="bg-[var(--color-brand-7"],[class*="bg-[var(--color-brand-8"],[class*="bg-[var(--color-brand-9"]) :is(h2,h3,h4){color:#fff}
footer h2,footer h3,footer h4,footer .brand-word{color:#fff}
footer li>a{display:inline-block;margin-right:.7em}
.stat-value{font-size:clamp(1.05rem,8.4cqi,2.25rem);overflow-wrap:anywhere}
@media (max-width:1023px){header[data-mega-menu]>.container-wide>a[href="/"]{font-size:1rem;gap:.4em}header[data-mega-menu]>.container-wide>a[href="/"]::before{width:1.3em;height:1.3em}}
@media (max-width:480px){header[data-mega-menu]>.container-wide>a[href="/"]::before{display:none}}
header[data-mega-menu] a:not(.btn){text-decoration:none}header[data-mega-menu] a:not(.btn):hover{text-decoration:underline}
header[data-mega-menu]{background:#fffdf9!important;border-bottom-color:#efe7da!important;}

body{background:#fffdf9}
.hero-split{background:radial-gradient(circle at 88% 18%,rgba(47,143,91,.16),transparent 42%),radial-gradient(circle at 6% 92%,rgba(255,126,95,.16),transparent 46%),#faf6ef!important}
.hero-split::before{display:none}
.hero-image-decor{background:#ff7e5f!important;opacity:.2!important;border-radius:999px!important}
.card-image-wrapper{border-radius:28px!important}
.stat-value{background:linear-gradient(135deg,#1c5f3c,#2f8f5b)!important;-webkit-background-clip:text!important;background-clip:text!important}
.card{border-color:#ece3d4;box-shadow:0 2px 10px rgba(14,48,32,.05)}

/* 2026-10-23 fixes from the phone, speed and accessibility checks */
/* speed: the first screen paints at once instead of fading in after JavaScript runs (the fade held back LCP on phones) */
.reveal-ready :is(.hero-split,.hero-fullbleed,main>section:first-child) :is(.reveal,.reveal-fade,.reveal-left,.reveal-right,.reveal-scale),.reveal-ready main>section:first-child:is(.reveal,.reveal-fade,.reveal-left,.reveal-right,.reveal-scale){opacity:1;transform:none;transition:none}
/* readability: small de-emphasised text was faded with opacity, which took it under the 4.5:1 contrast minimum */
nav.breadcrumbs,.iq-form .iq-gdpr{opacity:1}
main :is(p,span,small,li,caption,figcaption,dd,dt,label,time,cite,div.text-xs,div.text-sm):is(.opacity-60,.opacity-70,.opacity-75,.opacity-80){opacity:1}
.quick-answer .qa-label{font-size:.75rem}
/* tap targets: footer links at least 24px tall */
footer li>a{padding-block:2px}
/* phones: grid and fieldset contents could push the quote form and the calculators wider than the screen */
@media (max-width:1023px){main .grid>*,main fieldset{min-width:0}}
@media (max-width:767px){.prose-content table{display:block;max-width:100%;overflow-x:auto}}
.quote-progress{flex-wrap:wrap}
@media (max-width:480px){main dd.whitespace-nowrap{white-space:normal}}
/* phones: the "Get a quote" bar is always on screen, so the header button gives its room back to the site name */
@media (max-width:480px){header[data-mega-menu]>.container-wide>.shrink-0>a.btn{display:none}}
/* iPhones zoom into any form field under 16px when it is tapped */
.iq-form.iq-form :is(input:not([type=checkbox]):not([type=radio]),select,textarea){font-size:16px}
/* desktop: the phone-menu switch is not used there, so it leaves the keyboard order (its label is hidden on desktop) */
@media (min-width:1024px){#mobile-nav-toggle{display:none}}
/* quote form Next / Get my quote buttons sit on the coral accent: dark text (white was 2.5:1) */
.btn-next.btn-next,.btn-submit.btn-submit{color:#0e3020}

/* Phase 1 of the 2026-10-22 design review */
/* quote form: the template's base rules, for the pages where its own form CSS never loads */
.inline-quote{background:var(--color-surface-50,#f8fafc);padding-block:var(--space-2xl,3rem)}
.iq-grid{display:grid;gap:2rem}
@media (min-width:900px){.iq-grid{grid-template-columns:1fr 1.1fr;align-items:start}}
.iq-form{background:#fff;border:1px solid var(--color-neutral-200,#e5e7eb);border-radius:var(--radius-lg,16px);padding:1.5rem}
.iq-row{display:grid;gap:.75rem;margin-bottom:.75rem}
.iq-block{margin-bottom:.75rem}
.iq-form label{display:block;font-weight:600;font-size:.9rem}
.iq-submit{width:100%;justify-content:center;margin-top:.5rem}
.iq-gdpr{font-size:.8rem;margin-top:.6rem}
/* quote form layout: two fields a row only when the form itself is wide enough; labels bottom-aligned; readable fields */
.iq-form{container-type:inline-size}
.iq-form .iq-row.iq-row{grid-template-columns:1fr;align-items:end}
@container (min-width:440px){.iq-form .iq-row.iq-row{grid-template-columns:1fr 1fr}}
.iq-form.iq-form :is(input:not([type=checkbox]):not([type=radio]),select,textarea){width:100%;min-width:0;margin-top:.3rem;padding:.65rem .75rem;border:1px solid #858b93;border-radius:var(--radius-md,10px);background:#fff;font-weight:400;text-overflow:ellipsis}
/* inside the narrow text column the quote block breaks out to the page width */
.container-prose section.inline-quote{width:min(1120px,100vw - 2rem);margin-inline:calc(50% - min(560px,50vw - 1rem))}
/* long pages: paragraph, heading, list and table rhythm (some templates ship none) */
.prose-content>:not([class])+:not([class]){margin-top:1.1em}
.prose-content>h2:not([class]){margin-top:2.4rem}
.prose-content>h3:not([class]){margin-top:1.8rem}
.prose-content>:is(h2,h3):not([class])+:not([class]){margin-top:.6em}
.prose-content :is(ul,ol):not([class]),.container-prose>:is(ul,ol):not([class]){padding-left:1.4em}
.prose-content ul:not([class]),.container-prose>ul:not([class]){list-style:disc}
.prose-content ol:not([class]),.container-prose>ol:not([class]){list-style:decimal}
.prose-content li:not([class])+li{margin-top:.4em}
.container-prose>:is(p,ul,ol):not([class]){margin-block:0 1.15em}
.container-prose>h2:not([class]){margin:2.4rem 0 .85rem}
.container-prose>h3:not([class]){margin:1.8rem 0 .6rem}
.prose-content :is(th,td){padding:.55rem .75rem;border-bottom:1px solid var(--color-neutral-200,#e5e7eb);text-align:left;vertical-align:top}
.prose-content thead th{font-weight:600}
/* card links: no underline at rest (an unlayered a{} rule beat the template's .no-underline); excerpts in text colour */
a.no-underline:not(:hover){text-decoration:none}
a.no-underline p:not([class*="text-["]){color:var(--color-text-secondary)}
/* footer: long town lists in columns, readable legal line, site name on one line */
footer ul:has(>li:nth-child(12)){columns:2 8rem;column-gap:1.25rem}
footer ul:has(>li:nth-child(12))>li{break-inside:avoid}
footer .border-t.opacity-70{opacity:.92}
footer .container-wide.grid>div:first-child>h3:first-child{font-size:.95rem;overflow-wrap:break-word;word-break:normal}
/* desktop menu: long dropdowns (areas) in three columns so every link fits on a laptop screen */
@media (min-width:1024px){header[data-mega-menu] nav .grid:has(>a:nth-child(16)){grid-template-columns:repeat(3,minmax(0,1fr));width:min(40rem,90vw)}
header[data-mega-menu] nav .grid:has(>a:nth-child(16))>a{padding-block:.3rem}}
/* phones: wide tables scroll inside their box, with a shadow at the edge that still has more */
@media (max-width:767px){:is(.overflow-x-auto,.comparison-wrapper,.prose-content table){background:linear-gradient(90deg,var(--color-surface-0,#fff) 30%,transparent) left/2rem 100% no-repeat local,linear-gradient(270deg,var(--color-surface-0,#fff) 30%,transparent) right/2rem 100% no-repeat local,radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.2),transparent) left/.75rem 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.2),transparent) right/.75rem 100% no-repeat scroll}}
/* keyboard focus visible everywhere (the light accent rings were 1.5-2.4:1) */
:focus-visible{outline:3px solid var(--color-brand-700);outline-offset:2px}
footer :focus-visible{outline-color:#fff}
.mcta.mcta-quote,.floating-cta.floating-cta,.feature-card-tag.feature-card-tag{color:#0e3020}