.roof-services{padding:90px 0 65px;background:var(--canvas);color:var(--ink);font-family:Inter,Arial,sans-serif}
.roof-services-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:50px;margin-bottom:42px}
.roof-services-eyebrow{font:600 11px/1.3 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--blue-dark);margin:0 0 20px}
.roof-services-heading h2{font:650 clamp(36px,4.2vw,64px)/1.02 Inter,Arial,sans-serif;letter-spacing:-.055em;margin:0}
.roof-services-heading h2 em{font-style:normal;color:var(--blue-dark)}
.roof-services-heading>p{max-width:340px;font-size:14px;line-height:1.7;color:#66707c;margin:0 0 3px}
.roof-services-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:32px 38px}
.roof-service{min-width:0;border-radius:0}
.roof-service-feature{grid-row:span 2;display:flex;flex-direction:column}
.roof-service-image{position:relative;overflow:hidden;background:#ded8ce;border-radius:0;isolation:isolate}
.roof-service-image img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0;transition:transform .65s cubic-bezier(.2,.8,.2,1)}
.roof-service-image:after{content:'';position:absolute;inset:50% 0 0;background:linear-gradient(transparent,#17130d55);pointer-events:none}
.roof-service-image>span{position:absolute;bottom:17px;left:20px;z-index:1;font:500 9px var(--mono);letter-spacing:1px;color:#fff5e5}
.roof-service-feature .roof-service-image{flex:1;min-height:480px}
.roof-service-replacement .roof-service-image,.roof-service-inspection .roof-service-image{height:215px}
.roof-service-feature .roof-service-image img{position:absolute;inset:0;object-position:48% center}
.roof-service-inspection .roof-service-image img{object-position:center 47%}
.roof-service:hover .roof-service-image img{transform:scale(1.035)}
.roof-service-copy{padding:20px 0 0;border-radius:0}
.roof-service-title{display:flex;gap:13px;align-items:baseline}
.roof-service-title>span{font:400 10px var(--mono);color:var(--blue-dark)}
.roof-service-title h3{font:700 23px/1.2 Inter,Arial,sans-serif;letter-spacing:-.7px;margin:0;text-transform:uppercase}
.roof-service-copy>p:not(.roof-service-kicker){font-size:13px;line-height:1.65;color:#66707c;margin:12px 0;max-width:480px}
.roof-service-copy>button{min-height:36px;display:inline-flex;align-items:center;gap:30px;padding:0;background:none;border:0;border-bottom:1px solid #c89876;border-radius:0;color:var(--blue-dark);font-size:12px;font-weight:650;cursor:pointer}
.roof-service-copy>button>span{font-size:19px;transition:transform .2s}
.roof-service-copy>button:hover>span{transform:translate(3px,-3px)}
.roof-service-copy>button:focus-visible,.roof-services-cta:focus-visible{outline:2px solid var(--blue-dark);outline-offset:5px}
.roof-service-storm{grid-column:1/-1;display:grid;grid-template-columns:1.25fr 1fr;gap:38px;border-top:1px solid #d9d2c7;padding-top:32px;margin-top:2px}
.roof-service-storm .roof-service-image{height:260px}
.roof-service-storm .roof-service-copy{align-self:center;padding:0 20px 0 0}
.roof-service-kicker{font:500 9px var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--blue-dark);margin:0 0 18px}
.roof-services-footer{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-top:42px;padding-top:30px;border-top:1px solid #d9d2c7}
.roof-services-footer p{font-size:13px;line-height:1.65;color:#66707c;margin:0}
.roof-services-footer strong{font-size:18px;font-weight:650;color:var(--ink)}
.roof-services-cta{display:inline-flex;align-items:center;justify-content:center;gap:25px;padding:17px 22px;background:#d54c00;color:white;font-size:11px;font-weight:700;text-transform:uppercase;border:1px solid #d54c00;border-radius:0;cursor:pointer;min-height:48px;transition:background .2s}
.roof-services-cta:hover{background:#b54000}
.roof-service-dialog{width:min(560px,calc(100% - 32px));padding:36px;border:1px solid #cfc5b8;border-radius:0;background:var(--canvas);color:var(--ink)}
.roof-service-dialog::backdrop{background:#14110bd9;backdrop-filter:blur(5px)}
.roof-service-dialog h2{font:700 30px/1.1 Inter,Arial,sans-serif;text-transform:uppercase;letter-spacing:-1px;margin:15px 0 20px}
.roof-service-dialog p,.roof-service-dialog li{font-size:14px;line-height:1.65;color:#625b51}
.roof-service-dialog ul{padding-left:20px;margin:20px 0 25px}
.roof-service-dialog li{margin-bottom:9px}
.roof-service-dialog-close{float:right;border:0;background:none;font-size:26px;cursor:pointer;color:var(--ink);padding:0 5px}
@media(max-width:1050px){.roof-services{padding-top:65px}.roof-services-grid,.roof-service-storm{gap:28px}.roof-service-title h3{font-size:20px}.roof-services-heading{gap:35px}.roof-services-heading>p{max-width:280px;font-size:13px}.roof-service-replacement .roof-service-image,.roof-service-inspection .roof-service-image{height:185px}.roof-service-feature .roof-service-image{min-height:420px}}
@media(max-width:760px){.roof-services{padding:55px 0 45px}.roof-services-heading{display:block;margin-bottom:30px}.roof-services-heading h2{font-size:clamp(34px,8.8vw,52px)}.roof-services-heading>p{max-width:none;margin-top:20px;font-size:13px}.roof-services-eyebrow{font-size:9px;margin-bottom:16px}.roof-services-grid{grid-template-columns:1fr;gap:30px}.roof-service-feature{grid-row:auto}.roof-service-feature .roof-service-image{height:340px;min-height:0;flex:auto}.roof-service-replacement .roof-service-image,.roof-service-inspection .roof-service-image{height:245px}.roof-service-title h3{font-size:22px}.roof-service-copy{padding-top:17px}.roof-service-copy>button{min-height:44px}.roof-service-storm{grid-column:auto;grid-template-columns:1fr;gap:0;margin:0;padding:0;border:0}.roof-service-storm .roof-service-image{height:245px}.roof-service-storm .roof-service-copy{padding:17px 0 0}.roof-service-kicker{display:none}.roof-services-footer{align-items:flex-start;flex-direction:column;gap:20px;margin-top:30px;padding-top:25px}.roof-services-cta{width:100%}.roof-service-dialog{padding:26px}}
@media(prefers-reduced-motion:reduce){.roof-services *{transition:none!important;animation:none!important}.roof-service:hover .roof-service-image img{transform:none}}

/* More separation from the preceding problem section. */
.roof-services{padding-top:140px}
@media(max-width:1050px){.roof-services{padding-top:110px}}
@media(max-width:760px){.roof-services{padding-top:90px}}