/* Plumbing Lancaster PA - Concept A "Copper Flow", extracted from final approved mockup */
/* Barlow self-hosted (speed pass 2026-11-02): same family/weights as the
   previous Google Fonts stylesheet, latin subset, font-display: swap. */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/barlow-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/barlow-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/barlow-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/barlow-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/barlow-800.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Metric-matched local fallback (measured from the Barlow woff2 files):
   keeps text geometry stable while Barlow loads, so the font swap causes
   no layout shift. Final Barlow rendering is unchanged. */
@font-face{font-family:'Barlow Fallback';src:local('Arial'),local('Helvetica Neue'),local('Liberation Sans'),local('Roboto');size-adjust:93%;ascent-override:100%;descent-override:20%;line-gap-override:0%}
:root{--p:#0B3B3C;--a:#E08A3C;--onA:#ffffff;--bg:#ffffff;--soft:#EFF5F3;--ink:#12262A;--mut:#54666B;--radius:14px;--bf:"Barlow","Barlow Fallback",sans-serif;--hf:"Barlow","Barlow Fallback",sans-serif}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--bf);font-size:17px;-webkit-text-size-adjust:100%}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--hf);margin:0;line-height:1.14}
p{margin:0;line-height:1.55}
.inner{max-width:1020px;margin:0 auto;padding:0 22px;width:100%}
.skip{position:absolute;left:-9999px;top:0;background:var(--p);color:#fff;padding:10px 16px;z-index:99}
.skip:focus{left:8px;top:8px}

/* header (mockup .m-head) */
.m-head{background:var(--p);color:#fff;position:relative;z-index:20}
.m-head-row{display:flex;align-items:center;gap:14px;padding:13px 22px;max-width:1020px;margin:0 auto}
.logo{display:flex;align-items:center;gap:11px;min-width:0;text-decoration:none}
.logo-mark{width:38px;height:38px;flex:none;border-radius:10px;background:transparent;display:block;overflow:hidden;line-height:0}
.logo-mark svg{width:100%;height:100%;display:block}
.logo-txt{line-height:1.08;min-width:0}
.logo-txt b{display:block;font-size:16.5px;font-family:var(--hf);white-space:nowrap}
.logo-txt small{font-size:11.5px;opacity:.82;white-space:nowrap}
.m-nav{display:flex;gap:20px;margin-left:auto}
.m-nav a{color:#fff;text-decoration:none;font-weight:600;font-size:14.5px;padding:10px 2px}
.head-call{margin-left:8px;flex:none;background:var(--a);color:var(--onA);text-decoration:none;font-weight:800;font-size:15px;padding:12px 16px;border-radius:10px;min-height:44px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.burger{display:none;margin-left:auto;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:10px;width:46px;height:46px;flex:none;align-items:center;justify-content:center;cursor:pointer}
.burger svg{width:22px;height:22px}
.mobile-nav{display:none;background:#fff;color:var(--ink);border-bottom:3px solid var(--a)}
.mobile-nav.open{display:block}
.mobile-nav a{display:flex;align-items:center;justify-content:space-between;padding:0 20px;min-height:50px;text-decoration:none;font-weight:700;font-size:15.5px;border-top:1px solid #e4e9ea;color:var(--ink)}
.mobile-nav a:first-child{border-top:0}
.mn-group{border-top:1px solid #e4e9ea}
.mn-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 20px;min-height:50px;background:#fff;border:0;font-family:inherit;font-weight:700;font-size:15.5px;color:var(--ink);text-align:left;cursor:pointer}
.mn-chev{font-size:22px;line-height:1;color:var(--a);font-weight:800;transition:transform .18s ease;flex:none}
.mn-toggle[aria-expanded="true"] .mn-chev{transform:rotate(90deg)}
.mn-sub{background:var(--soft);border-top:1px solid #e4e9ea;max-height:300px;overflow-y:auto}
.mn-sub a{display:flex;align-items:center;padding:0 20px 0 28px;min-height:44px;font-size:14.5px;font-weight:600;border-top:1px solid rgba(20,40,45,.06);color:var(--ink)}
.mn-sub a:first-child{border-top:0}
.mn-sub span.mn-town{display:flex;align-items:center;padding:0 20px 0 28px;min-height:44px;font-size:14.5px;font-weight:600;border-top:1px solid rgba(20,40,45,.06);color:var(--mut)}
.mn-sub span.mn-town:first-child{border-top:0}

/* hero (mockup .hero) */
.hero{background:var(--soft)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center;padding:44px 0}
.hero h1{font-size:39px;font-weight:800;letter-spacing:-.01em}
.hero .lead{margin-top:14px;font-size:16.5px;color:var(--mut);max-width:52ch}
.hero .lead strong{color:var(--ink)}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.btn-call{background:var(--a);color:var(--onA);text-decoration:none;font-weight:800;padding:14px 20px;border-radius:11px;min-height:48px;display:inline-flex;align-items:center;gap:9px;font-size:16px}
.btn-ghost{background:transparent;border:2px solid var(--p);color:var(--p);text-decoration:none;font-weight:700;padding:12px 18px;border-radius:11px;min-height:48px;display:inline-flex;align-items:center;font-size:15.5px}
.hero-img{border-radius:var(--radius);overflow:hidden;align-self:center;width:100%}
.hero-img img{width:100%;height:auto;display:block;object-fit:cover;object-position:center;aspect-ratio:16/10;max-height:360px}
.hero-points{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:20px;font-size:14px;font-weight:600;color:var(--p)}
.hero-points span{display:inline-flex;gap:7px;align-items:center}
.tick{width:18px;height:18px;flex:none;border-radius:50%;background:var(--a);color:var(--onA);display:inline-grid;place-items:center;font-size:11px;font-weight:900}

/* trust strip (contained band, Ravi 2026-11-02: dark background runs only
   between the container content edges, as a card inside .inner, not full-bleed) */
.trust{color:#fff}
.trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:44px 22px;background:var(--p);border-radius:0}
.trust-item{font-size:14px;line-height:1.4}
.trust-item b{display:block;font-size:15px;font-family:var(--hf);margin-bottom:2px}
.trust-item span{opacity:.85}

/* sections */
.sec{padding:44px 0}
.sec.alt{background:var(--soft)}
.sec h2{font-size:27px;font-weight:800;margin-bottom:14px;scroll-margin-top:118px}
.sec h3{font-size:19px;font-weight:700;margin:20px 0 8px}
.sec .answer,.sec .body p{font-size:17.5px;line-height:1.72;color:var(--mut);max-width:72ch}
.sec .answer strong,.sec .body p strong{color:var(--ink)}
.sec .body p{margin-bottom:14px}
.sec .body p:last-child{margin-bottom:0}
.sec .body ul,.sec .body ol{margin:0 0 14px;padding-left:20px;color:var(--mut);font-size:17px;line-height:1.68}
.sec .body li{margin-bottom:5px}
.sec .body li strong{color:var(--ink)}
.sec .body a{color:var(--p);font-weight:700}
.sec .body > :first-child{margin-top:0}
.sec .body > :last-child{margin-bottom:0}
/* same-background stacking (Ravi 2026-11-02): where a white .sec directly
   follows another white .sec (TOC card section into the first article
   section, last article section into the FAQ section), the upper section's
   bottom padding already supplies the one standard gap, so the lower
   section adds no top padding and the painted gap totals 44/36, not 88/72.
   Colour-edge boundaries are untouched: a .alt section on either side
   keeps its full top and bottom padding. */
main .sec:not(.alt) + .sec:not(.alt){padding-top:0}
.byline{font-size:13px;color:var(--mut);padding:0;font-weight:600}
/* byline rhythm (Ravi 2026-11-02): where the byline directly follows the trust
   strip or the hero, give it the standard section gap above; where it follows
   the glance card the wrap padding already supplies the same gap, so no rule. */
.trust + .inner:has(> .byline),.hero + .inner:has(> .byline){padding-top:44px}
.crumbs{font-size:13.5px;color:var(--mut);padding:16px 0 0;font-weight:600}
.crumbs a{color:var(--mut);text-decoration:none}
.crumbs b{color:var(--ink)}
.toc{background:#fff;border:1px solid #e0e7e5;border-radius:var(--radius);padding:18px 20px;margin-top:0}
.toc h2{font-size:17px;margin-bottom:8px}
.toc ol{margin:0;padding-left:20px;line-height:1.7;font-size:15px}
.toc a{color:var(--p);font-weight:600;text-decoration:none}
/* readability pass: at-a-glance card, sticky TOC strip, callouts, process + comparison components */
.glance-wrap{padding:44px 0}
.glance{background:#fff;border:1.5px solid #d8e4e0;border-top:5px solid var(--a);border-radius:var(--radius);padding:20px 22px;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;box-shadow:0 10px 28px rgba(11,59,60,.07)}
.glance h2{font-size:20px;margin-bottom:10px}
.glance-points{display:flex;flex-wrap:wrap;gap:9px 12px}
.glance-points span{display:inline-flex;align-items:center;gap:8px;background:var(--soft);color:var(--p);font-weight:700;font-size:14.5px;line-height:1.35;border-radius:999px;padding:8px 12px}
.toc-sticky{background:#fff;border:1px solid #d8e4e0;border-radius:var(--radius);padding:16px 18px;margin-top:0;box-shadow:0 8px 22px rgba(11,59,60,.06)}
.toc-sticky h2{display:block;font-size:14px;letter-spacing:.02em;margin:0 0 8px;color:var(--p)}
.toc-sticky ol{margin:0;padding:0;list-style:none}
.toc-sticky li{display:block}
.toc-sticky a{display:block;color:var(--p);font-weight:650;font-size:13.5px;line-height:1.4;text-decoration:none;padding:7px 8px;border-radius:9px}
.toc-sticky a:hover{background:var(--soft)}
@media (min-width:900px){
  .article-shell{max-width:1020px;margin:0 auto;padding:0 22px;display:grid;grid-template-columns:205px minmax(0,1fr);gap:24px;align-items:start}
  .article-shell .toc-aside{position:sticky;top:16px;padding-top:44px}
  .article-shell .toc-aside .inner{max-width:none;margin:0;padding:0}
  .article-shell .toc-sticky{margin-top:0}
  .article-main{min-width:0}
  .article-main .sec{padding-left:20px;padding-right:20px}
  .article-main .inner{max-width:none;margin:0;padding:0}
  .article-main .split{grid-template-columns:1fr}
  .article-main .svc-grid{grid-template-columns:repeat(2,1fr)}
}
.toc-aside{padding-top:44px}
.callout{background:#e7f1ed;border-left:5px solid var(--a);border-radius:0 var(--radius) var(--radius) 0;padding:18px 20px;margin:0 0 16px;max-width:72ch}
.callout p{margin:0!important}
.process-rows{display:grid;gap:12px;margin:4px 0 16px;counter-reset:step}
.process-row{position:relative;background:#fff;border:1px solid #dfe8e4;border-radius:var(--radius);padding:17px 18px 17px 62px;min-width:0}
.process-row::before{counter-increment:step;content:counter(step);position:absolute;left:17px;top:17px;width:32px;height:32px;border-radius:50%;background:var(--p);color:#fff;display:grid;place-items:center;font-weight:800;font-size:16px}
.process-row p{margin:0!important}
.process-row h3{margin:0 0 6px!important}
.compare-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin:4px 0 16px}
.compare-card{background:#fff;border:1px solid #dfe8e4;border-radius:var(--radius);padding:18px;min-width:0}
.compare-card h3{margin:0 0 8px!important;color:var(--p)}
.compare-card p{margin:0!important}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 16px}
.info-card{background:#fff;border:1px solid #e0e7e5;border-radius:12px;padding:14px 16px;font-size:15.5px;line-height:1.55;color:var(--mut);min-width:0}
.info-card strong{color:var(--ink)}

/* split rows (mockup .split, landscape 16:10 capped, centred text) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.split>div{align-self:center;min-width:0}
.split img{border-radius:var(--radius);aspect-ratio:16/10;object-fit:cover;object-position:center;width:100%;height:auto;max-height:320px;align-self:center;display:block}

/* services cards (mockup Concept A grid) */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:22px}
.svc-card{background:#fff;border:1px solid #e0e7e5;border-radius:var(--radius);padding:16px;min-width:0}
.sec.alt .svc-card{border-color:#dde6e3}
.svc-card h3{font-size:16.5px;margin:8px 0 5px}
.svc-card p{font-size:14px;color:var(--mut)}
.svc-card a{text-decoration:none}
.svc-ic{width:36px;height:36px;border-radius:9px;background:var(--soft);color:var(--p);display:grid;place-items:center}
.sec.alt .svc-ic{background:#fff}
.svc-ic svg{width:20px;height:20px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:22px}
.step{background:#fff;border:1px solid #e0e7e5;border-radius:var(--radius);padding:18px;min-width:0}
.step .n{width:32px;height:32px;border-radius:50%;background:var(--p);color:#fff;display:grid;place-items:center;font-weight:800;margin-bottom:10px}
.step h3{font-size:16.5px;margin-bottom:5px}
.step p{font-size:14px;color:var(--mut)}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chip{border:1.5px solid var(--p);color:var(--p);border-radius:999px;padding:8px 14px;font-weight:700;font-size:14px;background:#fff;white-space:nowrap;text-decoration:none}
.chip.more{border-style:dashed;color:var(--mut)}

/* signs / factors / vs (mockup drain page) */
.signs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 16px}
.sign{background:#fff;border:1px solid #e0e7e5;border-radius:12px;padding:14px 16px;font-size:15.5px;line-height:1.5;font-weight:600;display:flex;gap:10px;align-items:flex-start;min-width:0}
.sign::before{content:"\2713";width:21px;height:21px;flex:none;border-radius:50%;background:var(--a);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:900;line-height:1;margin-top:1px}
.sec.alt .sign{background:#fff}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:20px}
.vs-card{border-radius:var(--radius);padding:20px;min-width:0}
.vs-card.a1{background:var(--p);color:#fff}
.vs-card.a2{background:#fff;border:2px solid var(--a);color:var(--ink)}
.vs-card h3{font-size:18px;margin-bottom:8px}
.vs-card ul{margin:10px 0 0;padding-left:18px;line-height:1.65;font-size:15.5px}
.vs-card p{font-size:15.5px;line-height:1.65;opacity:.92}
.vs-card.a1 p,.vs-card.a1 ul,.vs-card.a1 li{color:#e8f1ee}
.factor-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:13px;margin:4px 0 16px}
.factor{background:#fff;border:1px solid #e0e7e5;border-radius:var(--radius);padding:17px;min-width:0}
.factor h3{font-size:16px;margin:0 0 5px!important}
.factor p{font-size:15px;line-height:1.6;color:var(--mut);margin:0!important}

/* call panel (mockup .cost-band pattern) */
.call-panel{background:var(--p);color:#fff;border-radius:var(--radius);padding:26px;margin-top:0}
.call-panel h2{color:#fff;font-size:24px}
.call-panel p{color:#dbe9e4;max-width:64ch;margin-top:6px}
.call-panel .btn-call{margin-top:16px}

/* faq */
.faq-list{margin-top:18px;display:grid;gap:10px}
.faq-list details{background:#fff;border:1px solid #e0e7e5;border-radius:12px;padding:0 16px}
.faq-list summary{font-weight:700;font-size:15.5px;padding:15px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center;min-height:44px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font-size:20px;color:var(--a);font-weight:800;flex:none}
.faq-list details[open] summary::after{content:"-"}
.faq-list details p{padding:0 0 16px;color:var(--mut);font-size:15.5px;line-height:1.65}
.faq-list details a{color:var(--p);font-weight:700}

/* cta band + footer */
.cta-band{background:var(--a);color:var(--onA)}
.cta-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;padding:44px 0}
.cta-row h2{font-size:24px;color:inherit}
.cta-row p{opacity:.94;font-size:15px;margin-top:4px}
.cta-row .btn-call{background:#fff;color:var(--p)}
.m-foot{background:var(--p);color:#e8efee;padding-top:44px}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:22px;padding:0 0 8px}
.m-foot h3{color:#fff;font-size:16px;margin-bottom:10px}
.m-foot p,.m-foot li{font-size:13.5px;line-height:1.6;opacity:.9}
.m-foot ul{margin:0;padding:0;list-style:none}
.m-foot li{padding:3px 0}
.m-foot a{color:#e8efee;text-decoration:none}
.foot-disc{border-top:1px solid rgba(255,255,255,.22);margin-top:20px;padding:16px 0 22px;font-size:12.5px;line-height:1.6;opacity:.85}
.foot-brand{display:flex;align-items:center;gap:10px;margin-bottom:10px}

/* sticky mobile call bar (mockup final: Call number + Services tab only) */
.sticky-bar{display:none}
@media (max-width:760px){
  body{padding-bottom:68px}
  .sticky-bar{display:flex;flex-direction:row;align-items:stretch;gap:8px;background:var(--p);padding:10px 12px calc(10px + env(safe-area-inset-bottom));position:fixed;left:0;right:0;bottom:0;z-index:60;box-shadow:0 -6px 16px rgba(10,25,35,.18)}
  .sticky-bar a{text-align:center;text-decoration:none;font-weight:800;border-radius:10px;min-height:48px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:15.5px;flex:1 1 auto;min-width:0;white-space:nowrap}
  .sticky-bar .sb-call{background:var(--a);color:var(--onA)}
  .sticky-bar .sb-services{flex:0 0 auto;background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.55);color:#fff;font-weight:800;font-size:15px;border-radius:10px;min-height:48px;padding:0 18px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:inherit}
  .inner{padding:0 16px}
  .m-head-row{flex-wrap:nowrap;row-gap:0;gap:8px;padding:11px 12px}
  .m-nav{display:none}
  .burger{display:inline-flex;order:3;margin-left:0;width:44px;height:44px}
  .logo{order:1;flex:1 1 auto;min-width:0;gap:8px}
  .logo-mark{width:34px;height:34px;border-radius:9px}
  .logo-txt{overflow:hidden}
  .logo-txt small{display:none}
  .logo-txt b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .head-call{display:inline-flex;order:2;margin-left:auto;padding:10px 15px;font-size:14.5px;min-height:44px;border-radius:10px}
  .head-call .hc-num{display:none}
  .hero-grid{grid-template-columns:1fr;padding:36px 0;gap:20px}
  .hero h1{font-size:28px}
  .hero-img img{max-height:230px}
  .trust-row{grid-template-columns:1fr 1fr}
  .sec{padding:36px 0}
  .sec h2{font-size:22px;scroll-margin-top:20px}
  .sec .answer,.sec .body p{font-size:17px;line-height:1.7}
  .glance-wrap{padding:36px 0}
  .glance{grid-template-columns:1fr;padding:18px}
  .glance .btn-call{justify-content:center}
  .toc-sticky{margin-top:0}
  .toc-aside{padding-top:36px}
  .trust-row{padding:36px 18px}
  .trust + .inner:has(> .byline),.hero + .inner:has(> .byline){padding-top:36px}
  .cta-row{padding:36px 0}
  .m-foot{padding-top:36px}
  .toc-sticky a{padding:7px 4px}
  .compare-grid,.info-grid{grid-template-columns:1fr}
  .process-row{padding:15px 15px 15px 56px}
  .process-row::before{left:14px;top:15px}
  .svc-grid,.steps{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:18px}
  .split img{max-height:230px}
  .signs,.vs,.factor-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
}