/* Commercial Flat Roofing — Site-ready: theme layer (SEO Dons, 2026-10-22). Loaded after the template CSS; tokens + a few components only. */
@font-face{font-family:"Barlow Condensed";src:url(/theme/fonts/barlow-condensed-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/theme/fonts/barlow-condensed-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url(/theme/fonts/barlow-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url(/theme/fonts/barlow-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
:root{--font-sans:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;--font-display:"Barlow Condensed","Barlow",system-ui,sans-serif;--color-brand-50:#f6f5f3;--color-brand-100:#e9e6e1;--color-brand-200:#d4cfc7;--color-brand-300:#aaa39a;--color-brand-500:#5f5a53;--color-brand-600:#46423d;--color-brand-700:#2f2c29;--color-brand-800:#22201e;--color-brand-900:#151413;--color-accent-300:#ffc685;--color-accent-400:#ffa94d;--color-accent-500:#ff8a1f;--color-accent-600:#f2700a;--color-accent-700:#b24d00;--color-surface-0:#ffffff;--color-surface-50:#f6f5f3;--color-surface-100:#ecebe8;--color-surface-200:#dbd8d3;--color-neutral-50:#f6f5f3;--color-neutral-100:#ecebe8;--color-neutral-200:#dbd8d3;--color-text-primary:#151413;--color-text-secondary:#4b4741;--color-text-muted:#69645d;--radius-xs:0px;--radius-md:2px;--radius-lg:2px;--radius-xl:3px;--radius-2xl:4px;--gradient-accent:linear-gradient(135deg,#ff8a1f 0%,#f2700a 100%);--gradient-hero-dark:linear-gradient(180deg,#2f2c29 0%,#151413 100%);--gradient-mesh:radial-gradient(at 0% 0%,#2f2c29 0%,transparent 50%),radial-gradient(at 100% 100%,#5f5a53 0%,transparent 50%);--shadow-glow-accent:0 0 24px rgba(255,138,31,.45);}
h1,h2,h3,h4,h5,h6{letter-spacing:.005em;font-weight:700;line-height:1.08;}
.text-display{letter-spacing:.005em;font-weight:700;text-transform:uppercase;line-height:.98;}
.eyebrow{color:#9e4400}
.bg-dark .eyebrow,.bg-mesh .eyebrow{color:#ffc685}
.bg-dark .stat-value,.bg-mesh .stat-value{background:linear-gradient(135deg,#ffc685,#ff8a1f)!important;-webkit-background-clip:text!important;background-clip:text!important}
.btn{border-radius:2px}
.btn-primary{color:#151413}.btn-primary:hover{color:#151413}
header[data-mega-menu] a.btn{border-radius:2px;color:#151413!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%3Cdefs%3E%3Cpattern id='h' width='8' height='8' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'%3E%3Crect width='4' height='8' fill='%23ff8a1f'/%3E%3Crect x='4' width='4' height='8' fill='%23151413'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='32' height='32' fill='url(%23h)'/%3E%3Crect x='5' y='5' width='22' height='22' fill='%23151413'/%3E%3Cpath d='M9 20l7-7 7 7' fill='none' stroke='%23ff8a1f' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat}
.timeline-number{border-color:#ff8a1f!important;color:#2f2c29!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:#151413!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:#9e4400}
.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:#151413!important;border-bottom-color:#ff8a1f!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:#ebe6df}
header[data-mega-menu] nav[aria-label="Primary"]>div>button:hover,header[data-mega-menu] nav[aria-label="Primary"]>a:hover{background:#2a2724!important;color:#fff}
header[data-mega-menu] .lg\:hidden.cursor-pointer{color:#ebe6df}

header[data-mega-menu]{border-bottom:4px solid #ff8a1f!important}
h1,h2{text-transform:uppercase;line-height:1.02}
.hero-fullbleed{position:relative}
.hero-fullbleed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;background:repeating-linear-gradient(-45deg,#ff8a1f 0 14px,#151413 14px 28px);z-index:2}
.hero-split::before{background:radial-gradient(circle,rgba(255,138,31,.14) 0%,transparent 70%)!important}
.eyebrow{letter-spacing:.14em}
.eyebrow::before{content:"";display:inline-block;width:12px;height:12px;margin-right:8px;vertical-align:-1px;background:repeating-linear-gradient(-45deg,#ff8a1f 0 3px,#151413 3px 6px)}
.btn{text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.stat-value{background:linear-gradient(135deg,#b24d00,#f2700a)!important;-webkit-background-clip:text!important;background-clip:text!important}
.card{box-shadow:none;border:1px solid #dbd8d3;border-top:3px solid #ff8a1f}

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

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