/* 1. Variables */
:root{--dark:#190B07;--wine:#950B0F;--red:#FF0F03;--yellow:#FFD228;--white:#fff;--cream:#FAF8F5;--gray:#F0EBE6;--muted:#655D58;--line:#D9D1CA;--heading:'Oswald',sans-serif;--body:'Inter',sans-serif;--container:1200px}
/* 2. Base */
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;overflow-x:hidden;background:var(--cream);color:var(--dark);font:400 16px/1.7 var(--body)}img,video,iframe{max-width:100%}img{display:block}a{text-decoration:none;color:inherit}button{font:inherit;cursor:pointer}h1,h2,h3{font-family:var(--heading);text-transform:uppercase;line-height:1.1;margin:0 0 17px}h1{font-size:clamp(3.5rem,8vw,7rem);line-height:1}h2{font-size:clamp(2.5rem,5vw,4.6rem)}h3{font-size:clamp(1.35rem,2.5vw,2rem)}p{margin:0 0 20px}.container{width:min(var(--container),calc(100% - 38px));margin:0 auto}.section{padding:94px 0}.section-head{max-width:760px;margin-bottom:36px}.eyebrow{display:block;color:var(--wine);font-weight:800;text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;margin-bottom:15px}.section-intro{font-size:1.05rem;color:var(--muted)}.dark{background:var(--dark);color:var(--white)}.dark .section-intro{color:var(--gray)}.light{background:var(--gray)}.grid{display:grid;gap:22px}.grid-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px}.btn-row{display:flex;flex-wrap:wrap;gap:13px;margin-top:26px}.btn{display:inline-flex;justify-content:center;align-items:center;gap:10px;min-height:50px;padding:14px 21px;border-radius:4px;border:1px solid transparent;font-weight:800;text-transform:uppercase;letter-spacing:.065em;font-size:.8rem;transition:transform .25s,box-shadow .25s}.btn:hover{transform:translateY(-3px);box-shadow:0 12px 24px #0003}.btn-primary{color:var(--white);background:linear-gradient(110deg,var(--wine),var(--red))}.btn-outline{border-color:var(--white);color:var(--white)}.btn-dark{border-color:var(--dark);color:var(--dark)}.text-link{color:var(--wine);font-size:.8rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase}.text-link:hover{color:var(--red)}
/* 3. Global pieces */
.topbar{background:var(--dark);color:var(--white);font-size:.78rem}.topbar-inner,.topbar-info,.socials,.nav-shell,.nav-list{display:flex;align-items:center;gap:20px}.topbar-inner{justify-content:space-between;min-height:40px}.topbar a:hover{color:var(--yellow)}.topbar-info i{margin-right:6px;color:var(--yellow)}.socials{gap:7px}.socials a{display:grid;place-items:center;width:35px;height:35px;border-radius:50%;background:var(--wine);color:var(--white);border:1px solid #ffffff50;transition:transform .25s}.socials a:hover{transform:translateY(-4px);background:var(--red);color:var(--white)}.socials img{max-width:21px;max-height:21px;filter:brightness(0) invert(1)}.site-header{position:static;background:#291711;color:var(--white);z-index:25}.nav-shell{min-height:106px;justify-content:space-between}.brand img{height:80px;max-height:80px;width:auto;max-width:200px;object-fit:contain}.nav-list{gap:20px}.nav-list>a,.nav-drop>a{font-size:.78rem;text-transform:uppercase;font-weight:800;letter-spacing:.06em;white-space:nowrap}.nav-list .active,.nav-list a:hover{color:var(--yellow)}.nav-drop{position:relative}.nav-drop-menu{display:none;position:absolute;z-index:30;top:100%;left:0;background:var(--dark);min-width:235px;padding:15px;box-shadow:0 10px 30px #0005}.nav-drop-menu a{display:block;padding:9px;font-size:.8rem}.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{display:block}.menu-toggle{display:none;color:var(--white);background:none;border:1px solid #fff7;border-radius:5px;padding:10px}.site-footer{background:var(--dark);color:var(--white)}.footer-top{padding:65px 0 30px;display:flex;align-items:center;gap:36px;border-bottom:1px solid #fff3}.footer-top img{width:210px;height:auto;max-height:130px;object-fit:contain}.footer-top p{max-width:600px;color:#e2d7d0}.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding:35px 0 60px}.footer-grid h3{font-size:1.4rem;margin-bottom:22px}.footer-grid a,.footer-grid p{display:block;margin:0 0 10px;font-size:.85rem;color:#e2d7d0}.footer-grid a:hover{color:var(--yellow)}.footer-bottom{border-top:1px solid #fff3;text-align:center;padding:22px;color:#e2d7d0;font-size:.8rem}.float-wa,.back-top{position:fixed;right:18px;z-index:100;width:52px;height:52px;display:grid;place-items:center;border:0;border-radius:50%;font-size:1.55rem;color:var(--white);box-shadow:0 8px 22px #0003}.float-wa{bottom:20px;background:#25D366}.back-top{bottom:82px;background:var(--wine);opacity:0;pointer-events:none}.back-top.visible{opacity:1;pointer-events:auto}
/* 4. Page modules */
.hero{position:relative;isolation:isolate;min-height:710px;display:flex;align-items:center;overflow:hidden;background:var(--dark);color:var(--white)}.hero video,.hero-shade{position:absolute;inset:0;width:100%;height:100%;z-index:-1}.hero video{object-fit:cover}.hero-shade{background:linear-gradient(90deg,#190b07f2,#190b07be 60%,#190b077a)}.hero .container{padding:90px 0 135px}.hero-content{max-width:860px}.hero .eyebrow,.dark .eyebrow{color:var(--yellow)}.hero h1 strong{color:var(--yellow)}.hero p{font-size:1.13rem;max-width:650px}.hero-chips{position:absolute;bottom:0;left:0;right:0;background:#190b07ea;border-top:1px solid #fff4}.chip-list{display:flex;justify-content:space-between;gap:15px;padding:18px 0}.chip-list a{font-weight:800;text-transform:uppercase;font-size:.75rem;white-space:nowrap}.chip-list a:hover,.chip-list i{color:var(--yellow)}.chip-list i{margin-right:7px}.trust-bar{background:var(--wine);color:var(--white);padding:22px 0}.trust-content{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.82rem;font-weight:850;text-transform:uppercase}.trust-content i{margin-right:8px;color:var(--yellow)}.service-card{background:var(--white);border:1px solid var(--line);border-radius:7px;overflow:hidden;transition:transform .3s,box-shadow .3s}.service-card:hover{transform:translateY(-6px);box-shadow:0 14px 32px #0002}.service-card img{height:185px;width:100%;object-fit:cover}.service-card-content{padding:19px}.service-card h3{font-size:1.35rem;min-height:50px}.service-card p{color:var(--muted);font-size:.82rem;min-height:122px}.feature-photo{width:100%;height:480px;object-fit:cover;border-radius:6px}.checks{list-style:none;padding:0;margin:25px 0}.checks li{margin-bottom:10px}.checks i{margin-right:10px;color:var(--red)}.feature-card{padding:25px;border-top:3px solid var(--yellow);background:#2B1913}.feature-card i{color:var(--yellow);font-size:1.8rem;margin-bottom:15px}.feature-card h3{font-size:1.3rem}.feature-card p{color:#e5dad5;font-size:.86rem}.portfolio-grid a{display:block;overflow:hidden;position:relative}.portfolio-grid img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:transform .35s}.portfolio-grid a:hover img{transform:scale(1.07)}.video-card{position:relative;aspect-ratio:16/9;border-radius:7px;overflow:hidden;background:var(--dark)}.video-card iframe{border:0;position:absolute;inset:0;width:100%;height:100%}.step{border-top:4px solid var(--wine);background:var(--white);padding:25px}.step-num{font:700 3rem var(--heading);color:var(--red)}.step p{color:var(--muted)}.social-banner{padding:65px 0;background:var(--wine);color:var(--white)}.social-banner .container{display:flex;align-items:center;justify-content:space-between;gap:35px}.social-banner .eyebrow{color:var(--yellow)}.social-banner .socials a{width:52px;height:52px;font-size:1.3rem}.social-banner .socials img{max-width:29px;max-height:29px}.review-card{border:1px solid var(--line);border-left:4px solid var(--wine);padding:26px;background:var(--white)}.stars{color:#AB7600;letter-spacing:.1em}.review-card blockquote{margin:15px 0;font-size:.9rem}.review-card cite{font-style:normal;font-weight:800;font-size:.8rem}.faq-layout{display:grid;grid-template-columns:1fr 1.15fr;gap:55px}.faq-layout img{height:340px;width:100%;object-fit:cover;border-radius:6px;margin-top:25px}.faq details{padding:16px 0;border-bottom:1px solid var(--line)}.faq summary{cursor:pointer;font-weight:800}.faq p{font-size:.9rem;color:var(--muted);margin:10px 0}.cta-final{isolation:isolate;position:relative;text-align:center;background:var(--dark);color:var(--white)}.cta-final:before,.cta-final:after{content:'';position:absolute;inset:0;z-index:-1}.cta-final:before{background:url('../images/bg-roofing-cta.webp') center/cover}.cta-final:after{background:#190b07ce}.cta-final .container{max-width:820px}.cta-final .btn-row{justify-content:center}.lightbox{display:none;position:fixed;inset:0;background:#000e;z-index:200;place-items:center;padding:30px}.lightbox.open{display:grid}.lightbox img{max-height:85vh;width:auto;object-fit:contain}.lightbox button{position:absolute;right:20px;top:16px;border:0;border-radius:50%;width:42px;height:42px;font-size:1.6rem;background:var(--white)}.form-embed{min-height:600px}
/* 5. Animation */
@media(prefers-reduced-motion:no-preference){.reveal{transition:opacity .7s,transform .7s}.reveal.motion-ready{opacity:0;transform:translateY(23px)}.reveal.motion-ready.visible{opacity:1;transform:none}}
/* 6. Responsive */
@media(max-width:1130px){.nav-list{gap:12px}.nav-shell>.btn{display:none}.grid-5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.menu-toggle{display:block}.site-header{position:relative}.brand img{height:52px;max-height:52px}.nav-shell{min-height:77px}.nav-list{display:none;position:absolute;z-index:30;top:100%;left:0;right:0;padding:25px;background:#291711;flex-direction:column;align-items:flex-start;gap:20px}.nav-list.open{display:flex}.nav-drop-menu{position:static;display:block;box-shadow:none;background:transparent;padding:12px}.grid-4{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:repeat(2,1fr)}.split{gap:32px}}
@media(max-width:767px){.container{width:calc(100% - 34px)}.topbar-inner{justify-content:center}.topbar-inner>.socials,.topbar-info span:last-child{display:none}.hero{min-height:690px}.hero .container{padding:65px 0 133px}.hero h1{font-size:clamp(2.8rem,12vw,5.3rem)}.hero-chips{overflow:auto}.chip-list{width:max-content;gap:23px}.section{padding:67px 0}.grid-5,.grid-3,.grid-2,.split,.faq-layout{grid-template-columns:1fr}.service-card img{height:230px}.service-card p{min-height:0}.feature-photo{height:320px}.social-banner .container{flex-direction:column;align-items:flex-start}.footer-top{flex-direction:column;align-items:flex-start}.footer-grid{gap:25px}.trust-content{justify-content:center}.btn-row{flex-wrap:wrap}}
@media(max-width:450px){.grid-4,.footer-grid{grid-template-columns:1fr}.btn-row{flex-direction:column}.btn-row .btn{width:100%}}

/* About page - CI1 and existing modules */
.inner-banner{position:relative;isolation:isolate;display:flex;align-items:center;min-height:480px;background:var(--dark);color:var(--white);overflow:hidden}
.inner-banner::before,.inner-banner::after{content:"";position:absolute;inset:0;z-index:-1}
.inner-banner::before{background:url('../images/header-roofing.webp') center 42%/cover no-repeat}
.inner-banner::after{background:linear-gradient(90deg,var(--dark),#190b07c2 65%,#190b0780)}
.inner-banner-content{padding:88px 0;max-width:var(--container)}
.inner-banner-content h1{max-width:900px;font-size:clamp(2.9rem,6.5vw,5.8rem)}
.inner-banner-content h1 strong{color:var(--yellow)}
.inner-banner-content p{max-width:700px;font-size:1.1rem}
.inner-banner .eyebrow{color:var(--yellow)}
.about-image-stack{position:relative}
.about-image-label{position:absolute;left:0;bottom:22px;display:flex;align-items:center;gap:12px;background:var(--wine);color:var(--white);padding:17px 22px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.about-image-label i{color:var(--yellow);font-size:1.4rem}
.about-value-card{padding:32px 27px;background:#2B1913;border-top:3px solid var(--yellow);min-height:290px;transition:transform .3s ease}
.about-value-card:hover{transform:translateY(-6px)}
.about-value-card .value-index{display:block;color:var(--yellow);font-weight:800;font-size:.77rem;text-transform:uppercase;letter-spacing:.15em}
.about-value-card>i{display:block;color:var(--yellow);font-size:2rem;margin:23px 0 16px}
.about-value-card h3{font-size:1.5rem}
.about-value-card p{color:var(--gray);font-size:.92rem}
.about-expertise-card{display:block;background:var(--dark);color:var(--white);overflow:hidden;border-radius:5px}
.about-expertise-card img{width:100%;height:230px;object-fit:cover;transition:transform .4s ease}
.about-expertise-card:hover img{transform:scale(1.045)}
.about-expertise-card span{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:21px 19px;font:600 1.32rem var(--heading);text-transform:uppercase}
.about-expertise-card span i{font-size:1rem;color:var(--yellow)}
.about-credentials{background:var(--dark)}
.credential-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.credential-grid>div{background:#2B1913;border-top:3px solid var(--yellow);display:flex;flex-direction:column;gap:15px;justify-content:center;min-height:165px;padding:23px}
.credential-grid i{color:var(--yellow);font-size:1.75rem}
.credential-grid strong{font-family:var(--heading);font-size:1.25rem;text-transform:uppercase}
@media(max-width:900px){.inner-banner{min-height:380px}.about-expertise-card img{height:205px}}
@media(max-width:767px){.inner-banner{min-height:340px}.inner-banner-content{padding:65px 0}.about-image-label{bottom:12px;padding:10px 13px;font-size:.78rem}.about-value-card{min-height:auto}.credential-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.about-expertise-card img{height:215px}}
@media(max-width:450px){.credential-grid{grid-template-columns:1fr}.about-expertise-card img{height:230px}}


/* Services - SV6: image-led categories with accessible details */
.services-quicklinks{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:32px}
.services-quicklinks a{padding:10px 17px;background:var(--white);border:1px solid var(--line);color:var(--dark);font-weight:700;font-size:.86rem;transition:background .25s,color .25s,border-color .25s}
.services-quicklinks a:hover,.services-quicklinks a:focus-visible{background:var(--wine);border-color:var(--wine);color:var(--white)}
.services-details{background:var(--cream)}
.roofing-service{scroll-margin-top:22px;display:grid;grid-template-columns:1fr 1fr;min-width:0;gap:clamp(25px,5vw,72px);align-items:center;padding:36px 0 74px;border-bottom:1px solid var(--line)}
.roofing-service:last-child{border-bottom:0;padding-bottom:25px}
.roofing-service:nth-child(even) .roofing-service-photo{order:2}
.roofing-service-photo{overflow:hidden;background:var(--gray);height:390px;min-width:0}
.roofing-service-photo img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.roofing-service:hover .roofing-service-photo img{transform:scale(1.035)}
.roofing-service-copy{min-width:0}.roofing-service-copy h2{margin:11px 0 19px;font-size:clamp(2.2rem,4vw,3.5rem)}
.service-number{font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;color:var(--wine);font-weight:800}
.roofing-service-copy>.btn-row{align-items:center;flex-wrap:wrap;margin-top:27px}
.roofing-service-copy>.btn-row .btn{font-size:.8rem}
.roofing-service-accordion{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:24px}
.roofing-service-accordion summary{list-style:none;cursor:pointer;padding:17px 0;font-weight:800;display:flex;align-items:center;justify-content:space-between;gap:15px}
.roofing-service-accordion summary::-webkit-details-marker{display:none}
.roofing-service-accordion summary i{transition:transform .25s;color:var(--wine)}
.roofing-service-accordion[open] summary i{transform:rotate(180deg)}
.roofing-service-accordion-content{padding:0 0 17px}
.roofing-service-accordion-content ul{margin:7px 0 0;padding-left:22px}
.roofing-service-accordion-content li{margin-bottom:7px}
.service-path-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:25px;margin-top:35px}
.service-path-card{display:block;overflow:hidden;background:var(--white);color:var(--dark)}
.service-path-card img{width:100%;height:255px;object-fit:cover;transition:transform .4s}
.service-path-card:hover img{transform:scale(1.035)}
.service-path-card>div{padding:28px}
.service-path-card span{font-size:.75rem;text-transform:uppercase;font-weight:800;letter-spacing:.12em;color:var(--wine)}
.service-path-card h3{font-size:clamp(1.65rem,3vw,2.3rem);margin:10px 0}
.service-path-card strong{display:inline-block;color:var(--wine);font-size:.86rem;text-transform:uppercase;margin-top:16px}
@media(max-width:900px){.roofing-service{grid-template-columns:1fr;gap:23px;padding:22px 0 60px}.roofing-service:nth-child(even) .roofing-service-photo{order:0}.roofing-service-photo{height:350px}}
@media(max-width:767px){.services-quicklinks{justify-content:flex-start}.services-quicklinks a{font-size:.78rem;padding:9px 12px}.roofing-service-photo{height:285px}.roofing-service-copy>.btn-row{flex-direction:column;align-items:stretch}.service-path-grid{grid-template-columns:1fr}.service-path-card img{height:230px}}


/* Portfolio: vertical project videos followed by customer-supplied gallery */
.portfolio-video-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;align-items:start}
.portfolio-vertical-card{min-width:0;overflow:hidden;background:var(--white);color:var(--dark);border-radius:6px}
.portfolio-vertical-card video{width:100%;aspect-ratio:9/16;object-fit:contain;background:var(--dark);display:block}
.portfolio-vertical-caption{font:600 .83rem/1.4 var(--body);text-align:center;padding:13px 10px;text-transform:uppercase;letter-spacing:.06em}
.portfolio-photo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.portfolio-photo-grid>a{display:block;position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--gray);border-radius:4px}
.portfolio-photo-grid img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.portfolio-photo-grid>a:hover img{transform:scale(1.06)}
.portfolio-zoom{position:absolute;right:11px;bottom:11px;background:var(--wine);color:var(--white);height:34px;width:34px;display:grid;place-items:center;border-radius:3px}
@media(max-width:1023px){.portfolio-video-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.portfolio-photo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:767px){.portfolio-video-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.portfolio-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.portfolio-vertical-caption{font-size:.72rem}}
@media(max-width:360px){.portfolio-video-grid{grid-template-columns:1fr 1fr}}

/* Reviews page: editorial spotlight and natural-height testimonial masonry */
.reviews-intro-strip{background:var(--wine);color:var(--white)}
.reviews-intro-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;padding:19px 0;font-size:.8rem;letter-spacing:.07em;text-transform:uppercase;font-weight:800}
.reviews-intro-inner i{color:var(--yellow);margin-right:9px}
.testimonial-section{background:var(--cream)}
.testimonial-section .section-head em{color:var(--wine);font-style:normal}
.testimonial-highlight{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:stretch;margin-bottom:26px}
.testimonial-tile{background:var(--white);border:1px solid var(--line);border-top:4px solid var(--wine);padding:28px;display:flex;flex-direction:column;gap:16px;min-width:0;break-inside:avoid;margin-bottom:22px;transition:box-shadow .25s,transform .25s}
.testimonial-tile:hover{transform:translateY(-4px);box-shadow:0 16px 30px #190b0718}
.testimonial-tile-top,.testimonial-rating{display:flex;align-items:center;justify-content:space-between;gap:12px}
.testimonial-quote-icon{color:var(--wine);font-size:1.9rem;line-height:1}
.testimonial-rating{color:#a06a00;font-size:1.05rem;letter-spacing:.05em;white-space:nowrap}
.testimonial-rating strong{color:var(--dark);font-size:.85rem;letter-spacing:0}
.testimonial-tile blockquote{margin:0;flex:1;color:var(--dark)}
.testimonial-tile blockquote p{font-size:.92rem;line-height:1.82;margin:0;overflow-wrap:anywhere}
.testimonial-divider{height:1px;background:var(--line)}
.testimonial-author{display:flex;align-items:center;gap:13px}
.testimonial-avatar{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;background:var(--dark);color:var(--yellow);font:600 1.15rem var(--heading);border-radius:50%}
.testimonial-author h3{font-size:1.13rem;margin:0 0 3px}
.testimonial-author div>span{font-size:.76rem;color:var(--muted)}
.testimonial-author div>span i{margin-right:4px;color:var(--wine)}
.testimonial-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:.72rem;color:var(--muted)}
.testimonial-meta>span{display:inline-flex;align-items:center;gap:6px}
.testimonial-meta i{color:var(--wine)}
.testimonial-featured{background:var(--dark);color:var(--white);border-top-color:var(--yellow);margin:0;padding:35px}
.testimonial-featured .testimonial-quote-icon,.testimonial-featured .testimonial-author div>span i,.testimonial-featured .testimonial-meta i{color:var(--yellow)}
.testimonial-featured .testimonial-rating{color:var(--yellow)}
.testimonial-featured .testimonial-rating strong,.testimonial-featured blockquote,.testimonial-featured .testimonial-author div>span,.testimonial-featured .testimonial-meta{color:var(--white)}
.testimonial-featured .testimonial-divider{background:var(--line);opacity:.4}
.testimonial-featured .testimonial-avatar{background:var(--wine)}
.testimonial-highlight-side{background:var(--gray);padding:clamp(28px,5vw,55px);display:flex;flex-direction:column;justify-content:center}
.testimonial-highlight-side>i{color:var(--wine);font-size:2.4rem;margin-bottom:19px}
.testimonial-highlight-side h3{font-size:clamp(1.9rem,3.2vw,2.7rem)}
.testimonial-highlight-side p{color:var(--muted)}
.testimonial-highlight-side .text-link{margin-top:13px}
.testimonial-masonry{columns:3;column-gap:22px}
.testimonial-masonry .testimonial-tile{display:inline-flex;width:100%;vertical-align:top}
.testimonial-contact-visual{position:relative;min-width:0}
.testimonial-contact-visual img{width:100%;height:360px;object-fit:cover}
.testimonial-contact-visual span{position:absolute;bottom:15px;left:15px;padding:12px 16px;background:var(--wine);color:var(--white);font:600 1rem var(--heading);letter-spacing:.07em}
@media(max-width:1023px){.testimonial-masonry{columns:2}}
@media(max-width:767px){.testimonial-highlight{grid-template-columns:1fr}.testimonial-masonry{columns:1}.testimonial-tile{padding:23px}.testimonial-featured{padding:27px}.testimonial-contact-visual img{height:275px}.reviews-intro-inner{justify-content:center;gap:12px 24px;text-align:center}}

/* Contact page: split map, form and social showcase */
.contact-banner{background-image:linear-gradient(90deg,#190b07e8,#190b0799),url('../images/header-roofing.webp')}
.contact-info-bar{background:var(--wine);color:var(--white)}
.contact-info-bar-inner{display:flex;justify-content:space-between;align-items:center;gap:16px 25px;flex-wrap:wrap;padding:22px 0}
.contact-info-bar-inner span{font-size:.78rem;font-weight:800;letter-spacing:.055em;text-transform:uppercase}
.contact-info-bar-inner i{color:var(--yellow);margin-right:8px}
.contact-main-section{background:var(--cream)}
.contact-main-section .section-head em,.contact-form-intro h2 em{color:var(--wine);font-style:normal}
.contact-details-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.contact-detail-card{min-width:0;background:var(--white);border:1px solid var(--line);border-left:4px solid var(--wine);padding:28px;display:flex;align-items:center;gap:20px;transition:transform .25s,box-shadow .25s}
.contact-detail-card:hover{transform:translateY(-3px);box-shadow:0 12px 25px #190b071b}
.contact-icon{flex:0 0 62px;width:62px;height:62px;display:grid;place-items:center;color:var(--white);background:var(--wine);font-size:1.4rem}
.contact-detail-body{display:grid;gap:4px;min-width:0}
.contact-detail-body small{color:var(--wine);text-transform:uppercase;letter-spacing:.1em;font-weight:800}
.contact-detail-body strong{overflow-wrap:anywhere;font-family:var(--heading);font-size:clamp(1.15rem,2vw,1.65rem);line-height:1.25;text-transform:uppercase}
.contact-detail-body>span{color:var(--muted);font-size:.83rem}
.contact-arrow{color:var(--wine);margin-left:auto;align-self:flex-start}
.contact-map-section{display:grid;grid-template-columns:1fr 1fr;min-height:525px;background:var(--dark);color:var(--white)}
.contact-map-copy{padding:clamp(40px,7vw,95px) max(24px,calc((100vw - var(--container))/2));min-width:0}
.contact-map-copy .eyebrow{color:var(--yellow)}
.contact-map-copy h2 em{color:var(--yellow);font-style:normal}
.contact-map-copy p{color:var(--gray);max-width:520px}
.contact-map-stat{display:flex;align-items:center;gap:22px;border-top:1px solid #ffffff45;padding-top:23px;margin:25px 0}
.contact-map-stat>span{font:700 5rem/1 var(--heading);color:var(--yellow)}
.contact-map-stat div{display:grid;gap:3px}.contact-map-stat strong{font:600 1.1rem var(--heading)}.contact-map-stat small{color:var(--gray)}
.contact-map-frame{min-width:0;min-height:420px}.contact-map-frame iframe{border:0;width:100%;height:100%;display:block;min-height:420px}
.contact-form-section{background:var(--gray)}.contact-form-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,75px);align-items:start}
.contact-form-intro h2{max-width:540px}.contact-form-intro>p{color:var(--muted)}
.contact-steps{list-style:none;padding:0;margin:35px 0;display:grid;gap:24px}
.contact-steps li{display:flex;gap:17px;align-items:flex-start}.contact-steps li>span{font:600 1.65rem/1 var(--heading);color:var(--wine);padding-top:4px}
.contact-steps strong{font:600 1.25rem var(--heading);text-transform:uppercase}.contact-steps p{font-size:.85rem;color:var(--muted);margin:6px 0 0}
.contact-payment-note{padding:24px;background:var(--white);border-top:4px solid var(--wine)}
.contact-payment-note h3{font-size:1.25rem}.contact-payment-note p{font-size:.85rem;margin:0;color:var(--muted)}
.contact-form-card{background:var(--white);border:1px solid var(--line);box-shadow:0 17px 55px #190b0711;min-width:0}
.contact-form-card-head{background:var(--wine);color:var(--white);padding:21px 23px;display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;align-items:center}
.contact-form-card-head span{font:600 1.23rem var(--heading);letter-spacing:.03em}.contact-form-card-head i{margin-right:8px;color:var(--yellow)}
.contact-form-card-head small{font-size:.73rem;letter-spacing:.09em;font-weight:800}
.contact-form-card .form-embed{padding:15px;min-height:747px}.contact-form-card iframe{display:block;width:100%;height:747px;min-height:747px;border:0;border-radius:4px;background:var(--white)}
.contact-social-section{background:var(--wine);color:var(--white);padding:75px 0}.contact-social-layout{display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:center}
.contact-social-section .eyebrow{color:var(--yellow)}.contact-social-section h2 em{color:var(--yellow);font-style:normal}
.contact-social-section p{margin-bottom:0;color:var(--white)}.contact-social-links{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact-social-links a{display:flex;align-items:center;gap:13px;padding:17px 20px;background:var(--dark);border:1px solid #ffffff50;color:var(--white);font-weight:800;transition:transform .25s,background .25s}
.contact-social-links a:hover{transform:translateY(-4px);background:var(--red)}.contact-social-links i{display:grid;place-items:center;width:32px;color:var(--white);font-size:1.5rem}
.contact-social-links img{width:31px;height:31px;object-fit:contain;filter:brightness(0) invert(1)}
@media(max-width:1023px){.contact-map-section{grid-template-columns:1fr}.contact-map-copy{padding:60px 6%}.contact-form-layout{grid-template-columns:1fr}.contact-social-layout{grid-template-columns:1fr}}
@media(max-width:767px){.contact-details-grid{grid-template-columns:1fr}.contact-detail-card{padding:20px;gap:14px}.contact-icon{width:50px;height:50px;flex-basis:50px}.contact-info-bar-inner{justify-content:center;text-align:center}.contact-map-copy{text-align:center;padding:52px 22px}.contact-map-stat{justify-content:center}.contact-map-frame,.contact-map-frame iframe{min-height:340px}.contact-form-card .form-embed{padding:8px}.contact-form-card-head{justify-content:center;text-align:center}.contact-social-section{text-align:center;padding:55px 0}.contact-social-links a{padding:14px 10px;font-size:.86rem}.contact-social-links{gap:10px}}
@media(max-width:390px){.contact-social-links{grid-template-columns:1fr 1fr}.contact-detail-body strong{font-size:1.08rem}}


/* Dedicated roof installation landing */
.install-banner::before{background-image:url('../images/service-roof-installation.webp')}
.installation-highlights{background:var(--wine);color:var(--white)}
.installation-highlights .container{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:15px 28px;padding:21px 0}
.installation-highlights span{font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;font-weight:800}
.installation-highlights i{color:var(--yellow);margin-right:9px}
.installation-split{gap:clamp(25px,5vw,70px)}
.installation-split h2 em,.installation-materials h2 em,.installation-contact h2 em{font-style:normal;color:var(--wine)}
.installation-photo{min-width:0;overflow:hidden}
.installation-photo img{width:100%;height:500px;object-fit:cover}
.installation-materials{background:var(--cream)}
.installation-material-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.installation-material-card{min-width:0;background:var(--white);border:1px solid var(--line);border-bottom:4px solid var(--wine);overflow:hidden;transition:transform .25s,box-shadow .25s}
.installation-material-card:hover{transform:translateY(-5px);box-shadow:0 16px 32px #190b0718}
.installation-material-card img{height:215px;width:100%;object-fit:cover}
.installation-material-card>div{padding:22px}
.installation-material-card h3{font-size:1.45rem}
.installation-material-card p{font-size:.85rem;color:var(--muted)}
.installation-process .section-head em{color:var(--yellow);font-style:normal}
.installation-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.installation-step{border-top:4px solid var(--yellow);background:var(--wine);padding:30px;min-width:0}
.installation-step>span{display:block;font:700 3.8rem/1 var(--heading);color:var(--yellow);margin-bottom:16px}
.installation-step h3{font-size:1.5rem}.installation-step p{color:var(--white);opacity:.9;margin:0}
.installation-contact{background:var(--gray)}
.installation-contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;align-items:start;gap:clamp(25px,5vw,75px)}
.installation-contact-info{display:grid;gap:16px;margin:30px 0}
.installation-contact-info>a,.installation-contact-info>span{display:flex;align-items:center;gap:13px;font-weight:800;overflow-wrap:anywhere}
.installation-contact-info i{color:var(--wine);width:24px;text-align:center}
.installation-form-note{padding:18px 20px;border-left:4px solid var(--wine);background:var(--white);font-size:.9rem}
@media(max-width:1100px){.installation-material-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.installation-highlights .container{justify-content:center;text-align:center}.installation-material-grid,.installation-steps,.installation-contact-grid{grid-template-columns:1fr}.installation-photo img{height:320px}.installation-material-card img{height:240px}.installation-step{padding:24px}.installation-split>div{min-width:0}}


/* Dedicated roofing repair landing */
.repair-banner::before{background-image:url('../images/service-roof-repair.webp')}
.repair-signs{background:var(--cream)}
.repair-signs h2 em,.repair-process h2 em,.repair-property h2 em{color:var(--wine);font-style:normal}
.repair-sign-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.repair-sign-card{background:var(--white);padding:28px;border-top:4px solid var(--wine);min-width:0}
.repair-sign-card>i{font-size:1.85rem;color:var(--wine);margin-bottom:19px}
.repair-sign-card h3{font-size:1.35rem}
.repair-sign-card p{font-size:.88rem;color:var(--muted);margin:0}
.repair-materials .section-head em{font-style:normal;color:var(--yellow)}
.repair-material-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}
.repair-material-item{background:var(--white);color:var(--dark);min-width:0;overflow:hidden}
.repair-material-item img{width:100%;height:190px;object-fit:cover}
.repair-material-item>div{padding:19px}
.repair-material-item h3{font-size:1.4rem}
.repair-material-item p{color:var(--muted);font-size:.85rem}
.repair-process-list{counter-reset:repair;list-style:none;padding:0;margin:25px 0 30px;display:grid;gap:16px}
.repair-process-list li{border-left:4px solid var(--wine);padding:5px 0 6px 20px}
.repair-process-list strong{font:600 1.25rem var(--heading);text-transform:uppercase}
.repair-process-list p{margin:5px 0 0;color:var(--muted)}
.repair-property{background:var(--cream)}
.repair-property-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(25px,5vw,70px);align-items:center}
.repair-property-visual{min-width:0}.repair-property-visual img{width:100%;height:450px;object-fit:cover}
@media(max-width:1100px){.repair-sign-grid,.repair-material-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.repair-sign-grid,.repair-material-grid,.repair-property-grid{grid-template-columns:1fr}.repair-property-visual img{height:280px}.repair-sign-card{padding:23px}.repair-material-item img{height:240px}}


/* Requested Strong Roofing visual refinements — v2 */
/* Transparent navigation overlays hero and inner banners without changing document order. */
.topbar{position:relative;z-index:35}
.site-header{position:absolute!important;top:40px;left:0;right:0;width:100%;background:transparent!important;z-index:50;color:var(--white)}
.site-header .nav-shell{min-height:112px}
.site-header .nav-list>a,.site-header .nav-drop>a{display:inline-flex;align-items:center;gap:8px;text-shadow:0 2px 8px #190b07bb}
.site-header .nav-list>a i,.site-header .nav-drop>a>i:first-child{font-size:.88rem;color:var(--yellow)}
.site-header .nav-drop-menu a{display:flex;align-items:center;gap:10px}
.site-header .nav-drop-menu i{font-size:.86rem;color:var(--yellow)}
.site-header .nav-list>a.active i{color:var(--white)}
.hero{min-height:700px}
.hero .container{padding-top:166px;padding-bottom:100px}
.inner-banner .inner-banner-content{padding-top:160px;padding-bottom:90px}
.inner-banner{min-height:510px}
/* Logo above description, red gradient, headings and link icons. */
.site-footer{background:linear-gradient(145deg,var(--wine) 0%,var(--red) 49%,var(--wine) 100%);color:var(--white)}
.site-footer .footer-top{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding-top:52px}
.site-footer .footer-top>a{display:inline-block;align-self:flex-start}
.site-footer .footer-top img{width:240px;max-height:150px}
.site-footer .footer-top p{max-width:760px;margin:0;color:var(--white);line-height:1.85}
.site-footer .footer-grid h3{display:flex;align-items:center;gap:10px;color:var(--white)}
.site-footer .footer-grid h3>i{color:var(--yellow);font-size:1rem;flex:none}
.site-footer .footer-grid>div>a,.site-footer .footer-grid>div>p{color:var(--white);display:flex;align-items:flex-start;gap:10px;overflow-wrap:anywhere;line-height:1.65}
.site-footer .footer-grid>div>a>i,.site-footer .footer-grid>div>p>i{width:17px;flex:0 0 17px;color:var(--yellow);text-align:center;margin-top:.26em;font-size:.9rem}
.site-footer .footer-grid a:hover{color:var(--yellow)}
.site-footer .footer-bottom{color:var(--white)}
/* Center the artwork inside all social circles, including the BBB logo. */
.socials{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.socials>a,.site-footer .socials>a,.social-banner .socials>a,.topbar .socials>a{display:flex!important;align-items:center!important;justify-content:center!important;flex:0 0 auto;margin:0;padding:0!important;line-height:1!important;text-align:center;background:var(--wine);color:var(--white);border:1px solid #ffffff75;box-shadow:0 4px 14px #190b0736;border-radius:50%}
.socials>a i{display:block!important;flex:0 0 auto;line-height:1!important;font-size:1em!important;width:auto!important;height:auto!important;transform:none!important}
.socials>a img{display:block!important;position:static!important;margin:auto!important;object-fit:contain!important;max-width:59%!important;max-height:59%!important;filter:brightness(0) invert(1)}
.site-footer .socials{margin-top:18px;gap:12px}
.site-footer .socials>a{width:44px;height:44px;font-size:1.16rem}
.site-footer .footer-grid .socials>a{display:flex!important;margin:0}
.topbar .socials>a{width:35px;height:35px}
.socials>a:hover{transform:translateY(-5px) scale(1.06);background:var(--dark);box-shadow:0 10px 25px #190b0750}
/* Dedicated, prominent Home social showcase. */
.social-banner{position:relative;isolation:isolate;overflow:hidden;padding:96px 0;border-top:5px solid var(--yellow);border-bottom:5px solid var(--yellow)}
.social-banner::before{content:'';position:absolute;inset:0;background:linear-gradient(100deg,#190b07ef,#950b0fdc);z-index:-1}
.social-banner h2{font-size:clamp(2.6rem,5vw,4.8rem);max-width:720px}
.social-banner p{font-size:1.06rem;max-width:560px}
.social-banner .container{gap:50px}
.social-banner .socials{gap:15px;justify-content:center}
.social-banner .socials>a{width:76px;height:76px;font-size:1.85rem;border:2px solid var(--yellow);box-shadow:0 13px 36px #190b0766}
.social-banner .socials>a img{max-width:55%!important;max-height:55%!important}
/* Masonry uses CSS columns to keep large photographs, natural irregular heights and responsive flow. */
.portfolio-photo-grid{display:block;columns:3;column-gap:20px}
.portfolio-photo-grid>a{display:block!important;break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;width:100%;height:auto!important;aspect-ratio:auto!important;margin:0 0 20px;border-radius:7px;overflow:hidden;background:var(--gray)}
.portfolio-photo-grid>a img{width:100%;height:auto!important;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .35s ease}
.portfolio-photo-grid>a:nth-child(5n+2) img{aspect-ratio:3/4}
.portfolio-photo-grid>a:nth-child(7n+4) img{aspect-ratio:1/1}
.portfolio-photo-grid>a:nth-child(9n+6) img{aspect-ratio:5/4}
.portfolio-photo-grid>a:hover img{transform:scale(1.045)}
.portfolio-vertical-card{background:transparent;border-radius:9px}
.portfolio-vertical-card video{border-radius:9px}
/* Better social cards in Contact */
.contact-social-section{background:linear-gradient(125deg,var(--wine),var(--red));border-top:5px solid var(--yellow)}
.contact-social-links a{transition:transform .25s,box-shadow .25s,background .25s;border-radius:7px;min-height:76px;box-shadow:0 9px 22px #190b0738}
.contact-social-links a:hover{box-shadow:0 18px 32px #190b0755}
@media(max-width:1023px){.portfolio-photo-grid{columns:2;column-gap:14px}.portfolio-photo-grid>a{margin-bottom:14px}}
@media(max-width:900px){.site-header{position:absolute!important;background:transparent!important}.site-header .nav-list{background:var(--dark);max-height:calc(100vh - 95px);overflow-y:auto;align-items:flex-start}.site-header .nav-drop-menu{background:transparent}.nav-list>a,.nav-drop>a{padding:8px 0}}
@media(max-width:767px){.hero .container{padding-top:140px;padding-bottom:85px}.inner-banner .inner-banner-content{padding-top:150px;padding-bottom:64px}.site-header .nav-shell{min-height:78px}.site-footer .footer-top{align-items:center;text-align:center}.site-footer .footer-top>a{align-self:center}.site-footer .footer-top p{text-align:center}.site-footer .footer-grid>div{min-width:0}.social-banner{padding:75px 0}.social-banner .container{align-items:center;text-align:center}.social-banner .socials>a{width:66px;height:66px;font-size:1.6rem}.social-banner h2{font-size:clamp(2.4rem,10vw,3.6rem)}}
@media(max-width:540px){.portfolio-photo-grid{columns:2;column-gap:10px}.portfolio-photo-grid>a{margin-bottom:10px}.portfolio-photo-grid>a img{aspect-ratio:3/4}.portfolio-photo-grid>a:nth-child(3n) img{aspect-ratio:4/3}.social-banner .socials{gap:9px}.social-banner .socials>a{width:58px;height:58px;font-size:1.35rem}}
body.page-about .inner-banner::before{background-image:url("https://files.leadconnectorhq.com/file/6af5cebbc007ee82acf977fd/1.webp");background-position:center;background-size:cover}
body.page-services .inner-banner::before{background-image:url("https://files.leadconnectorhq.com/file/6af5cebcfebc0d282b088d84/2.webp");background-position:center;background-size:cover}
body.page-portfolio .inner-banner::before{background-image:url("https://files.leadconnectorhq.com/file/6af5cea82dafa09586f2b610/3.webp");background-position:center;background-size:cover}
body.page-reviews .inner-banner::before{background-image:url("https://files.leadconnectorhq.com/file/6af5cea8febc0d282b0889a3/4.webp");background-position:center;background-size:cover}
body.page-contact .inner-banner::before{background-image:url("https://files.leadconnectorhq.com/file/6af5cea8e2f577d4a3002ee2/5.webp");background-position:center;background-size:cover}
body.page-roofing-installation .inner-banner::before{background-image:url("https://files.leadconnectorhq.com/file/6af5cea85364d71dd3e1ff41/6.webp");background-position:center;background-size:cover}
body.page-roofing-repair .inner-banner::before{background-image:url("https://files.leadconnectorhq.com/file/6af5cea8c007ee82acf97470/7.webp");background-position:center;background-size:cover}
body.page-contact .contact-banner{background-image:none}
body.page-index .cta-final::before{background-image:url("https://files.leadconnectorhq.com/file/6af5cea89b3d448d8087c94e/8.webp");background-position:center;background-size:cover}
body.page-about .cta-final::before{background-image:url("https://files.leadconnectorhq.com/file/6af5ceaa8af1a750f421b9ea/9.webp");background-position:center;background-size:cover}
body.page-services .cta-final::before{background-image:url("https://files.leadconnectorhq.com/file/6af5ceaafebc0d282b0889f1/10.webp");background-position:center;background-size:cover}
body.page-portfolio .cta-final::before{background-image:url("https://files.leadconnectorhq.com/file/6af5ceaa4dccfd82dad4cd8b/11.webp");background-position:center;background-size:cover}
body.page-reviews .cta-final::before{background-image:url("https://files.leadconnectorhq.com/file/6af5ceaa4a2360a4d7b4b39c/12.webp");background-position:center;background-size:cover}
body.page-contact .cta-final::before{background-image:url("https://files.leadconnectorhq.com/file/6af5ceaaea5d882de5d0a959/13.webp");background-position:center;background-size:cover}
body.page-roofing-installation .cta-final::before{background-image:url("https://files.leadconnectorhq.com/file/6af5ceaa4a2360a4d7b4b3b4/14.webp");background-position:center;background-size:cover}
body.page-roofing-repair .cta-final::before{background-image:url("https://files.leadconnectorhq.com/file/6af5ceabfebc0d282b088a35/15.webp");background-position:center;background-size:cover}
body.page-reviews .testimonial-conversation{background-image:linear-gradient(90deg,#190b07e8,#190b07e1),url("https://files.leadconnectorhq.com/file/6af5ceabea5d882de5d0a96d/16.webp");background-size:cover;background-position:center}
body.page-index .home-why{background-image:linear-gradient(90deg,#190b07ef,#190b07b5),url("https://files.leadconnectorhq.com/file/6af5ceab9b3d448d8087c9c6/17.webp");background-size:cover;background-position:center}
body.page-index .social-banner{background-image:linear-gradient(105deg,#190b07f2,#950b0fe8),url("https://files.leadconnectorhq.com/file/6af5ceabea5d882de5d0a979/18.webp");background-size:cover;background-position:center}


/* Strong Roofing v3 refinements requested by client */
.topbar{background:transparent!important;position:absolute;top:0;left:0;right:0;z-index:60;color:var(--white)}
.topbar .container{padding-top:8px;padding-bottom:8px}
.topbar .topbar-info span,.topbar a{color:var(--white);text-shadow:0 2px 12px rgba(0,0,0,.35)}
.site-header{top:46px!important}
.brand img{height:98px!important;max-height:98px!important;max-width:290px!important;transition:transform .35s ease,filter .35s ease,drop-shadow .35s ease}
.brand:hover img,.footer-top a:hover img{transform:translateY(-4px) scale(1.04);filter:drop-shadow(0 14px 26px rgba(0,0,0,.22))}
.btn{position:relative;overflow:hidden;isolation:isolate;border-radius:999px;padding:14px 24px;box-shadow:0 10px 22px rgba(25,11,7,.18);transition:transform .3s ease, box-shadow .3s ease, color .3s ease, border-color .3s ease, background .3s ease}
.btn::before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.14),rgba(255,255,255,0) 34%,rgba(255,255,255,.28) 50%,rgba(255,255,255,0) 67%);transform:translateX(-120%) skewX(-24deg);transition:transform .55s ease;z-index:-1}
.btn::after{content:'';position:absolute;inset:1px;border-radius:inherit;border:1px solid rgba(255,255,255,.12);z-index:-1}
.btn:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 16px 32px rgba(25,11,7,.28)}
.btn:hover::before{transform:translateX(120%) skewX(-24deg)}
.btn-primary{background:linear-gradient(135deg,var(--wine),var(--red));border:1px solid rgba(255,255,255,.16)}
.btn-outline{background:rgba(255,255,255,.06);backdrop-filter:blur(3px);border:1px solid rgba(255,255,255,.72)}
.btn-outline:hover{background:rgba(255,255,255,.14);color:var(--white)}
.btn-dark{background:rgba(25,11,7,.02);border:1px solid rgba(25,11,7,.18)}
.btn-dark:hover{background:var(--dark);border-color:var(--dark);color:var(--white)}
.hero-shade{background:linear-gradient(90deg,rgba(25,11,7,.66),rgba(25,11,7,.42) 52%,rgba(25,11,7,.22))!important}
.hero-content{padding:18px 0;text-shadow:0 6px 22px rgba(0,0,0,.22)}
.hero p{max-width:720px}
.hero .btn-row{margin-top:30px}
.hero .eyebrow,.inner-banner .eyebrow,.cta-final .eyebrow,.social-banner .eyebrow{display:inline-flex;align-items:center;width:auto;padding:8px 14px;border:1px solid rgba(255,255,255,.88);border-radius:999px;background:rgba(255,255,255,.04);backdrop-filter:blur(2px);box-shadow:0 5px 14px rgba(0,0,0,.14)}
.social-banner .eyebrow{margin-bottom:18px}
.home-services-collage .container{max-width:1280px}
.home-collage-grid{display:grid;grid-template-columns:1.15fr .85fr .85fr;grid-auto-rows:255px;gap:22px}
.home-collage-grid .collage-card{display:flex;flex-direction:column;height:100%}
.home-collage-grid .collage-card img{height:100%;min-height:0;object-fit:cover}
.home-collage-grid .service-card{position:relative;min-height:255px;border-radius:10px;overflow:hidden}
.home-collage-grid .service-card .service-card-content{position:absolute;inset:auto 0 0 0;padding:22px;background:linear-gradient(180deg,rgba(25,11,7,0) 0%,rgba(25,11,7,.82) 48%,rgba(25,11,7,.96) 100%);color:var(--white)}
.home-collage-grid .service-card h3{min-height:0;margin-bottom:8px}
.home-collage-grid .service-card p{min-height:0;color:#f4e8df;margin-bottom:12px}
.home-collage-grid .text-link{color:var(--yellow)}
.home-collage-grid .collage-feature{grid-row:span 2;min-height:532px}
.home-collage-grid .collage-feature img{height:100%}
.home-collage-grid .collage-feature .service-card-content{padding:26px 24px}
.home-collage-grid .collage-feature h3{font-size:clamp(1.8rem,3vw,2.5rem)}
.home-collage-grid .collage-feature p{font-size:.95rem;max-width:520px}
/* Assign requested portfolio images to image backgrounds. */
body.page-about .inner-banner::before, body.page-services .inner-banner::before, body.page-portfolio .inner-banner::before, body.page-reviews .inner-banner::before, body.page-contact .inner-banner::before, body.page-roofing-installation .inner-banner::before, body.page-roofing-repair .inner-banner::before{background-image:url('https://files.leadconnectorhq.com/file/6af5ceb12dafa09586f2b790/47.webp')!important;background-position:center;background-size:cover}
body.page-index .cta-final::before{background-image:url('https://files.leadconnectorhq.com/file/6af5ceab9b3d448d8087c9c6/17.webp')!important;background-position:center;background-size:cover}
body.page-about .cta-final::before,body.page-contact .cta-final::before,body.page-portfolio .cta-final::before,body.page-roofing-installation .cta-final::before,body.page-roofing-repair .cta-final::before{background-image:url('https://files.leadconnectorhq.com/file/6af5ceab4a2360a4d7b4b3fc/20.webp')!important;background-position:center;background-size:cover}
body.page-services .cta-final::before{background-image:url('https://files.leadconnectorhq.com/file/6af5ceac4a2360a4d7b4b42b/21.webp')!important;background-position:center;background-size:cover}
body.page-reviews .cta-final::before{background-image:url('https://files.leadconnectorhq.com/file/6af5ceac4a2360a4d7b4b43d/22.webp')!important;background-position:center;background-size:cover}
/* Make key logos and badges interactive. */
img[alt*='logo'], .footer-top img, .brand img{transition:transform .3s ease, filter .3s ease}
img[alt*='logo']:hover, .footer-top img:hover{transform:translateY(-4px) scale(1.04);filter:drop-shadow(0 12px 18px rgba(0,0,0,.28))}
@media(max-width:1100px){.home-collage-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:240px}.home-collage-grid .collage-feature{grid-column:span 2;grid-row:span 1;min-height:0;height:420px}}
@media(max-width:900px){.brand img{height:68px!important;max-height:68px!important;max-width:240px!important}.site-header{top:38px!important}.topbar{position:absolute}.topbar-inner{gap:12px}.topbar-info{gap:10px;flex-wrap:wrap;font-size:.74rem}.hero{min-height:650px}}
@media(max-width:767px){.topbar-inner{justify-content:center}.topbar-info{justify-content:center}.topbar .socials{display:none}.site-header{top:32px!important}.home-collage-grid{grid-template-columns:1fr;grid-auto-rows:auto}.home-collage-grid .service-card,.home-collage-grid .collage-feature{height:auto;min-height:0;grid-column:auto;grid-row:auto}.home-collage-grid .service-card img,.home-collage-grid .collage-feature img{height:260px}.home-collage-grid .service-card .service-card-content{position:relative;background:var(--dark)}.hero-content{text-align:center}.hero .btn-row{justify-content:center}.hero .eyebrow,.inner-banner .eyebrow,.cta-final .eyebrow,.social-banner .eyebrow{padding:7px 12px;font-size:.72rem;letter-spacing:.14em}}


/* Client refinements v4 */
:root{--footer-tint:#C51017}
/* Compact unframed eyebrows, yellow on dark and in every section */
.eyebrow,.hero .eyebrow,.inner-banner .eyebrow,.cta-final .eyebrow,.social-banner .eyebrow{display:inline-block;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;padding:0!important;color:var(--yellow)!important;letter-spacing:.16em}
/* Space for transparent overlaid header on every interior banner */
.inner-banner{min-height:570px!important}
.inner-banner .inner-banner-content{padding-top:230px!important;padding-bottom:95px!important}
/* Brand always centered above introduction on desktop and mobile */
.site-footer .footer-top{display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;text-align:center!important;gap:12px!important}
.site-footer .footer-top>a{display:inline-flex!important;align-self:center!important;justify-content:center!important}
.site-footer .footer-top img{max-width:300px;width:min(100%,270px);max-height:170px;object-fit:contain}
.site-footer .footer-top p{margin:0 auto!important;max-width:670px!important;text-align:center!important}
.site-footer .footer-grid .socials{justify-content:flex-start}
/* Special Contact-only footer */
.page-contact .site-footer .container{max-width:1100px}
.contact-footer-socials{text-align:center;padding:27px 0 50px}
.contact-footer-socials h3{font-size:1.25rem;letter-spacing:.09em;margin-bottom:20px;color:var(--yellow)}
.contact-footer-socials .socials{justify-content:center;display:flex}
.contact-footer-socials .socials>a{width:54px;height:54px;font-size:1.25rem}
/* Contact links and card hover */
.page-contact .contact-main-section a:hover,.page-contact .contact-form-section a:hover,.page-contact .contact-map-section a:hover,.page-contact .contact-social-section a:hover,.page-contact .site-footer a:hover{color:var(--yellow)!important}
.page-contact .contact-main-section a,.page-contact .contact-form-section a,.page-contact .contact-map-section a,.page-contact .contact-social-section a{transition:color .25s,transform .25s,box-shadow .25s}
/* Icon animations - large decorative feature glyphs */
@keyframes icon-float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-8px) rotate(4deg)}}
@keyframes icon-pop{0%,100%{filter:drop-shadow(0 0 0 transparent)}50%{filter:drop-shadow(0 9px 14px rgba(255,210,40,.25))}}
@media(prefers-reduced-motion:no-preference){.feature-card>i,.about-value-card>i,.repair-sign-card>i,.contact-method-card>i,.contact-info-card>i{animation:icon-float 3.6s ease-in-out infinite,icon-pop 3.6s ease-in-out infinite}.feature-card:nth-child(2n)>i,.about-value-card:nth-child(2n)>i,.repair-sign-card:nth-child(2n)>i{animation-delay:-1.8s}}
/* Portfolio videos: subtle color shapes, never lines */
.portfolio-videos-section{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse 40% 58% at 12% 5%,rgba(255,15,3,.25),transparent 72%),radial-gradient(ellipse 36% 54% at 92% 85%,rgba(255,210,40,.13),transparent 75%),var(--dark)}
.portfolio-videos-section:before{content:'';position:absolute;width:370px;height:370px;left:-130px;bottom:-230px;background:var(--wine);opacity:.3;border-radius:50%;filter:blur(65px);z-index:-1}
.portfolio-videos-section:after{content:'';position:absolute;width:310px;height:310px;right:-90px;top:-220px;background:var(--red);opacity:.17;border-radius:50%;filter:blur(70px);z-index:-1}
/* Services heading uses same background as services themselves */
.services-overview{background:var(--cream)!important;padding-bottom:30px}
.services-details{background:var(--cream)!important}
/* Explicit Home CTA image requested by client */
body.page-index .cta-final::before{background-image:url('https://files.leadconnectorhq.com/file/6af5ceb12dafa09586f2b790/47.webp')!important}
/* Full screen mobile menu with its own logo and close control */
.mobile-menu-head{display:none}
@media(max-width:900px){
 .site-header .nav-list{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-height:100dvh!important;overflow-y:auto!important;background:var(--dark)!important;z-index:200!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:0!important;padding:24px max(22px,6vw) 55px!important;opacity:0;visibility:hidden;transform:translateX(101%);transition:opacity .26s ease,transform .3s ease,visibility .3s}
 .site-header .nav-list.open{opacity:1;visibility:visible;transform:translateX(0)}
 .mobile-menu-head{display:flex;align-items:center;justify-content:space-between;gap:15px;padding-bottom:20px;margin-bottom:15px;border-bottom:1px solid rgba(255,255,255,.2)}
 .mobile-menu-logo img{width:auto;height:74px;max-width:min(65vw,240px);object-fit:contain}
 .mobile-menu-close{display:grid;place-items:center;width:48px;height:48px;color:var(--white);background:var(--wine);border:1px solid rgba(255,255,255,.38);border-radius:50%;font-size:1.45rem;flex-shrink:0}
 .site-header .nav-list>a,.site-header .nav-drop>a{padding:13px 0!important;display:flex!important;gap:14px;align-items:center;font-size:1.12rem!important;letter-spacing:.035em;white-space:normal}
 .site-header .nav-drop-menu{position:static!important;display:flex!important;flex-direction:column!important;gap:0!important;padding:0 0 8px 28px!important;min-width:0;box-shadow:none!important}
 .site-header .nav-drop-menu a{padding:8px 0!important;font-size:.88rem!important}
 .menu-toggle{position:relative;z-index:70}
 body.menu-open{overflow:hidden}
 .portfolio-video-grid>article:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:min(100%,285px)}
 .site-footer .footer-grid{grid-template-columns:1fr 1fr;gap:26px}
 .site-footer .footer-grid>div{text-align:center;align-items:center;display:flex;flex-direction:column}
 .site-footer .footer-grid h3{justify-content:center!important}
 .site-footer .footer-grid>div>a,.site-footer .footer-grid>div>p{justify-content:center!important;text-align:center!important;align-items:center!important}
 .site-footer .footer-grid>div>a>i,.site-footer .footer-grid>div>p>i{margin-top:0!important}
 .site-footer .footer-grid .socials{justify-content:center!important}
}
@media(max-width:600px){
 .inner-banner .inner-banner-content{padding-top:225px!important;padding-bottom:90px!important}
 .site-footer .footer-grid{grid-template-columns:1fr!important}
 .site-footer .footer-grid>div{width:100%;text-align:center}
 .site-footer .footer-grid>div a,.site-footer .footer-grid>div p{max-width:100%;overflow-wrap:anywhere}
 .contact-footer-socials .socials{justify-content:center}
}
@media(prefers-reduced-motion:reduce){.site-header .nav-list{transition:none!important}}

/* Strong Roofing client corrections v5 */
/* A form must NEVER be hidden or translated by reveal animations. */
.form-always-visible,.form-always-visible *,
.contact-form-section,.contact-form-card,.form-embed,
.installation-contact,.installation-contact .contact-form-card{
  visibility:visible!important;opacity:1!important;
}
.form-always-visible .reveal,.form-always-visible .motion-ready,
.form-always-visible .reveal.motion-ready,.form-always-visible .reveal.motion-ready.visible{
  opacity:1!important;transform:none!important;animation:none!important;transition:none!important;
}
.form-embed{display:block!important;position:relative!important;min-height:747px!important;height:auto!important;overflow:visible!important;transform:none!important;opacity:1!important;visibility:visible!important}
.form-embed iframe,.contact-form-card iframe,.installation-contact iframe{display:block!important;position:relative!important;opacity:1!important;visibility:visible!important;transform:none!important;animation:none!important;transition:none!important;width:100%!important;height:747px!important;min-height:747px!important;max-height:none!important;border:none!important;background:var(--white)}
.contact-form-card,.installation-contact .contact-form-card{overflow:visible!important}
/* Contact footer intentionally has no social icons; topbar and contact social section remain unchanged. */
.page-contact .contact-footer-socials{display:none!important}
/* The CTA image is applied directly to the actual section, avoiding its old pseudo-layer stacking bug. */
body.page-index .cta-final{background-image:linear-gradient(rgba(25,11,7,.70),rgba(25,11,7,.78)),url('https://files.leadconnectorhq.com/file/6af5ceb12dafa09586f2b790/47.webp')!important;background-position:center!important;background-size:cover!important}
body.page-index .cta-final::before,body.page-index .cta-final::after{display:none!important}
/* Call to action for installation/repair: decorative soft color glows without lines. */
.services-pathways{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse 55% 74% at 7% 15%,rgba(255,15,3,.20),transparent 72%),radial-gradient(ellipse 40% 65% at 95% 94%,rgba(255,210,40,.14),transparent 73%),var(--dark)!important}
.services-pathways::before,.services-pathways::after{content:'';position:absolute;pointer-events:none;border-radius:50%;z-index:-1;filter:blur(65px)}
.services-pathways::before{width:400px;height:400px;top:-220px;right:-130px;background:rgba(149,11,15,.40)}
.services-pathways::after{width:390px;height:390px;bottom:-270px;left:-130px;background:rgba(255,15,3,.23)}
/* When the fullscreen menu is open the topbar is hidden completely. */
@media(max-width:900px){body.menu-open .topbar{display:none!important;visibility:hidden!important;opacity:0!important}}
/* Yellow accented italic/emphasized text on all backgrounds. */
em,i:not([class*='fa-']){color:var(--yellow)!important}
h1 em,h2 em,h3 em,.section-head em,.contact-form-intro h2 em,.repair-property h2 em,.contact-main-section h2 em{color:var(--yellow)!important}
/* Five featured services: a balanced large-image collage, with action buttons aligned right. */
.home-service-actions{justify-content:flex-end!important;align-items:center!important;text-align:right}
.home-collage-grid{grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:repeat(2,minmax(270px,auto));grid-auto-rows:minmax(270px,auto)}
.home-collage-grid .collage-card{min-height:270px}
.home-collage-grid .collage-feature{grid-row:span 2;min-height:562px}
/* FAQ: no photo, color-only organic atmosphere and full-width answers. */
.faq-home-section{position:relative;overflow:hidden;background:radial-gradient(ellipse 40% 50% at 100% 0,rgba(255,210,40,.20),transparent 72%),radial-gradient(ellipse 45% 65% at 0 100%,rgba(149,11,15,.13),transparent 74%),var(--cream)}
.faq-layout-no-image{display:grid!important;grid-template-columns:1fr 1.3fr;align-items:start;gap:clamp(35px,6vw,95px)}
.faq-layout-no-image .faq details{background:var(--white);border:1px solid var(--line);border-left:4px solid var(--wine);padding:18px 24px;margin-bottom:12px;border-radius:6px}
.faq-layout-no-image .faq summary{font-size:1rem}
.faq-layout-no-image .faq details[open]{box-shadow:0 12px 28px rgba(25,11,7,.08)}
/* Larger photographic tiles in Home portfolio. */
.home-portfolio-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:22px!important}
.home-portfolio-grid a{min-width:0;min-height:350px;border-radius:8px}
.home-portfolio-grid img{width:100%;height:100%;min-height:350px;aspect-ratio:5/4;object-fit:cover}
@media(max-width:1023px){.faq-layout-no-image{grid-template-columns:1fr!important;gap:30px}.home-collage-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto}.home-collage-grid .collage-feature{grid-column:span 2;grid-row:auto;height:430px!important;min-height:430px}.home-portfolio-grid a,.home-portfolio-grid img{min-height:300px}}
@media(max-width:767px){.home-collage-grid{grid-template-columns:1fr;grid-template-rows:auto}.home-collage-grid .collage-feature{grid-column:auto;height:auto!important;min-height:0}.home-collage-grid .collage-card{min-height:0}.home-portfolio-grid{grid-template-columns:1fr!important}.home-portfolio-grid a,.home-portfolio-grid img{min-height:290px}.home-service-actions{justify-content:center!important;text-align:center}.faq-layout-no-image .faq details{padding:17px 18px}}


/* v6 requested refinements */
.feature-photo.vertical-photo{height:620px;max-width:460px;width:100%;margin-inline:auto;object-fit:cover;object-position:center;border-radius:8px}
.about-story .about-image-stack,.page-index .split > .reveal:first-child{display:flex;justify-content:center}
.home-portfolio-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-auto-rows:165px;grid-auto-flow:dense;gap:18px!important}
.home-portfolio-grid a{min-height:0!important;height:100%;border-radius:8px;overflow:hidden}
.home-portfolio-grid img{width:100%;height:100%;min-height:0!important;aspect-ratio:auto!important;object-fit:cover}
.home-portfolio-grid .home-shot-lg{grid-column:span 2;grid-row:span 2}
.home-portfolio-grid .home-shot-tall{grid-row:span 2}
.home-portfolio-grid .home-shot-wide{grid-column:span 2}
.page-index .home-portfolio-section .btn-row{margin-top:24px}
@media(max-width:1023px){.feature-photo.vertical-photo{height:540px;max-width:420px}.home-portfolio-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-auto-rows:150px}.home-portfolio-grid .home-shot-lg{grid-column:span 2;grid-row:span 2}.home-portfolio-grid .home-shot-tall{grid-row:span 2}.home-portfolio-grid .home-shot-wide{grid-column:span 2}}
@media(max-width:767px){.feature-photo.vertical-photo{height:430px;max-width:100%}.home-portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:135px}.home-portfolio-grid .home-shot-lg{grid-column:span 2;grid-row:span 2}.home-portfolio-grid .home-shot-tall{grid-row:span 2}.home-portfolio-grid .home-shot-wide{grid-column:span 2}}

/* Keep floating shortcuts clear of embedded forms on smaller screens. */
@media (max-width: 767px) {
  body.form-in-view .back-top,
  body.form-in-view .float-wa {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .float-wa { bottom: calc(22px + env(safe-area-inset-bottom)); }
  .back-top { bottom: calc(92px + env(safe-area-inset-bottom)); }
  .float-wa, .back-top { transition: opacity .2s ease, visibility .2s ease; }
}