/* Matthews NC Expert Plumbers. Design identity from the supplied D44 template:
   Libre Baskerville headings/body, Source Sans 3 UI, blue/green accents, bracketed buttons. */
:root{--bg:#FDFDFD;--hero:#F0F4F8;--blue:#1A4D8F;--blue-dark:#123766;--green:#2E7D32;--orange:#E65100;--caption:#555555;--border:#CCCCCC;--text:#111111;--maxw:960px;
--serif:'Libre Baskerville',Georgia,'Times New Roman',serif;--sans:'Source Sans 3','Segoe UI',Arial,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--serif);color:var(--text);background:var(--bg);line-height:1.8;font-size:16px}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue)}
.skip-link{position:absolute;left:-999px;top:0;z-index:300;background:var(--blue);color:#fff;padding:.6rem 1rem;font-weight:700;text-decoration:none;font-family:var(--sans)}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

/* Masthead and logo placeholder (asset drops in later without structural change) */
.masthead{background:#fff;border-bottom:1px solid var(--border)}
.masthead-in{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1.25rem}
.brand{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--serif);font-weight:700;font-size:1.05rem;line-height:1.3;color:var(--text);text-decoration:none;min-width:0}
.brand-name span{color:var(--blue)}
.brand-logo{flex:0 0 auto;width:44px;height:44px;border-radius:4px;background:linear-gradient(135deg,#e8eef5,#cfdbe9);border:1px solid var(--border);display:block;overflow:hidden}
.brand-logo img{width:100%;height:100%;object-fit:contain}
.masthead-tag{font-size:.8rem;font-family:var(--sans);color:var(--caption);text-align:right}

/* Navigation */
.nav{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
.nav-in{max-width:var(--maxw);margin:0 auto;display:flex;align-items:stretch;padding:0 1.25rem}
.nav-toggle{display:none}
.nav-list{list-style:none;margin:0;padding:0;display:flex;flex:1;align-items:stretch}
.nav-item{position:relative;display:flex}
.nav-link{display:inline-flex;align-items:center;gap:.3rem;padding:.75rem .85rem;color:var(--text);text-decoration:none;font-size:.8rem;font-weight:400;font-family:var(--sans);text-transform:uppercase;letter-spacing:.03em;border:0;background:none;cursor:pointer;min-height:44px}
.nav-link:hover,.nav-link[aria-current="page"]{color:var(--blue)}
.nav-link[aria-current="page"]{text-decoration:underline;text-underline-offset:6px}
.nav-caret{font-size:.7rem}
.dropdown{position:absolute;top:100%;left:0;z-index:120;background:#fff;border:1px solid var(--border);border-top:2px solid var(--blue);padding:.4rem;display:none;box-shadow:0 8px 20px rgba(0,0,0,.08)}
.dropdown-services{width:min(580px,92vw);grid-template-columns:1fr 1fr;gap:0 .3rem}
.dropdown-areas{width:min(300px,92vw)}
.nav-item.open>.dropdown{display:block}
.nav-item.open>.dropdown-services{display:grid}
.dropdown a{display:block;padding:.5rem .65rem;color:var(--text);text-decoration:none;font-size:.9rem;line-height:1.35;font-family:var(--sans)}
.dropdown a:hover{background:var(--hero);color:var(--blue)}
.dropdown a.view-all{font-weight:700;color:var(--blue);border-top:1px solid var(--border);margin-top:.3rem}
.dropdown-services a.view-all{grid-column:1 / -1}
.nav-phone{margin-left:auto;align-self:center;display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1rem;min-height:44px;background:var(--blue);color:#fff;text-decoration:none;font-family:var(--sans);font-size:.95rem;white-space:nowrap}
.nav-phone:hover{background:var(--blue-dark)}
.nav-overlay{display:none}

/* Layout */
.container{max-width:var(--maxw);margin:0 auto;padding:0 1.25rem}
.section{padding:2.8rem 0}
.band{background:var(--hero)}
.hero{background:var(--hero);padding:3rem 0 2rem}
.eyebrow{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--caption);font-family:var(--sans);margin:0 0 .5rem}
h1{font-family:var(--serif);font-weight:700;font-size:34px;line-height:1.4;margin:0 0 1rem;color:var(--text);max-width:24ch}
h2{font-family:var(--serif);font-weight:700;font-size:1.4rem;line-height:1.4;color:var(--text);margin:0 0 .9rem;max-width:30em}
h3{font-family:var(--serif);font-weight:700;font-size:1rem;line-height:1.5;margin:0 0 .5rem;color:var(--text)}
p{margin:0 0 1.2rem;max-width:680px}
.lede{font-size:1.02rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;margin:1.4rem 0 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.7rem 1.3rem;text-decoration:none;font-weight:400;min-height:44px;border:1px solid var(--text);font-family:var(--sans);font-size:.95rem;line-height:1.2}
.btn::before{content:"["}
.btn::after{content:"]"}
.btn-accent{background:var(--text);color:#fff}
.btn-accent:hover{background:#2a2a2a}
.btn-ghost{background:transparent;color:var(--text)}
.btn-ghost:hover{background:#fff}
.inline-cta{margin:1.6rem 0 0;padding:1.1rem 1.25rem;border:1px solid var(--border);border-left:3px solid var(--green);background:#fff}
.inline-cta p{margin:0 0 .8rem;font-size:.95rem}
.inline-cta .btn{margin:0}

/* Content components */
.steps{margin:0 0 1.4rem;padding:0;list-style:none;counter-reset:s;max-width:680px}
.steps li{counter-increment:s;position:relative;padding:0 0 .9rem 2.4rem;margin:0}
.steps li::before{content:counter(s);position:absolute;left:0;top:.1rem;width:1.7rem;height:1.7rem;border:1px solid var(--blue);color:var(--blue);font-family:var(--sans);font-size:.85rem;line-height:1.6rem;text-align:center}
.steps strong{font-family:var(--sans);font-weight:700}
.grid{display:grid;gap:1.6rem}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{border-left:2px solid var(--blue);padding:0 0 0 1rem;min-width:0}
.card h3 a{color:var(--text);text-decoration:none}
.card h3 a:hover{color:var(--blue);text-decoration:underline}
.card p{font-size:.92rem;margin:0}
.table-wrap{max-width:100%;overflow-x:auto;margin:1.2rem 0 1.4rem}
.compare-table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:.92rem;line-height:1.5}
.compare-table caption{text-align:left;font-weight:700;padding:0 0 .5rem;font-size:.9rem;color:var(--caption)}
.compare-table th,.compare-table td{border:1px solid var(--border);padding:.65rem .8rem;text-align:left;vertical-align:top;background:#fff}
.compare-table th{background:var(--hero);font-weight:700}
.source-note{font-family:var(--sans);font-size:.85rem;color:var(--caption);max-width:680px}
.source-note a{color:var(--blue)}

/* Image slots (placeholders until the image stage) */
.image-slot{margin:1.6rem auto;width:100%;aspect-ratio:var(--slot-ratio,3/2);max-width:var(--slot-max,800px);background:linear-gradient(135deg,#f3f4f6,#e0e5ec);border:1px solid #d9dee6;border-radius:4px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.image-slot-label{padding:1rem;text-align:center;color:#4b5563;font-family:var(--sans);font-size:.88rem}

/* Map embed */
.map-wrap{position:relative;width:100%;max-width:100%;aspect-ratio:16/10;border:1px solid var(--border);background:var(--hero);margin:1.2rem 0}
.map-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Area lists */
.area-cols{columns:2;column-gap:2rem}
.area-cols ul,.link-list{list-style:none;margin:0;padding:0}
.area-cols li{break-inside:avoid;margin:0 0 .15rem}
.area-cols a,.link-list a{display:inline-block;padding:.3rem 0;color:var(--blue);font-size:.95rem;font-family:var(--sans)}
.cta-band{background:#fff;border-top:2px solid var(--text)}

/* Footer */
.site-footer{background:var(--hero);color:var(--text)}
.site-footer .container{padding-top:2.4rem;padding-bottom:1.6rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:1.6rem;font-family:var(--sans)}
.footer-grid>div{min-width:0}
.footer-brand .brand{color:var(--text);margin-bottom:.6rem}
.footer-brand p{font-size:.9rem;line-height:1.6;margin:0 0 .5rem;color:#333}
.site-footer h3{color:var(--blue);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;font-family:var(--sans)}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:0}
.site-footer a{color:#333;text-decoration:none;font-size:.9rem;display:inline-block;padding:.3rem 0}
.site-footer a:hover{color:var(--blue);text-decoration:underline}
.footer-phone{font-weight:700}
.footer-legal{border-top:1px solid var(--border);margin-top:1.4rem;padding-top:1rem;font-family:var(--sans)}
.footer-legal p{font-size:.85rem;line-height:1.6;color:#333;max-width:none;margin:0}

/* Mobile sticky call bar */
.sticky-cta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--blue)}
.sticky-cta a{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.6rem;color:#fff;text-decoration:none;font-family:var(--sans);font-size:1rem}

@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  h1{font-size:25px;max-width:none}
  h2{font-size:1.25rem}
  .masthead-tag{display:none}
  .brand{font-size:.98rem}
  .nav-in{flex-wrap:wrap;padding:0 1.25rem;align-items:center}
  .nav-toggle{display:inline-flex;align-items:center;gap:.5rem;background:none;border:0;color:var(--text);font-family:var(--sans);font-size:.95rem;padding:.5rem 0;min-height:48px;cursor:pointer}
  .nav-phone{padding:.5rem .8rem;font-size:.9rem}
  .nav-list{display:none;flex-direction:column;flex:0 0 100%;order:3;max-height:calc(100vh - 260px);max-height:calc(100dvh - 260px);overflow-y:auto;border-top:1px solid var(--border);margin:0 -1.25rem;padding:0 1.25rem .5rem;background:#fff}
  .nav-list.open{display:flex}
  .nav-item{flex-direction:column}
  .nav-link{width:100%;justify-content:space-between;padding:.8rem 0;border-bottom:1px solid #e6e6e6}
  .dropdown,.dropdown-services,.dropdown-areas{position:static;width:auto;border:0;border-left:2px solid var(--blue);box-shadow:none;padding:.2rem 0 .4rem .6rem;margin:0 0 .4rem}
  .nav-item.open>.dropdown-services{display:block}
  .nav-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:95}
  .nav-overlay.show{display:block}
  .nav-list{position:relative;z-index:101}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .area-cols{columns:1}
  .footer-grid{grid-template-columns:1fr}
  .sticky-cta{display:block}
  body{padding-bottom:56px}
  .hero{padding:2rem 0 1.5rem}
  .section{padding:2.2rem 0}
  .compare-table{font-size:.88rem}
  .compare-table th,.compare-table td{padding:.55rem .6rem}
}

/* Inner pages */
.crumbs{font-family:var(--sans);font-size:.88rem;padding-top:1rem;padding-bottom:.2rem;color:var(--caption)}
.crumbs a{color:var(--blue);text-decoration:none;display:inline-block;padding:.35rem 0}
.crumbs a:hover{text-decoration:underline}
.bullets{max-width:680px;margin:0 0 1.3rem;padding-left:1.2rem}
.bullets li{margin:0 0 .45rem}
.hero .crumbs{padding-left:0}
.dropdown a[aria-current="page"]{color:var(--blue);font-weight:700}

/* Hub: ZIP chips, coverage map, area lists */
.zip-chips{list-style:none;margin:1rem 0;padding:0;display:flex;flex-wrap:wrap;gap:.7rem}
.zip-chip{display:inline-block;padding:.45rem 1.1rem;border:2px solid var(--blue);background:#fff;color:var(--blue-dark);font-family:var(--sans);font-weight:700;font-size:1.15rem;letter-spacing:.04em}
.cov-map{margin:1.4rem 0;max-width:620px}
.cov-map svg{width:100%;height:auto;display:block;border:1px solid var(--border)}
.cov-map .bg{fill:var(--hero)}
.cov-map .g{stroke:var(--border);stroke-width:1}
.cov-map .gl{fill:var(--caption);font:12px var(--sans)}
.cov-map .pin{fill:var(--blue);stroke:#fff;stroke-width:2}
.cov-map .pin.hq{fill:var(--orange)}
.cov-map .pl{fill:var(--text);font:700 15px var(--sans);paint-order:stroke;stroke:var(--hero);stroke-width:4px}
.cov-map figcaption{margin-top:.5rem;font-size:.85rem;color:var(--caption);font-family:var(--sans)}
.area-detail{list-style:none;margin:1rem 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.6rem}
.area-detail li{padding:.9rem 1rem;border:1px solid var(--border);background:#fff}
@media(max-width:640px){.area-detail{grid-template-columns:1fr}}

.hub-module{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;align-items:start}
.hub-module .area-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.hub-module ul{padding-left:1.1rem;margin:.4rem 0 1rem}
.hub-module h3{font-size:1.05rem;margin:1rem 0 .3rem}
.cov-map .hit{fill:transparent}
.cov-map a{cursor:pointer}
.cov-map a:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.cov-map a:hover .pin,.cov-map a:focus-visible .pin{stroke:var(--orange);stroke-width:3}
.map-note{font-size:.9rem;color:var(--caption)}
@media(max-width:767px){.hub-module{grid-template-columns:1fr}}

/* stage 2: logo */
.brand .brand-logo-img{display:block;height:76px;width:auto;max-width:100%;object-fit:contain}
.footer-brand .brand .brand-logo-img{height:88px}
@media(max-width:600px){.brand .brand-logo-img{height:56px}.footer-brand .brand .brand-logo-img{height:72px}}
/* stage 2: content images */
.s2-fig{margin:1.8rem auto;max-width:min(100%,var(--s2w,860px))}
.s2-fig img{display:block;width:100%;height:auto;border-radius:4px}
.s2-fig figcaption{margin-top:.5rem;font-size:.88rem;line-height:1.45;color:var(--caption);font-family:var(--sans)}
.s2-fig.s2-l{margin-left:0;margin-right:auto;max-width:min(100%,var(--s2w,860px),720px)}
.s2-fig.s2-r{margin-left:auto;margin-right:0;max-width:min(100%,var(--s2w,860px),720px)}
.s2-fig.s2-hero{max-width:1200px;margin:1.4rem 0 0}
.s2-fig.s2-hero img{aspect-ratio:16/9;object-fit:cover;max-height:560px}
@media(max-width:600px){.s2-fig.s2-hero img{aspect-ratio:4/3}}