/* Keep the established composition; add the warmth of an older roofing trade. */
:root{--yellow:#cda86c;--paper:#fbf9f4;--soft:#f0eade;--ink:#282722;--dark:#292a25;--muted:#605e55;--line:#d9d2c5}
body{background-color:var(--paper)}
h1 em,h2 em{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-style:italic;letter-spacing:-.04em}
.header{background:#20231f;border-bottom-color:#46483e}
.tag>span{background:#917043}
.accent{text-decoration-color:var(--yellow)}
.industrial-hero{background:#252720}
.hero-media{inset:0 0 0 37%}
.hero-media img{object-position:56% 50%!important}
.hero-media:after{background:linear-gradient(90deg,#23251d77,transparent 65%)}
.hero-plane{width:56%;background:var(--yellow)}
.hero-plane:after{background:linear-gradient(110deg,#22251ff7,#22251fed),url('/assets/photos/weathered-detail-740.webp') center/cover}
.hero-content{min-height:424px;padding-block:32px}
.hero-content h1{font-size:clamp(37px,3.7vw,52px);line-height:1.09;max-width:18ch;letter-spacing:-.035em}
.hero-content h1 em{display:block;color:#e6d3af}
.hero-content>.tag{color:#e0ddd2;margin-bottom:16px}
.hero-content>p:not(.tag){font-size:16px;line-height:1.6;color:#e1dfd5;margin:15px 0 20px;max-width:35ch}
.hero-content>.yellow-rule{margin-top:20px}
.hero-photo-note{display:flex;align-items:center;gap:20px;background:#242820ed;border:1px solid #d5c4a465;padding:10px 16px;font-size:14px}
.hero-photo-note>span{color:#ff8178;font-size:20px}
.craft-signature{display:flex;align-items:center;gap:16px;margin-top:23px;color:#d5c5a8;font-size:13px}
.craft-signature>span:first-child{border-right:1px solid #8f8064;padding-right:16px}
.craft-signature strong{font-size:17px;font-weight:600}
.craft-signature>span:last-child{font-family:Georgia,'Times New Roman',serif;font-size:17px;font-style:italic}
.home-page .service-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.home-page .service-tile{display:block;background:#292d26}
.home-page .service-tile>.picture{height:130px;min-height:0}
.home-page .tile-caption{display:flex;align-items:center;flex-wrap:nowrap;gap:10px;min-height:85px;padding:16px 24px 16px 14px;position:relative;background:#292d26}
.home-page .tile-caption h3{font-size:17px;line-height:1.3;letter-spacing:-.02em;min-width:0}
.home-page .tile-caption>svg{width:23px;height:23px}
.home-page .tile-arrow{position:absolute;right:8px;bottom:6px;font-size:17px}
.home-page .service-tile:nth-child(-n+2){box-shadow:inset 0 -3px #d52b27}
.home-page .home-services{padding-block:27px 34px}
.section-heading h2 em{white-space:nowrap}
.before-after-band{background:#2b3028;color:#fcfaf4;border-block:1px solid #484a3e}
.before-after-band .tag{color:#d9c7a6;margin-bottom:12px}
.before-after-band .tag>span{background:#cda86c}
.before-after-band h2 em{color:#e3cfaa}
.before-after-band .section-heading>p{color:#d6d7cc;max-width:33ch;line-height:1.6;font-size:15px}
.photo-pair>figcaption{font-size:13px;margin-top:12px;color:inherit;opacity:.85}
.reference-pairs .photo-pair+.photo-pair{margin-top:34px}
.reference-pairs{border-bottom:1px solid var(--line)}
.service-results{background:#eee8dc}
.reference-intro h1 em{display:block;line-height:1.12}
.project figcaption{border-bottom:1px solid var(--line);padding-bottom:12px}
.source-services .services-visual{align-self:start;position:sticky;top:calc(var(--header-height) + 24px)}
.source-services .services-visual>.picture{height:auto;aspect-ratio:4/5}
.source-services .services-visual img{object-position:52% 50%}
.source-services .services-visual figcaption{font-size:13px;margin-top:10px;color:var(--muted)}
.source-services .service-choice{padding-block:22px}
.source-services .service-choice h2{font-size:27px}
.source-service .opening-photo>.picture{aspect-ratio:16/10}
.source-service-detail{display:grid;grid-template-columns:.9fr 1.1fr;gap:6%;align-items:start}
.source-service-detail h2{font-size:clamp(29px,2.6vw,36px);line-height:1.2;margin-top:15px;max-width:22ch}
.source-service-detail p{margin-top:20px;font-size:16px;line-height:1.8;color:var(--muted)}
.source-service-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.source-service-list>li{font-size:16px;line-height:1.7;padding:15px 0 15px 26px;border-bottom:1px solid var(--line);position:relative}
.source-service-list>li:before{content:'';position:absolute;left:0;top:27px;width:10px;height:2px;background:#967344}
.next-services{flex-wrap:wrap;gap:12px 24px;padding-top:30px}
.next-services>a{font-size:15px}
.about-opening{background:#f0e9db}
.about-welcome h1{font-size:clamp(40px,4.3vw,60px)}
.about-welcome h1 em{color:#66533b}
.about-photograph{padding:7px 7px 0;border:1px solid #d2c2a8;background:#fcf8ee}
.about-photograph figcaption{padding:10px 4px}
.about-approach article{border-left-color:#9c7c4b}
.about-approach h3{font-size:21px;line-height:1.4}
.facebook-section{background:#20231f}
.facebook-feed-heading{background:var(--paper);color:var(--ink)}
.facebook-photo{border:1px solid #56594f}
@media(min-width:651px) and (max-width:1050px){
 .hero-content h1{font-size:39px;max-width:16ch}
 .hero-content{min-height:417px}
 .hero-content>p:not(.tag){max-width:30ch}
 .hero-plane{width:58%}
 .home-page .service-tiles{gap:9px}
 .home-page .service-tile>.picture{height:105px}
 .home-page .tile-caption{min-height:92px;padding:13px 18px 13px 10px;gap:8px}
 .home-page .tile-caption>svg{display:none}
 .home-page .tile-caption h3{font-size:16px}
 .source-services .service-choice h2{font-size:24px}
 .source-services .services-visual>.picture{aspect-ratio:3/5}
}
@media(max-width:650px){
 .hero-content{min-height:368px;padding-block:25px 22px}
 .hero-content h1{font-size:36px;max-width:18ch}
 .hero-content>.tag{font-size:13px;margin-bottom:13px}
 .hero-content>.yellow-rule{margin-top:15px}
 .hero-content>p:not(.tag){font-size:15px;margin:13px 0 18px}
 .hero-media{inset:0}
 .hero-media:after{background:linear-gradient(90deg,#22251ff5,#22251fdc 60%,#22251f80)}
 .hero-photo-note{display:none}
 .craft-signature{margin-top:19px;font-size:12px}
 .craft-signature strong{font-size:16px}
 .craft-signature>span:last-child{font-size:16px}
 .home-page .service-tiles{grid-template-columns:1fr;gap:7px}
 .home-page .service-tile{display:grid;grid-template-columns:74px 1fr;min-height:68px}
 .home-page .service-tile>.picture{height:100%;min-height:68px}
 .home-page .tile-caption{min-height:68px;padding:12px 29px 12px 15px;gap:12px}
 .home-page .tile-caption h3{font-size:17px}
 .home-page .tile-caption>svg{width:21px;height:21px}
 .home-page .service-tile:nth-child(-n+2){box-shadow:none;border-left:2px solid #d52b27}
 .home-page .home-services{padding-block:24px 28px}
 .before-after-band .section-heading>p{margin-top:12px;max-width:34ch}
 .section-heading h2 em{white-space:normal}
 .before-after-band h2 em{display:block}
 .photo-pair>figcaption{font-size:13px}
 .reference-pairs .photo-pair+.photo-pair{margin-top:28px}
 .source-services .services-visual{position:static}
 .source-services .services-visual>.picture{aspect-ratio:16/10}
 .source-services .service-choice{padding-block:18px}
 .source-services .service-choice h2{font-size:23px}
 .source-services .service-choice p{font-size:15px}
 .source-service-detail{grid-template-columns:1fr;gap:25px;padding-block:30px}
 .source-service-detail h2{font-size:29px}
 .source-service-detail p,.source-service-list>li{font-size:16px}
 .source-service-list>li{padding-block:13px}
 .source-service-list>li:before{top:25px}
 .next-services>a{font-size:15px}
 .about-welcome h1{font-size:42px}
 .about-welcome>p:not(.tag),.about-story-copy>p{font-size:16px}
 .about-approach h3{font-size:20px}
 .about-invitation h2,.contact-strip h2{font-size:26px}
 .brief-grid p{font-size:14px}
}


/* Restore the shared sliding comparison on the customer-supplied photo pairs. */
.photo-pair .comparison-images{aspect-ratio:2;border:5px solid #eee8dd}
.photo-pair .compare-label{font-size:13px;padding:6px 11px}
.photo-pair .compare-line>span{width:48px;height:48px}
html:not(.js) .photo-pair .comparison-images{aspect-ratio:auto}
@media(max-width:650px){.photo-pair .comparison-images{aspect-ratio:4/3;border-width:4px}.photo-pair .compare-label{font-size:12px;padding:5px 8px}.photo-pair figcaption{flex-wrap:wrap;gap:5px 14px}}

/* Original business copy, recomposed within the existing warm editorial layout. */
.source-reasons{display:grid;grid-template-columns:.85fr 1.35fr;gap:6%;border-top:1px solid var(--line)}
.source-reasons-heading h2{font-size:clamp(28px,2.8vw,36px);line-height:1.2}
.source-reasons-heading .yellow-rule{margin-top:17px}
.source-reasons>ul{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:0 28px;margin:0;padding:0}
.source-reasons li{position:relative;border-bottom:1px solid var(--line);padding:14px 0 14px 20px;font-size:15px;line-height:1.65}
.source-reasons li:before{content:'';width:7px;height:2px;position:absolute;left:0;top:26px;background:var(--action-ink)}
.source-reasons li:nth-child(-n+2){border-top:1px solid var(--line)}
.source-advice{display:grid;grid-template-columns:.8fr 1.6fr;gap:5%;border-top:1px solid var(--line)}
.source-advice h2{font-size:clamp(28px,2.4vw,33px);line-height:1.25;max-width:15ch}
.source-advice p{margin-top:12px;color:var(--muted);font-size:15px;line-height:1.7}
.source-advice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px}
.source-advice article{border-left:2px solid #b39970;padding-left:19px}
.source-advice h3{font-size:21px;line-height:1.35}
.source-advice h3 a{display:flex;align-items:start;gap:12px;min-height:44px}
.source-advice h3 svg{width:19px;height:19px;margin-top:4px;color:#a42a22}
.source-advice h3 a:hover{text-decoration:underline;text-underline-offset:4px}
.source-process{border-top:1px solid var(--line)}
.source-process .tag{margin-bottom:13px}
.source-process h2{font-size:clamp(29px,3vw,38px)}
.source-process ol{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 34px;margin:0;padding:0}
.source-process li{display:grid;grid-template-columns:28px 1fr;gap:14px;padding-top:20px;border-top:1px solid var(--line)}
.source-process li>span{color:#78613e;font-size:13px;font-weight:700;padding-top:2px}
.source-process h3{font-size:21px;line-height:1.35}
.source-process li p{font-size:15px;line-height:1.75;color:var(--muted);margin-top:10px}
.contact-email a,.footer-address a{overflow-wrap:anywhere}
@media(min-width:651px) and (max-width:1050px){
 .source-advice{grid-template-columns:1fr;gap:25px}
 .source-advice h2{max-width:none}
 .source-advice>div:first-child{display:grid;grid-template-columns:1fr 1fr;gap:5%;align-items:center}
 .source-advice>div:first-child p{margin:0}
 .source-reasons{grid-template-columns:.8fr 1.2fr;gap:5%}
 .source-reasons>ul{gap:0 20px}
 .source-process ol{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:650px){
 .source-reasons,.source-advice{grid-template-columns:1fr;gap:25px}
 .source-reasons>ul{grid-template-columns:1fr}
 .source-reasons li:nth-child(2){border-top:0}
 .source-reasons li{padding-block:12px}
 .source-reasons li:before{top:24px}
 .source-advice h2{max-width:none;font-size:28px}
 .source-advice-grid{grid-template-columns:1fr;gap:20px}
 .source-advice h3 a{min-height:0;justify-content:space-between;padding-block:5px}
 .source-advice article p{margin-top:5px}
 .source-process ol{grid-template-columns:1fr;gap:22px}
 .source-process h3{font-size:21px}
 .source-process li{gap:12px;padding-top:17px}
 .source-process li p{margin-top:7px}
}

/* A static explanation of choosing Jug replaces the animated roof on Home. */
.home-page .source-reasons-featured{grid-template-columns:.8fr 1.4fr;gap:28px 6%;border-top:0;padding-block:clamp(36px,4.5vw,64px)}
.source-reasons-featured .source-reasons-heading>.tag{margin-bottom:15px;color:var(--muted)}
.source-reasons-featured h2{font-size:clamp(32px,3.2vw,44px);line-height:1.15;max-width:13ch}
.source-reasons-featured h2 em{color:var(--ink)}
.reasons-photo{margin-top:25px;padding:5px 5px 0;background:var(--paper);border:1px solid var(--line)}
.reasons-photo .picture{aspect-ratio:1.9}
.reasons-photo img{object-position:50% 100%!important}
.reasons-photo figcaption{padding:9px 6px;font-size:14px;font-family:Georgia,'Times New Roman',serif;font-style:italic;color:var(--muted)}
.source-reasons-featured .reasons-benefits{gap:0 26px;align-content:stretch}
.source-reasons-featured .reasons-benefits>li{display:grid;grid-template-columns:27px minmax(0,1fr);align-items:center;gap:14px;padding:20px 0;font-size:16px;line-height:1.55;font-weight:600}
.source-reasons-featured .reasons-benefits>li:before{content:none}
.reasons-benefits svg{width:26px;height:26px;color:var(--action-ink)}
@media(min-width:651px) and (max-width:1050px){
 .home-page .source-reasons-featured{grid-template-columns:.75fr 1.25fr;gap:25px 5%}
 .source-reasons-featured .reasons-benefits{grid-template-columns:1fr}
 .source-reasons-featured .reasons-benefits>li{font-size:15px;padding:13px 0;gap:13px}
 .source-reasons-featured .reasons-benefits>li:nth-child(2){border-top:0}
 .reasons-photo .picture{aspect-ratio:1.25}
 .source-reasons-featured .source-reasons-heading{align-self:center}
}
@media(max-width:650px){
 .home-page .source-reasons-featured{grid-template-columns:1fr;gap:22px;padding-block:34px}
 .source-reasons-featured h2{font-size:34px;max-width:none}
 .source-reasons-featured .source-reasons-heading>.tag{margin-bottom:12px}
 .reasons-photo{display:none}
 .source-reasons-featured .reasons-benefits{grid-template-columns:1fr}
 .source-reasons-featured .reasons-benefits>li{grid-template-columns:25px minmax(0,1fr);gap:16px;padding:17px 0;font-size:16px}
 .reasons-benefits svg{width:24px;height:24px}
}

/* Finish the page with warm paper, one charcoal surface and red actions. */
.brief-guide{background:var(--paper);padding-block:36px;border-block:1px solid var(--line)}
.brief-grid p{color:var(--muted);font-size:14px}
.brief-grid>div>p{margin-top:12px}
.brief-grid>article{border-color:var(--line)}
.brief-grid>article>svg{color:var(--action-ink)}
.source-reasons-heading>.yellow-rule,.source-reasons-featured .tag>span{background:var(--action-ink)}
.contact-end,.about-invitation,.footer{background:#20231f;color:var(--paper)}
.contact-strip,.about-invitation>.shell{padding:42px 0;gap:30px;align-items:center;border-bottom:1px solid #494c43}
.contact-strip h2,.about-invitation h2{font-size:clamp(27px,2.6vw,36px);line-height:1.22;max-width:29ch}
.contact-strip>.action,.about-invitation .action{font-size:15px;min-height:50px;gap:26px}
.footer{padding-block:36px 0}
.footer-top{grid-template-columns:1.25fr 1fr .65fr;gap:6%;padding-bottom:30px}
.footer-brand>.brand{width:124px;height:68px;margin:-4px 0 14px}
.footer-brand>p{font-size:15px;line-height:1.7;color:#d1d2c9}
.footer-address{gap:8px}
.footer-address>h2,.footer-top nav>h2{font-size:13px;font-weight:650;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;color:#b8bcb0;margin-bottom:9px}
.footer-address>a{font-size:16px;line-height:1.65;min-height:32px;width:fit-content}
.footer-address>a:first-of-type{margin-bottom:5px}
.footer-top nav{grid-column:auto;grid-row:auto;gap:4px}
.footer-top nav>a{font-size:15px;min-height:32px;width:fit-content}
.footer-bottom{border-color:#494c43;color:#b8bcb0;padding-block:14px;gap:24px}
.footer-bottom>span{font-size:12px}
.footer-bottom>a,.back-top{font-size:13px;min-height:40px}
@media(max-width:900px){
 .contact-strip,.about-invitation>.shell{gap:28px}
 .contact-strip h2,.about-invitation h2{font-size:29px}
 .footer-top{grid-template-columns:1.1fr 1fr .6fr;gap:30px}
 .footer-address>a{font-size:15px}
}
@media(max-width:650px){
 .brief-guide{padding-block:30px}
 .contact-strip,.about-invitation>.shell{flex-direction:column;align-items:flex-start;padding-block:32px;gap:23px}
 .contact-strip h2,.about-invitation h2{font-size:28px;max-width:25ch}
 .contact-strip>.action,.about-invitation .action{font-size:14px}
 .footer{padding-top:28px}
 .footer-top{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:27px 22px;padding-bottom:24px}
 .footer-brand{grid-column:1/-1;display:flex;align-items:center;gap:24px}
 .footer-brand>.brand{width:106px;height:58px;flex-basis:106px;margin:0}
 .footer-brand>p{font-size:14px}
 .footer-address>h2,.footer-top nav>h2{font-size:12px;margin-bottom:6px}
 .footer-address>a{font-size:14px;gap:6px}
 .footer-address svg{width:16px}
 .footer-top nav>a{font-size:14px;min-height:34px}
 .footer-bottom{gap:6px 20px}
 .footer-bottom>span{font-size:11px}
}