/* ── roofing-template additions (on top of the Recommended Roofing design system in base.css) ── */
/* Header call button (replaces Free Quote + plain phone link). NEVER hidden on mobile. */
.top-call{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;flex:none;padding:.8rem 1.3rem;font-size:.95rem;border-radius:8px}
.top-call svg{flex:none}
.nav-in{gap:28px}
.nav-links{gap:26px}
.sec.grey{background:#f3f0ec}
.sec.white{background:#fff}
.lead{font-size:1.12rem;line-height:1.8;color:#3f3a35;max-width:78ch}
.lead a,.prose a{color:var(--red);font-weight:600;border-bottom:1px solid rgba(225,27,34,.35)}
.lead a:hover,.prose a:hover{border-color:var(--red)}
.prose p{color:#57534e;line-height:1.85;font-size:1.04rem;margin-bottom:1.3rem;max-width:78ch}
.prose h3{font-family:'Sora';text-transform:none;font-size:1.25rem;font-weight:700;letter-spacing:-.01em;line-height:1.3;margin:2rem 0 .8rem}
.prose ul{margin:0 0 1.4rem 1.2rem;color:#57534e;line-height:1.8;max-width:76ch}
.prose li{margin-bottom:.4rem}
.crumbs{background:#fff;border-bottom:1px solid var(--line);font-size:.82rem;color:var(--mut)}
.crumbs .wrap{padding-top:14px;padding-bottom:14px}.crumbs a{color:var(--mut)}.crumbs a:hover{color:var(--red)}.bc-sep{margin:0 8px;opacity:.6}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border:1px solid var(--line)}
.card-grid.two{grid-template-columns:repeat(2,1fr)}.card-grid.four{grid-template-columns:repeat(4,1fr)}
.card{background:var(--paper);display:flex;flex-direction:column;transition:.25s;color:var(--ink)}
.card:hover{background:#fff}
.card-img{aspect-ratio:16/11;overflow:hidden;background:#e7e2dc}.card-img img{width:100%;height:100%;object-fit:cover;transition:.5s}.card:hover .card-img img{transform:scale(1.05)}
.card-b{padding:28px 28px 32px;display:flex;flex-direction:column;flex:1}
.card-b h3{font-size:1.4rem;margin-bottom:12px}
.card-b p{color:var(--mut);font-size:.95rem;line-height:1.7}
.card-b .go{margin-top:auto;padding-top:18px}
.go{display:inline-flex;align-items:center;gap:8px;color:var(--red);font-weight:600;font-size:.92rem}
.tag{display:inline-block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--red);border:1px solid var(--red);padding:3px 9px;margin-bottom:12px;align-self:flex-start}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-block;border:1px solid var(--line);background:#fff;padding:8px 14px;border-radius:999px;font-size:.88rem;font-weight:600;color:#334155;transition:.15s}
.chip:hover{border-color:var(--red);color:var(--red)}
.split{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:start}
.split.rev{grid-template-columns:.8fr 1.2fr}
.split img.photo{width:100%;height:auto;max-height:560px;object-fit:cover;border-radius:2px}
.figcap{display:block;margin-top:10px;font-size:.78rem;color:var(--mut);font-style:italic}
.list-check{list-style:none;margin:0 0 1.4rem;padding:0;display:grid;gap:12px;max-width:76ch}
.list-check li{display:flex;gap:12px;color:#57534e;line-height:1.65}
.list-check li::before{content:"✓";color:#16a34a;font-weight:800;flex:0 0 auto}
.list-x li::before{content:"✕";color:#dc2626}
.sec.dark .list-check li{color:#a8a29e}
.price-light{border:1px solid var(--line);background:#fff;overflow:auto}
.price-light table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:520px}
.price-light th,.price-light td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line)}
.price-light thead{background:var(--ink);color:#fff}.price-light th{font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.price-light td:nth-child(2){font-weight:700;white-space:nowrap}
.note{background:#fff;border-left:4px solid var(--red);padding:18px 22px;color:#57534e;font-size:.95rem;line-height:1.7;margin:24px 0;max-width:80ch}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line);border:1px solid var(--line)}
.stat-c{background:#fff;padding:30px 24px}.stat-c b{display:block;font-family:'Anton';font-size:2.3rem;line-height:1;color:var(--red);margin-bottom:6px}.stat-c span{color:var(--mut);font-size:.88rem}
.proc-wrap .process-grid{grid-template-columns:repeat(5,1fr)}
.faq-light details{border-bottom:1px solid var(--line)}.faq-light summary{color:var(--ink)}.faq-light details>div{color:var(--mut)}
.sec:not(.dark) .faq summary{color:var(--ink)}.sec:not(.dark) .faq details{border-bottom-color:var(--line)}.sec:not(.dark) .faq details>div{color:#57534e}
.rev-grid .rev .src{display:block;margin-top:6px;font-size:.78rem;color:var(--mut);font-weight:400}
.rev .stars-line{color:#f5a623;display:flex;gap:2px;margin-bottom:6px}
.hv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.hv-card .hv-t{color:var(--ink)}
.img-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.img-grid figure{margin:0;background:#fff;border:1px solid var(--line)}.img-grid img{width:100%;height:320px;object-fit:cover}.img-grid figcaption{padding:14px 16px;font-size:.86rem;color:#57534e;line-height:1.5}
.cs{background:#fff;border:1px solid var(--line);padding:40px;margin-bottom:28px}
.cs h2,.cs h3.cs-h{font-size:1.9rem;margin:8px 0 10px}
.cs-meta{color:var(--mut);font-size:.86rem;margin-bottom:18px}
.cs h4,.cs h3.cs-sub{font-family:'Sora';font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#c4151b;margin:22px 0 6px}
.cs p{color:#57534e;line-height:1.8;max-width:80ch}
.cs .hv-grid{grid-template-columns:repeat(4,minmax(0,200px));margin-top:22px}
.article{max-width:820px}
.article h2{font-size:clamp(1.6rem,3vw,2.3rem);margin:2.4rem 0 1rem;line-height:1.05}
.article h3{font-family:'Sora';text-transform:none;font-size:1.2rem;font-weight:700;margin:1.8rem 0 .6rem;line-height:1.3}
.article p,.article li{color:#44403c;line-height:1.85;font-size:1.05rem}
.article p{margin-bottom:1.2rem}.article ul,.article ol{margin:0 0 1.4rem 1.3rem}.article li{margin-bottom:.45rem}
.article a{color:var(--red);font-weight:600;border-bottom:1px solid rgba(225,27,34,.35)}
.article table{width:100%;border-collapse:collapse;margin:1.4rem 0;font-size:.95rem}.article th,.article td{border:1px solid var(--line);padding:10px 14px;text-align:left}.article th{background:#f3f0ec}
.post-meta{display:flex;flex-wrap:wrap;gap:14px;color:var(--mut);font-size:.84rem;margin-top:16px}
.legal h2{font-size:1.5rem;margin:2.2rem 0 .8rem}.legal p,.legal li{color:#44403c;line-height:1.8}.legal ul{margin:0 0 1rem 1.3rem}.legal p{margin-bottom:1rem}.legal{max-width:860px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.office{background:#fff;border:1px solid var(--line);padding:24px 26px;margin-bottom:14px}.office h3{font-size:1.3rem;margin-bottom:8px}.office p{color:#57534e;font-size:.95rem;line-height:1.6}.office a.ph{font-weight:700}
.nearby{display:flex;flex-wrap:wrap;gap:8px}
.cta-box{min-height:300px}
@media(max-width:1100px){.hv-grid{grid-template-columns:repeat(2,1fr)}.card-grid.four{grid-template-columns:repeat(2,1fr)}.nav-links{gap:18px}}
@media(max-width:960px){.card-grid,.card-grid.two{grid-template-columns:1fr 1fr}.split,.split.rev,.contact-grid{grid-template-columns:1fr;gap:32px}.stat-row{grid-template-columns:1fr 1fr}.img-grid{grid-template-columns:1fr 1fr}.nav-links .nav-item.has-dropdown>a{width:100%}.proc-wrap .process-grid{grid-template-columns:repeat(2,1fr)}.nav-in{height:84px}}
@media(max-width:620px){.card-grid,.card-grid.two,.card-grid.four,.img-grid{grid-template-columns:1fr}.hv-grid{grid-template-columns:1fr 1fr;gap:12px}.stat-row{grid-template-columns:1fr 1fr}.cs{padding:24px}.cs .hv-grid{grid-template-columns:1fr 1fr}.proc-wrap .process-grid{grid-template-columns:1fr}.logo-img{height:44px}}
.pg-hero.pg-hero-img{min-height:min(52vh,560px)}
.brandlink{flex:0 0 auto}.logo-img{height:50px;max-width:none}
.nav-links a,.btn{white-space:nowrap}
.nav-links{gap:22px;font-size:.92rem}
@media(max-width:1240px){.nav-in{gap:20px}}
@media(max-width:960px){.top-call{display:inline-flex;padding:10px 14px;font-size:.9rem}}
@media(max-width:480px){.top-call span{display:none}.top-call{padding:11px;border-radius:999px}.nav-in{gap:10px}}

/* SEO/a11y audit 2026-10-03: contrast (WCAG AA 4.5:1) + screen-reader-only text */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:root{--mut:#6a635d}
.eyebrow i{color:#c4151b}.sec.dark .eyebrow i,.creds-track i{color:#ff6b70}
.ref-loc{color:#6a635d}.ftr-bar{color:#a8a29e}
.card-link{position:relative}.card-a{color:inherit}.card-a::after{content:"";position:absolute;inset:0}.card-a:focus-visible{outline:none}.card-a:focus-visible::after{outline:3px solid var(--red);outline-offset:-3px}
.go{color:#c4151b}
.why-grid{grid-template-columns:repeat(3,1fr)}@media(max-width:960px){.why-grid{grid-template-columns:1fr 1fr}}@media(max-width:620px){.why-grid{grid-template-columns:1fr}.why-grid .why{padding:28px 22px!important}}
.office.owner{text-align:center}.office.owner img{width:220px;max-width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:50%;margin:0 auto 14px;display:block}.office.owner p{margin:0}

@media(max-width:760px){.office-map{grid-template-columns:1fr!important}.office-map .card{border-right:0!important;border-bottom:1px solid var(--line)}}

.readnext{font-size:.92rem;color:var(--mut);line-height:1.7}.readnext a{color:var(--ink);font-weight:600;border-bottom:1px solid var(--red);text-decoration:none}.readnext a:hover{color:var(--red)}