/* Commercial HVAC UK — Engineered air: theme layer (SEO Dons, 2026-10-22). Loaded after the template CSS; tokens + a few components only. */
@font-face{font-family:"IBM Plex Sans";src:url(/theme/fonts/ibm-plex-sans-latin-wght-normal.woff2) format("woff2");font-weight:100 700;font-style:normal;font-display:swap}
:root{--font-sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--font-display:"IBM Plex Sans","IBM Plex Sans",system-ui,sans-serif;--color-brand-50:#ecf7fb;--color-brand-100:#d3eef6;--color-brand-200:#a6dcec;--color-brand-300:#6cc3dc;--color-brand-500:#0f7a9a;--color-brand-600:#0b6480;--color-brand-700:#0a4d63;--color-brand-800:#0b3646;--color-brand-900:#081f2a;--color-accent-300:#a5f3fc;--color-accent-400:#67e8f9;--color-accent-500:#22d3ee;--color-accent-600:#06b6d4;--color-accent-700:#0891b2;--color-surface-0:#ffffff;--color-surface-50:#f5f8fa;--color-surface-100:#eaf0f3;--color-surface-200:#d7e1e7;--color-neutral-50:#f5f8fa;--color-neutral-100:#eaf0f3;--color-neutral-200:#d7e1e7;--color-text-primary:#0b1720;--color-text-secondary:#3a4d59;--color-text-muted:#5c6d78;--radius-xs:2px;--radius-md:4px;--radius-lg:6px;--radius-xl:8px;--radius-2xl:10px;--gradient-accent:linear-gradient(135deg,#22d3ee 0%,#06b6d4 100%);--gradient-hero-dark:linear-gradient(180deg,#0a4d63 0%,#081f2a 100%);--gradient-mesh:radial-gradient(at 0% 0%,#0a4d63 0%,transparent 50%),radial-gradient(at 100% 100%,#0f7a9a 0%,transparent 50%);--shadow-glow-accent:0 0 24px rgba(34,211,238,.35);}
h1,h2,h3,h4,h5,h6{letter-spacing:-.015em;font-weight:600;}
.text-display{letter-spacing:-.02em;font-weight:700;}
.eyebrow{color:#0b6480}
.bg-dark .eyebrow,.bg-mesh .eyebrow{color:#a5f3fc}
.bg-dark .stat-value,.bg-mesh .stat-value{background:linear-gradient(135deg,#a5f3fc,#22d3ee)!important;-webkit-background-clip:text!important;background-clip:text!important}
.btn{border-radius:3px}
.btn-primary{color:#081f2a}.btn-primary:hover{color:#081f2a}
header[data-mega-menu] a.btn{border-radius:3px;color:#081f2a!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%3Crect width='32' height='32' rx='4' fill='%2322d3ee'/%3E%3Cpath d='M6 11c4-3 8 3 12 0s6-2 8-1M6 17c4-3 8 3 12 0s6-2 8-1M6 23c4-3 8 3 12 0s6-2 8-1' fill='none' stroke='%23081f2a' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.timeline-number{border-color:#22d3ee!important;color:#0a4d63!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:#081f2a!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:#0b6480}
.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:#0b1720!important;border-bottom-color:#14313f!important;box-shadow:none!important}
header[data-mega-menu]>.container-wide>a[href="/"]{color:#ffffff!important}
header[data-mega-menu] nav[aria-label="Primary"]>div>button,header[data-mega-menu] nav[aria-label="Primary"]>a{color:#d6e6ee}
header[data-mega-menu] nav[aria-label="Primary"]>div>button:hover,header[data-mega-menu] nav[aria-label="Primary"]>a:hover{background:#14313f!important;color:#fff}
header[data-mega-menu] .lg\:hidden.cursor-pointer{color:#d6e6ee}

.hero-split{background-color:#0b1720!important;background-image:linear-gradient(rgba(103,232,249,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(103,232,249,.075) 1px,transparent 1px)!important;background-size:32px 32px!important;color:#e6f1f5}
.hero-split::before{background:radial-gradient(circle,rgba(34,211,238,.18) 0%,transparent 70%)!important}
.hero-split h1,.hero-split .text-display{color:#fff}
.hero-split .text-lede,.hero-split p{color:#bcd0da}
.hero-split .eyebrow{color:#67e8f9}
.hero-split .stat-value{background:linear-gradient(135deg,#a5f3fc,#22d3ee)!important;-webkit-background-clip:text!important;background-clip:text!important}
.hero-split .stat-label{color:#9fb6c2}
.hero-split [class*="border-t"]{border-color:rgba(255,255,255,.14)!important}
.hero-split .btn-secondary{background:transparent;color:#e6f1f5;border-color:rgba(230,241,245,.55)}
.hero-split .btn-secondary:hover{background:rgba(255,255,255,.08);color:#fff}
.hero-image-decor{background:#22d3ee!important;opacity:.18!important;border-radius:4px!important}
.card-image-wrapper{border-radius:6px!important;box-shadow:0 0 0 1px rgba(103,232,249,.25),0 24px 48px rgba(0,0,0,.35)!important}
.eyebrow{letter-spacing:.16em}
.eyebrow::before{content:"";display:inline-block;width:20px;height:2px;margin-right:10px;vertical-align:middle;background:currentColor}
.card{box-shadow:none;border-color:var(--color-surface-200)}
.card:hover{border-color:var(--color-brand-500);box-shadow:0 8px 24px rgba(8,31,42,.08)}

/* 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 light cyan accent: dark text, as on every other HVAC button (white was 1.8:1) */
.btn-next.btn-next,.btn-submit.btn-submit{color:#081f2a}

/* 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:#081f2a}
header[data-mega-menu] nav[aria-label="Primary"] :focus-visible{outline-color:#fff}