/* Service stories reuse home tokens while keeping one shared visual language. */
.service-page{background:#f8fafb;color:#111827;overflow:hidden}
.service-page em{font-style:normal;color:#1b8d88}
.service-hero{position:relative;padding:148px 0 74px;color:#fff;overflow:hidden}
.service-hero::before{content:'';position:absolute;inset:auto -13% -230px 34%;height:500px;border:1px solid rgba(255,255,255,.13);border-radius:50%;box-shadow:0 0 0 90px rgba(255,255,255,.025),0 0 0 205px rgba(255,255,255,.018);pointer-events:none}
.service-hero-layout{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(26px,5vw,80px);min-height:590px}
.service-hero-copy{position:relative;z-index:1}
.service-hero .section-index{color:#8ff5dc}
.service-hero h1{font:600 clamp(51px,5.1vw,86px)/1.03 JakartaLocal,sans-serif;letter-spacing:-.075em;margin:0 0 29px;max-width:820px}
.service-hero h1 em{color:#66e2c1}
.service-hero-copy>p:not(.page-breadcrumb){max-width:615px;font-size:clamp(16px,1.4vw,19px);line-height:1.7;color:#d5eeee}
.service-hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:21px;margin:35px 0 44px}.service-text-link{color:#e7fffa;font-weight:700;text-decoration:none;font-size:13px}.service-text-link:hover{text-decoration:underline}
.service-proof-list{display:flex;flex-wrap:wrap;gap:12px 26px;padding:23px 0 0;margin:0;list-style:none;border-top:1px solid rgba(255,255,255,.24);font-size:11px;font-weight:750;color:#ddf7f1}
.service-proof-list li::before{content:'✦';color:#34d399;margin-right:8px}
.service-hero-media{position:relative;border-radius:22px;min-height:490px;overflow:hidden;box-shadow:0 35px 70px rgba(0,24,39,.28);transform:rotate(1.5deg);transition:transform .55s var(--ease)}
.service-hero-media:hover{transform:rotate(0) translateY(-8px)}
.service-hero-media img{display:block;width:100%;height:100%;min-height:490px;object-fit:cover;transition:transform 1.2s var(--ease)}.service-hero-media:hover img{transform:scale(1.05)}
.service-hero-media::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,38,45,.68),transparent 44%);pointer-events:none}
.service-photo-label{position:absolute;z-index:1;left:24px;right:24px;bottom:23px;display:flex;justify-content:space-between;color:#fff;font-size:10px;letter-spacing:.16em;font-weight:800}
.service-photo-label b{font-size:20px;line-height:.5}
.service-section{padding:110px 0}.service-section-head{display:grid;grid-template-columns:1fr minmax(230px,.35fr);align-items:end;gap:30px;margin-bottom:42px}.service-section-head>.section-index{grid-column:1/-1;margin-bottom:-19px;color:#1b6b6e}
.service-section-head h2,.service-split h2,.service-faq h2,.service-ending h2{font:600 clamp(46px,5.5vw,82px)/1.06 JakartaLocal,sans-serif;letter-spacing:-.075em;margin:0}
.service-section-head p{max-width:365px;margin:0 0 8px;font-size:14px;line-height:1.7;color:#53636a}
.service-diagnostic{background:#f0fdfa}.service-diagnostic-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:16px}
.service-diagnostic-options{display:grid;gap:10px}.service-diagnostic-options button{position:relative;text-align:left;min-height:103px;padding:19px 60px 19px 23px;background:#fff;border:1px solid #d6e7e5;border-radius:13px;color:#14344a;cursor:pointer;transition:transform .35s var(--ease),border-color .35s,box-shadow .35s,background .35s}
.service-diagnostic-options button span{display:block;color:#1b6b6e;text-transform:uppercase;font-size:10px;font-weight:850;letter-spacing:.12em;margin-bottom:8px}
.service-diagnostic-options button strong{font:600 clamp(19px,2vw,25px) JakartaLocal,sans-serif;letter-spacing:-.04em}.service-diagnostic-options button i{position:absolute;right:25px;top:50%;transform:translateY(-50%);font-style:normal;font-size:20px}
.service-diagnostic-options button:hover,.service-diagnostic-options button:focus-visible,.service-diagnostic-options button.is-active{transform:translateX(6px);border-color:#00a98d;background:#f8fffd;box-shadow:0 15px 30px rgba(27,107,110,.11);outline:0}
.service-diagnostic-result{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:450px;padding:clamp(30px,5vw,65px);border-radius:15px;background:var(--gradient-brand);color:#fff;overflow:hidden}
.service-diagnostic-result::before{content:'';position:absolute;width:400px;height:400px;border:1px solid rgba(255,255,255,.12);border-radius:50%;top:-190px;right:-80px;box-shadow:0 0 0 55px rgba(255,255,255,.018),0 0 0 120px rgba(255,255,255,.014);pointer-events:none}
.service-status-light{position:absolute;top:35px;left:45px;width:12px;height:12px;border-radius:50%;background:#34d399;box-shadow:0 0 0 10px rgba(52,211,153,.12),0 0 28px #34d399;animation:statusGlow 3s ease-in-out infinite}
@keyframes statusGlow{50%{box-shadow:0 0 0 20px rgba(52,211,153,0),0 0 35px #34d399}}
.service-diagnostic-result .section-index{color:#8ff5dc}
.service-diagnostic-result h3{font:600 clamp(35px,4.2vw,64px)/1.06 JakartaLocal,sans-serif;letter-spacing:-.065em;margin:18px 0}
.service-diagnostic-result>p{max-width:580px;font-size:16px;line-height:1.65;color:#d9f4ef}
.service-advice{margin:19px 0 24px;padding-top:22px;border-top:1px solid rgba(255,255,255,.2)}.service-advice span{font-size:10px;font-weight:850;letter-spacing:.15em;color:#77e9ce}.service-advice p{font-size:14px;line-height:1.65;color:#d9f4ef;max-width:540px}
.service-diagnostic-result a{color:#84f5d8;font-size:14px;font-weight:850;text-decoration:none}.service-diagnostic-result a:hover{text-decoration:underline}
.service-step-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.service-step-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.service-step-grid li{position:relative;min-height:315px;padding:30px;border:1px solid #d6e7e5;border-radius:15px;background:#fff;overflow:hidden;transition:transform .4s var(--ease),border-color .4s,box-shadow .4s}
.service-step-grid li::after{content:'';position:absolute;right:-40px;top:-40px;width:145px;height:145px;border:1px solid rgba(0,169,141,.22);border-radius:50%;box-shadow:0 0 0 32px rgba(0,169,141,.035);transition:transform .5s}
.service-step-grid li:hover{transform:translateY(-8px);border-color:#00a98d;box-shadow:0 22px 42px rgba(27,107,110,.12)}.service-step-grid li:hover::after{transform:scale(1.35)}
.service-step-grid li b{display:grid;place-items:center;width:47px;height:47px;border-radius:50%;background:#e0f2f1;color:#1b6b6e;font:800 13px JakartaLocal,sans-serif;margin-bottom:50px}
.service-step-grid li h3{font:600 25px/1.18 JakartaLocal,sans-serif;letter-spacing:-.05em;margin:0 0 13px}.service-step-grid li p{font-size:13px;line-height:1.65;color:#52616b;margin:0}
.service-note{font-size:12px;line-height:1.6;color:#63737a;margin:24px 0 0}
.service-split{padding:100px 0;background:#102f39;color:#fff}.service-split-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);align-items:center;gap:clamp(35px,7vw,100px)}
.service-split .section-index{color:#8ff5dc}.service-split h2{margin:22px 0 23px}.service-split h2 em{color:#6fe2ca}.service-split p{max-width:620px;color:#c9e4e3;line-height:1.75;font-size:16px}.service-split ul{list-style:none;padding:0;margin:23px 0 35px}.service-split li{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:13px}.service-split li::before{content:'↗';margin-right:15px;color:#34d399}
.service-split .inline-link{color:#84f5d8}.service-split-visual{position:relative;border-radius:19px;overflow:hidden;transform:rotate(-2deg);box-shadow:0 28px 60px rgba(0,0,0,.23);transition:transform .5s var(--ease)}.service-split-visual:hover{transform:rotate(0) translateY(-7px)}.service-split-visual img{width:100%;height:445px;object-fit:cover;display:block}.service-split-visual span{position:absolute;left:22px;bottom:20px;background:#f8fffd;color:#146481;padding:11px 14px;font-size:10px;font-weight:850;letter-spacing:.11em}
.service-warranty{background:#f0fdfa}.service-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.service-compare article{padding:clamp(28px,4vw,55px);background:#fff;border:1px solid #d5e6e5;border-radius:16px;transition:transform .4s,border-color .4s,box-shadow .4s}.service-compare article:hover{transform:translateY(-7px);border-color:#00a98d;box-shadow:0 22px 40px rgba(27,107,110,.1)}.service-compare article span{font-size:10px;letter-spacing:.15em;color:#1b6b6e;font-weight:850}.service-compare article h3{font:600 32px/1.18 JakartaLocal,sans-serif;letter-spacing:-.06em;margin:30px 0 12px}.service-compare article p{color:#52616b;line-height:1.7}
.service-faq-layout{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:clamp(35px,8vw,110px)}.service-faq h2{margin:20px 0}.service-faq .section-index{color:#1b6b6e}
.service-faq-list details{border-bottom:1px solid #cbdcdd;padding:22px 0}.service-faq-list details:first-child{border-top:1px solid #cbdcdd}.service-faq-list summary{position:relative;cursor:pointer;list-style:none;padding-right:30px;font:600 clamp(18px,2vw,24px) JakartaLocal,sans-serif;letter-spacing:-.04em}.service-faq-list summary::-webkit-details-marker{display:none}.service-faq-list summary::after{content:'+';position:absolute;right:0;top:0;color:#1b6b6e;font-size:24px}.service-faq-list details[open] summary::after{content:'−'}.service-faq-list p{max-width:650px;color:#53636a;line-height:1.7;margin:16px 0 0}
.service-ending{background:var(--gradient-brand);color:#fff;text-align:center;padding:105px 0 120px}.service-ending .section-index{color:#aaf5e0}.service-ending h2{margin:22px auto;max-width:850px}.service-ending h2 em{color:#85f4d4}.service-ending p{font-size:16px;color:#d5eeee;margin:0 auto 26px}.service-ending .pill-button{display:inline-flex}
.roof-signals{background:#f0fdfa}.roof-signal-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,.6fr);gap:16px}.roof-signal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.roof-signal-grid button{display:grid;grid-template-columns:1fr 20px;align-items:center;gap:10px;text-align:left;min-height:116px;padding:22px;background:#fff;border:1px solid #d7e8e6;border-radius:12px;color:#14344a;cursor:pointer;transition:transform .35s,border-color .35s,background .35s,box-shadow .35s}.roof-signal-grid button span{font:600 18px/1.35 JakartaLocal,sans-serif;letter-spacing:-.03em}.roof-signal-grid button i{font-style:normal;font-size:21px;color:#1b6b6e}.roof-signal-grid button:hover,.roof-signal-grid button:focus-visible,.roof-signal-grid button[aria-pressed=true]{background:#f7fffd;transform:translateY(-4px);border-color:#00a98d;box-shadow:0 14px 30px rgba(27,107,110,.11);outline:0}
.roof-signal-result{display:flex;flex-direction:column;justify-content:flex-end;min-height:365px;padding:31px;border-radius:14px;background:var(--gradient-brand);color:#fff}.roof-signal-result .section-index{color:#8ff5dc}.roof-signal-result p{font-size:15px;line-height:1.6;color:#def3ef}.roof-signal-result a{color:#84f5d8;text-decoration:none;font-weight:800;font-size:14px}.roof-signal-result small{display:block;margin-top:24px;color:#bdd7d6;font-size:11px;line-height:1.5}
.roof-badge-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.roof-badge-grid button{display:flex;flex-direction:column;justify-content:space-between;align-items:center;min-height:230px;padding:35px 25px 24px;border-radius:14px;border:1px solid #d6e6e5;background:#fff;cursor:pointer;transition:transform .4s var(--ease),border-color .4s,box-shadow .4s}.roof-badge-grid button:hover,.roof-badge-grid button:focus-visible,.roof-badge-grid button.is-active{transform:translateY(-6px);border-color:#00a98d;box-shadow:0 18px 36px rgba(27,107,110,.12);outline:0}.roof-badge-grid img{max-width:85%;max-height:90px;width:auto;height:auto;object-fit:contain}.roof-badge-grid button span{align-self:stretch;display:flex;justify-content:space-between;border-top:1px solid #dce8e7;padding-top:18px;font-size:13px;color:#14344a;font-weight:800}.roof-badge-grid button span i{font-style:normal;color:#1b6b6e}.roof-material-detail{display:flex;align-items:baseline;gap:30px;background:#e0f2f1;border-radius:11px;padding:24px 29px;margin-top:13px;min-height:86px}.roof-material-detail span{white-space:nowrap;color:#1b6b6e;font-size:10px;letter-spacing:.12em;font-weight:850}.roof-material-detail p{margin:0;color:#243f45;font-size:15px;line-height:1.6}
.roof-process{background:#f0fdfa}.service-index-intro{position:relative;max-width:950px}.service-index-intro h1{margin:24px 0}.service-index-intro>p{font-size:18px;line-height:1.6;color:#d5eeee;max-width:670px;margin-bottom:32px}.service-index-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.service-index-grid a{display:block;background:#fff;border:1px solid #d5e6e5;border-radius:17px;overflow:hidden;color:#14344a;text-decoration:none;transition:transform .4s,border-color .4s,box-shadow .4s;padding-bottom:28px}.service-index-grid a:hover{transform:translateY(-8px);border-color:#00a98d;box-shadow:0 22px 40px rgba(27,107,110,.13)}.service-index-grid img{display:block;width:100%;height:260px;object-fit:cover}.service-index-grid a>span,.service-index-grid a>h2,.service-index-grid a>p,.service-index-grid a>b{display:block;margin-left:30px;margin-right:30px}.service-index-grid a>span{margin-top:26px;color:#1b6b6e;font-size:10px;letter-spacing:.12em;font-weight:800}.service-index-grid h2{font:600 35px JakartaLocal,sans-serif;letter-spacing:-.06em;margin-top:13px;margin-bottom:8px}.service-index-grid p{font-size:14px;color:#53636a}.service-index-grid a>b{margin-top:22px;color:#1b6b6e;font-size:13px}
@media(max-width:900px){.service-hero-layout{grid-template-columns:1fr;min-height:0}.service-hero-media,.service-hero-media img{min-height:390px}.service-hero-media{transform:none}.service-section-head{grid-template-columns:1fr}.service-section-head>.section-index{margin-bottom:-13px}.service-section-head p{max-width:700px}.service-diagnostic-grid,.service-split-grid,.service-faq-layout{grid-template-columns:1fr}.service-step-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}.roof-signal-layout{grid-template-columns:1fr}.roof-signal-result{min-height:260px}.service-split-visual img{height:350px}}
@media(max-width:600px){.service-hero{padding:125px 0 55px}.service-hero h1{font-size:clamp(48px,12vw,70px)}.service-hero-actions{margin:25px 0 30px}.service-hero-media,.service-hero-media img{min-height:265px}.service-section{padding:76px 0}.service-section-head{margin-bottom:27px}.service-section-head h2,.service-split h2,.service-faq h2,.service-ending h2{font-size:clamp(43px,11vw,64px)}.service-diagnostic-options button{min-height:82px}.service-diagnostic-result{min-height:380px;padding:30px}.service-step-grid,.service-step-grid.four,.service-compare,.service-index-grid{grid-template-columns:1fr}.service-step-grid li{min-height:240px}.service-step-grid li b{margin-bottom:25px}.service-split{padding:75px 0}.service-split-visual img{height:280px}.service-faq-layout{gap:25px}.roof-signal-grid{grid-template-columns:1fr}.roof-badge-grid{grid-template-columns:1fr}.roof-badge-grid button{min-height:175px}.roof-material-detail{display:block}.roof-material-detail p{margin-top:11px}.service-ending{padding:80px 0}.service-index-grid img{height:220px}}
@media(prefers-reduced-motion:reduce){.service-status-light{animation:none}.service-hero-media,.service-hero-media img,.service-step-grid li,.service-diagnostic-options button,.roof-signal-grid button,.roof-badge-grid button{transition:none}}
/* Photo hero (Solar care, Roofing): full-bleed image under the copy. Pages set --hero-focus to keep their subject in frame. */
.service-hero--photo{background:#0b3a40;--photo-overlay-sm:linear-gradient(180deg,rgba(6,34,40,.84) 0%,rgba(6,34,40,.78) 40%,rgba(6,34,40,.72) 70%,rgba(6,34,40,.86) 100%)}
.service-hero--photo::before{display:none}
.service-hero--photo .service-hero-bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:var(--hero-focus,72% center)}
.service-hero--photo::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(6,34,40,.92) 0%,rgba(6,34,40,.86) 44%,rgba(6,34,40,.5) 68%,rgba(6,34,40,.08) 100%),linear-gradient(0deg,rgba(6,34,40,.45),transparent 38%)}
.service-hero--photo .service-hero-layout{grid-template-columns:minmax(0,1fr)}
.service-hero--photo .service-hero-copy{max-width:min(100%,800px)}.service-hero--photo .service-hero-copy>p:not(.page-breadcrumb){max-width:615px}
.service-care .service-compare ul{list-style:none;padding:0;margin:0}
.service-care .service-compare li{display:flex;gap:10px;padding:13px 0;border-bottom:1px solid #d5e6e5;color:#52616b;font-size:14px;line-height:1.55}
.service-care .service-compare li:last-child{border-bottom:0}
.service-care .service-compare li::before{content:'↗';color:#1b6b6e;font-weight:800}
@media(max-width:900px){.service-hero--photo .service-hero-bg{object-position:var(--hero-focus-md,76% center)}.service-hero--photo::after{background:linear-gradient(90deg,rgba(6,34,40,.9) 0%,rgba(6,34,40,.78) 55%,rgba(6,34,40,.5) 100%),linear-gradient(0deg,rgba(6,34,40,.55),transparent 45%)}}
@media(max-width:600px){.service-hero--photo .service-hero-bg{object-position:var(--hero-focus-sm,var(--hero-focus-md,76% center))}.service-hero--photo::after{background:var(--photo-overlay-sm)}}


/* Photo hero proof stats with animated icons */
.service-proof-list.service-proof-stats{align-items:center;gap:18px 30px;font-size:15px;font-weight:600;color:#fff}
.service-proof-list.service-proof-stats li{display:flex;align-items:center;gap:12px;animation:proof-rise .8s var(--ease) both}
.service-proof-list.service-proof-stats li::before{content:none}
.service-proof-list.service-proof-stats li:nth-child(1){animation-delay:.35s}.service-proof-list.service-proof-stats li:nth-child(2){animation-delay:.5s}.service-proof-list.service-proof-stats li:nth-child(3){animation-delay:.65s}
.service-proof-list.service-proof-stats strong{color:#66e2c1;font-weight:800}
.service-proof-list.service-proof-stats strong{font-variant-numeric:tabular-nums}.service-proof-list.service-proof-stats strong[data-final]{display:inline-flex;flex-direction:column}.service-proof-list.service-proof-stats strong[data-final]::after{content:attr(data-final);display:block;height:0;overflow:hidden;visibility:hidden}
.service-proof-icon{flex:none;width:42px;height:42px;color:#34d399;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible;animation:proof-glow 3.4s ease-in-out infinite alternate}
.service-proof-stats li:nth-child(2) .service-proof-icon{animation-delay:-1.1s}.service-proof-stats li:nth-child(3) .service-proof-icon{animation-delay:-2.2s}
.service-proof-icon :is(path,circle){stroke-dasharray:1;stroke-dashoffset:1;animation:proof-draw 1.2s var(--ease) forwards;animation-delay:.6s}
.service-proof-stats li:nth-child(2) .service-proof-icon :is(path,circle){animation-delay:.75s}.service-proof-stats li:nth-child(3) .service-proof-icon :is(path,circle){animation-delay:.9s}
@keyframes proof-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes proof-draw{to{stroke-dashoffset:0}}
@keyframes proof-glow{from{filter:drop-shadow(0 0 2px rgba(52,211,153,.25))}to{filter:drop-shadow(0 0 9px rgba(52,211,153,.75))}}
@media(max-width:600px){.service-proof-list.service-proof-stats{flex-direction:column;align-items:flex-start;gap:16px}}
@media(prefers-reduced-motion:reduce){.service-proof-list.service-proof-stats li{animation:none}.service-proof-icon{animation:none}.service-proof-icon :is(path,circle){animation:none;stroke-dashoffset:0}}

/* Roofing (ECTCH-957): photo hero framing, manufacturer accents. Steps use the shared process timeline. */
/* ECTCH-982 R1: photo box is shifted right (see the end of this file); focus anchors its top-left/bottom so the roofer stays in frame. */
.service-roof .service-hero{--hero-focus:40% 50%;--hero-focus-md:40% 8%;--hero-focus-sm:28% 0%}
.service-roof .service-hero h1{max-width:none;font-size:clamp(44px,4.6vw,76px)}
.roof-badge-grid button{--brand:#1b6b6e;position:relative;overflow:hidden;background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 5%,#fff),#fff 62%)}
.roof-badge-grid button.roof-brand-gaf{--brand:#cd0310}
.roof-badge-grid button.roof-brand-owens{--brand:#de222c}
.roof-badge-grid button.roof-brand-certainteed{--brand:#0378c0}
.roof-badge-grid button::before{content:'';position:absolute;inset:0 0 auto;height:4px;background:var(--brand);transform:scaleX(.18);transform-origin:left;transition:transform .5s var(--ease)}
.roof-badge-grid button{justify-content:center;min-height:200px;padding:36px 28px}
/* The logos name the brands on their own, so they get the whole card; the alt text carries the name for screen readers. */
.roof-badge-grid img{position:relative;width:auto;max-width:82%;height:var(--logo-h,64px);max-height:none;object-fit:contain;transition:transform .5s var(--ease)}
.roof-badge-grid .roof-brand-gaf img{--logo-h:68px}
.roof-badge-grid .roof-brand-owens img{--logo-h:84px}
.roof-badge-grid .roof-brand-certainteed img{--logo-h:62px}
.roof-badge-grid button:hover,.roof-badge-grid button:focus-visible,.roof-badge-grid button.is-active{border-color:color-mix(in srgb,var(--brand) 55%,#d6e6e5);box-shadow:0 20px 40px color-mix(in srgb,var(--brand) 14%,transparent)}
.roof-badge-grid button:hover::before,.roof-badge-grid button:focus-visible::before,.roof-badge-grid button.is-active::before{transform:scaleX(1)}
.roof-badge-grid button:hover img,.roof-badge-grid button.is-active img{transform:scale(1.06)}
.roof-badge-grid button:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
/* The detail panel picks up the selected brand's accent. */
.roof-material-detail{--brand:#1b6b6e;border-left:3px solid var(--brand);transition:border-color .4s}
.roof-material-detail span{color:color-mix(in srgb,var(--brand) 82%,#000);transition:color .4s}
.roof-materials:has(.roof-brand-gaf.is-active) .roof-material-detail{--brand:#cd0310}
.roof-materials:has(.roof-brand-owens.is-active) .roof-material-detail{--brand:#de222c}
.roof-materials:has(.roof-brand-certainteed.is-active) .roof-material-detail{--brand:#0378c0}
@media(max-width:600px){.roof-badge-grid button{min-height:150px}}
@media(prefers-reduced-motion:reduce){.roof-badge-grid button::before,.roof-badge-grid img{transition:none}}
/* Roof check (ECTCH-979): single selection; the panel shows a guided empty state, then the chosen sign's title, urgency, meaning and next step. */
.roof-signal-layout{grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr)}
.roof-signal-result{justify-content:flex-start}
.roof-signal-detail{display:flex;flex-direction:column;flex:1;margin:18px 0 20px}
.roof-signal-detail h3{margin:0 0 12px;font:600 21px/1.25 JakartaLocal,sans-serif;letter-spacing:-.03em;color:#fff}
.roof-signal-detail p{margin:0}
.roof-signal-detail [hidden]{display:none}
.roof-empty,.roof-selected{display:flex;flex-direction:column;flex:1}
.roof-where--stack{display:none}
.roof-steps{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px;flex:1;align-content:space-between}
.roof-steps li{display:flex;align-items:center;gap:14px;padding:10px 16px;border:1px dashed rgba(255,255,255,.4);border-radius:12px;color:#fff;font-size:15px;line-height:1.4}
.roof-steps b{flex:0 0 28px;width:28px;height:28px;display:grid;place-items:center;border:1px solid #8ff5dc;border-radius:50%;color:#8ff5dc;font:700 13px/1 JakartaLocal,sans-serif}
/* Urgency: a plain labelled row (no box); the text value always shows, the 3-segment meter only reinforces it. */
.roof-urgency{display:grid;grid-template-columns:1fr auto;grid-template-areas:"l m" "v m";align-items:center;column-gap:16px;row-gap:2px;padding:14px 0;border-top:1px solid rgba(255,255,255,.16)}
.roof-urgency>span,.roof-signal-detail dt{color:#b5fbea;text-transform:uppercase;font-size:10px;font-weight:850;letter-spacing:.12em}
.roof-urgency>span{grid-area:l}
.roof-urgency b{grid-area:v;color:#fff;font:600 19px/1.2 JakartaLocal,sans-serif;letter-spacing:-.02em}
.roof-meter{grid-area:m;display:flex;gap:4px}
.roof-meter span{display:block;width:22px;height:8px;border-radius:4px;background:rgba(255,255,255,.22)}
.roof-urgency[data-level=plan-ahead] .roof-meter span:nth-child(-n+1),.roof-urgency[data-level=before-solar] .roof-meter span:nth-child(-n+1),.roof-urgency[data-level=review-soon] .roof-meter span:nth-child(-n+2),.roof-urgency[data-level=high-priority] .roof-meter span{background:#8ff5dc}
.roof-urgency[data-level=high-priority] b{font-weight:800;color:#fff}.roof-urgency[data-level=high-priority] .roof-meter span{background:#ffd27a}.roof-urgency[data-level=high-priority]>span{color:#ffd27a}
.roof-selected dl{display:flex;flex-direction:column;flex:1;margin:0}
.roof-selected dl>div{flex:1;padding:14px 0;border-top:1px solid rgba(255,255,255,.16)}
.roof-signal-detail dt{margin-bottom:6px}
.roof-signal-detail dd{margin:0;font-size:14px;line-height:1.55;color:#def3ef}
.roof-signal-result>a{margin-top:auto}.roof-signal-result>small{color:#e0eeec}
@media(min-width:901px){.roof-signal-result{min-height:500px}.roof-signal-detail{min-height:342px}}@media(min-width:1100px){.roof-signal-detail{min-height:316px}}@media(min-width:1400px){.roof-signal-detail{min-height:0}}
@media(max-width:900px){.roof-signal-layout{grid-template-columns:1fr}.roof-where--side{display:none}.roof-where--stack{display:inline}.roof-signal-detail{min-height:278px}}@media(max-width:600px){.roof-signal-detail{min-height:344px}}@media(max-width:360px){.roof-signal-detail{min-height:380px}}
/* Services hero (ECTCH-980): the Why EcoLoop house (energy-house-svg.php) as a still, decorative visual on the right. */
/* /services/ hero: same rhythm as the service-hero family (.service-hero-layout), plain Home gradient, no ring and no panel */
.service-index .service-hero::before{display:none}
.service-index-hero h1{margin-top:24px}
.service-index-hero .primary-large{margin-top:35px}
.service-index-house{position:relative;justify-self:end;width:100%;max-width:620px}
.service-index-house.trust-energy-visual{background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
.service-index-house .trust-energy-svg{margin:0;max-height:none;pointer-events:none}
@media(max-width:900px){.service-index-house{justify-self:center;max-width:520px;margin-top:8px}}
@media(max-width:600px){.service-index-house{max-width:360px}}


/* Roofing hero (ECTCH-982 R1): default hero gradient on the left, the approved photo shifted right so the roofer sits right of the copy; its left edge fades into the gradient.
   Overlay keeps the original photo-hero values. Scoped to .service-roof, Solar care keeps the full-bleed photo. */
.service-roof .service-hero--photo{background:var(--gradient-hero);--roof-cx:calc(100% - clamp(380px,22vw,440px));--roof-h:160%;--roof-top:-44%;--roof-fade:linear-gradient(90deg,transparent 0,transparent 4%,rgba(0,0,0,.35) 12%,rgba(0,0,0,.8) 19%,#000 25%)}
/* The image is sized by the hero HEIGHT (not cover), so the whole roofer (about 18%-87% of the hero height at 160% zoom) is visible at any aspect ratio.
   The roofer sits at ~40% of the photo width, so translating the box by -40% of its own width centres him on --roof-cx. */
.service-roof .service-hero--photo .service-hero-bg{inset:auto;left:var(--roof-cx);top:var(--roof-top);height:var(--roof-h);width:auto;max-width:none;transform:translateX(-40%);-webkit-mask-image:var(--roof-fade);mask-image:var(--roof-fade)}
.service-roof .service-hero--photo::after{background:linear-gradient(90deg,transparent calc(var(--roof-cx) - 24%),rgba(6,34,40,.5) calc(var(--roof-cx) - 8%),rgba(6,34,40,.08) 100%),linear-gradient(0deg,rgba(6,34,40,.45),transparent 38%)}
@media(max-width:1500px){.service-roof .service-hero--photo{--roof-cx:calc(100% - 326px);--roof-h:140%;--roof-top:-32%}.service-roof .service-hero--photo::after{background:linear-gradient(90deg,transparent calc(var(--roof-cx) - 40%),rgba(6,34,40,.8) calc(var(--roof-cx) - 14%),rgba(6,34,40,.4) calc(var(--roof-cx) + 8%),rgba(6,34,40,.08) 100%),linear-gradient(0deg,rgba(6,34,40,.45),transparent 38%)}}
@media(max-width:1300px){.service-roof .service-hero--photo{--roof-cx:calc(100% - 290px);--roof-h:125%;--roof-top:-23%}}
@media(max-width:1100px){.service-roof .service-hero--photo{--roof-cx:calc(100% - 245px);--roof-h:110%;--roof-top:-10%}.service-roof .service-hero--photo::after{background:linear-gradient(90deg,transparent calc(var(--roof-cx) - 40%),rgba(6,34,40,.85) calc(var(--roof-cx) - 12%),rgba(6,34,40,.45) calc(var(--roof-cx) + 8%),rgba(6,34,40,.08) 100%),linear-gradient(0deg,rgba(6,34,40,.45),transparent 38%)}}
/* Tablet and small laptops (601-1180px): the desktop mechanism continues (photo behind the copy, roofer on the right) with a flat wash over the whole hero so the copy stays >=4.5:1. */
@media(min-width:600.99px) and (max-width:1180px){.service-roof .service-hero--photo::after{box-shadow:inset 0 0 0 2000px rgba(6,34,40,var(--roof-wash,.5))}}
@media(max-width:900px){.service-roof .service-hero--photo{--roof-cx:calc(100% - 150px);--roof-h:100%;--roof-top:0%;--roof-wash:.57}}
/* Phones (600px and below): same as the other photo heroes. The photo fills the hero behind the copy, under the dark overlay; --hero-focus-sm frames the roofer. */
@media(max-width:600.98px){
  .service-roof .service-hero--photo .service-hero-bg{inset:0;left:0;top:0;width:100%;height:100%;max-width:100%;transform:none;-webkit-mask-image:none;mask-image:none;object-fit:cover;object-position:var(--hero-focus-sm,28% 0%)}
  .service-roof .service-hero--photo::after{background:var(--photo-overlay-sm)}
}

/* Roofing "Solar later?" visual: a crossfade carousel of solar homes. Every photo shares one
   grid cell, so the track keeps the height the .service-split-visual img breakpoints already
   give it. Without JS the first photo is all there is; the dots appear only once JS runs. */
.roof-carousel-track{display:grid}
.roof-carousel-track img{grid-area:1/1;opacity:0;transform:scale(1.06);transition:opacity 1.1s var(--ease),transform 6s linear}
.roof-carousel-track img.is-active{opacity:1;transform:scale(1)}
.roof-carousel-dots{position:absolute;right:20px;bottom:24px;display:flex;gap:4px}
.roof-carousel-dots button{display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer}
.roof-carousel-dots button::before{content:"";width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.6);box-shadow:0 1px 4px rgba(0,0,0,.25);transition:width .35s var(--ease),background .25s}
.roof-carousel-dots button[aria-current="true"]::before{width:22px;background:#00d4aa}
.roof-carousel-dots button:hover::before{background:#fff}
.roof-carousel-dots button[aria-current="true"]{width:34px}
.roof-carousel-dots button:focus-visible{outline:2px solid #80f1d4;outline-offset:1px;border-radius:999px}
@media(prefers-reduced-motion:reduce){.roof-carousel-track img,.roof-carousel-dots button::before{transition:none;transform:none}}
.roof-carousel-arrow{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:44px;height:44px;margin-top:-22px;padding:0;border:0;background:none;color:#fff;cursor:pointer;opacity:.8;filter:drop-shadow(0 1px 4px rgba(0,0,0,.55));transition:color .25s,opacity .25s,transform .3s var(--ease)}
.roof-carousel-arrow[hidden]{display:none}
.roof-carousel-arrow.is-prev{left:8px}
.roof-carousel-arrow.is-next{right:8px}
.roof-carousel-arrow .carousel-chevron{width:28px;height:28px;stroke-width:1.8}
.roof-carousel-arrow:hover,.roof-carousel-arrow:focus-visible{opacity:1;color:#80f1d4}
.roof-carousel-arrow.is-prev:hover,.roof-carousel-arrow.is-prev:focus-visible{transform:translateX(-3px)}
.roof-carousel-arrow.is-next:hover,.roof-carousel-arrow.is-next:focus-visible{transform:translateX(3px)}
.roof-carousel-arrow:focus-visible{outline:2px solid #80f1d4;outline-offset:-2px;border-radius:8px}
@media(max-width:600px){.roof-carousel-dots{top:14px;right:14px;bottom:auto}.roof-carousel-arrow.is-prev{left:2px}.roof-carousel-arrow.is-next{right:2px}}
/* Solar Install: four financing paths, one card each. */
.solar-ways{background:#f0fdfa}.solar-ways-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.solar-ways-grid article{display:flex;flex-direction:column;padding:30px 26px;background:#fff;border:1px solid #d5e6e5;border-radius:16px;transition:transform .4s,border-color .4s,box-shadow .4s}.solar-ways-grid article:hover{transform:translateY(-7px);border-color:#00a98d;box-shadow:0 22px 40px rgba(27,107,110,.1)}.solar-ways-grid article>span{font-size:10px;letter-spacing:.15em;color:#1b6b6e;font-weight:850}.solar-ways-grid h3{font:600 26px/1.15 JakartaLocal,sans-serif;letter-spacing:-.05em;margin:18px 0 18px;color:#14344a}.solar-ways-grid dl{margin:0 0 18px;display:grid;gap:12px}.solar-ways-grid dl div{padding-top:12px;border-top:1px solid #e3eeed}.solar-ways-grid dt{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:#6b7b82;margin-bottom:4px}.solar-ways-grid dd{margin:0;font-size:14px;line-height:1.55;color:#33454f}.solar-ways-grid article>p{margin:auto 0 0;padding:14px 16px;border-radius:12px;background:#f0fdfa;font-size:13px;line-height:1.55;color:#1b4e55}
@media(max-width:1100px){.solar-ways-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.solar-ways-grid{grid-template-columns:1fr}}