/* ==========================================================================
   Garage door sites: two brands, one stylesheet.
   The brand identity is chosen by html.brand-<slug> and body.b-<design>.
   HouseWorks Pro (dense) and Home Restoration Co (airy) are genuinely
   different layouts, not a colour swap.

   RULES: no em or en dashes anywhere in this file or the copy it styles.
   ========================================================================== */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* Nothing should be able to push the page wider than the screen. */
img,svg,video,iframe{max-width:100%}
body{overflow-wrap:break-word}
.wrap.narrow{max-width:760px}
.muted{color:#6b7280}
.center{text-align:center}
.skip{position:absolute;left:-9999px;top:auto}
.skip:focus{left:12px;top:12px;z-index:100;background:#111;color:#fff;padding:8px 12px;border-radius:6px}

/* ---------- shared layout pieces ---------- */
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;max-width:1080px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.brand-logo{display:block;height:46px;width:auto}
@media (max-width:640px){.brand-logo{height:38px}}
.topbar-phone{font-weight:800;white-space:nowrap;display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.tp-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;opacity:.85}
.crumbs{font-size:.85rem;padding:12px 0 0;display:flex;flex-wrap:wrap;gap:6px;color:#6b7280}
.crumb-sep{opacity:.5}

.btn{display:inline-block;padding:12px 20px;border-radius:10px;font-weight:700;border:2px solid transparent;cursor:pointer;font-size:.98rem;text-align:center}
.btn:hover{text-decoration:none}
.btn-block{display:block;width:100%}

.alert{margin:16px 0;padding:12px 16px;border-radius:8px;font-size:.93rem}
.alert-error{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}

.section{padding:44px 0}
.section-alt{background:#f6f8fc}
.section-title{font-size:1.55rem;margin:0 0 16px}
.prose{color:#374151;font-size:1rem}
.lead{font-size:1.1rem;color:#1f2937;font-weight:600}

.trust-inner{display:flex;flex-wrap:wrap;gap:18px 34px;padding:16px 20px;max-width:1080px;margin:0 auto}
.trust-item{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.95rem}
.trust-tick{font-weight:800}

.service-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.service-card{margin:0}
.service-link{display:flex;gap:14px;align-items:flex-start;height:100%;padding:18px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;transition:border-color .15s,box-shadow .15s,transform .15s}
.service-link:hover{text-decoration:none;border-color:#0b3d91;box-shadow:0 8px 22px rgba(15,23,42,.08);transform:translateY(-2px)}
.service-card-help .service-link{border-style:dashed;background:transparent}
.service-ic{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:11px;background:rgba(11,61,145,.08);color:#0b3d91}
.service-text{display:flex;flex-direction:column;gap:6px}
.service-name{font-weight:800;font-size:1.05rem;color:#0f172a}
.service-sum{color:#4b5563;font-size:.9rem;line-height:1.5}
.service-more{font-weight:700;font-size:.85rem;margin-top:auto;display:inline-flex;align-items:center;gap:6px}
.service-more .ic{transition:transform .15s}
.service-link:hover .service-more .ic{transform:translateX(3px)}

.coverage-inner{padding:38px 20px;max-width:1080px;margin:0 auto;text-align:center}
.coverage-title{font-size:1.5rem;margin:0 0 10px}
.coverage-text{max-width:640px;margin:0 auto 16px;color:#374151}
.coverage-cta{margin:22px 0 0;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.steps{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step{display:block;position:relative;background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:48px 18px 20px}
.step h3,.step-title{margin:0 0 6px;font-size:1.02rem}
.step p,.step-body{margin:0;color:#4b5563;font-size:.93rem;line-height:1.55}
.step-num{position:absolute;top:-14px;left:18px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.95rem;background:#0b3d91;color:#fff;box-shadow:0 4px 12px rgba(11,61,145,.28)}
/* ---------- icons ---------- */
.ic{flex:0 0 auto;vertical-align:-2px}

/* ---------- header: topbar ---------- */
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:14px;padding-bottom:14px}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand-logo{display:block;height:46px;width:auto;max-width:100%}
.topbar-actions{display:flex;align-items:center;gap:18px}
.topbar-mail{display:inline-flex;align-items:center;gap:7px;font-size:.9rem;font-weight:600}
.topbar-phone{display:inline-flex;align-items:center;gap:10px;padding:9px 18px;border-radius:999px;font-weight:800;line-height:1.15}
.tp-text{display:flex;flex-direction:column}
.tp-label{font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;opacity:.82}
.tp-num{font-size:1.02rem}

/* ---------- header: navbar ---------- */
.navbar{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid transparent;transition:box-shadow .2s,border-color .2s}
.navbar.nav-scrolled{box-shadow:0 6px 20px rgba(15,23,42,.09);border-bottom-color:#e8edf5}
.nav-inner{display:flex;align-items:center;gap:16px;padding-top:10px;padding-bottom:10px}
.nav-list{list-style:none;display:flex;align-items:center;gap:6px;margin:0;padding:0;flex:1}
.nav-list a{display:inline-block;padding:9px 13px;border-radius:9px;font-weight:600;font-size:.94rem;color:#334155}
.nav-list a:hover{background:rgba(15,23,42,.05);text-decoration:none}
.nav-call{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;font-weight:800;font-size:.94rem;white-space:nowrap}
.nav-call:hover{text-decoration:none;filter:brightness(1.06)}
.nav-toggle{display:none;align-items:center;gap:8px;background:none;border:1px solid #dfe5ee;border-radius:10px;padding:9px 13px;font:inherit;font-weight:700;font-size:.92rem;cursor:pointer;color:#334155}
.nav-toggle .nt-close{display:none}
.nav-open .nav-toggle .nt-open{display:none}
.nav-open .nav-toggle .nt-close{display:inline-flex}

/* ---------- section helpers ---------- */
.section-lede{max-width:620px;margin:0 auto 4px;color:#475569;font-size:1.02rem}
.section-lede.center{text-align:center}
.band-cta-btns{margin:22px 0 0;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- signs section ---------- */
.signs-split{display:grid;grid-template-columns:1.1fr .9fr;gap:38px;align-items:center}
.signs-photo{margin:0}
.signs-photo img{display:block;width:100%;height:auto;border-radius:14px}
.signs-cta{margin:24px 0 0}

/* ---------- why cards ---------- */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.why-card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:24px}
.why-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:rgba(11,61,145,.08);color:#0b3d91;margin-bottom:14px}
.why-title{margin:0 0 8px;font-size:1.08rem}
.why-body{margin:0;color:#4b5563;font-size:.95rem;line-height:1.6}

/* ---------- footer ---------- */
.site-footer{margin-top:40px;padding:52px 0 0}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px}
.foot-col{min-width:0}
.foot-brand{font-weight:800;font-size:1.15rem;margin:0 0 8px}
.foot-blurb{margin:0 0 18px;font-size:.93rem;line-height:1.6;opacity:.85}
.foot-contact{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:.93rem}
.foot-contact li{display:flex;gap:9px;align-items:flex-start}
.foot-contact .ic{margin-top:2px;flex:0 0 auto}
.foot-domain{margin:18px 0 0;font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;opacity:.6}
.foot-head{font-weight:800;margin:0 0 12px;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}
.foot-list{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:.93rem}
.foot-list a{display:inline-flex;align-items:center;gap:6px}
.foot-more{font-weight:700}
.foot-call{display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding:11px 18px;border-radius:999px;font-weight:800;font-size:.92rem}
.foot-call:hover{text-decoration:none}
.foot-legal{margin-top:44px;padding:22px 0 26px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-size:.84rem}
.foot-legal p{margin:0}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px}
.hero-points{list-style:none;display:grid;gap:9px;margin:22px 0 0;padding:0;font-size:.92rem;font-weight:600}
.hero-points li{display:inline-flex;align-items:center;gap:8px}
.hero-points .ic{opacity:.85}

.signs{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:12px}
.signs li{display:flex;gap:10px;align-items:flex-start;color:#374151}
.signs li .ic{flex:0 0 auto;margin-top:3px;color:#2f855a}
.signs-wide{grid-template-columns:1fr 1fr;gap:13px 30px}

/* ---------- service page ---------- */
.service-split{display:grid;grid-template-columns:1.15fr .85fr;gap:42px;align-items:start}
.service-copy .section-title{margin-top:0}
.service-photo{margin:0;position:sticky;top:96px}
.service-photo img{display:block;width:100%;height:auto;border-radius:14px}
.service-photo figcaption{margin-top:11px;font-size:.82rem;line-height:1.5;color:#6b7280}

/* ---------- city / state hero split ---------- */
.city-split{display:grid;grid-template-columns:1.2fr .8fr;gap:42px;align-items:center}
.city-photo{margin:0}
.city-photo img{display:block;width:100%;height:auto;border-radius:14px}

/* ---------- about page ---------- */
.about-split{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.about-copy .section-title{margin-top:0}
.about-cta{margin:26px 0 0;display:flex;gap:12px;flex-wrap:wrap}
.about-photo{margin:0}
.about-photo img{display:block;width:100%;height:auto;border-radius:14px}

/* ---------- contact page ---------- */
.contact-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:34px;align-items:start;margin-top:28px}
.contact-card,.contact-form{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:28px}
.contact-card-title{font-size:.82rem;margin:30px 0 16px;text-transform:uppercase;letter-spacing:.08em;color:#5b6478}
.contact-card-title:first-child{margin-top:0}
.contact-list{list-style:none;margin:0;padding:0;display:grid;gap:17px;font-size:.96rem}
.contact-list li{display:flex;gap:12px;align-items:flex-start}
.contact-list .ic{margin-top:2px}
.contact-list li > span{display:flex;flex-direction:column;gap:3px;min-width:0}
.contact-label{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#8a94a6}
.contact-alt{margin:28px 0 0;font-size:.93rem;color:#4b5563;line-height:1.65}
.contact-form-note{margin:0 0 20px;color:#4b5563;font-size:.95rem}

/* Column count comes from the container width, not a fixed 5, because the
   anchors on the home page read "Garage door service in North Carolina": a
   fixed 5-column track sized each cell to its min-content width and pushed the
   page sideways. minmax(0,1fr) lets the tracks shrink; min-width:0 stops the
   text from holding them open. */
.state-grid{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.state-item{min-width:0}
.state-item a{display:flex;justify-content:space-between;gap:6px;padding:10px 13px;background:#fff;border:1px solid #dfe5ee;border-radius:999px;font-size:.92rem;font-weight:500;color:#1f2937;min-width:0;overflow-wrap:break-word}
.state-item a:hover{border-color:#0b3d91;text-decoration:none}
.state-code{color:#9ca3af;font-size:.78rem;font-weight:700}

/* ---------- FAQ ---------- */
.faq-item{background:#fff;border:1px solid #e5e7eb;border-radius:10px;margin-bottom:10px;overflow:hidden}
.faq-q{width:100%;text-align:left;background:none;border:0;padding:15px 44px 15px 18px;font:inherit;font-weight:700;cursor:pointer;color:#111827;position:relative}
.faq-q::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:1.3rem;color:#9ca3af;line-height:1}
.faq-item.open .faq-q::after{content:"-"}
.faq-a{display:none;padding:0 18px 16px;color:#374151;font-size:.95rem}
.faq-item.open .faq-a{display:block}

/* ---------- lead form ---------- */
.lead-form .field{margin-bottom:12px}
.lead-form label{display:block;font-size:.82rem;font-weight:700;margin-bottom:5px;color:#374151}
.lead-form input,.lead-form select,.lead-form textarea{width:100%;padding:11px 12px;border:1px solid #e5e7eb;border-radius:8px;font:inherit;font-size:.95rem;background:#fff;color:#111827}
.lead-form textarea{resize:vertical}
.lead-form .req{color:#dc2626}
.lead-form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-note{font-size:.85rem;color:#6b7280;margin:10px 0 0;text-align:center}

/* ---------- footer ----------
   Column layout lives with the other footer rules above, so this file has one
   definition per property. */

/* ---------- mobile tap-to-call ---------- */
.tap-to-call{display:none;position:fixed;left:12px;right:12px;bottom:12px;z-index:50;text-align:center;padding:14px;border-radius:12px;font-weight:800;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.tap-to-call:hover{text-decoration:none}

/* ==========================================================================
   BRAND A: HouseWorks Pro  (dense, higher contrast, practical)
   ========================================================================== */
.brand-houseworkspro{--a:#0b1f3a;--a2:#132a4d;--accent:#ff6a00;--line:#dfe5ee;--page:#f3f6fb}
.brand-houseworkspro body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#0f172a;background:var(--page)}
.brand-houseworkspro a{color:#0b3d91}
/* The HouseWorks logo is a navy wordmark, so the header sits on white and the
   navy identity lives in the navbar, hero, bands and footer instead. */
.brand-houseworkspro .topbar{background:#fff;border-bottom:3px solid var(--accent)}
.brand-houseworkspro .tp-label{color:#5b6b85}
.brand-houseworkspro .topbar-phone{color:#fff;background:var(--accent);padding:8px 14px;border-radius:8px}
.brand-houseworkspro .topbar-phone .tp-label{color:rgba(255,255,255,.9)}
.brand-houseworkspro .navbar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.brand-houseworkspro .nav-list a{color:#0f172a;font-size:.94rem}
.brand-houseworkspro .nav-list a[aria-current="page"]{color:var(--accent);font-weight:800}
.brand-houseworkspro .hero{background:linear-gradient(160deg,var(--a) 0%,var(--a2) 100%);color:#fff;padding:40px 0 44px}
.brand-houseworkspro .hero-split{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:start}
.brand-houseworkspro .hero h1{margin:0 0 8px;font-size:2.25rem;line-height:1.12;letter-spacing:-.01em}
.brand-houseworkspro .eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;color:var(--accent);font-weight:800;margin:0 0 10px}
.brand-houseworkspro .hero-sub{color:#c7d7f5;margin:0 0 20px;font-size:1.05rem}
.brand-houseworkspro .hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.brand-houseworkspro .btn-primary{background:var(--accent);color:#1f2937}
.brand-houseworkspro .btn-soft{background:transparent;color:var(--a);border-color:var(--a)}
.brand-houseworkspro .hero .btn-soft{color:#fff;border-color:rgba(255,255,255,.6)}
.brand-houseworkspro .hero-card{background:#fff;color:#0f172a;border-radius:12px;padding:20px;box-shadow:0 8px 24px rgba(0,0,0,.22)}
.brand-houseworkspro .hero-card-title{margin:0 0 12px;font-size:1.05rem}
.brand-houseworkspro .trust-strip{background:#fff;border-bottom:1px solid var(--line)}
.brand-houseworkspro .trust-tick{color:var(--accent)}
.brand-houseworkspro .section{padding:34px 0}
.brand-houseworkspro .service-link{border-color:var(--line)}
.brand-houseworkspro .service-link:hover{border-color:var(--accent)}
.brand-houseworkspro .service-more{color:var(--accent)}
.brand-houseworkspro .coverage-band{background:var(--a);color:#fff}
.brand-houseworkspro .coverage-band a{color:#ffd7b8}
.brand-houseworkspro .step-num{background:var(--a);color:#fff}
.brand-houseworkspro .site-footer{background:#0b1f3a;color:#c7d7f5}
.brand-houseworkspro .site-footer a{color:#e2e8f0}
.brand-houseworkspro .foot-brand{color:#fff}
.brand-houseworkspro .foot-legal{border-top:1px solid #1e293b;color:#8ea3c2}
.brand-houseworkspro .tap-to-call{background:var(--accent);color:#1f2937}
.brand-houseworkspro .section-alt{background:#eef2f8}

/* ==========================================================================
   BRAND B: Home Restoration Co  (airy, warm, homeowner first)
   ========================================================================== */
.brand-homerestorationco{--navy:#0f1d40;--navy-2:#162446;--red:#eb2a35;--cream:#fff;--line:#ddd}
.brand-homerestorationco body{font-family:Georgia,"Iowan Old Style","Times New Roman",serif;color:#1f2430;background:var(--cream);font-size:1.06rem;line-height:1.75}
.brand-homerestorationco a{color:var(--navy)}
.brand-homerestorationco .topbar{background:var(--cream);border-bottom:1px solid var(--line)}
/* Plain icon plus number, on one line: the bordered chip read as a form field
   and made the header's right side the heaviest thing on the page. */
.brand-homerestorationco .topbar-phone{color:var(--navy);border:0;padding:0;border-radius:0;gap:8px;flex-direction:row}
.brand-homerestorationco .topbar-phone .tp-label{display:none}
.brand-homerestorationco .topbar-phone .tp-num{font-size:1rem}
.brand-homerestorationco .topbar-phone .tp-text{display:block}
.brand-homerestorationco .topbar-mail{font-size:.88rem}
.brand-homerestorationco .navbar{background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.brand-homerestorationco .nav-inner{gap:10px}
.brand-homerestorationco .nav-list a{color:#374151;background:none;border:0;border-bottom:2px solid transparent;border-radius:0;padding:9px 12px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:.95rem}
.brand-homerestorationco .nav-list a[aria-current="page"]{border-bottom-color:var(--navy);color:var(--navy);font-weight:700}
.brand-homerestorationco .hero{background:linear-gradient(180deg,#fff 0%,var(--cream) 100%);color:#1f2430;padding:64px 0 52px;border-bottom:1px solid var(--line)}
.brand-homerestorationco .hero-center{max-width:760px;text-align:center}
.brand-homerestorationco .hero h1{font-size:2.7rem;line-height:1.18;font-weight:400;margin:0 0 14px}
.brand-homerestorationco .eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.7rem;color:var(--red);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-weight:700;margin:0 0 14px}
.brand-homerestorationco .hero-sub{color:#4b5563;margin:0 auto 26px;max-width:620px;font-size:1.18rem}
.brand-homerestorationco .hero-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.brand-homerestorationco .btn-primary{background:var(--red);color:#fff}
.brand-homerestorationco .btn-soft{background:transparent;color:var(--navy);border-color:var(--navy)}
.brand-homerestorationco .trust-strip{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.brand-homerestorationco .trust-inner{justify-content:center;padding:22px 20px}
.brand-homerestorationco .trust-item{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:.95rem;color:#374151}
.brand-homerestorationco .trust-tick{color:var(--red)}
.brand-homerestorationco .section{padding:72px 0}
.brand-homerestorationco .section-alt{background:#fff}
.brand-homerestorationco .section-title{font-size:1.9rem;font-weight:400;letter-spacing:-.01em}
.brand-homerestorationco .service-grid{grid-template-columns:repeat(2,1fr);gap:20px}
.brand-homerestorationco .service-link{padding:26px;border-radius:16px;border-color:var(--line)}
.brand-homerestorationco .service-link:hover{border-color:var(--red);box-shadow:0 10px 26px rgba(15,29,64,.08)}
.brand-homerestorationco .service-name{font-size:1.2rem;font-weight:400}
.brand-homerestorationco .service-sum{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:.92rem;color:#6b7280}
.brand-homerestorationco .service-more{color:var(--red)}
.brand-homerestorationco .coverage-band{background:var(--navy);color:#fff}
.brand-homerestorationco .coverage-band a{color:#cdd9ef}
.brand-homerestorationco .coverage-title{font-weight:400}
.brand-homerestorationco .step-num{background:var(--red);color:#fff}
.brand-homerestorationco .steps{gap:18px}
.brand-homerestorationco .step{padding:22px;border-radius:16px;border-color:var(--line)}
.brand-homerestorationco .step h3{font-weight:400;font-size:1.15rem}
.brand-homerestorationco .site-footer{background:#0f1d40;color:#cfd8e8}
.brand-homerestorationco .site-footer a{color:#eef2f9}
.brand-homerestorationco .foot-brand{color:#fff;font-size:1.1rem}
.brand-homerestorationco .foot-legal{border-top:1px solid #26365c;color:#9aa8c4}
.brand-homerestorationco .tap-to-call{background:var(--red);color:#fff}
.brand-homerestorationco .lead-form label,.brand-homerestorationco .lead-form input,.brand-homerestorationco .lead-form select,.brand-homerestorationco .lead-form textarea,.brand-homerestorationco .form-note,.brand-homerestorationco .crumbs,.brand-homerestorationco .btn{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}

/* Band paragraph needs light text on both dark bands. */
.brand-houseworkspro .coverage-band .coverage-text{color:#d5e2f7}
.brand-homerestorationco .coverage-band .coverage-text{color:#d9e2f2}

/* ---------- state tier ---------- */
.state-hero .lead{max-width:70ch}
.demand-line{display:inline-block;margin:14px 0 0;padding:9px 14px;border-radius:999px;background:#eef2f8;color:#1f2937;font-size:.92rem;font-weight:600}
.brand-homerestorationco .demand-line{background:#eef1f7;color:#1f2430;font-weight:500}

.city-chips{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.city-chip{display:flex;align-items:baseline;gap:8px;padding:8px 13px;background:#fff;border:1px solid #e5e7eb;border-radius:999px;font-size:.9rem}
.city-name{color:#111827;font-weight:600}
a.city-name{text-decoration:none}
a.city-name:hover{text-decoration:underline}
.city-count{color:#6b7280;font-size:.78rem}

.city-list{list-style:none;padding:0;margin:20px 0 0;columns:4;column-gap:24px;font-size:.95rem;line-height:1.6;color:#1f2937}
.city-list li{padding:4px 0;break-inside:avoid}
.city-list a{color:#0b3d91;font-weight:500;text-decoration:none}
.city-list a:hover{text-decoration:underline}

.map-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:center}
.map-col{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:14px}
.us-map{display:block;width:100%;height:auto}
.us-state{fill:#dbe3ef;stroke:#fff;stroke-width:1.1;stroke-linejoin:round}
.us-state.is-active{fill:#0b3d91}
.brand-homerestorationco .us-state{fill:#e6e0d4}
.brand-homerestorationco .us-state.is-active{fill:#2f5d4e}
.map-note{margin:10px 0 0;font-size:.8rem;color:#6b7280;text-align:center}
.section-more{margin:20px 0 0}

@media (max-width:860px){
  .map-wrap{grid-template-columns:1fr}
  .city-list{columns:2}
}

/* ---------- photography ---------- */
/*
 * These images illustrate the work and the hardware. They are not presented as
 * a portfolio of completed jobs, so the captions and alt text stay descriptive.
 */
.hero-photo{margin:26px 0 0}
.hero-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:12px}
.hero-center .hero-photo{max-width:760px;margin-left:auto;margin-right:auto}
.intro-split{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center}
.intro-photo{margin:0}
.intro-photo img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:12px}

/* ---------- shared photo band (every page carries a photograph) ---------- */
.photo-band{margin:0 auto;max-width:520px}
.photo-band img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:12px}
.photo-band figcaption{margin-top:11px;font-size:.82rem;line-height:1.5;color:#6b7280}

.brand-houseworkspro .hero-photo img{border:3px solid rgba(255,255,255,.18);box-shadow:0 18px 40px rgba(0,0,0,.38)}
.brand-houseworkspro .intro-photo img{border:4px solid #fff;border-radius:10px;box-shadow:0 16px 36px rgba(11,31,58,.18)}
.brand-houseworkspro .photo-band img{border:4px solid #fff;border-radius:10px;box-shadow:0 16px 36px rgba(11,31,58,.18)}
.brand-homerestorationco .hero-photo img{border:6px solid #fff;border-radius:3px;box-shadow:0 16px 38px rgba(15,29,64,.2)}
.brand-homerestorationco .intro-photo img{border:6px solid #fff;border-radius:3px;box-shadow:0 16px 36px rgba(15,29,64,.16)}
.brand-houseworkspro .signs-photo img{border:4px solid #fff;border-radius:10px;box-shadow:0 16px 36px rgba(11,31,58,.18)}
.brand-homerestorationco .signs-photo img{border:6px solid #fff;border-radius:3px;box-shadow:0 16px 36px rgba(15,29,64,.16)}

/* ==========================================================================
   HEADER, CTA AND FOOTER DETAILS
   These sit after the brand blocks so they win over the base rules above.
   Both brands share the components; only colour and shape differ, so the two
   sites stay different sites rather than one site in two colours.
   ========================================================================== */

/* --- HouseWorks Pro: orange action colour, squared shapes, navy footer --- */
.brand-houseworkspro .topbar-mail{color:#4b5563}
.brand-houseworkspro .topbar-mail:hover{color:#0b3d91}
.brand-houseworkspro .nav-call{background:var(--accent);color:#1f2937}
.brand-houseworkspro .nav-list a[aria-current="page"]{background:rgba(255,106,0,.1);color:#b8420a;font-weight:800}
.brand-houseworkspro .service-ic{background:rgba(255,106,0,.1);color:#b8420a;border-radius:10px}
.brand-houseworkspro .why-ic{background:rgba(255,106,0,.1);color:#b8420a}
.brand-houseworkspro .step{padding:50px 18px 20px}
.brand-houseworkspro .step-num{top:-15px}
.brand-houseworkspro .band-cta{background:linear-gradient(180deg,#fff 0%,#f6f9fe 100%);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.brand-houseworkspro .foot-head{color:#fff}
.brand-houseworkspro .foot-blurb,.brand-houseworkspro .foot-list a,.brand-houseworkspro .foot-contact a{color:#c7d7f5}
.brand-houseworkspro .foot-list a:hover,.brand-houseworkspro .foot-contact a:hover{color:#fff;text-decoration:underline}
.brand-houseworkspro .foot-call{background:var(--accent);color:#1f2937}
.brand-houseworkspro .why-card{border-color:var(--line)}

/* --- Home Restoration Co: navy and red on a white ground, serif headings --- */
.brand-homerestorationco .topbar-mail{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:.88rem;color:#6b7280}
.brand-homerestorationco .topbar-mail:hover{color:var(--navy)}
.brand-homerestorationco .nav-call{background:var(--red);color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:.9rem}
.brand-homerestorationco .nav-toggle{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;border-color:var(--line);color:#374151;background:#fff}
.brand-homerestorationco .step{padding:54px 22px 24px}
.brand-homerestorationco .step-num{top:-15px;background:var(--red)}
.brand-homerestorationco .why-card{border-color:var(--line);border-radius:16px}
.brand-homerestorationco .why-ic{background:rgba(235,42,53,.12);color:var(--red);border-radius:50%}
.brand-homerestorationco .why-title{font-weight:400;font-size:1.22rem}
.brand-homerestorationco .why-body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:.94rem;color:#6b7280}
.brand-homerestorationco .section-lede{font-size:1.1rem;color:#6b7280}
.brand-homerestorationco .signs li .ic{color:var(--navy)}
/* This brand centres its hero, so the checklist needs to sit on that same
   centre line instead of hanging off to the left under centred buttons. */
/* Brand B's hero is centred, but each checklist row must still start on the
   same left edge: centre the whole list as a block instead of centring every
   row on its own, which left the check marks staggered. */
.brand-homerestorationco .hero-points{justify-items:start;width:max-content;max-width:100%;margin-left:auto;margin-right:auto}

/* Component details that differ between the two identities. These sit after
   the brand blocks so they win over the shared rules above. */
.brand-houseworkspro .contact-list .ic{color:var(--accent)}
.brand-houseworkspro .contact-card-title{color:#5b6478}
.brand-houseworkspro .foot-list a,.brand-houseworkspro .foot-contact a{color:#c7d7f5}
.brand-houseworkspro .foot-list a:hover,.brand-houseworkspro .foot-contact a:hover{color:#fff;text-decoration:underline}
.brand-homerestorationco .contact-card,.brand-homerestorationco .contact-form{border-color:var(--line);border-radius:20px}
.brand-homerestorationco .contact-card-title{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:.78rem;color:#8a8275}
.brand-homerestorationco .contact-list{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.brand-homerestorationco .contact-list .ic{color:var(--navy)}
.brand-homerestorationco .contact-alt,.brand-homerestorationco .contact-form-note,.brand-homerestorationco .service-photo figcaption,.brand-homerestorationco .foot-head{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.brand-homerestorationco .service-ic{background:rgba(15,29,64,.09);color:var(--navy);border-radius:50%}
.brand-homerestorationco .service-more{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:.88rem}
.brand-homerestorationco .band-cta{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.brand-homerestorationco .foot-head{color:#fff}
.brand-homerestorationco .foot-blurb,.brand-homerestorationco .foot-list a,.brand-homerestorationco .foot-contact a{color:#cfe0d8}
.brand-homerestorationco .foot-list a:hover,.brand-homerestorationco .foot-contact a:hover{color:#fff;text-decoration:underline}
.brand-homerestorationco .foot-call{background:var(--red);color:#fff}
.brand-homerestorationco .foot-grid,.brand-homerestorationco .foot-contact,.brand-homerestorationco .foot-list,.brand-homerestorationco .foot-legal{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}

/* ==========================================================================
   HOME RESTORATION CO - REFERENCE DESIGN PASS  (see DESIGN-B-REFERENCE.md)
   Layout, section rhythm and type pairing taken from the reference site.
   Brand A is untouched: every rule below is scoped to .brand-homerestorationco.
   ========================================================================== */

/* Type: serif headings over a sans body, on a white ground. */
.brand-homerestorationco{--line:#ddd;--ink:#333;--ink-2:#555;--meta:#666}
.brand-homerestorationco body{font-family:Arial,Helvetica,"Segoe UI",Roboto,sans-serif;background:#fff;color:#555;font-size:16px;line-height:1.6}
.brand-homerestorationco h1,.brand-homerestorationco h2,.brand-homerestorationco h3,.brand-homerestorationco .section-title,.brand-homerestorationco .hero h1,.brand-homerestorationco .step-title,.brand-homerestorationco .why-title,.brand-homerestorationco .service-name{font-family:Georgia,"Iowan Old Style","Times New Roman",serif;color:#333;font-weight:700;letter-spacing:0}
.brand-homerestorationco .prose,.brand-homerestorationco p{color:#555}

/* Announcement bar: full width, one centred line. */
.brand-homerestorationco .announce{background:var(--navy);color:#fff;text-align:center;font-size:.92rem;padding:9px 16px}
.brand-homerestorationco .announce a{color:#fff;text-decoration:underline;white-space:nowrap}

/* Nav: solid white, thin dividers, squared corners. */
.brand-homerestorationco .navbar{background:#fff;backdrop-filter:none;border-bottom:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,.08)}
.brand-homerestorationco .topbar{background:#fff;border-bottom:1px solid #eee}
.brand-homerestorationco .nav-list a{border-radius:0;border-bottom:0;border-left:1px solid #ddd;padding:12px 18px;font-family:inherit;color:#333;font-size:15px}
.brand-homerestorationco .nav-list li:first-child a{border-left:0}
.brand-homerestorationco .nav-list a[aria-current="page"]{border-bottom:0;color:var(--navy);font-weight:700;box-shadow:inset 0 -3px 0 var(--navy)}

/* Hero: centred text on white, no gradient, no photo band. */
.brand-homerestorationco .hero{background:#fff;border-bottom:1px solid #ddd;padding:44px 0 40px}
.brand-homerestorationco .hero h1{font-size:2.25rem;line-height:1.2;font-weight:700}
.brand-homerestorationco .eyebrow{color:#666;font-family:Georgia,serif;font-style:italic;text-transform:none;letter-spacing:0;font-weight:400;font-size:1rem}
.brand-homerestorationco .hero-sub{font-size:1.05rem;color:#555;max-width:70ch;margin-left:auto;margin-right:auto}
.brand-homerestorationco .hero-center{max-width:900px}
.brand-homerestorationco .hero-photo{display:none}

/* Buttons: squared, slight lift, uppercase label. */
.brand-homerestorationco .btn{border-radius:4px;font-family:inherit;text-transform:uppercase;font-weight:700;letter-spacing:.5px;font-size:15px;box-shadow:0 2px 4px rgba(0,0,0,.2)}
.brand-homerestorationco .btn-primary{background:var(--red);color:#fff}
.brand-homerestorationco .btn-soft{background:#fff;color:#333;border:1px solid #ccc;box-shadow:none}
.brand-homerestorationco .nav-call{border-radius:4px;font-family:inherit;text-transform:uppercase;font-weight:700;letter-spacing:.5px;font-size:14px;box-shadow:0 2px 4px rgba(0,0,0,.2)}

/* Tight section rhythm and one shared content column. */
.brand-homerestorationco .section{padding:34px 0}
.brand-homerestorationco .section-title{font-size:1.75rem}
.brand-homerestorationco .section-lede{color:#666;max-width:70ch;margin-left:0;margin-right:0}
.brand-homerestorationco .section-lede.center{margin-left:auto;margin-right:auto}
.brand-homerestorationco .wrap{max-width:1100px}

/* Dividers instead of cards: no radius, no shadow, hairline rules only. */
.brand-homerestorationco .service-link,.brand-homerestorationco .why-card,.brand-homerestorationco .step,.brand-homerestorationco .contact-card,.brand-homerestorationco .contact-form{border-radius:0;border:0;border-top:1px solid #ddd;box-shadow:none;background:#fff}
.brand-homerestorationco .service-link:hover{border-color:#ddd;box-shadow:none;background:#fafafa}
.brand-homerestorationco .why-card,.brand-homerestorationco .step{padding:22px 4px}
.brand-homerestorationco .service-grid{gap:0}
.brand-homerestorationco .service-link{padding:20px 22px}
.brand-homerestorationco .service-ic,.brand-homerestorationco .why-ic{border-radius:0;background:none;padding:0}
.brand-homerestorationco .service-ic{color:var(--navy)}
.brand-homerestorationco .why-ic{color:var(--red)}
.brand-homerestorationco .step-num{border-radius:50%;background:var(--navy)}
.brand-homerestorationco .service-more{font-family:inherit;color:var(--red);text-transform:uppercase;font-size:.82rem;letter-spacing:.5px}
.brand-homerestorationco .service-sum,.brand-homerestorationco .why-body{font-family:inherit;color:#666;font-size:.95rem}
.brand-homerestorationco .why-title{font-size:1.2rem}

/* Trust strip: one hairline, no tinted panel. */
.brand-homerestorationco .trust-strip{background:#fff;border-top:1px solid #ddd;border-bottom:1px solid #ddd}
.brand-homerestorationco .trust-inner{justify-content:center;padding:16px 20px;gap:26px}
.brand-homerestorationco .trust-item{font-family:inherit;color:#555;font-size:.95rem}
.brand-homerestorationco .trust-tick{color:var(--navy)}

/* Photography: square corners, no heavy frame. */
.brand-homerestorationco .intro-photo img,.brand-homerestorationco .signs-photo img,.brand-homerestorationco .photo-band img{border:0;border-radius:8px;box-shadow:none}

/* Bands become plain white separated by a hairline. */
.brand-homerestorationco .section-alt{background:#fff;border-top:1px solid #ddd;border-bottom:1px solid #ddd}
.brand-homerestorationco .band-cta{background:#fff;border-top:1px solid #ddd;border-bottom:1px solid #ddd}
.brand-homerestorationco .coverage-band{background:var(--navy);border:0}
.brand-homerestorationco .map-col{border:1px solid #ddd;border-radius:0;background:#fff}

/* FAQ: accordion on hairline dividers. */
.brand-homerestorationco .faq-item,.brand-homerestorationco .faq details,.brand-homerestorationco details{border-radius:0;border:0;border-bottom:1px solid #ddd;background:#fff;box-shadow:none}

/* Footer: flattened, but the link columns stay - the SEO corpus needs them. */
.brand-homerestorationco .site-footer{background:#0f1d40;color:#d9e2f2}
.brand-homerestorationco .foot-legal{border-top:1px solid rgba(255,255,255,.2)}
.brand-homerestorationco .foot-call{border-radius:4px;background:var(--red);text-transform:uppercase;font-weight:700;letter-spacing:.5px}

/* ==========================================================================
   BLOCKS THE MARKUP ASKED FOR BUT NO RULE COVERED
   These elements were falling back to raw browser defaults, which is what
   made several pages look unstyled and out of line. Every class a template
   uses is covered here or by a rule above, and tools/check_css_coverage.py
   keeps it that way.
   ========================================================================== */

/* Button rows: every page uses the same rhythm for a pair of actions. */
.service-cta,.about-cta,.coverage-cta{margin:24px 0 0;display:flex;gap:12px;flex-wrap:wrap}
.coverage-cta{justify-content:center}

/* Intro paragraphs that sit under a page heading. */
.service-lede,.hub-intro{font-size:1.05rem;line-height:1.65;color:#475569;margin:14px 0 0;max-width:760px}

/* Grid children must be allowed to shrink, or a long city name pushes the
   whole column wider than its track. */
.hero-copy,.intro-copy,.signs-copy,.city-copy,.about-copy,.service-copy,.map-copy,.foot-about{min-width:0}
.map-copy h2{margin-top:0}
.foot-about{margin:0 0 16px;font-size:.93rem;line-height:1.6}

/* Directory rows: name on the left, state code on the right. */
/* Labels are full phrases ("Garage door service in North Carolina"), so they
   wrap to a second line rather than being cut off with an ellipsis. A pill
   radius on a two-line label reads as a mistake, so the corners are ordinary
   rounded corners. */
.state-name{min-width:0;overflow-wrap:break-word;white-space:normal}
.state-item a{align-items:flex-start;border-radius:12px}

/* Phone number shown as a value rather than a link word. */
.big-phone{font-weight:800;font-size:1.06rem;letter-spacing:.01em}

/* Wrappers that only need their children spaced. */
.faq{margin-top:6px}
.intro{margin:0}
.faq-section{padding-top:44px}
.nt-label{font-size:.92rem;line-height:1}

/* Reviews stay hidden while reviews_enabled is false, but the section and its
   empty-state text are styled so enabling them is a one-line change. */
.section-reviews{padding-top:44px}
.reviews-empty{margin:0;font-size:.96rem;line-height:1.65;color:#4b5563}

/* Error page panel. */
.errwrap{max-width:600px;margin:72px auto;padding:34px 28px;background:#fff;border:1px solid #e5e7eb;border-radius:16px;text-align:center}

/* Section modifiers that tighten the first block under the navigation. */
.section.service-page,.section.contact-page{padding-top:40px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .service-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
  .service-split,.city-split,.contact-split{grid-template-columns:1fr;gap:28px}
  .service-photo{position:static}
  .city-photo{order:-1}
  .signs-wide{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr;gap:30px}
}
@media (max-width:860px){
  .hero-split{grid-template-columns:1fr !important;gap:26px !important}
  .intro-split{grid-template-columns:1fr !important;gap:22px !important}
  .intro-photo{order:-1}
  .signs-split{grid-template-columns:1fr;gap:26px}
  .signs-photo{order:-1}
  .service-grid{grid-template-columns:1fr 1fr !important}
  .state-grid{grid-template-columns:repeat(2,1fr)}
  .tap-to-call{display:block}
  body{padding-bottom:76px}

  /* The nav becomes a panel under the button. It sits in normal flow rather
     than being positioned, so it cannot end up drawn off screen or behind the
     hero on any browser: the row simply wraps and the page moves down. */
  .nav-inner{flex-wrap:wrap;gap:12px}
  .nav-toggle{display:inline-flex}
  .nav-list{display:none;flex:1 1 100%;order:3;flex-direction:column;align-items:stretch;gap:4px;margin:0;padding:10px 0 2px}
  .nav-open .nav-list{display:flex}
  .nav-list a{display:block;padding:13px 12px;border-radius:10px;background:rgba(15,23,42,.04)}
  .nav-call{margin-left:auto}
  .brand-homerestorationco .nav-list a{border-radius:10px;background:#fff;border-left:0;box-shadow:none}
  .brand-homerestorationco .nav-list a[aria-current="page"]{box-shadow:none;background:#eef1f7;color:var(--navy)}
}
@media (max-width:700px){
  .topbar-mail{display:none}
}
@media (max-width:560px){
  .service-grid{grid-template-columns:1fr !important}
  .state-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}

  /* The logo and the phone button cannot share one 390px row: the wordmark
     alone is wider than what is left over. Stacking them keeps the page from
     overflowing sideways, which is what clipped every heading on a phone. */
  .topbar-inner{flex-wrap:wrap;gap:10px}
  .brand{flex:1 1 100%}
  .brand-logo{height:36px}
  .topbar-actions{flex:1 1 100%;justify-content:space-between}
  .brand-houseworkspro .topbar-phone{flex:1 1 auto;justify-content:center}
  .brand-homerestorationco .topbar-phone{flex:1 1 auto;justify-content:center}
  .nav-call{padding:10px 15px}
  .topbar-phone .tp-label{display:none}
  .topbar-phone{padding:8px 13px}
  .brand-houseworkspro .hero h1{font-size:1.85rem}
  .brand-homerestorationco .hero h1{font-size:2.1rem}
  .band-cta-btns{flex-direction:column;align-items:stretch}
  .band-cta-btns .btn{width:100%}
}

/* ==========================================================================
   OVERFLOW GUARD
   A grid track sized `1fr` still has an automatic minimum of its content, so
   one wide child (a select whose longest option is a full sentence, or a long
   unbroken word) stretched the whole page past the phone screen and clipped
   every heading on the right. An explicit min-width on the children removes
   that automatic minimum. Keep this last so nothing reintroduces it.
   ========================================================================== */
.hero-split,.intro-split,.signs-split,.service-split,.city-split,.about-split,
.contact-split,.map-wrap,.service-grid,.why-grid,.steps,.state-grid,.foot-grid,
.hero-copy,.intro-copy,.signs-copy,.service-copy,.city-copy,.about-copy,
.contact-card,.contact-form,.lead-form{min-width:0}
.hero-split>*,.intro-split>*,.signs-split>*,.service-split>*,.city-split>*,
.about-split>*,.contact-split>*,.map-wrap>*{min-width:0}
.lead-form select,.lead-form input,.lead-form textarea{min-width:0;max-width:100%}