:root{--navy:#061f3c;--ink:#12283b;--blue:#1269a9;--sky:#83c8ed;--ice:#edf6fb;--soft:#f7fafc;--line:#d9e5ec;--muted:#647684;--white:#fff;--shadow:0 24px 70px rgba(6,31,60,.10)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:#fff;line-height:1.55}
a{color:inherit;text-decoration:none}
a,button{touch-action:manipulation}
img{display:block;max-width:100%}
button{font:inherit}
.shell{width:min(1180px,calc(100% - 40px));margin:auto}
.top{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
.nav{height:76px;display:flex;align-items:center;gap:24px}
.logo{width:188px;height:auto}
.navlinks{display:flex;gap:24px;margin-left:auto;font-size:.9rem;font-weight:750;color:#3b5265}
.navlinks a:hover{color:var(--blue)}
.navcta{display:flex;gap:9px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:12px 20px;border-radius:12px;font-weight:850;border:1px solid transparent}
.btn.primary{background:var(--navy);color:#fff}
.btn.secondary{background:#fff;border-color:#bfd0da;color:var(--navy)}
.hero{padding:74px 0 54px;background:linear-gradient(145deg,#eef7fc 0,#fff 56%)}
.heroGrid{display:grid;grid-template-columns:1.02fr .98fr;gap:54px;align-items:center}
.eyebrow{font-size:.72rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase;color:var(--blue)}
h1,h2,h3{color:var(--navy);letter-spacing:-.04em}
h1{font-size:clamp(3.4rem,7vw,6.8rem);line-height:.88;margin:12px 0 20px;max-width:9ch}
h2{font-size:clamp(2.25rem,4vw,4rem);line-height:.98;margin:0 0 16px}
h3{font-size:1.25rem;margin:0 0 8px}
.heroLead{font-size:1.1rem;color:var(--muted);max-width:58ch;margin:0 0 26px}
.ctaRow{display:flex;gap:10px;flex-wrap:wrap}
.microTrust{display:flex;gap:15px;flex-wrap:wrap;margin-top:20px;font-size:.78rem;font-weight:800;color:#506779}
.microTrust span:before{content:'✓';color:var(--blue);margin-right:6px}
.heroVisual{border-radius:28px;overflow:hidden;min-height:500px;position:relative;background:linear-gradient(145deg,#092e51,#146ea9);box-shadow:var(--shadow);background-size:cover;background-position:center}
.mediaSlot{position:absolute;inset:0;display:grid;place-items:center;padding:42px;text-align:center;color:#dcedf7}
.mediaSlot strong{font-size:1.45rem;display:block;color:#fff}
.mediaSlot small{display:block;max-width:43ch;margin:8px auto 0;line-height:1.45}
.mediaBadge{position:absolute;left:20px;bottom:20px;background:rgba(255,255,255,.92);color:var(--navy);border-radius:12px;padding:10px 13px;font-size:.72rem;font-weight:850}
.mascotHeroCue{position:absolute;top:18px;right:18px;z-index:3;display:grid;grid-template-columns:62px 1fr;gap:10px;align-items:center;width:min(238px,calc(100% - 36px));padding:9px 12px 9px 9px;border:1px solid rgba(255,255,255,.32);border-radius:18px;background:rgba(4,23,42,.86);box-shadow:0 14px 34px rgba(4,23,42,.22);backdrop-filter:blur(10px);color:#fff;animation:mascotCueIn .48s cubic-bezier(.2,.75,.25,1) both}
.mascotHeroCue img{width:62px;height:62px;border-radius:13px;object-fit:cover;background:#eaf6fb}
.mascotHeroCue small{display:block;color:var(--sky);font-size:.59rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.mascotHeroCue strong{display:block;margin-top:2px;font-size:.82rem;line-height:1.2;letter-spacing:-.01em}
@keyframes mascotCueIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.section{padding:86px 0}
.section.soft{background:var(--soft)}
.proofStrip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}
.proofCard{border:1px solid var(--line);border-radius:17px;background:#fff;padding:20px}
.proofCard b{display:block;color:var(--navy);margin-bottom:4px}
.proofCard span{color:var(--muted);font-size:.86rem}
.twoCol{display:grid;grid-template-columns:.86fr 1.14fr;gap:64px;align-items:start}
.stickyTitle{position:sticky;top:112px}
.lead{font-size:1.05rem;color:var(--muted);max-width:62ch}
.detailGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.detail{border:1px solid var(--line);border-radius:16px;padding:19px;background:#fff}
.detail p{color:var(--muted);font-size:.88rem;margin:0}
.guide{background:var(--navy);color:#fff;border-radius:26px;padding:30px;margin-top:24px}
.guide h3{color:#fff}
.guide p{color:#c9dbe7;margin:5px 0 18px}
.paneGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pane{background:#123a5d;border:1px solid #315b7d;border-radius:13px;padding:14px;text-align:center}
.pane b{display:block;font-size:1.25rem}
.pane small{color:#bcd3e3}
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:30px}
.step{padding:20px;border-top:2px solid var(--sky);background:#fff}
.num{font-size:.72rem;font-weight:900;color:var(--blue);letter-spacing:.12em}
.step p{color:var(--muted);font-size:.87rem}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
.baSlot{min-height:330px;border-radius:20px;background:#e7f1f7;border:1px dashed #8fb3c9;display:grid;place-items:center;text-align:center;padding:25px;color:#527084;position:relative;background-size:cover;background-position:center}
.baSlot:before{position:absolute;top:14px;left:14px;padding:6px 8px;border-radius:999px;background:#fff;color:var(--navy);font-size:.65rem;font-weight:900}
.baSlot.before:before{content:'BEFORE'}
.baSlot.after:before{content:'AFTER'}
.quoteBand{background:linear-gradient(135deg,#061f3c,#0a4d7d);color:#fff;border-radius:28px;padding:38px;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center}
.quoteBand h2{color:#fff;font-size:clamp(2rem,4vw,3.4rem);margin:0 0 8px}
.quoteBand p{color:#c7dce9;margin:0;max-width:63ch}
.quoteBand .btn{background:#fff;color:var(--navy)}
.faq{max-width:900px}
.faqItem{border-top:1px solid var(--line);padding:20px 0}
.faqItem h3{font-size:1.05rem}
.faqItem p{color:var(--muted);margin:6px 0 0}
.local{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.localCard{border-radius:22px;background:var(--ice);padding:26px}
.localCard p{color:#546d7f}
.mascotNote{display:grid;grid-template-columns:92px 1fr;gap:18px;align-items:center;border:1px solid var(--line);border-radius:18px;padding:18px;background:#fff;margin-top:20px}
.mascotNote img{width:92px}
.mascotNote p{margin:4px 0 0;color:var(--muted);font-size:.86rem}
.mascotNote img{border-radius:16px;background:var(--ice)}
.brandGuideBand{display:grid;grid-template-columns:116px 1fr auto;gap:24px;align-items:center;padding:22px 26px;border:1px solid #bfd9e8;border-radius:24px;background:linear-gradient(135deg,#f1f9fd,#e1f1f8);box-shadow:0 16px 44px rgba(6,31,60,.08)}
.brandGuideBand img{width:116px;height:126px;object-fit:contain;object-position:center 18%;align-self:end;margin-top:-38px}
.brandGuideBand small{display:block;color:var(--blue);font-size:.66rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
.brandGuideBand strong{display:block;color:var(--navy);font-size:clamp(1.35rem,2.6vw,2rem);line-height:1.05;margin-top:4px;letter-spacing:-.035em}
.brandGuideBand p{margin:7px 0 0;color:#50697a;font-size:.9rem;max-width:64ch}
.footer{background:#061f3c;color:#d4e4ef;padding:44px 0}
.footerIn{display:flex;justify-content:space-between;gap:30px;align-items:center}
.footer img{width:190px;height:auto;background:#fff;border-radius:8px}
.footer a{font-weight:800}
.mobileBar{display:none}
a:focus-visible,button:focus-visible{outline:3px solid var(--sky);outline-offset:3px}

/* Matched Ideal Pro project-result images lead the five core service pages. Generic promotional service visuals stay out of the proof layer. */
body:has(a[href*="?service=windows"]) .heroVisual{background-image:linear-gradient(180deg,rgba(6,31,60,.06),rgba(6,31,60,.18)),url('/assets/img/window-after.webp')}
body:has(a[href*="?service=gutters"]) .heroVisual{background-image:linear-gradient(180deg,rgba(6,31,60,.06),rgba(6,31,60,.18)),url('/assets/img/gutter-after.webp')}
body:has(a[href*="?service=siding"]) .heroVisual{background-image:linear-gradient(180deg,rgba(6,31,60,.06),rgba(6,31,60,.18)),url('/assets/img/siding-after.webp')}
body:has(a[href*="?service=pressure"]) .heroVisual{background-image:linear-gradient(180deg,rgba(6,31,60,.06),rgba(6,31,60,.18)),url('/assets/img/pressure-after.webp')}
body:has(a[href*="?service=roof"]) .heroVisual{background-image:linear-gradient(180deg,rgba(6,31,60,.06),rgba(6,31,60,.18)),url('/assets/img/roof-after.webp')}
body:has(a[href*="?service=windows"]) .heroVisual .mediaSlot,body:has(a[href*="?service=gutters"]) .heroVisual .mediaSlot,body:has(a[href*="?service=siding"]) .heroVisual .mediaSlot,body:has(a[href*="?service=pressure"]) .heroVisual .mediaSlot,body:has(a[href*="?service=roof"]) .heroVisual .mediaSlot{display:none}
body:has(a[href*="?service=windows"]) .heroVisual .mediaBadge,body:has(a[href*="?service=gutters"]) .heroVisual .mediaBadge,body:has(a[href*="?service=siding"]) .heroVisual .mediaBadge,body:has(a[href*="?service=pressure"]) .heroVisual .mediaBadge,body:has(a[href*="?service=roof"]) .heroVisual .mediaBadge{background:rgba(6,31,60,.78);color:#fff;border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px)}

body:has(a[href*="?service=windows"]) .baSlot.before{background-image:url('/assets/img/window-before.webp')}
body:has(a[href*="?service=windows"]) .baSlot.after{background-image:url('/assets/img/window-after.webp')}
body:has(a[href*="?service=gutters"]) .baSlot.before{background-image:url('/assets/img/gutter-before.webp')}
body:has(a[href*="?service=gutters"]) .baSlot.after{background-image:url('/assets/img/gutter-after.webp')}
body:has(a[href*="?service=siding"]) .baSlot.before{background-image:url('/assets/img/siding-before.webp')}
body:has(a[href*="?service=siding"]) .baSlot.after{background-image:url('/assets/img/siding-after.webp')}
body:has(a[href*="?service=pressure"]) .baSlot.before{background-image:url('/assets/img/pressure-before.webp')}
body:has(a[href*="?service=pressure"]) .baSlot.after{background-image:url('/assets/img/pressure-after.webp')}
body:has(a[href*="?service=roof"]) .baSlot.before{background-image:url('/assets/img/roof-before.webp')}
body:has(a[href*="?service=roof"]) .baSlot.after{background-image:url('/assets/img/roof-after.webp')}
body:has(a[href*="?service=windows"]) .baSlot,body:has(a[href*="?service=gutters"]) .baSlot,body:has(a[href*="?service=siding"]) .baSlot,body:has(a[href*="?service=pressure"]) .baSlot,body:has(a[href*="?service=roof"]) .baSlot{color:transparent;border-style:solid;border-color:#d5e1e8;text-shadow:none}

@media(max-width:900px){.navlinks{display:none}
.navcta .secondary{display:none}
.heroGrid,.twoCol,.local{grid-template-columns:1fr}
.heroVisual{min-height:430px}
.stickyTitle{position:static}
.process{grid-template-columns:1fr 1fr}
.paneGrid{grid-template-columns:1fr 1fr}
.quoteBand{grid-template-columns:1fr}
.proofStrip{grid-template-columns:1fr 1fr}
.brandGuideBand{grid-template-columns:92px 1fr}.brandGuideBand img{width:92px;height:104px}
.footerIn{align-items:flex-start;flex-direction:column}
}
@media(max-width:620px){.shell{width:min(100% - 28px,1180px)}
.nav{height:66px}
.logo{width:164px}
.navcta .primary{min-height:48px;padding:9px 12px;font-size:.78rem}
.hero{padding:46px 0 34px}
h1{font-size:clamp(2.75rem,13.5vw,4.25rem);line-height:.91;max-width:10.5ch}
.heroLead{font-size:1rem}
.ctaRow{display:grid;grid-template-columns:1fr}
.ctaRow .btn{width:100%}
.btn{padding:11px 12px}
.heroVisual{min-height:350px;border-radius:22px}
.mediaBadge{max-width:calc(100% - 28px);left:14px;bottom:14px}
.mascotHeroCue{top:12px;right:12px;grid-template-columns:52px 1fr;width:min(218px,calc(100% - 24px));padding:7px 10px 7px 7px;border-radius:15px}
.mascotHeroCue img{width:52px;height:52px;border-radius:11px}
.mascotHeroCue strong{font-size:.76rem}
.section{padding:62px 0}
.proofStrip,.detailGrid,.process,.ba{grid-template-columns:1fr}
.paneGrid{grid-template-columns:1fr 1fr}
.quoteBand{padding:26px;border-radius:22px}
.quoteBand .btn{width:100%}
.mascotNote{grid-template-columns:72px 1fr}
.mascotNote img{width:72px}
.brandGuideBand{grid-template-columns:72px 1fr;padding:18px 18px;gap:14px;border-radius:19px}.brandGuideBand img{width:72px;height:88px;margin-top:-28px}.brandGuideBand .btn{grid-column:1/-1;width:100%}.brandGuideBand strong{font-size:1.3rem}
.footer{padding-bottom:92px}
.mobileBar{position:fixed;bottom:0;left:0;right:0;z-index:40;display:grid;grid-template-columns:1fr 1.4fr;background:#fff;border-top:1px solid var(--line);padding:9px 10px calc(9px + env(safe-area-inset-bottom));box-shadow:0 -8px 28px rgba(6,31,60,.1)}
.mobileBar a{display:grid;place-items:center;min-height:48px;font-weight:900}
.mobileBar .estimate{background:var(--navy);color:#fff;border-radius:10px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
.mascotHeroCue{animation:none}
}

.trustRail{background:#f7fbfd;border-bottom:1px solid var(--line)}
.trustRailIn{min-height:40px;display:flex;align-items:center;justify-content:center;gap:20px;color:#405a70;font-size:.72rem;font-weight:850}
.trustRailIn a{color:var(--blue)}
.brandHero{background:radial-gradient(circle at 72% 18%,rgba(131,200,237,.24),transparent 28%),linear-gradient(145deg,#04192e,#0b426d);display:grid;place-items:end center}
.brandHero img{width:100%;height:100%;object-fit:contain;object-position:center bottom;display:block}
.brandHero .mediaBadge{background:rgba(4,23,42,.86);color:#fff;border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px)}
@media(max-width:620px){.trustRailIn{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:8px 0;text-align:center;font-size:.64rem;line-height:1.25}
}