/* Solar Panels and Installation — Daylight: theme layer (SEO Dons, 2026-10-22). Loaded after the template CSS; tokens + a few components only. */
@font-face{font-family:"Nunito";src:url(/theme/fonts/nunito-latin-wght-normal.woff2) format("woff2");font-weight:200 1000;font-style:normal;font-display:swap}
:root{--font-sans:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;--font-display:"Nunito","Nunito",system-ui,sans-serif;--color-brand-50:#fffbeb;--color-brand-100:#fef3c7;--color-brand-200:#fde68a;--color-brand-300:#fcd34d;--color-brand-500:#b45309;--color-brand-600:#92400e;--color-brand-700:#78350f;--color-brand-800:#5a2a0b;--color-brand-900:#3a1c08;--color-accent-300:#bae6fd;--color-accent-400:#7dd3fc;--color-accent-500:#38bdf8;--color-accent-600:#0ea5e9;--color-accent-700:#0369a1;--color-surface-0:#ffffff;--color-surface-50:#fffaf0;--color-surface-100:#fff3dc;--color-surface-200:#f3e3c3;--color-neutral-50:#fffaf0;--color-neutral-100:#fff3dc;--color-neutral-200:#f3e3c3;--color-text-primary:#2a1a07;--color-text-secondary:#5d4a33;--color-text-muted:#755e42;--radius-xs:10px;--radius-md:16px;--radius-lg:22px;--radius-xl:28px;--radius-2xl:36px;--gradient-accent:linear-gradient(135deg,#38bdf8 0%,#0ea5e9 100%);--gradient-hero-dark:linear-gradient(180deg,#78350f 0%,#3a1c08 100%);--gradient-mesh:radial-gradient(at 0% 0%,#78350f 0%,transparent 50%),radial-gradient(at 100% 100%,#b45309 0%,transparent 50%);--shadow-glow-accent:0 0 24px rgba(56,189,248,.45);}
h1,h2,h3,h4,h5,h6{letter-spacing:-.01em;font-weight:800;}
.text-display{letter-spacing:-.02em;font-weight:900;}
.eyebrow{color:#0369a1}
.bg-dark .eyebrow,.bg-mesh .eyebrow{color:#bae6fd}
.bg-dark .stat-value,.bg-mesh .stat-value{background:linear-gradient(135deg,#fde68a,#fcd34d)!important;-webkit-background-clip:text!important;background-clip:text!important}
.btn{border-radius:999px}
.btn-primary{color:#0b2b3d}.btn-primary:hover{color:#0b2b3d}
header[data-mega-menu] a.btn{border-radius:999px;color:#0b2b3d!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='%23fff3dc'/%3E%3Ccircle cx='16' cy='16' r='6.5' fill='%23f59e0b'/%3E%3Cg stroke='%23f59e0b' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M16 3.5v3.5M16 25v3.5M3.5 16H7M25 16h3.5M7.2 7.2l2.4 2.4M22.4 22.4l2.4 2.4M7.2 24.8l2.4-2.4M22.4 9.6l2.4-2.4'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.timeline-number{border-color:#38bdf8!important;color:#78350f!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:#0b2b3d!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:#0369a1}
.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]{border-bottom:3px solid #fcd34d!important;}

.hero-split{background:radial-gradient(circle at 82% 8%,rgba(252,211,77,.55),transparent 42%),linear-gradient(180deg,#fff6db 0%,#ffffff 78%)!important}
.hero-split::before{background:radial-gradient(circle,rgba(56,189,248,.18) 0%,transparent 70%)!important}
.hero-image-decor{background:#fcd34d!important;opacity:.45!important;border-radius:999px!important}
.card-image-wrapper{border-radius:28px!important;box-shadow:0 24px 48px rgba(58,28,8,.14)!important}
.stat-value{background:linear-gradient(135deg,#b45309,#d97706)!important;-webkit-background-clip:text!important;background-clip:text!important}
.card{border-color:#f3e3c3;box-shadow:0 4px 14px rgba(58,28,8,.06)}

/* 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}}
/* the cost estimator's label used the light sky accent (2.7:1 on cream) and its result labels were under 12px */
#cost-estimator .eyebrow{color:#0369a1}
.est-result .est-r-label{font-size:.75rem}
/* quote form Next / Get my quote buttons sit on the sky accent: dark text (white was 2.1:1) */
.btn-next.btn-next,.btn-submit.btn-submit{color:#0b2b3d}

/* 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:#0b2b3d}