/* Persevere Roofing: shared design polish, loaded last on every page */
:root{--pr-navy:#0d1c2e;--pr-navy-2:#14364f;--pr-red:#e84b42;--pr-red-d:#c93a32;--pr-gold:#f3b73b;--pr-ease:cubic-bezier(.2,.7,.2,1)}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3,h4,.po-title,.fx-big{font-family:"Barlow",Arial,Helvetica,sans-serif!important;letter-spacing:-.005em;text-wrap:balance}
p,li,blockquote,input,select,textarea,.copy{font-family:"Inter",Arial,Helvetica,sans-serif!important}
p{text-wrap:pretty}
::selection{background:rgba(232,75,66,.22);color:inherit}
:focus-visible{outline:3px solid var(--pr-red);outline-offset:3px;border-radius:4px}

/* Buttons */
a.btn,.btnx,.prfin-btn,.qa-submit,.po-primary,.po-secondary,.fx-btn,.pr-pay,.pay-bill-nav,.prfin-pill,button[type=submit]{transition:transform .2s var(--pr-ease),box-shadow .2s var(--pr-ease),background-color .2s ease,color .2s ease,border-color .2s ease,filter .2s ease}
a.btn:hover,.btnx:hover,.prfin-btn:hover,.qa-submit:hover,.po-primary:hover,button[type=submit]:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(13,28,46,.22)}
a.btn:active,.btnx:active,.prfin-btn:active,.qa-submit:active,button[type=submit]:active{transform:translateY(0);box-shadow:none}
.btnx,a.btn,.qa-submit{border-radius:8px!important}

/* Cards & panels */
.card,.value,.person,.photo,.review,.review-card,.claim-card,.project-card,.rep-card,.panel,.story-box,.hero-trust,.step-card,.fx-feat,.fx-step{transition:transform .25s var(--pr-ease),box-shadow .25s var(--pr-ease),border-color .25s ease}
.card,.value,.review,.review-card,.claim-card,.rep-card,.panel{border-radius:14px!important}
.card,.photo,.person,.project-card{border-radius:14px;overflow:hidden}
.card:hover,.value:hover,.person:hover,.photo:hover,.review:hover,.review-card:hover,.claim-card:hover,.rep-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(13,28,46,.14)}
.project-card img,.photo img,.person img,.card .ph img{transition:transform .6s var(--pr-ease)}
.project-card:hover img,.photo:hover img,.person:hover img,.card:hover .ph img{transform:scale(1.04)}

/* Forms */
input:not([type=hidden]):not([type=checkbox]):not([type=radio]),select,textarea{transition:border-color .18s ease,box-shadow .18s ease;border-radius:8px}
input:not([type=hidden]):not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{outline:none;border-color:var(--pr-red)!important;box-shadow:0 0 0 4px rgba(232,75,66,.16)!important}
.qa-card{border-radius:18px!important;box-shadow:0 30px 90px rgba(5,16,28,.45)!important}
.qa-modal{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.assistant-panel{border-radius:16px!important}

/* Links in navigation & footer */
.site-footer a,.pr-menu a,.services-menu a{transition:color .18s ease,background-color .18s ease}
.site-footer{background:linear-gradient(180deg,#0b1d30 0%,#081522 100%)!important}

/* Financing banner + section */
.prfin-bar{background:linear-gradient(90deg,#0b2135 0%,#16405f 50%,#0b2135 100%)!important;letter-spacing:.01em}
.prfin-bar a:hover .prfin-pill{transform:translateX(3px)}
.prfin{background:linear-gradient(180deg,#f5f7fa,#eef2f6)!important}
.prfin-box{border-left-width:0!important;position:relative;overflow:hidden;border-radius:20px!important;box-shadow:0 20px 50px rgba(13,28,46,.1)!important}
.prfin-box:before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(180deg,var(--pr-red),var(--pr-gold))}
.prfin h2{font-size:clamp(28px,3.2vw,38px)!important}
.prfin p strong{color:var(--pr-navy)}
.prfin-list li{background:#f5f7fa;border:1px solid #e6ebf0}
.prfin-check{background:#16a34a!important}

/* Scroll reveal (only applied when JavaScript runs) */
.pr-reveal{opacity:0;translate:0 22px;transition:opacity .7s var(--pr-ease),translate .7s var(--pr-ease)}
.pr-reveal.pr-in{opacity:1;translate:0 0}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}.pr-reveal{opacity:1;translate:none}}

/* ===== Top rows: financing banner, contact row, navigation ===== */
.prfin-bar{position:relative;height:40px;padding:0 24px!important;display:flex!important;align-items:center;justify-content:center;font:600 14px/1 "Inter",Arial,sans-serif!important;border-bottom:1px solid rgba(255,255,255,.08);box-sizing:border-box}
.prfin-bar .prfin-main{display:inline-flex!important;flex-wrap:nowrap!important;align-items:center;gap:14px!important;white-space:nowrap}
.prfin-bar strong{font-weight:700}
.prfin-bar .prfin-long{color:#d5e0ea;font-weight:500}
.prfin-bar .prfin-pill{display:inline-flex;align-items:center;height:24px;padding:0 12px!important;font-size:12.5px!important;line-height:1;transition:transform .2s ease,background-color .2s ease}
.prfin-bar .pr-home-link{position:absolute;left:24px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;height:26px;padding:0 12px;border:1px solid rgba(255,255,255,.28);border-radius:999px;font:600 13px/1 "Inter",Arial,sans-serif;color:#e6eef5!important;text-decoration:none!important;transition:background-color .2s ease,border-color .2s ease}
.prfin-bar .pr-home-link:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.55)}
.site-contact-bar{height:36px;display:flex!important;align-items:center;box-sizing:border-box;background:#0a1830!important;border-bottom:1px solid rgba(255,255,255,.06)}
.site-contact-bar .site-contact-bar-inner{width:min(1186px,92%);max-width:none!important;margin:0 auto!important;padding:0!important;display:flex!important;align-items:center;gap:28px!important;font:600 13px/1 "Inter",Arial,sans-serif!important}
.site-contact-bar .site-contact-bar-inner:after{content:"Licensed \2022  Insured \2022  Bonded \2022  NC License #105058";margin-left:auto;color:#aebdca;font-weight:500;white-space:nowrap}
body>div.top{font:500 13px/1 "Inter",Arial,sans-serif!important;letter-spacing:.01em}
body>div.top .wrap{min-height:36px;padding-top:0!important;padding-bottom:0!important;align-items:center}
body>div.top b{font-weight:700}
@media(max-width:1180px){.prfin-bar .prfin-long{display:none}}
@media(min-width:901px){
html body .nav-only-update{top:98px!important;left:auto!important;right:max(24px,calc((100% - 1186px) / 2))!important;justify-content:flex-end!important;align-items:center!important;gap:20px!important}
 html body .nav-only-update .services-dd{display:flex!important;align-items:center!important;flex:0 0 auto!important;width:auto!important}
 html body .nav-only-update>a:not(.pay-bill-nav),html body .nav-only-update .services-dd>a,html body #approved-master-shell .nav-only-update>a:not(.pay-bill-nav),html body #approved-master-shell .nav-only-update .services-dd>a{font-size:14px!important;line-height:1.2!important;padding-top:0!important;padding-bottom:0!important;letter-spacing:.01em;text-shadow:0 1px 6px rgba(0,0,0,.45)}
 html body #approved-master-shell{top:0!important}
 html body .nav-only-update{width:max-content!important;max-width:calc(100% - 210px)}
 html body .nav-only-update .pay-bill-nav{padding:7px 14px!important;font-size:13px!important;line-height:1.1!important}
 html body #approved-master-shell .approved-master-logo{top:18px!important;height:118px!important}
}
@media(min-width:901px) and (max-width:1100px){html body .nav-only-update{gap:10px!important;flex-wrap:nowrap!important;max-width:none!important}html body .nav-only-update .pay-bill-nav{padding:6px 10px!important;font-size:12px!important}html body .nav-only-update>a:not(.pay-bill-nav),html body .nav-only-update .services-dd>a,html body #approved-master-shell .nav-only-update>a:not(.pay-bill-nav),html body #approved-master-shell .nav-only-update .services-dd>a{font-size:12px!important}.site-contact-bar .site-contact-bar-inner:after{display:none}}
@media(max-width:900px){
 .prfin-bar{height:40px;padding:0 12px!important;font-size:13px!important}
 .prfin-bar .prfin-main{gap:10px!important}
 .prfin-bar .pr-home-link{display:none}
 .prfin-bar .prfin-pill{height:24px;font-size:12px!important;padding:0 10px!important}
 .site-contact-bar{height:32px}
 .site-contact-bar .site-contact-bar-inner{justify-content:center!important;gap:18px!important;font-size:12px!important}
 .site-contact-bar .site-contact-bar-inner:after{display:none}
 body>div.top{font-size:12px!important}
 html body .service-area-mobile-logo{top:84px!important;height:132px!important;width:auto!important}
 body>div.top .wrap{min-height:32px}
 body>div.top b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
}
@media(max-width:360px){.prfin-bar .prfin-pill{display:none}}
/* Tablet widths: menu gets its own centered row, logo sits just below it */
@media(min-width:901px) and (max-width:1100px){
 html body .nav-only-update{display:flex!important;flex-wrap:nowrap!important;top:88px!important;left:0!important;right:0!important;margin:0 auto!important;width:max-content!important;justify-content:center!important}
 html body #approved-master-shell .approved-master-logo{top:52px!important;height:96px!important}
 html body .hero>img.logo{top:44px!important;width:96px!important;height:96px!important}
}
@media(min-width:901px) and (max-width:1100px){html body .hero>img.logo{width:84px!important;height:84px!important}}

/* ===== Alignment correction (2026-11-06): centered financing banner + centered primary navigation ===== */
/* Financing banner: text + "See Options" stay one centered group; the divider line no longer shifts the vertical center */
.prfin-bar{width:100%;margin:0!important;border-bottom:0!important;box-shadow:inset 0 -1px 0 rgba(255,255,255,.08)}
.prfin-bar .prfin-main{margin:0 auto;justify-content:center;max-width:100%}

/* Desktop: the whole menu is centered across the full width. Flexible spacers on each side keep it
   centered whenever there is room, and never let it slide underneath the logo when there is not. */
@media(min-width:1101px){
 html body .nav-only-update{left:0!important;right:0!important;width:auto!important;max-width:none!important;margin:0!important;justify-content:center!important}
 html body .nav-only-update::before,html body .nav-only-update::after{content:"";display:block;flex:1 1 0;min-width:24px;height:1px}
 html body #approved-master-shell .nav-only-update::before{min-width:calc(6.6vw + 120px)}
 html body .hero>.nav-only-update::before{min-width:calc(4.2vw + 116px)}
 /* Homepage: the logo sits below the menu row, so the menu row is lifted slightly to clear it */
 html body .v3-hero .nav-only-update{top:88px!important}
}
/* Narrow desktops on pages whose logo shares the menu row: the existing compact tablet sizing lets the
   centered menu fit beside the logo without overlapping it */
@media(min-width:1101px) and (max-width:1290px){
 html body #approved-master-shell .nav-only-update,html body .hero>.nav-only-update{gap:10px!important}
 html body #approved-master-shell .nav-only-update>a:not(.pay-bill-nav),html body #approved-master-shell .nav-only-update .services-dd>a,html body .hero>.nav-only-update>a:not(.pay-bill-nav),html body .hero>.nav-only-update .services-dd>a{font-size:12px!important}
 html body #approved-master-shell .nav-only-update .pay-bill-nav,html body .hero>.nav-only-update .pay-bill-nav{padding:6px 10px!important;font-size:12px!important}
}
/* Service pages: keep the menu's white, bold link styling at widths where it previously fell back to browser defaults */
@media(min-width:769px) and (max-width:1000px){
 html body .hero>.nav-only-update>a:not(.pay-bill-nav),html body .hero>.nav-only-update>.services-dd>a{margin:0!important;padding:0!important;color:#fff!important;text-decoration:none!important;font-family:Arial,sans-serif!important;font-weight:700!important;line-height:1.2!important;text-shadow:0 1px 4px rgba(0,0,0,.55)!important;white-space:nowrap!important}
 html body .hero>.nav-only-update .services-dd{position:relative!important;margin:0!important;padding:0!important}
 html body .hero>.nav-only-update .chev,html body .hero>.nav-only-update .caret,html body .hero>.nav-only-update .arrow{display:none!important}
}
/* Small tablets (769-900px): one compact centered row below the contact bar, fully on screen */
@media(min-width:769px) and (max-width:900px){
 html body .nav-only-update{display:flex!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:center!important;top:80px!important;left:0!important;right:0!important;margin:0 auto!important;width:max-content!important;max-width:calc(100% - 24px)!important;gap:8px!important}
 html body .nav-only-update>a:not(.pay-bill-nav),html body .nav-only-update .services-dd>a,html body #approved-master-shell .nav-only-update>a:not(.pay-bill-nav),html body #approved-master-shell .nav-only-update .services-dd>a{font-size:11px!important;line-height:1.2!important;padding-top:0!important;padding-bottom:0!important}
 html body .nav-only-update .services-dd{display:flex!important;align-items:center!important;flex:0 0 auto!important;width:auto!important}
 html body .nav-only-update .pay-bill-nav,html body #approved-master-shell .nav-only-update .pay-bill-nav{padding:5px 9px!important;font-size:11px!important;line-height:1.1!important}
 html body #approved-master-shell .approved-master-logo{top:90px!important;height:76px!important}
 html body .hero>img.logo{top:44px!important;width:84px!important;height:84px!important}
}
/* Homepage tablets: give the logo a little breathing room below the centered menu row */
@media(min-width:769px) and (max-width:1100px){html body .v3-hero .po-logo{margin-top:12px!important}}
/* Homepage at 701-768px: the hamburger menu is already shown here, so the duplicate desktop row is hidden instead of overlapping it */
@media(min-width:701px) and (max-width:768px){
 html body .v3-hero .nav-only-update{display:none!important}
}