/* ================================================================
   NORTHCRAFT EXTERIORS — Evolved Brand Design System (working v1)
   Palette anchored to the existing logo (navy + red), deepened.
   Type: Oswald (headlines) + Inter (body).
   NOTE: photography + manufacturer logos are placeholders (access-day items).
   ================================================================ */

:root{
  --navy:#23201d;        /* deep navy — depth / dark sections */
  --blue:#8B6F47;        /* brand blue — logo tie / links */
  --red:#6E2329;         /* signature red — CTAs / accents */
  --red-dark:#571b20;
  --bone:#FBF7F0;        /* warm off-white — surfaces */
  --bone-line:#e6dccb;
  --ink:#241f1b;         /* body text */
  --slate:#6f6355;       /* secondary text */
  --white:#ffffff;
  --shadow:0 6px 24px rgba(35,32,29,.10);
  --radius:12px;
  --maxw:1180px;
  --font-head:"Oswald","Helvetica Neue",Arial,sans-serif;
  --font-body:"Inter","Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--ink);background:var(--white);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--navy);line-height:1.08;letter-spacing:-.01em;font-weight:800}
h1{font-size:clamp(2.1rem,4.6vw,3.5rem)}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem)}
h3{font-size:1.25rem}
p{margin-bottom:1rem}
.eyebrow{font-family:var(--font-head);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--red);font-weight:700}
.lead{font-size:1.13rem;color:#33404f}
.muted{color:var(--slate)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-head);font-weight:700;font-size:1rem;padding:.9rem 1.5rem;border-radius:8px;border:2px solid transparent;cursor:pointer;transition:.15s;white-space:nowrap}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-dark)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:#0c1d30}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-ghost:hover{background:var(--navy);color:#fff}
.btn-white{background:#fff;color:var(--navy)}
.btn-bronze{background:var(--blue);color:#fff}
.btn-bronze:hover{background:#75593a}
.btn-lg{padding:1.05rem 1.9rem;font-size:1.08rem}

/* ---------- promo bar ---------- */
.promo{background:var(--navy);color:#fff;text-align:center;font-size:.95rem;padding:.6rem 24px;font-weight:500}
.promo b{color:#fff}
.promo .hl{color:#ffd36b}
.promo .pipe{opacity:.4;margin:0 .6rem}
/* Central control: edit these two strings in one place */

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid #eee}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.7rem 0}
.brand{display:flex;align-items:center;line-height:0}
.brand-logo{height:76px;width:auto;display:block}
@media(max-width:560px){.brand-logo{height:54px}}
/* legacy text mark (kept for fallback) */
.brand .name{font-family:var(--font-head);font-weight:800;font-size:1.5rem;color:var(--navy);letter-spacing:-.02em}
.brand .name span{color:var(--red)}
.brand .desc{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);margin-top:3px;font-weight:600}
.navlinks{display:flex;align-items:center;gap:1.4rem;font-weight:600;font-size:.97rem}
.navlinks a:hover{color:var(--red)}
.navlinks a.active{color:var(--red)}
.nav-cta{display:flex;align-items:center;gap:1rem}
.nav-phone{font-family:var(--font-head);font-weight:800;color:var(--blue);font-size:1.05rem;white-space:nowrap}
@media(max-width:900px){.navlinks{display:none}}

/* ---------- hero + estimator ---------- */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.hero .photo{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,17,14,.90) 0%,rgba(20,17,14,.62) 32%,rgba(20,17,14,.16) 58%,rgba(20,17,14,0) 82%),url('../img/generated/hf_20260817_181156_80523c20-f329-4a96-abb9-a877b34d1cbf.webp') center/cover no-repeat,#22405f;display:flex;align-items:center;justify-content:center}
.hero .photo .ph{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.25)}
.hero .inner{position:relative;padding:5rem 0 5.5rem;max-width:760px}
.hero h1{color:#fff}
.hero p{color:#dce6f2;font-size:1.2rem;max-width:620px;margin:1.2rem 0 0}
.estimator{margin-top:2rem;background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:1.2rem;max-width:640px}
.estimator .tag{font-family:var(--font-head);font-weight:800;color:var(--navy);font-size:1.05rem;margin-bottom:.7rem;display:flex;align-items:center;gap:.5rem}
.estimator .tag .badge{background:var(--bone);color:var(--red);font-size:.68rem;padding:3px 8px;border-radius:20px;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.estform{display:flex;gap:.6rem}
.estform input{flex:1;border:1.5px solid #d8dee6;border-radius:8px;padding:.9rem 1rem;font-size:1rem;font-family:var(--font-body);color:var(--ink)}
.estform input:focus{outline:none;border-color:var(--blue)}
.estnote{font-size:.82rem;color:var(--slate);margin-top:.6rem}
@media(max-width:560px){.estform{flex-direction:column}}

/* ---------- generic section ---------- */
section{padding:4.5rem 0}
.section-head{max-width:680px;margin-bottom:2.2rem}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.bg-bone{background:var(--bone)}
.bg-navy{background:var(--navy);color:#fff}
.bg-navy h2,.bg-navy h3{color:#fff}
.bg-navy p{color:#cdd8e6}

/* ---------- service fork (photo cards) ---------- */
.fork{display:grid;grid-template-columns:repeat(6,1fr);gap:.8rem}
.fork a{background:#fff;border:1px solid var(--bone-line);border-radius:var(--radius);overflow:hidden;text-align:center;transition:.15s;display:flex;flex-direction:column}
.fork a:hover{border-color:var(--blue);box-shadow:var(--shadow);transform:translateY(-2px)}
.fork .fimg{display:block;width:100%;height:118px;background-size:cover;background-position:center;background-color:var(--bone);background-repeat:no-repeat}
.fork .t{font-weight:700;font-size:.95rem;color:var(--navy);padding:.8rem .6rem}
.fork .ic{width:44px;height:44px;margin:0 auto .7rem;border-radius:10px;background:var(--bone);display:flex;align-items:center;justify-content:center;color:var(--blue);font-weight:800;font-family:var(--font-head)}
@media(max-width:900px){.fork{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.fork{grid-template-columns:repeat(2,1fr)}.fork .fimg{height:100px}}

/* ---------- brands we install ---------- */
.brands-sec{padding:3.2rem 0}
.brandband{background:#fff;border-bottom:1px solid var(--bone-line);padding:2rem 0}
.brandband .eyebrow{display:block;text-align:center;margin-bottom:1.1rem}
.brandstrip{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
.blogo{background:#fff;border:1px solid var(--bone-line);border-radius:12px;padding:.9rem 1.1rem;display:flex;align-items:center;justify-content:center;width:190px;height:108px;box-shadow:0 2px 8px rgba(35,32,29,.05)}
.blogo img{max-height:78px;max-width:158px;width:auto;height:auto;object-fit:contain}
.blogo .bph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--navy);font-family:var(--font-head);font-weight:800;font-size:1.15rem;border:1px dashed #c4bcac;border-radius:8px;background:var(--bone)}
a.blogo{transition:.15s}
a.blogo:hover{border-color:var(--blue);box-shadow:var(--shadow);transform:translateY(-2px)}

/* ---------- our work gallery ---------- */
.workchips{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-bottom:1.8rem}
.workchips button{font-family:var(--font-head);font-weight:700;font-size:.85rem;padding:.5rem 1.1rem;border-radius:30px;border:1.5px solid var(--bone-line);background:#fff;color:var(--navy);cursor:pointer;transition:.15s}
.workchips button:hover{border-color:var(--blue)}
.workchips button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.workgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.wcard{background:#fff;border:1px solid var(--bone-line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.wc-media{position:relative;width:100%;aspect-ratio:4/3;background:var(--bone);overflow:hidden}
.wc-media>img{width:100%;height:100%;object-fit:cover;display:block}
.wc-body{padding:.85rem 1.05rem;display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.wc-title{font-family:var(--font-head);font-weight:700;color:var(--navy);font-size:.96rem;line-height:1.15}
.wc-tag{font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;color:var(--red);font-weight:700;white-space:nowrap}
@media(max-width:900px){.workgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.workgrid{grid-template-columns:1fr}}

/* before/after slider */
.ba{position:absolute;inset:0;overflow:hidden}
.ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ba-before{clip-path:inset(0 50% 0 0)}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;transform:translateX(-50%);pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.ba-handle:after{content:"";position:absolute;top:50%;left:50%;width:34px;height:34px;transform:translate(-50%,-50%);background:#fff;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.ba-handle:before{content:"";position:absolute;top:50%;left:50%;width:16px;height:16px;transform:translate(-50%,-50%) rotate(45deg);border-left:2px solid var(--navy);border-bottom:2px solid var(--navy);opacity:.55}
.ba-badge{position:absolute;bottom:10px;font-family:var(--font-head);font-weight:700;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(35,32,29,.72);padding:3px 8px;border-radius:4px;pointer-events:none}
.ba-badge.l{left:10px}
.ba-badge.r{right:10px}

/* ---------- product style grid ---------- */
.stylegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.stylecard{border:1px solid var(--bone-line);border-radius:var(--radius);overflow:hidden;background:#fff;transition:.15s}
.stylecard:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.stylecard .simg{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--bone)}
.stylecard .slabel{padding:.7rem .9rem;font-family:var(--font-head);font-weight:700;color:var(--navy);font-size:.92rem;text-align:center}
.stylegrid.wide .simg{aspect-ratio:4/3}
@media(max-width:820px){.stylegrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.stylegrid{grid-template-columns:1fr}}
.stylegrid.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.stylegrid.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.stylegrid.g4{grid-template-columns:1fr}}

/* ---------- malarkey credential band ---------- */
.credrow{display:flex;align-items:center;gap:1.8rem;flex-wrap:wrap;justify-content:center}
.credlogo{height:92px;width:auto;display:block}
.credbadge{height:118px;width:auto;display:block}
.credrow .credtext{flex:1 1 300px;max-width:540px}
.credrow .credtext p{margin:.45rem 0 0;color:#3a4454}
@media(max-width:680px){.credrow{flex-direction:column;text-align:center}}

/* ---------- warranty grid ---------- */
.warranty-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.wcell{background:#fff;border:1px solid var(--bone-line);border-radius:var(--radius);padding:1.4rem 1.3rem;text-align:center}
.wcell .wnum{font-family:var(--font-head);font-weight:800;color:var(--red);font-size:1.9rem;line-height:1}
.wcell .wlabel{font-family:var(--font-head);font-weight:700;color:var(--navy);font-size:.95rem;margin:.4rem 0 .5rem}
.wcell p{font-size:.87rem;color:#3a4454;margin:0}
@media(max-width:820px){.warranty-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.warranty-grid{grid-template-columns:1fr}}

/* ---------- gallery lightbox ---------- */
.wc-zoom{position:absolute;top:8px;right:8px;z-index:5;width:34px;height:34px;padding:0;border:none;border-radius:8px;background:rgba(35,32,29,.66);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
.wc-zoom:hover{background:var(--navy)}
.wc-media>img{cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:200;background:rgba(8,15,25,.93);display:flex;align-items:center;justify-content:center;padding:4vh 4vw}
.lb[hidden]{display:none}
.lb-inner{max-width:1100px;width:100%;display:flex;align-items:center;justify-content:center}
.lb-inner>img{max-width:100%;max-height:92vh;object-fit:contain;border-radius:8px;display:block}
.lb-ba-wrap{position:relative;width:min(1100px,92vw);aspect-ratio:3/2;max-height:88vh}
.lb-close{position:fixed;top:14px;right:18px;z-index:210;width:44px;height:44px;border:none;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:1.7rem;line-height:1;cursor:pointer}
.lb-close:hover{background:rgba(255,255,255,.3)}

/* ---------- coverage map ---------- */
#coverage-map{height:440px;border-radius:var(--radius);border:1px solid var(--bone-line);z-index:1}
.leaflet-container{font-family:var(--font-body)}
.leaflet-popup-content{font-size:.9rem}
.leaflet-popup-content b{font-family:var(--font-head);color:var(--navy)}
@media(max-width:560px){#coverage-map{height:360px}}

/* ---------- blog / post grid ---------- */
.postgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.postcard{background:#fff;border:1px solid var(--bone-line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:.15s}
.postcard:hover{border-color:var(--blue);box-shadow:var(--shadow);transform:translateY(-2px)}
.postcard .pcimg{display:block;height:170px;background:var(--bone) center/cover no-repeat}
.postcard .pcbody{padding:1.3rem 1.4rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.postcard .pctag{font-family:var(--font-head);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--red);font-weight:700}
.postcard h3{font-size:1.12rem;color:var(--navy);line-height:1.2}
.postcard p{font-size:.92rem;color:#3a4454;margin:0}
.postcard .pcmore{margin-top:auto;padding-top:.4rem;font-family:var(--font-head);font-weight:700;color:var(--blue);font-size:.9rem}
@media(max-width:900px){.postgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.postgrid{grid-template-columns:1fr}}
@media(max-width:520px){.blogo{width:calc(50% - .5rem);height:92px}}

/* ---------- windows band (elevated) ---------- */
.wband{background:linear-gradient(135deg,#0F2340,#16233A);color:#fff;border-radius:18px;overflow:hidden;display:grid;grid-template-columns:1.1fr 1fr;box-shadow:var(--shadow)}
.wband .copy{padding:3rem 3rem 3rem}
.wband .eyebrow{color:#C9A36A}
.wband h2{color:#fff}
.wband p{color:#d7e2f1}
.wband .photo{background:#20344f;min-height:360px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.22);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
@media(max-width:820px){.wband{grid-template-columns:1fr}.wband .photo{min-height:220px}}

/* ---------- pricing / tiers ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.tier{background:#fff;border:1px solid var(--bone-line);border-radius:var(--radius);padding:1.6rem 1.4rem;position:relative}
.tier.mid{border-color:var(--blue);box-shadow:var(--shadow)}
.tier.mid:before{content:"Most Popular";position:absolute;top:10px;left:1.4rem;background:var(--blue);color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:20px}
.tier .name{font-family:var(--font-head);font-weight:800;color:var(--navy);font-size:1.3rem}
.tier .price{font-family:var(--font-head);font-weight:800;color:var(--red);font-size:1.5rem;margin:.4rem 0}
.tier .price small{font-size:.8rem;color:var(--slate);font-weight:500}
.tier ul{list-style:none;margin-top:.9rem}
.tier li{padding:.35rem 0 .35rem 1.4rem;position:relative;font-size:.95rem;border-top:1px solid #f0ece3}
.tier li:before{content:"✓";position:absolute;left:0;color:var(--blue);font-weight:800}
.tier{overflow:hidden}
.tier-img{display:block;width:calc(100% + 2.8rem);height:158px;object-fit:cover;margin:-1.6rem -1.4rem 1.2rem}
.pnote{font-size:.85rem;color:var(--slate);margin-top:1rem;text-align:center}

/* ---------- proof / reviews ---------- */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;text-align:center}
.stat .n{font-family:var(--font-head);font-weight:800;color:var(--navy);font-size:2.1rem}
.stat .l{font-size:.85rem;color:var(--slate)}
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
.review{background:#fff;border:1px solid var(--bone-line);border-radius:var(--radius);padding:1.4rem}
.review .stars{color:#f2b01e;font-size:1rem;letter-spacing:2px}
.review p{font-size:.96rem;margin:.6rem 0 .7rem}
.review .who{font-weight:700;font-size:.9rem;color:var(--navy)}

/* ---------- trust strip ---------- */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.trust .item{display:flex;gap:.8rem;align-items:flex-start}
.trust .k{font-family:var(--font-head);font-weight:800;color:var(--red);font-size:1.1rem;flex:0 0 auto}
.trust .v{font-size:.95rem}
.trust .v b{color:var(--navy)}
.badgestrip{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:center;margin-top:1.5rem}
.badgestrip .ph{border:1px dashed #c9c2b4;border-radius:8px;padding:.7rem 1.2rem;font-size:.78rem;color:var(--slate)}
.badgestrip a.ph{cursor:pointer;transition:border-color .15s ease,color .15s ease,box-shadow .15s ease}
.badgestrip a.ph:hover{border-color:var(--blue)!important;color:var(--blue)!important;box-shadow:0 2px 10px rgba(35,32,29,.1)}

/* ---------- about / owner ---------- */
.about{display:grid;grid-template-columns:1fr 1.2fr;gap:2.5rem;align-items:center}
.about .photo{background:var(--bone);border:1px solid var(--bone-line);border-radius:var(--radius);min-height:320px;display:flex;align-items:center;justify-content:center;color:var(--slate);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
@media(max-width:820px){.about{grid-template-columns:1fr}}

/* ---------- owners ---------- */
.owners{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;max-width:640px;margin:0 auto}
.owner{margin:0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:14px;overflow:hidden}
.owner .ophoto{display:block;width:100%;height:300px;background-size:cover;background-position:center;background-repeat:no-repeat}
.owner figcaption{padding:.85rem 1rem;text-align:center}
.owner figcaption b{display:block;font-family:var(--font-head);color:#fff;font-size:1.05rem;letter-spacing:-.01em}
.owner figcaption span{color:#C9A36A;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
@media(max-width:560px){.owner .ophoto{height:260px}}

/* ---------- owner bios (about page) ---------- */
.bios{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.bio{margin:0;background:#fff;border:1px solid var(--bone-line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.bio .biophoto{display:block;width:100%;height:320px;background-size:cover;background-position:center}
.bio figcaption{padding:1.4rem 1.5rem}
.bio figcaption b{font-family:var(--font-head);color:var(--navy);font-size:1.25rem;display:block}
.bio .biorole{color:var(--red);font-family:var(--font-head);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;display:block;margin:.15rem 0 .7rem}
.bio figcaption p{margin:0;color:#3a4454}
@media(max-width:700px){.bios{grid-template-columns:1fr}}

/* ---------- community ---------- */
.community-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
.ccard{background:#fff;border:1px solid var(--bone-line);border-radius:var(--radius);padding:1.5rem}
.ccard h3{color:var(--navy);font-size:1.05rem;margin-bottom:.4rem}
.ccard p{font-size:.92rem;color:#3a4454;margin:0}
@media(max-width:820px){.community-grid{grid-template-columns:1fr}}

/* ---------- financing / cta band ---------- */
.band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;background:var(--red);color:#fff;border-radius:16px;padding:2.3rem 2.6rem}
.band h2{color:#fff}
.band p{color:#ffe4e6;margin:.4rem 0 0}

/* ---------- footer ---------- */
footer.site{background:var(--navy);color:#c7d2e0;padding:3.5rem 0 2rem;font-size:.92rem}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2rem}
footer.site h4{color:#fff;font-size:.95rem;margin-bottom:.9rem;letter-spacing:.04em;text-transform:uppercase}
footer.site a{color:#c7d2e0}
footer.site a:hover{color:#fff}
footer.site .flogo-wrap{display:inline-block;background:#fff;padding:.6rem .85rem;border-radius:10px;line-height:0;box-shadow:0 3px 12px rgba(0,0,0,.18)}
footer.site .flogo{height:58px;width:auto;display:block}
footer.site .fbrand .name{font-family:var(--font-head);font-weight:800;font-size:1.4rem;color:#fff}
footer.site .fbrand .name span{color:var(--red)}
footer.site ul{list-style:none}
footer.site li{margin-bottom:.4rem}
footer.site .legal{border-top:1px solid rgba(255,255,255,.12);margin-top:2.5rem;padding-top:1.3rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;color:#8fa0b6;font-size:.82rem}
@media(max-width:820px){footer.site .cols{grid-template-columns:1fr 1fr}}
@media(max-width:520px){footer.site .cols{grid-template-columns:1fr}}

/* ---------- trade page header ---------- */
.tradehero{background:var(--navy);color:#fff;padding:3.5rem 0}
.tradehero .eyebrow{color:#C9A36A}
.tradehero h1{color:#fff;max-width:760px}
.tradehero p{color:#d7e2f1;max-width:640px;font-size:1.13rem;margin-top:1rem}
.crumbs{font-size:.82rem;color:#9fb2cc;margin-bottom:1rem}
.crumbs a:hover{color:#fff}

/* two-col content */
.split{display:grid;grid-template-columns:1.3fr 1fr;gap:2.5rem;align-items:start}
@media(max-width:820px){.split{grid-template-columns:1fr}}
.card{background:var(--bone);border:1px solid var(--bone-line);border-radius:var(--radius);padding:1.6rem}

/* fast-quote box (non-roofing trades) */
.quotebox{background:#fff;border:1px solid var(--bone-line);border-radius:14px;box-shadow:var(--shadow);padding:1.6rem}
.quotebox h3{color:var(--navy)}
.quotebox .f{display:flex;flex-direction:column;gap:.7rem;margin-top:1rem}
.quotebox input,.quotebox select{border:1.5px solid #d8dee6;border-radius:8px;padding:.85rem 1rem;font-size:1rem;font-family:var(--font-body)}
.quotebox input:focus,.quotebox select:focus{outline:none;border-color:var(--blue)}

.faq{margin-top:1rem}
.faq details{border-bottom:1px solid var(--bone-line);padding:.9rem 0}
.faq summary{font-family:var(--font-head);font-weight:700;color:var(--navy);cursor:pointer;font-size:1.02rem}
.faq p{margin:.6rem 0 0;color:#3a4454}
.specdetails>summary{display:flex;align-items:center;gap:.7rem;font-size:1.35rem;line-height:1.25}
.specdetails>summary .spec-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;background:var(--red);color:#fff}
.specdetails>summary .spec-ic svg{width:24px;height:24px}
@media(max-width:640px){.specdetails>summary{font-size:1.12rem}.specdetails>summary .spec-ic{width:38px;height:38px}}

/* dev note flag (only for us, subtle) */
.devnote{display:none} /* internal build notes, hidden from visitors; kept in source for the controller */


/* ================= ACCESSIBILITY LAYER (added in hardening pass) ================= */
.skip-link{position:absolute;left:-999px;top:0;z-index:9999;background:var(--navy);color:#fff;
  padding:.7rem 1.1rem;border-radius:0 0 8px 0;font-weight:700;font-family:var(--font-body)}
.skip-link:focus{left:0}
#main:focus{outline:none}
/* Visible keyboard focus everywhere (mouse users don't see it) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid #C9A36A;outline-offset:2px;border-radius:4px}
/* Respect users who ask for less motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ================= BLOG ARTICLE (post pages) ================= */
.wc-article{max-width:760px;margin:0 auto}
.wc-byline{display:flex;align-items:center;gap:.75rem;margin-top:1rem}
.wc-byline img{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:center 20%;flex:none;border:2px solid rgba(255,255,255,.35)}
.wc-byline .bl-name{font-weight:700;color:#fff;font-family:var(--font-body)}
.wc-byline .bl-meta{font-size:.86rem;color:#9fb6d4}
.wc-post p{font-size:1.06rem;line-height:1.72;margin-bottom:1.15rem;color:#26313f}
.wc-post h2{margin:2.1rem 0 .8rem;font-size:clamp(1.35rem,2.6vw,1.85rem)}
.wc-post ol{margin:1rem 0 1.4rem;padding-left:1.3rem}
.wc-post ol li{margin-bottom:.5rem}
.wc-post a{color:var(--blue);font-weight:600}
.wc-callout{background:var(--bone);border:1px solid var(--bone-line);border-left:4px solid var(--red);border-radius:10px;padding:1.1rem 1.3rem;margin:1.6rem 0}
.wc-callout p{margin:0;font-size:1.02rem}
.wc-authorcard{display:flex;gap:1rem;align-items:center;background:var(--bone);border:1px solid var(--bone-line);border-radius:var(--radius);padding:1.1rem 1.3rem;margin-top:2.2rem}
.wc-authorcard img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:center 20%;flex:none}
.wc-authorcard b{color:var(--navy)}
.wc-authorcard p{margin:.25rem 0 0;font-size:.94rem;color:var(--slate)}

/* ================= PERSISTENT INSTANT-PRICE TAB (Roofle-style side tab) ================= */
.price-tab{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:900;writing-mode:vertical-rl;
  background:var(--red);color:#fff;font-family:var(--font-head);font-weight:800;font-size:.92rem;letter-spacing:.03em;
  padding:1.1rem .5rem;border-radius:10px 0 0 10px;box-shadow:-3px 3px 14px rgba(35,32,29,.28);
  text-decoration:none;transition:background .15s,padding-right .15s}
.price-tab:hover,.price-tab:focus-visible{background:var(--red-dark);padding-right:.8rem}
@media(max-width:560px){.price-tab{font-size:.8rem;padding:.9rem .45rem}}
@media print{.price-tab{display:none}}


/* ================= STICKY BOOK-A-CONSULT BUTTON (primary CTA, always 1 click) ================= */
.book-fab{position:fixed;left:20px;bottom:20px;z-index:901;display:inline-flex;align-items:center;gap:.6rem;
  background:var(--red);color:#fff;font-family:var(--font-head);font-weight:800;font-size:1.18rem;letter-spacing:.01em;
  padding:1.1rem 1.8rem;border-radius:44px;box-shadow:0 8px 24px rgba(35,32,29,.38);
  text-decoration:none;transition:background .15s,transform .15s}
.book-fab:hover,.book-fab:focus-visible{background:var(--red-dark);transform:translateY(-2px)}
@media(max-width:560px){.book-fab{left:12px;bottom:12px;font-size:1rem;padding:.9rem 1.35rem}}
@media print{.book-fab{display:none}}

/* ================= HOMEPAGE UPGRADES (WeatherPro-modeled, Northcraft voice) ================= */
/* curved section dividers */
.wave{line-height:0;display:block;margin-bottom:-1px}
.wave svg{display:block;width:100%;height:clamp(30px,4vw,58px)}
/* Why Northcraft 3-icon cards */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.whycard{background:#fff;border:1px solid var(--bone-line);border-radius:var(--radius);padding:1.9rem 1.5rem;text-align:center;box-shadow:var(--shadow)}
.whycard .wic{width:58px;height:58px;margin:0 auto 1rem;border-radius:15px;background:var(--bone);display:flex;align-items:center;justify-content:center;color:var(--red)}
.whycard h3{color:var(--navy);margin-bottom:.45rem}
.whycard p{color:var(--slate);font-size:.96rem;margin:0}
@media(max-width:820px){.why{grid-template-columns:1fr;gap:1.1rem}}
/* 4-step process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-top:1.4rem}
.step{position:relative;background:#fff;border:1px solid var(--bone-line);border-radius:var(--radius);padding:2.6rem 1.4rem 1.6rem;box-shadow:var(--shadow)}
.step .num{position:absolute;top:-20px;left:1.4rem;width:46px;height:46px;border-radius:50%;background:var(--red);color:#fff;font-family:var(--font-head);font-weight:800;font-size:1.3rem;display:flex;align-items:center;justify-content:center;box-shadow:0 5px 14px rgba(176,39,48,.38)}
.step h3{color:var(--navy);font-size:1.08rem;margin-bottom:.4rem}
.step p{color:var(--slate);font-size:.95rem;margin:0}
@media(max-width:820px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}

/* subpage hero: curved bottom to match homepage dividers */
.tradehero{position:relative}
.tradehero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:clamp(26px,3.2vw,48px);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C400,6 1040,6 1440,60 L1440,60 L0,60 Z' fill='%23ffffff'/%3E%3C/svg%3E") center bottom/100% 100% no-repeat;pointer-events:none}
.tradehero.th-bone::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C400,6 1040,6 1440,60 L1440,60 L0,60 Z' fill='%23F5F1EA'/%3E%3C/svg%3E")}

/* opt-in window performance spec panel */
.specgrid{margin-top:.5rem;border-top:1px solid var(--bone-line)}
.specrow{display:grid;grid-template-columns:180px 130px 1fr;gap:.9rem;align-items:baseline;padding:.75rem 0;border-bottom:1px solid var(--bone-line)}
.specrow .speck{font-family:var(--font-head);font-weight:700;color:var(--navy)}
.specrow .specv{font-family:var(--font-head);font-weight:800;color:var(--red)}
.specrow .specd{color:var(--slate);font-size:.92rem}
@media(max-width:640px){.specrow{grid-template-columns:1fr auto}.specrow .specd{grid-column:1/-1;margin-top:.2rem}}
.speccard{display:flex;align-items:center;gap:1.25rem;margin-top:1.5rem;padding:1.25rem 1.4rem;background:var(--bone);border:1px solid var(--bone-line);border-left:5px solid var(--red);border-radius:14px;text-decoration:none;box-shadow:0 2px 14px rgba(35,32,29,.06);transition:box-shadow .18s ease,transform .18s ease}
.speccard:hover{box-shadow:0 8px 26px rgba(35,32,29,.14);transform:translateY(-2px)}
.speccard .es-logo{height:84px;width:auto;flex:none}
.speccard-body{flex:1 1 auto}
.speccard-kicker{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.72rem;color:var(--red)}
.speccard-title{font-family:var(--font-head);font-weight:800;color:var(--navy);font-size:1.18rem;line-height:1.2;margin:.15rem 0 .3rem}
.speccard-sub{color:var(--slate);font-size:.92rem;line-height:1.4}
.speccard-btn{flex:none;display:inline-flex;align-items:center;gap:.5rem;background:var(--navy);color:#fff;font-family:var(--font-head);font-weight:700;font-size:.95rem;padding:.7rem 1.15rem;border-radius:9px}
.speccard:hover .speccard-btn{background:var(--blue)}
@media(max-width:640px){.speccard{flex-wrap:wrap;text-align:center;justify-content:center}.speccard .es-logo{height:72px}.speccard-body{flex:1 1 100%}.speccard-btn{margin:0 auto}}
.failgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-top:1.8rem}
.failcard{margin:0;background:#fff;border:1px solid var(--bone-line);border-radius:12px;overflow:hidden;box-shadow:0 2px 12px rgba(35,32,29,.06)}
.failcard img{display:block;width:100%;height:190px;object-fit:cover}
.failcard figcaption{padding:.85rem .95rem 1rem;color:var(--slate);font-size:.88rem;line-height:1.4}
.failcard figcaption b{display:block;font-family:var(--font-head);color:var(--navy);font-size:1rem;margin-bottom:.25rem}
@media(max-width:900px){.failgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.failgrid{grid-template-columns:1fr}.failcard img{height:220px}}
/* Mobile stability: stop the horizontal drift + stack the grids that were staying multi-column on phones */
@media(max-width:820px){ html,body{overflow-x:hidden} }
@media(max-width:640px){
  .tiers{grid-template-columns:1fr}
  .reviews{grid-template-columns:1fr}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .trust{grid-template-columns:repeat(2,1fr)}
  .tier.mid:before{left:50%;transform:translateX(-50%)}
}