:root{--char:#1c1e21;--char2:#26292e;--char3:#32363c;--accent:#ff6b1a;--accent-d:#e05a0e;--light:#f4f2ee;--text:#2a2a2a;--muted:#6b6f76;--radius:6px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--text);background:#fff;line-height:1.6}
h1,h2,h3,.brand{font-family:'Oswald',Impact,sans-serif;text-transform:uppercase;letter-spacing:.02em;line-height:1.15}
a{color:inherit}
.container{max-width:1140px;margin:0 auto;padding:0 20px}
.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;padding:14px 26px;border-radius:var(--radius);border:none;cursor:pointer;font-size:1rem;text-transform:uppercase;letter-spacing:.04em;transition:background .2s,transform .2s}
.btn:hover{background:var(--accent-d);transform:translateY(-1px)}
.btn-outline{background:transparent;border:2px solid #fff}
.btn-outline:hover{background:#fff;color:var(--char)}
/* header */
header{position:sticky;top:0;z-index:50;background:var(--char);border-bottom:4px solid var(--accent)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;max-width:1140px;margin:0 auto;gap:16px}
.brand{color:#fff;text-decoration:none;font-size:1.25rem;font-weight:700;line-height:1.1}
.brand span{color:var(--accent);display:block;font-size:.75rem;letter-spacing:.2em}
nav ul{display:flex;gap:22px;list-style:none}
nav a{color:#d5d7da;text-decoration:none;font-size:.9rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
nav a:hover{color:var(--accent)}
.call-btn{padding:10px 18px;font-size:.9rem;white-space:nowrap}
/* hero */
.hero{color:#fff;padding:110px 0 100px;background:
 repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 2px,transparent 2px 14px),
 radial-gradient(ellipse at 80% 20%,rgba(255,107,26,.22),transparent 55%),
 linear-gradient(160deg,#2b2e33 0%,#1a1c1f 60%,#111214 100%);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:repeating-linear-gradient(45deg,var(--accent) 0 18px,var(--char) 18px 36px)}
.eyebrow{color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.18em;font-size:.85rem;margin-bottom:14px}
.hero h1{font-size:clamp(2.4rem,6vw,4.4rem);max-width:820px}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p.lead{font-size:1.15rem;color:#c9ccd0;max-width:620px;margin:20px 0 32px}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap}
.badges{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:44px;color:#c9ccd0;font-size:.95rem}
.badges b{color:#fff;font-family:'Oswald',sans-serif;font-size:1.4rem;display:block}
/* sections */
section{padding:84px 0}
.section-head{margin-bottom:44px;max-width:680px}
.section-head h2{font-size:clamp(1.9rem,4vw,2.7rem);color:var(--char)}
.section-head h2::after{content:"";display:block;width:64px;height:5px;background:var(--accent);margin-top:12px}
.section-head p{color:var(--muted);margin-top:14px}
.dark{background:var(--char);color:#e6e7e9}
.dark .section-head h2{color:#fff}
.dark .section-head p{color:#a9adb3}
.alt{background:var(--light)}
/* services */
.grid{display:grid;gap:22px}
.services{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{background:#fff;border-radius:var(--radius);padding:28px;border-top:5px solid var(--accent);box-shadow:0 6px 22px rgba(0,0,0,.07)}
.card .icon{width:48px;height:48px;border-radius:50%;background:var(--char);color:var(--accent);display:grid;place-items:center;font-size:1.4rem;margin-bottom:14px}
.card h3{font-size:1.3rem;margin-bottom:8px;color:var(--char)}
.card p{color:var(--muted);font-size:.97rem}
.card.secondary{border-top-color:var(--char3)}
/* why */
.why{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.why-item{background:var(--char2);padding:26px;border-radius:var(--radius);border-left:4px solid var(--accent)}
.why-item h3{color:#fff;font-size:1.15rem;margin-bottom:8px}
.why-item p{color:#a9adb3;font-size:.95rem}
/* recent work */
.work{list-style:none;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.work li{display:flex;gap:18px;align-items:center;background:#fff;border:1px solid #e3e1dc;border-radius:var(--radius);padding:18px 20px}
.work .yr{font-family:'Oswald',sans-serif;font-size:1.5rem;color:#fff;background:var(--char);padding:6px 12px;border-radius:4px;min-width:74px;text-align:center}
.work h3{font-size:1.05rem;color:var(--char)}
.work p{color:var(--muted);font-size:.9rem}
.note{font-size:.85rem;color:var(--muted);margin-top:18px}
/* gallery */
.gallery{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.tile{position:relative;aspect-ratio:4/3;background:#cfd1d4 repeating-linear-gradient(45deg,#d6d8db 0 10px,#cdd0d3 10px 20px);border-radius:var(--radius);overflow:hidden;display:grid;place-items:center;color:#5d6168;font-weight:600;text-align:center}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile img[data-missing]{display:none}
.tile span{font-size:.95rem}
.tile small{display:block;font-weight:400;font-size:.78rem}
/* testimonials */
.refs{background:var(--char2);border-radius:var(--radius);padding:36px;display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.refs h3{color:#fff;font-size:1.5rem}
.refs p{color:#a9adb3;max-width:560px}
.draft-note{display:inline-block;margin-top:10px;font-size:.8rem;color:#8a8f96;border:1px dashed #555a61;padding:4px 10px;border-radius:4px}
/* area */
.area-wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.towns{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.towns span{background:var(--char);color:#fff;padding:8px 16px;border-radius:30px;font-weight:600;font-size:.92rem}
.towns span.c{background:var(--accent)}
.area-box{background:var(--char);color:#fff;border-radius:var(--radius);padding:34px;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 2px,transparent 2px 14px)}
.area-box h3{font-size:1.4rem;margin-bottom:10px}
.area-box p{color:#c9ccd0}
/* contact */
.contact-wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:40px}
.phone-big{font-family:'Oswald',sans-serif;font-size:2.3rem;color:var(--accent);text-decoration:none;display:block;margin:8px 0 16px}
.contact-info p{color:#a9adb3;margin-bottom:10px}
form{background:#fff;border-radius:var(--radius);padding:30px;color:var(--text)}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{display:block;font-weight:600;font-size:.85rem;margin:12px 0 6px;color:var(--char)}
input,select,textarea{width:100%;padding:12px;border:1px solid #cfd1d4;border-radius:4px;font:inherit;font-size:.95rem}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);border-color:transparent}
textarea{min-height:110px;resize:vertical}
form .btn{margin-top:18px;width:100%}
.form-note{font-size:.8rem;color:var(--muted);margin-top:10px;text-align:center}
/* footer */
footer{background:#111214;color:#8a8f96;padding:40px 0;font-size:.9rem;border-top:4px solid var(--accent)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px}
footer .brand{font-size:1.1rem}
footer a{color:#d5d7da;text-decoration:none}
/* mobile sticky call */
.mobile-call{display:none}
@media (max-width:860px){
 nav ul{display:none}
 .area-wrap,.contact-wrap{grid-template-columns:1fr}
 form .row{grid-template-columns:1fr}
 section{padding:64px 0}
 .hero{padding:80px 0 76px}
 .mobile-call{display:block;position:fixed;left:12px;right:12px;bottom:12px;z-index:60;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.35)}
 footer{padding-bottom:90px}
}
@media (max-width:420px){.brand{font-size:1.05rem}.call-btn{padding:9px 12px;font-size:.8rem}}
/* ---- photo update ---- */
.hero{background:
 linear-gradient(100deg,rgba(17,18,20,.94) 0%,rgba(17,18,20,.82) 45%,rgba(17,18,20,.45) 100%),
 url("photos/pole_barn_finished.jpg") center 60%/cover no-repeat,#1a1c1f}
.ph{margin:0;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:0 6px 22px rgba(0,0,0,.08)}
.ph a{display:block;overflow:hidden;aspect-ratio:4/3;background:#ddd}
.ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.ph a:hover img{transform:scale(1.04)}
.ph figcaption{padding:12px 14px;font-weight:600;font-size:.92rem;color:var(--char)}
.gallery{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.gallery .feature{grid-column:span 2}
.gallery .feature a{aspect-ratio:16/9}
.gallery .feature + .ph{grid-row:span 1}
.steps{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.dark .ph{background:var(--char2)}
.dark .ph figcaption{color:#fff;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.04em}
.steps .last{grid-column:span 2;border:3px solid var(--accent)}
.steps .last a{aspect-ratio:16/9}
.reno{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.behind-wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center}
.walls{grid-template-columns:1fr 1fr}
.walls .ph a{aspect-ratio:3/4}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(10,10,12,.93);display:flex;align-items:center;justify-content:center;flex-direction:column;padding:20px}
.lightbox[hidden]{display:none}
.lightbox img{max-width:92vw;max-height:80vh;border-radius:4px}
.lb-cap{color:#ddd;margin-top:12px;text-align:center}
.lightbox button{position:absolute;background:none;border:none;color:#fff;font-size:3rem;cursor:pointer;line-height:1;padding:10px}
.lb-close{top:10px;right:16px}.lb-prev{left:10px;top:50%;transform:translateY(-50%)}.lb-next{right:10px;top:50%;transform:translateY(-50%)}
@media (max-width:860px){
 .behind-wrap{grid-template-columns:1fr}
 .hero{background:linear-gradient(180deg,rgba(17,18,20,.78),rgba(17,18,20,.9)),url("photos/pole_barn_finished.jpg") center/cover no-repeat,#1a1c1f}
}
@media (max-width:600px){.gallery .feature,.steps .last{grid-column:auto}}
/* layout fixes */
nav ul{gap:16px}
nav a{white-space:nowrap;font-size:.8rem}
@media (max-width:1180px){nav ul{display:none}}
.gallery,.steps{grid-template-columns:repeat(3,1fr)}
.gallery .feature,.steps .last{grid-column:1/-1}
.gallery .feature a,.steps .last a{aspect-ratio:21/9}
.reno{grid-template-columns:repeat(4,1fr)}
.reno .ph a{aspect-ratio:3/4}
@media (max-width:860px){.gallery,.steps,.reno{grid-template-columns:1fr 1fr}.gallery .feature a,.steps .last a{aspect-ratio:16/9}}
@media (max-width:560px){.gallery,.steps,.reno{grid-template-columns:1fr}.reno .ph a{aspect-ratio:4/3}}

/* v2: decks section and extra job site photos */
.decks{grid-template-columns:repeat(6,1fr)}
.decks .ph{grid-column:span 2}
.decks .feature{grid-column:1/-1}
.decks .feature a{aspect-ratio:21/9}
.decks .wide{grid-column:span 3}
.decks .wide img{object-position:center 45%}
.sub-head{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.04em;color:#fff;margin:48px 0 18px;font-size:1.4rem}
.steps.more{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.decks{grid-template-columns:1fr 1fr}.decks .ph,.decks .wide{grid-column:auto}.decks .feature{grid-column:1/-1}.decks .feature a{aspect-ratio:16/9}.steps.more{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.decks,.steps.more{grid-template-columns:1fr}.decks .feature a{aspect-ratio:4/3}}

/* ---- v3: roofing focus ---- */
.hero{background:
 linear-gradient(100deg,rgba(17,18,20,.93) 0%,rgba(17,18,20,.80) 50%,rgba(17,18,20,.40) 100%),
 url("photos/stock_roofer_slate_shingles.jpg") center 55%/cover no-repeat,#1a1c1f}
.btn-lg{font-size:1.15rem;padding:16px 32px}
.hero .actions{align-items:center}
.example-tag{position:absolute;right:10px;bottom:10px;background:rgba(17,18,20,.78);color:#fff;font:600 .72rem/1 'Inter',sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-radius:30px;z-index:2}
.hero-tag{right:16px;bottom:24px}
.roof-cards{grid-template-columns:repeat(2,1fr);gap:26px}
.rcard{background:#fff;border-radius:var(--radius);overflow:hidden;border-top:5px solid var(--accent);box-shadow:0 8px 26px rgba(0,0,0,.09)}
.rimg{position:relative;aspect-ratio:3/2;overflow:hidden;background:#ddd}
.rimg img{width:100%;height:100%;object-fit:cover;display:block}
.rbody{padding:24px 26px 28px}
.rbody h3{font-size:1.6rem;color:var(--char);margin-bottom:8px}
.rbody p{color:var(--muted)}
.roof-mini{grid-template-columns:repeat(2,1fr);margin-top:26px}
.banner{position:relative;color:#fff;text-align:center;padding:110px 0;background:
 linear-gradient(rgba(17,18,20,.72),rgba(17,18,20,.80)),
 url("photos/stock_aerial_roofs.jpg") center/cover no-repeat,#1a1c1f}
.banner h2{font-size:clamp(2rem,5vw,3.2rem);max-width:760px;margin:0 auto 14px}
.banner p{color:#d5d7da;max-width:560px;margin:0 auto 28px}
.banner-tag{right:16px;bottom:16px}
.roofgal{grid-template-columns:repeat(3,1fr)}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.chips li{background:var(--char2);border:1px solid var(--char3);color:#e6e7e9;padding:9px 16px;border-radius:30px;font-weight:600;font-size:.92rem}
.also-gal{grid-template-columns:repeat(4,1fr);gap:16px}
.also-gal .ph figcaption{font-size:.8rem;padding:9px 11px;font-family:'Inter',sans-serif;text-transform:none;letter-spacing:0;font-weight:600}
.also-gal .ph a{aspect-ratio:4/3}
.dark .also-gal .ph{background:var(--char2)}
footer .fine{margin-top:26px;padding-top:18px;border-top:1px solid #26292e;font-size:.82rem;color:#8a8f96}
@media (max-width:1000px){.also-gal{grid-template-columns:repeat(3,1fr)}}
@media (max-width:860px){
 .roof-cards,.roof-mini{grid-template-columns:1fr}
 .roofgal{grid-template-columns:1fr 1fr}
 .also-gal{grid-template-columns:1fr 1fr}
 .hero{background:linear-gradient(180deg,rgba(17,18,20,.80),rgba(17,18,20,.92)),url("photos/stock_roofer_slate_shingles.jpg") center/cover no-repeat,#1a1c1f}
 .banner{padding:80px 0}
}
@media (max-width:560px){.roofgal{grid-template-columns:1fr}.roofgal .feature a{aspect-ratio:4/3}.also-gal{grid-template-columns:1fr 1fr;gap:12px}}
#jobs .work{grid-template-columns:repeat(2,1fr)}
@media (max-width:700px){#jobs .work{grid-template-columns:1fr}}

/* estimate form and thanks page */
.hp{position:absolute;left:-9999px;height:1px;width:1px;overflow:hidden}
fieldset.pref{border:0;padding:0;margin:16px 0 0}
fieldset.pref legend{font-weight:600;font-size:.85rem;margin:0 0 8px;color:var(--char)}
.pref-opts{display:flex;flex-wrap:wrap;gap:10px 18px}
.pref-opts label{display:inline-flex;align-items:center;gap:8px;margin:0;font-weight:600;cursor:pointer}
.pref-opts input{width:auto;accent-color:var(--accent)}
.or-call{margin-top:16px;font-size:.95rem}
.hero .or-call{color:#c9ccd0}
.hero .or-call a,.banner .or-call a,.thanks .or-call a,.area-box .or-call a{color:var(--accent);font-weight:700;text-decoration:none}
.banner .or-call{margin:18px auto 0;color:#d5d7da}
.form-note a{color:var(--accent);text-decoration:none;font-weight:700}
.thanks{padding:100px 0 120px;background:var(--light);min-height:60vh}
.thanks h1{font-size:clamp(2rem,5vw,3.2rem);color:var(--char);max-width:16ch}
.thanks h1::after{content:"";display:block;width:64px;height:5px;background:var(--accent);margin-top:16px}
.thanks p{color:var(--muted);margin:18px 0;max-width:540px;font-size:1.1rem}
.thanks .btn{margin-top:8px}

.section-head p a,.card p a,.rbody p a{color:var(--accent);font-weight:700;text-decoration:none}

/* general contracting sections under the roofing lead */
#build .note{color:#a9adb3}
.steps.more{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}
@media (max-width:560px){.steps.more{grid-template-columns:1fr}}

.videofeat{margin:0 0 22px}.videofeat video{display:block;width:100%;aspect-ratio:1280/632;background:#000;object-fit:contain}