/* ============ WE FIX GARAGE DOORS — black & white only ============ */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;700&display=swap');

:root{
  --ink:#000;
  --paper:#fff;
  --smoke:#f2f2f2;
  --ash:#dcdcdc;
  --slat:#cfcfcf;
  --line:#000;
  --maxw:1180px;
  --display:'Archivo Black',system-ui,sans-serif;
  --body:'Archivo',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);color:var(--ink);background:var(--paper);
  line-height:1.55;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
/* photos: grayscale by default, full color on hover. Logos, price sheet, promises, favicon excluded. */
img:not(.brandlogo):not(.footlogo):not(.wfgd-modal-mark):not(.nocolor){
  filter:grayscale(100%) contrast(1.02);
  transition:filter .35s ease;
}
img:not(.brandlogo):not(.footlogo):not(.wfgd-modal-mark):not(.nocolor):hover{
  filter:grayscale(0%) contrast(1);
}
/* on touch devices there's no hover, so keep photos colorful when tapped/active */
@media(hover:none){
  img:not(.brandlogo):not(.footlogo):not(.wfgd-modal-mark):not(.nocolor):active{
    filter:grayscale(0%);
  }
}
@media(prefers-reduced-motion:reduce){
  img{transition:none !important}
}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- shutter slat motif ---------- */
.slats{height:14px;width:100%;
  background:repeating-linear-gradient(180deg,#000 0 2px,#fff 2px 4px);}
.rule{border:none;border-top:3px solid #000}

/* ---------- top call strip ---------- */
.callstrip{background:#000;color:#fff;font-family:var(--mono);font-size:13px;
  letter-spacing:.04em;text-align:center;padding:7px 16px;}
.callstrip a{font-weight:700;text-decoration:none;border-bottom:1px solid #fff}

/* ---------- header / nav ---------- */
header.site{position:sticky;top:0;z-index:50;background:#fff;border-bottom:3px solid #000}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;
  height:74px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
.brand{max-width:62%;overflow:hidden}
.brandlogo{height:50px !important;max-height:50px !important;width:auto !important;
  display:block;filter:none;object-fit:contain}
header.site .nav{min-height:74px;height:auto;flex-wrap:nowrap}
.brand .mark{width:42px;height:42px;border:3px solid #000;display:grid;place-items:center;
  font-family:var(--display);font-size:20px;line-height:1}
.brand b{font-family:var(--display);font-size:16px;letter-spacing:-.01em;
  text-transform:uppercase;line-height:.98;display:block;max-width:150px}
.navlinks{display:flex;gap:4px;align-items:center;list-style:none;flex-wrap:wrap}
.navlinks a{font-weight:700;font-size:13.5px;text-transform:uppercase;letter-spacing:.03em;
  text-decoration:none;padding:9px 11px;border:2px solid transparent}
.navlinks a:hover,.navlinks a[aria-current="page"]{border-color:#000}
.navlinks li .callbtn.headcall{display:none}
.nav .callbtn{background:#000;color:#fff;font-family:var(--mono);font-weight:700;
  text-decoration:none;padding:11px 16px;font-size:14px;white-space:nowrap;border:3px solid #000}
.nav .callbtn:hover{background:#fff;color:#000}
.menutoggle{display:none;background:#000;color:#fff;border:3px solid #000;
  font-family:var(--display);font-size:13px;padding:10px 14px;cursor:pointer;text-transform:uppercase}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:var(--display);text-transform:uppercase;
  text-decoration:none;font-size:15px;letter-spacing:.01em;padding:16px 26px;
  border:3px solid #000;background:#000;color:#fff;transition:.12s;cursor:pointer}
.btn:hover{background:#fff;color:#000}
.btn.ghost{background:#fff;color:#000}
.btn.ghost:hover{background:#000;color:#fff}
.btn.sm{font-size:13px;padding:12px 18px}
.btnrow{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- hero ---------- */
.hero{border-bottom:3px solid #000;background:#fff}
.hero .wrap{padding:60px 24px 54px}
.eyebrow{font-family:var(--mono);font-size:13px;font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;border-bottom:3px solid #000;display:inline-block;padding-bottom:4px;margin-bottom:22px}
h1{font-family:var(--display);text-transform:uppercase;line-height:.92;letter-spacing:-.02em;
  font-size:clamp(40px,8vw,86px)}
.hero p.sub{font-size:clamp(18px,2.4vw,23px);font-weight:600;max-width:640px;margin:22px 0 8px}
.joke{font-family:var(--mono);font-size:15px;border-left:4px solid #000;padding:6px 0 6px 16px;
  margin:18px 0 28px;max-width:560px}

/* ---------- trust bar ---------- */
.trustbar{background:#000;color:#fff}
.trustbar .grid{display:grid;grid-template-columns:repeat(4,1fr);text-align:center}
.trustbar .cell{padding:20px 14px;border-right:2px solid #fff}
.trustbar .cell:last-child{border-right:none}
.trustbar .k{font-family:var(--display);font-size:15px;text-transform:uppercase;letter-spacing:.01em;line-height:1.05}
.trustbar .s{font-family:var(--mono);font-size:11.5px;margin-top:6px;opacity:.85;text-transform:uppercase;letter-spacing:.08em}

/* ---------- section scaffold ---------- */
section{padding:64px 0}
.sec-head{margin-bottom:36px;max-width:760px}
.sec-head .eyebrow{margin-bottom:16px}
h2{font-family:var(--display);text-transform:uppercase;line-height:.96;letter-spacing:-.01em;
  font-size:clamp(28px,4.4vw,46px)}
h3{font-family:var(--display);text-transform:uppercase;font-size:20px;letter-spacing:-.01em;line-height:1.05}
.lead{font-size:18.5px;font-weight:500;margin-top:14px}
p{margin-top:14px}
.alt{background:#000;color:#fff}
.alt .rule,.alt hr{border-color:#fff}
.alt .eyebrow{border-color:#fff}
.alt .joke{border-color:#fff}

/* ---------- service cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:3px solid #000;border-bottom:none}
.card{border-bottom:3px solid #000;border-right:3px solid #000;padding:28px 24px;background:#fff;
  text-decoration:none;color:#000;display:flex;flex-direction:column;min-height:218px;transition:.12s}
.cards .card:nth-child(3n){border-right:none}
.card:hover{background:#000;color:#fff}
.card .num{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;margin-bottom:auto}
.card h3{margin:18px 0 8px}
.card p{font-size:14.5px;margin:0;font-weight:500}
.card .go{font-family:var(--mono);font-size:12px;font-weight:700;margin-top:16px;text-transform:uppercase;letter-spacing:.08em}

/* ---------- upfront pricing block ---------- */
.pricewrap{display:grid;grid-template-columns:1fr 1fr;gap:0;border:3px solid #000;align-items:stretch}
.pricewrap>div{min-width:0;overflow:hidden}
.pricewrap .pricetable{table-layout:fixed;width:100%}
.pricewrap .pricetable td:first-child{width:60%}
.pricewrap .pricetable td:last-child{width:40%;white-space:normal}
.pricewrap .left{padding:40px 34px;border-right:3px solid #000}
.pricewrap .right{padding:0}
.steps{counter-reset:s;margin-top:8px}
.steps li{list-style:none;display:flex;gap:16px;padding:16px 0;border-bottom:2px solid #000;align-items:baseline}
.steps li:last-child{border-bottom:none}
.steps li::before{counter-increment:s;content:counter(s,decimal-leading-zero);
  font-family:var(--mono);font-weight:700;font-size:14px;flex-shrink:0;width:34px}
.steps li b{font-family:var(--body);font-weight:700}
.pricetable{width:100%;border-collapse:collapse;height:100%}
.pricetable caption{font-family:var(--display);text-transform:uppercase;text-align:left;
  padding:22px 26px 0;font-size:18px}
.pricetable td{border-top:2px solid #000;padding:16px 26px;font-weight:600;vertical-align:middle}
.pricetable tr td:last-child{text-align:right;font-family:var(--mono);font-weight:700;font-size:18px;white-space:nowrap}
.pricetable .note{font-family:var(--mono);font-size:11.5px;font-weight:400;color:#000;padding:10px 26px 22px;display:block;line-height:1.5}

/* ---------- the we fix way ---------- */
.promises{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:3px solid #fff}
.promise{border-bottom:3px solid #fff;border-right:3px solid #fff;padding:22px 24px}
.promises .promise:nth-child(2n){border-right:none}
.promise .pn{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;opacity:.7}
.promise b{display:block;font-family:var(--display);text-transform:uppercase;font-size:17px;margin:8px 0 6px;letter-spacing:-.01em}
.promise span{font-size:14.5px;display:block;font-weight:500}

/* ---------- split / image rows ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:0;border:3px solid #000;align-items:stretch}
.split.alt-rev{direction:rtl}.split.alt-rev>*{direction:ltr}
.split .txt{padding:38px 34px}
.split .pic{border-left:3px solid #000;background:#000}
.split .pic img{width:100%;height:100%;object-fit:cover}
.split .txt ul{margin:16px 0 0;padding-left:0;list-style:none}
.split .txt li{padding:9px 0;border-bottom:1px solid #000;font-weight:600;font-size:15px}
.split .txt li::before{content:"—  ";font-family:var(--mono)}

/* ---------- before / after ---------- */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:0;border:3px solid #000}
.ba figure{border-right:3px solid #000}
.ba figure:last-child{border-right:none}
.ba img{width:100%;aspect-ratio:1/.86;object-fit:cover}
.ba figcaption{font-family:var(--mono);font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;padding:12px 16px;border-top:3px solid #000}

/* ---------- gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:3px solid #000}
.gal img{width:100%;aspect-ratio:1/1;object-fit:cover;border-right:3px solid #000;border-bottom:3px solid #000}
.gal img:nth-child(4n){border-right:none}

/* ---------- reviews ---------- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:3px solid #000;border-bottom:none}
.review{border-bottom:3px solid #000;border-right:3px solid #000;padding:26px 24px}
.reviews .review:nth-child(3n){border-right:none}
.review .stars{font-family:var(--mono);font-weight:700;letter-spacing:.2em;font-size:14px}
.review p{font-size:15px;font-weight:500;margin-top:12px}
.review cite{font-family:var(--mono);font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;margin-top:14px;display:block;font-style:normal}

/* ---------- FAQ ---------- */
.faq{border-top:3px solid #000;max-width:880px}
.faq details{border-bottom:3px solid #000}
.faq summary{font-family:var(--display);text-transform:uppercase;font-size:17px;letter-spacing:-.01em;
  padding:22px 44px 22px 4px;cursor:pointer;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:26px;font-weight:700}
.faq details[open] summary::after{content:"–"}
.faq .ans{padding:0 4px 24px;font-size:15.5px;font-weight:500;max-width:760px}

/* ---------- area chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:0;border:3px solid #000;border-bottom:none;margin-top:24px}
.chips span{font-family:var(--mono);font-weight:700;font-size:13.5px;text-transform:uppercase;
  letter-spacing:.03em;padding:13px 18px;border-bottom:3px solid #000;border-right:3px solid #000}

/* ---------- final CTA ---------- */
.finalcta{background:#000;color:#fff;text-align:center}
.finalcta .wrap{padding:72px 24px}
.finalcta h2{font-size:clamp(32px,6vw,64px)}
.finalcta .phone{font-family:var(--display);font-size:clamp(30px,6vw,52px);
  display:inline-block;margin:8px 0 26px;text-decoration:none;border-bottom:5px solid #fff}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:3px solid #000}
.contact-grid .col{padding:34px}
.contact-grid .col+.col{border-left:3px solid #000}
.field{margin-top:18px}
.field label{font-family:var(--mono);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;display:block;margin-bottom:7px}
.field input,.field textarea,.field select{width:100%;border:3px solid #000;padding:12px 14px;
  font-family:var(--body);font-size:16px;background:#fff}
.field textarea{min-height:120px;resize:vertical}
.infoline{display:flex;justify-content:space-between;gap:14px;padding:15px 0;border-bottom:2px solid #000;align-items:baseline}
.infoline b{font-family:var(--mono);text-transform:uppercase;font-size:12px;letter-spacing:.08em}
.infoline span{font-weight:700;text-align:right}

/* ---------- footer ---------- */
footer.site{background:#000;color:#fff;border-top:3px solid #000}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px;padding:54px 24px 30px}
.foot h4{font-family:var(--display);text-transform:uppercase;font-size:14px;letter-spacing:.04em;margin-bottom:14px;border-bottom:2px solid #fff;padding-bottom:8px;display:inline-block}
.foot a{display:block;text-decoration:none;font-weight:500;font-size:14.5px;padding:5px 0;opacity:.9}
.foot a:hover{opacity:1;text-decoration:underline}
.foot .big{font-family:var(--display);text-transform:uppercase;font-size:26px;line-height:.95}
.foot .ph{font-family:var(--mono);font-weight:700;font-size:22px;margin-top:12px;display:inline-block;text-decoration:none;border-bottom:2px solid #fff}
.footbottom{border-top:2px solid #fff;padding:18px 24px;font-family:var(--mono);font-size:12px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;opacity:.85}

/* ---------- intro paragraph w/ pic for service pages ---------- */
.svc-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:0;border:3px solid #000;align-items:stretch}
.svc-hero .copy{padding:42px 36px}
.svc-hero .shot{border-left:3px solid #000;background:#000}
.svc-hero .shot img{width:100%;height:100%;object-fit:cover;min-height:320px}

/* ---------- pain points ---------- */
.pains{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:3px solid #000;border-bottom:none;margin-top:8px}
.pain{border-bottom:3px solid #000;border-right:3px solid #000;padding:18px 22px;font-weight:600;font-size:15px;display:flex;gap:12px;align-items:baseline}
.pains .pain:nth-child(2n){border-right:none}
.pain::before{content:"✗";font-family:var(--mono);font-weight:700;flex-shrink:0}

/* ---------- why us list ---------- */
.why{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:3px solid #fff;border-bottom:none}
.why .w{border-bottom:3px solid #fff;border-right:3px solid #fff;padding:20px 22px}
.why .w:nth-child(2n){border-right:none}
.why .w b{font-family:var(--display);text-transform:uppercase;font-size:16px;display:block;margin-bottom:6px}
.why .w span{font-size:14.5px;font-weight:500}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .menutoggle{display:block}
  .brandlogo{height:42px !important;max-height:42px !important}
  .nav{gap:10px}
  .brand b{font-size:14px;max-width:120px}
  .brand .mark{width:38px;height:38px}
  .navlinks{display:none;position:absolute;top:74px;left:0;right:0;background:#fff;
    flex-direction:column;border-bottom:3px solid #000;padding:8px 16px 16px}
  .navlinks.open{display:flex}
  .navlinks a{width:100%;padding:13px 8px;border:none;border-bottom:2px solid #000}
  .nav .callbtn.headcall{display:none}
  .nav>a.callbtn{padding:9px 12px;font-size:12px}
  .navlinks li .callbtn.headcall{display:block;width:100%;text-align:center;margin-top:8px;border:3px solid #000}
  .cards,.reviews{grid-template-columns:1fr 1fr}
  .cards .card:nth-child(3n){border-right:3px solid #000}
  .reviews .review:nth-child(3n){border-right:3px solid #000}
  .gal{grid-template-columns:repeat(2,1fr)}
  .gal img:nth-child(4n){border-right:3px solid #000}
}
@media(max-width:680px){
  .trustbar .grid{grid-template-columns:1fr 1fr}
  .trustbar .cell:nth-child(2){border-right:none}
  .trustbar .cell{border-bottom:2px solid #fff}
  .cards,.reviews,.promises,.pricewrap,.split,.ba,.contact-grid,.svc-hero,.pains,.why,.foot{grid-template-columns:1fr}
  .cards .card,.reviews .review{border-right:3px solid #000 !important}
  .promises .promise{border-right:3px solid #fff !important}
  .why .w{border-right:3px solid #fff !important}
  .pains .pain{border-right:3px solid #000 !important}
  .pricewrap .left{border-right:none;border-bottom:3px solid #000}
  .split .pic,.svc-hero .shot{border-left:none;border-top:3px solid #000}
  .split.alt-rev{direction:ltr}
  .ba figure{border-right:none;border-bottom:3px solid #000}
  .ba figure:last-child{border-bottom:none}
  .contact-grid .col+.col{border-left:none;border-top:3px solid #000}
  .foot{gap:8px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto;transition:none!important}}

/* ============ CTA fallback popup (desktop) ============ */
#wfgd-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;
  background:rgba(0,0,0,.78);padding:24px;animation:wfgdfade .14s ease-out}
#wfgd-modal[hidden]{display:none}
@keyframes wfgdfade{from{opacity:0}to{opacity:1}}
.wfgd-modal-card{position:relative;background:#fff;color:#000;border:4px solid #000;
  max-width:460px;width:100%;padding:40px 34px 30px;text-align:center}
.wfgd-modal-slats{height:12px;width:100%;position:absolute;top:0;left:0;
  background:repeating-linear-gradient(180deg,#000 0 2px,#fff 2px 4px)}
.wfgd-modal-x{position:absolute;top:8px;right:10px;background:#fff;border:none;
  font-family:var(--display);font-size:30px;line-height:1;cursor:pointer;color:#000;
  width:40px;height:40px}
.wfgd-modal-x:hover{background:#000;color:#fff}
.wfgd-modal-eyebrow{font-family:var(--mono);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;border-bottom:3px solid #000;
  display:inline-block;padding-bottom:5px;margin:8px 0 16px}
#wfgd-modal h2{font-family:var(--display);text-transform:uppercase;font-size:30px;
  line-height:.96;letter-spacing:-.01em;margin:0}
.wfgd-modal-sub{font-size:15.5px;font-weight:500;margin:12px 0 24px}
.wfgd-modal-btn{display:block;width:100%;font-family:var(--display);text-transform:uppercase;
  text-decoration:none;font-size:15px;padding:15px 18px;border:3px solid #000;
  background:#000;color:#fff;margin-bottom:12px;transition:.12s}
.wfgd-modal-btn:hover{background:#fff;color:#000}
.wfgd-modal-btn.ghost{background:#fff;color:#000;font-size:13px}
.wfgd-modal-btn.ghost:hover{background:#000;color:#fff}
.wfgd-modal-note{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;margin:6px 0 0;opacity:.75}
@media(max-width:680px){.wfgd-modal-card{padding:34px 22px 24px}#wfgd-modal h2{font-size:25px}}

/* ============ real brand logos ============ */
/* (brandlogo defined near header below) */
.footlogo{height:64px;width:auto;filter:none;margin-bottom:4px}
/* popup character mark */
.wfgd-modal-mark{height:74px;width:auto;filter:none;margin:2px auto 6px;display:block}

/* price table note as a real row */
.pricetable td.noterow{font-family:var(--mono);font-size:11.5px;font-weight:400;
  line-height:1.5;text-align:left;border-top:2px solid #000;white-space:normal}
.pricetable td.noterow a{font-weight:700}

/* even 2-col grid for door price tables */
.doorgrid{display:grid;grid-template-columns:1fr 1fr;border:3px solid #000}
.doorgrid .pricetable{width:100%}
.doorgrid .pricetable td{padding:13px 20px}
@media(max-width:680px){
  .doorgrid{grid-template-columns:1fr}
  .doorgrid .dooronetable{border-right:none !important;border-bottom:3px solid #000}
  .doorgrid .dooronetable:last-child{border-bottom:none}
}

.doorgrid .pricetable.doorprice{table-layout:fixed}
.doorgrid .pricetable.doorprice td:last-child{text-align:right}

/* ===== mobile horizontal-overflow fixes ===== */
/* never let anything cause sideways scroll */
html,body{max-width:100%;overflow-x:hidden}
/* door price tables: contain and wrap on all screens */
.doorgrid{max-width:100%;overflow:hidden}
.doorgrid .dooronetable{min-width:0;overflow:hidden}
.doorgrid .pricetable.doorprice td{word-wrap:break-word;overflow-wrap:anywhere}
.doorgrid .pricetable.doorprice td.noterow{white-space:normal;word-break:break-word;
  overflow-wrap:anywhere}
/* generic note rows wrap everywhere */
.pricetable td.noterow{white-space:normal !important;overflow-wrap:anywhere}
/* pricewrap inner tables can't overflow */
.pricewrap,.pricewrap>div{max-width:100%;overflow:hidden}
.pricewrap .pricetable td{word-wrap:break-word;overflow-wrap:anywhere}
@media(max-width:680px){
  .doorgrid .pricetable.doorprice td{padding:11px 14px}
  .pricetable td{padding-left:16px;padding-right:16px}
  .pricetable td.noterow{padding:12px 16px;font-size:11px}
}

/* ===== full-width truck banner ===== */
.truckband{width:100%;border-bottom:3px solid #000;background:#000;line-height:0}
.truckband img{width:100%;height:auto;max-height:420px;object-fit:cover;object-position:center;
  display:block;margin:0 auto}
@media(max-width:680px){.truckband img{max-height:240px}}