:root{--ink:#292a27;--paper:#f8f6f1;--gold:#96734d;--line:#dedbd3;--muted:#686760}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-padding-top:165px}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.7 system-ui,sans-serif}
a{color:inherit}
button,input{font:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.wrap{max-width:1200px;margin:auto;padding:0 24px}
header{position:sticky;top:0;z-index:20;background:white;border-bottom:1px solid var(--line)}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:145px;padding-top:8px;padding-bottom:8px}
.brand{width:260px;flex:0 0 260px;text-decoration:none}
.brand img{display:block;width:100%;height:auto}
.brand-text{line-height:1.3;padding:15px 0}
.brand-text strong{display:block;font:bold 35px Georgia,serif;letter-spacing:4px}
.brand-text span{display:block;font-size:9px;letter-spacing:1px}
.brand-text small{display:block;color:var(--gold);letter-spacing:2px;margin-top:7px}
nav{display:flex;align-items:center;gap:22px}
nav a,summary{font-size:13px;font-weight:650;text-decoration:none}
details{position:relative}
summary{cursor:pointer;padding:12px 0}
.dropdown{position:absolute;top:100%;left:-15px;width:240px;background:white;border:1px solid var(--line);padding:10px;box-shadow:0 10px 25px #0001}
.dropdown a{display:block;padding:9px 12px}
.dropdown a:hover{background:var(--paper)}
.menu{display:none;background:white;border:1px solid var(--line);padding:8px 12px}
.btn{display:inline-block;padding:13px 21px;background:var(--ink);color:white;border:1px solid var(--ink);font-size:13px;font-weight:650;text-decoration:none}
.btn.light{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn.outline{background:transparent;border-color:currentColor;color:inherit}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:25px}
section{padding:75px 0}
h1,h2,h3{font-family:Georgia,serif;font-weight:400;line-height:1.12;margin:0}
h1{font-size:clamp(44px,6vw,76px);letter-spacing:-1.5px}
h2{font-size:clamp(34px,4vw,50px)}
h3{font-size:27px}
p{margin:20px 0}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin:0 0 20px}
.hero,.dark{background:var(--ink);color:var(--paper)}
.hero{padding:0}
.hero-grid,.split{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.hero-copy{padding:75px 0}
.hero em{color:#c9aa83}
.hero-copy>p:not(.eyebrow){color:#d7d4cc}
.hero-photo{min-height:500px;height:100%}
.photo{background:#e0ddd4;position:relative;aspect-ratio:4/3;overflow:hidden}
.photo img{width:100%;height:100%;display:block;object-fit:cover}
.hero-photo img{position:absolute;inset:0}
.placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:20px;color:var(--muted);background:linear-gradient(135deg,#d8d1c4,#eeeae1)}
.placeholder code{font-size:12px;overflow-wrap:anywhere}
.placeholder strong{font:25px Georgia,serif;margin-bottom:10px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:35px}
.card{display:flex;flex-direction:column;padding:30px;background:white;border:1px solid var(--line);text-decoration:none}
.card:hover{border-color:var(--gold)}
.card p{color:var(--muted)}
.card small{margin-top:auto;color:var(--gold);font-weight:700}
.soft{background:#eeebe4}
figure{margin:0}
figcaption{font:22px Georgia,serif;margin-top:15px}
.muted{color:var(--muted)}
.towns{display:flex;flex-wrap:wrap;gap:12px;margin-top:25px}
.towns span{border:1px solid #77766d;padding:9px 16px;font-size:13px}
.box{background:white;border:1px solid var(--line);padding:32px}
address{font-style:normal;margin-top:20px}
.notice{font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:16px}
footer{border-top:1px solid var(--line);padding:35px 0}
.footer-row{display:flex;justify-content:space-between;gap:25px;font-size:12px;color:var(--muted)}
.service-hero{background:var(--ink);color:var(--paper)}
.service-hero .intro{max-width:720px;font-size:19px;color:#d7d4cc}
.breadcrumb{font-size:12px;margin-bottom:28px}
.planning li{margin:12px 0}
.setup{background:#eee3d3;padding:20px 0;border-bottom:1px solid #c9aa83}
.setup p{margin:5px 0 12px;font-size:13px}
.setup input{max-width:100%;font-size:13px}
.setup button{margin:10px 0}
.setup button:disabled{opacity:.5;cursor:not-allowed}
.skip{position:absolute;top:-100px;background:white;padding:12px;z-index:100}
.skip:focus{top:5px}
@media(max-width:1000px){
.menu{display:block}
nav{display:none;position:absolute;top:100%;left:0;right:0;background:white;border-bottom:1px solid var(--line);padding:20px 24px;align-items:stretch;flex-direction:column;gap:12px;max-height:70vh;overflow:auto}
nav.open{display:flex}
.dropdown{position:static;box-shadow:none;width:100%}
.grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
.header-row{min-height:115px;gap:15px}
.brand{width:205px;flex-basis:205px;max-width:calc(100% - 80px)}
html{scroll-padding-top:135px}
.hero-grid,.split{grid-template-columns:1fr;gap:30px}
.hero-copy{padding:50px 0 15px}
.hero-photo{min-height:320px;margin:0 -24px}
section{padding:50px 0}
.footer-row{flex-direction:column}
}
@media(max-width:480px){.grid{grid-template-columns:1fr}}

.project-form{margin-top:45px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:25px}
.form-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.form-field label,.form-label{font-size:13px;font-weight:650}
.form-field input,.form-field select,.form-field textarea{width:100%;min-width:0;border:1px solid var(--line);background:var(--paper);color:var(--ink);padding:12px;font:inherit;border-radius:0}
.form-field textarea{resize:vertical;min-height:145px}
.form-field small,.form-help{font-size:12px;color:var(--muted)}
.form-wide{grid-column:1/-1}
.form-consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;margin:24px 0}
.form-consent input{margin-top:6px;flex:none}
.form-trap{display:none}
.form-error{color:#8b2424;font-size:13px}
@media(max-width:700px){.form-grid{grid-template-columns:1fr}.project-form{padding:24px}}

#roofing-colors-heading .manufacturer-btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-width:175px;padding:16px}
#roofing-colors-heading .manufacturer-logo{display:flex;align-items:center;justify-content:center;width:144px;height:86px;padding:12px;background:#fff}
#roofing-colors-heading .manufacturer-logo img{display:block;width:100%;height:100%;object-fit:contain}

.roof-lead{max-width:800px}.roof-step{background:#fff;border:1px solid var(--line);overflow:hidden}.roof-diagram{display:block;width:100%;height:auto}.roof-step-copy{padding:25px}.roof-step-copy .eyebrow{margin-bottom:14px}.roof-step-copy p:last-child{margin-bottom:0}.roof-video-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:35px}.roof-video-card{min-width:0}.roof-video-card h3{font-size:25px}.roof-video-frame{aspect-ratio:16/9;background:var(--paper);margin:20px 0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px}.roof-video-frame span{font-size:11px;color:var(--muted);text-align:center}.roof-video-frame iframe{width:100%;height:100%;border:0}.roof-video-card>a{font-size:12px}.roof-reasons article+article{border-top:1px solid #77766d;padding-top:22px;margin-top:22px}.roof-reasons p{color:#d7d4cc;margin-bottom:0}@media(max-width:700px){.roof-video-grid{grid-template-columns:1fr}.roof-video-card{padding:24px}}

.deck-lead{max-width:820px}.deck-photo{aspect-ratio:3/2;overflow:hidden;background:var(--line)}.deck-photo img{display:block;width:100%;height:100%;object-fit:cover}.deck-credit{font:11px/1.6 system-ui,sans-serif;color:var(--muted);margin:10px 0}.deck-credit a{color:inherit}.deck-resource{display:flex;flex-direction:column;align-items:flex-start;min-width:0}.deck-resource .btn{margin-top:auto}.deck-resource .deck-credit{margin-bottom:0}.deck-stage{background:#fff;border:1px solid var(--line);overflow:hidden}.deck-stage-diagram{display:block;width:100%;height:auto}.deck-stage-copy{padding:25px}.deck-stage-copy .eyebrow{margin-bottom:14px}.deck-stage-copy p:last-child{margin-bottom:0}.deck-reasons article+article{border-top:1px solid #77766d;padding-top:22px;margin-top:22px}.deck-reasons p{color:#d7d4cc;margin-bottom:0}@media(max-width:1000px){.deck-resource-grid{grid-template-columns:1fr}.deck-resource .btn{margin-top:8px}}@media(max-width:700px){.deck-inspiration{grid-template-columns:1fr}.deck-resource{padding:24px}}

@media(min-width:1001px){#navigation{flex:1;flex-wrap:wrap;justify-content:flex-end;gap:12px 20px}#navigation>a{white-space:nowrap}}
@media(max-width:1000px){#navigation{justify-content:flex-start}}

.service-hero{padding:0}.service-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.service-hero-copy{min-width:0;padding:75px 0}.service-hero-photo{min-width:0;min-height:500px;height:100%;aspect-ratio:4/3;overflow:hidden;position:relative;background:#e0ddd4}.service-hero-photo img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}.service-roofing-materials{padding:55px 0;border-top:1px solid #77766d}@media(max-width:700px){.service-hero-grid{grid-template-columns:1fr;gap:30px}.service-hero-copy{padding:50px 0 15px}.service-hero-photo{min-height:320px;margin:0 -24px}.service-roofing-materials{padding:40px 0}}

.barndominium-concept-label{position:absolute;right:10px;bottom:10px;z-index:1;padding:4px 9px;background:rgba(41,42,39,.85);color:#f8f6f1;font:10px/1.5 system-ui,sans-serif}

#barndominium-construction-guide .wrap{max-width:1000px}.barndo-guide-intro{padding-bottom:15px}.barndo-guide-section{border-top:1px solid var(--line);padding-top:30px;margin-top:35px}.barndo-guide-section h3{font-size:clamp(27px,3vw,34px)}

#custom-builds-experience .wrap{max-width:1000px}.custom-builds-story-intro{padding-bottom:15px}.custom-builds-story-section{border-top:1px solid var(--line);padding-top:30px;margin-top:35px}.custom-builds-story-section h3{font-size:clamp(27px,3vw,34px)}

#renovations-experience .wrap{max-width:1000px}

#additions-experience .wrap{max-width:1000px}

.outdoor-living-copy{max-width:1000px}.outdoor-living-lead{max-width:820px}.outdoor-living-gallery{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:35px}.outdoor-living-photo{aspect-ratio:3/2;overflow:hidden;background:var(--line)}.outdoor-living-photo img{display:block;width:100%;height:100%;object-fit:cover}.outdoor-living-caption{font:11px/1.6 system-ui,sans-serif;color:var(--muted);margin:10px 0}.outdoor-living-reasons article+article{border-top:1px solid #77766d;padding-top:22px;margin-top:22px}.outdoor-living-reasons p{color:#d7d4cc;margin-bottom:0}@media(max-width:700px){.outdoor-living-gallery{grid-template-columns:1fr}}

.fencing-copy{max-width:1000px}.fencing-gallery{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:35px}.fencing-photo{aspect-ratio:3/2;overflow:hidden;background:var(--line)}.fencing-photo img{display:block;width:100%;height:100%;object-fit:cover}.fencing-planning{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:35px}.fencing-inquiry{border:1px solid #77766d;padding:30px}.fencing-inquiry p{color:#d7d4cc}@media(max-width:700px){.fencing-gallery,.fencing-planning{grid-template-columns:1fr}.fencing-inquiry{padding:24px}}

#areas .coverage-lead{max-width:850px}#areas .coverage-map{max-width:950px;margin:32px auto 10px}#areas .coverage-map-button{display:block;width:100%;padding:0;border:1px solid #77766d;background:transparent;cursor:zoom-in}#areas .coverage-map img{display:block;width:100%;height:auto}#areas .coverage-map figcaption{font:12px/1.6 system-ui,sans-serif;color:#d7d4cc;margin-top:12px}#areas .coverage-credit{font-size:11px;color:#d7d4cc;margin:12px 0 35px}.coverage-primary-grid{display:grid;grid-template-columns:1fr 1fr;gap:35px}.coverage-primary-grid h4{font:25px Georgia,serif;margin:25px 0 16px}.coverage-location-list{columns:2;column-gap:24px;padding-left:20px;margin:0;font-size:14px}.coverage-location-list li{break-inside:avoid;padding:3px 0}.coverage-edge{font-weight:700;color:#c9aa83}.coverage-note{font-size:12px;color:#d7d4cc}.coverage-localities-heading{margin-top:35px}.coverage-details{border:1px solid #77766d;padding:14px 18px}.coverage-details summary{font-size:14px;padding:4px 0}.coverage-details .coverage-location-list{margin-top:15px}.coverage-map-dialog{width:min(1320px,96vw);max-width:96vw;max-height:94vh;overflow:auto;border:1px solid var(--line);padding:18px;background:var(--paper);color:var(--ink)}.coverage-map-dialog::backdrop{background:#000b}.coverage-dialog-bar{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:15px}.coverage-dialog-bar h2{font-size:24px}.coverage-map-dialog>img{display:block;width:100%;height:auto}.coverage-map-dialog>p{font-size:11px;margin:12px 0 0}@media(max-width:700px){.coverage-primary-grid{grid-template-columns:1fr;gap:20px}.coverage-dialog-bar h2{font-size:19px}.coverage-map-dialog{padding:10px}.coverage-location-list{font-size:13px}}

#custom-builds-gallery{background:var(--cream,#f5f2eb)}.build-gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:35px}.build-gallery-grid figure{margin:0;min-width:0}.build-gallery-open{display:flex;align-items:center;justify-content:center;width:100%;padding:0;border:0;background:transparent;cursor:zoom-in;aspect-ratio:4/3}.build-gallery-open img{display:block;width:100%;height:100%;object-fit:contain}.build-gallery-open:focus-visible{outline:3px solid var(--gold,#b89a6b);outline-offset:5px}.build-gallery-grid figcaption{font-size:15px;line-height:1.5;margin-top:12px}.build-gallery-dialog{width:min(1200px,95vw);max-width:95vw;max-height:94vh;padding:20px;background:#f6f3ec;border:1px solid #777}.build-gallery-dialog::backdrop{background:rgba(0,0,0,.8)}.build-gallery-dialog-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:12px}.build-gallery-dialog-bar p{margin:0}.build-gallery-dialog img{display:block;max-width:100%;width:auto;max-height:76vh;height:auto;margin:auto;object-fit:contain}@media(max-width:900px){.build-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.build-gallery-grid{grid-template-columns:1fr;gap:28px}.build-gallery-dialog{padding:12px}.build-gallery-dialog-bar{align-items:flex-start}.build-gallery-dialog-bar p{font-size:14px}}

#our-work-gallery{margin-top:55px;padding-top:35px;border-top:1px solid var(--line)}#our-work-gallery h3{font-size:clamp(28px,3vw,42px);margin-bottom:14px}

/* Phone and tablet refinements. Desktop rules above remain unchanged. */
@media(max-width:1000px){
 .hero-grid,.service-hero-grid,.split,.grid,.form-grid,.roof-video-grid,.outdoor-living-gallery,.fencing-gallery,.fencing-planning,.coverage-primary-grid{min-width:0}
 .hero-grid>*,.service-hero-grid>*,.split>*,.grid>*,.form-grid>*,.coverage-primary-grid>*{min-width:0}
 .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .split,.hero-grid,.service-hero-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
 p,li,figcaption,address,.breadcrumb,.form-help,.eyebrow{overflow-wrap:anywhere}
 .actions>*{max-width:100%;white-space:normal;text-align:center}
 .btn,.menu{min-height:44px}
 #navigation{max-height:calc(100vh - 145px);max-height:calc(100dvh - 145px);overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
 #navigation>a{display:flex;align-items:center;min-height:44px}
 .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .form-field input,.form-field select,.form-field textarea{font-size:16px;max-width:100%;min-height:44px}
 .form-field input[type=file]{overflow:hidden}
 .form-consent{align-items:flex-start;min-height:44px;padding:6px 0}
 .form-consent input{width:20px;height:20px;min-height:20px;margin-top:3px}
 .roof-video-grid,.fencing-planning,.outdoor-living-gallery,.fencing-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
 .roof-video-frame{min-width:0;overflow:hidden}
 .roof-video-frame iframe{display:block;max-width:100%}
 .coverage-map-dialog,.build-gallery-dialog,.consent-dialog{box-sizing:border-box;max-height:94vh;max-height:94dvh;overflow:auto;overscroll-behavior:contain}
 .coverage-dialog-bar,.build-gallery-dialog-bar{min-width:0;align-items:flex-start}
 .coverage-dialog-bar>h2,.build-gallery-dialog-bar>p{min-width:0;overflow-wrap:anywhere}
 .coverage-dialog-bar>button,.build-gallery-dialog-bar>button{flex-shrink:0;min-height:44px}
 .build-gallery-dialog img{max-height:72vh;max-height:72dvh}
 .coverage-details summary{min-height:44px;display:list-item;overflow-wrap:anywhere}
 .footer-row{min-width:0}.footer-row>*{min-width:0;overflow-wrap:anywhere}
}
@media(max-width:900px){
 .hero-grid,.service-hero-grid,.split{grid-template-columns:minmax(0,1fr);gap:30px}
 .hero-copy,.service-hero-copy{padding:50px 0 15px}
 .hero-photo,.service-hero-photo{min-height:0;height:auto;aspect-ratio:4/3}
 .coverage-primary-grid{grid-template-columns:minmax(0,1fr);gap:20px}
 .build-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
 html{scroll-padding-top:135px}
 #navigation{max-height:calc(100vh - 115px);max-height:calc(100dvh - 115px)}
 .form-grid,.roof-video-grid,.fencing-gallery,.fencing-planning,.outdoor-living-gallery,.deck-inspiration{grid-template-columns:minmax(0,1fr)}
 .hero-photo,.service-hero-photo{width:calc(100% + 48px);max-width:none;margin:0 -24px;min-height:0;height:auto;aspect-ratio:4/3}
 .box,.card,.roof-step-copy,.deck-stage-copy,.fencing-inquiry{padding:24px}
 .project-form{padding:24px}
 .coverage-location-list{column-gap:18px}
 .consent-dialog{padding:22px;width:94vw}
 .privacy-actions>*{min-height:44px;flex:1 1 170px;text-align:center}
}
@media(max-width:600px){
 .build-gallery-grid{grid-template-columns:minmax(0,1fr)}
 .build-gallery-dialog-bar{gap:12px}
 .coverage-dialog-bar{gap:12px}
}
@media(max-width:480px){
 .grid{grid-template-columns:minmax(0,1fr)}
 .actions{align-items:stretch}.actions>.btn{flex:1 1 100%}
 #roofing-colors-heading .manufacturer-btn{flex:1 1 calc(50% - 12px);min-width:0;padding:12px 8px;font-size:12px}
 #roofing-colors-heading .manufacturer-logo{max-width:100%;width:126px;height:78px;padding:8px}
 .box,.card,.project-form,.fencing-inquiry{padding:20px}
 .coverage-location-list{columns:1}
 .coverage-details{padding:12px}
 .build-gallery-dialog-bar{flex-wrap:wrap}.build-gallery-dialog-bar>p{flex:1 1 180px}
 .coverage-dialog-bar{flex-wrap:wrap}.coverage-dialog-bar>h2{flex:1 1 180px}
}
@media(max-width:1000px) and (orientation:landscape){
 #navigation{max-height:65vh;max-height:65dvh}
 .build-gallery-dialog img{max-height:60vh;max-height:60dvh}
}
/* Landscape tablets retain the desktop composition with a touch-friendly menu. */
@media(min-width:1001px) and (max-width:1180px) and (hover:none) and (pointer:coarse){
 .menu{display:block;min-height:44px}
 #navigation{display:none;position:absolute;top:100%;left:0;right:0;background:white;border-bottom:1px solid var(--line);padding:20px 24px;align-items:stretch;flex-direction:column;flex-wrap:nowrap;gap:12px;max-height:65vh;max-height:65dvh;overflow:auto;justify-content:flex-start;overscroll-behavior:contain}
 #navigation.open{display:flex}#navigation>a{display:flex;align-items:center;min-height:44px}
 .form-field input,.form-field select,.form-field textarea{font-size:16px;min-height:44px}
}


/* Corrections confirmed by browser viewport checks. */
@media(min-width:1001px) and (max-width:1180px){
 .menu{display:block;min-height:44px}
 #navigation{display:none;position:absolute;top:100%;left:0;right:0;background:white;border-bottom:1px solid var(--line);padding:20px 24px;align-items:stretch;flex-direction:column;flex-wrap:nowrap;gap:12px;max-height:65vh;max-height:65dvh;overflow:auto;justify-content:flex-start;overscroll-behavior:contain}
 #navigation.open{display:flex}#navigation>a{display:flex;align-items:center;min-height:44px}
 .hero-grid,.service-hero-grid,.split{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
 .hero-grid>*,.service-hero-grid>*,.split>*{min-width:0}
 .hero-photo,.service-hero-photo{width:100%;height:auto;min-height:0;aspect-ratio:4/3}
}
@media(max-width:1000px){h1,h2,h3{overflow-wrap:anywhere}}
@media(max-width:480px){.service-hero h1{font-size:clamp(32px,10vw,42px)}}


h1.section-heading{font-size:clamp(34px,4vw,50px);letter-spacing:normal}.privacy-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}.consent-dialog{max-width:min(640px,94vw);background:var(--paper);color:var(--ink);border:1px solid var(--line);padding:30px}.consent-dialog::backdrop{background:#0009}