/* Pro Pipes Plumbing. One shared stylesheet, built on the Lehigh kit (site-v2) grammar.
   Palette C, picked by Alex 7 Oct 2026: steel blue and copper. Steel blue #1E3A5F for the header, the hero, the dark bands
   and links; the footer a shade deeper at #16293F; text #16273D; copper #AD5D1D is the one filled button (white text on it),
   #C8742B draws the small marks and is never behind text, #E08A45 for ticks and icons on steel blue. Nothing that flashes.
   8 Oct: the accent went to Bryce's logo gray for a few hours and came back (Alex: "put the gray back to the brass"); the square
   in his lockup is now bright copper #C8742B to match (images/propipes-logo-reversed-copper.svg). */
:root{
  --pipe:#1E3A5F;       /* steel blue: the header, the hero band, the dark bands, links, outlines */
  --pipe-2:#172E4D;     /* darker steel blue: hover on a steel blue fill */
  --ink:#16273D;        /* text: body and headings */
  --ink-2:#10203A;
  --deep:#16293F;       /* the footer and the proof strip, one shade deeper than the steel blue */
  --slate:#5B6B80;      /* muted text, labels */
  --mist:#EEF2F6;       /* light band background */
  --mist-2:#DFE6EE;
  --brass:#C8742B;      /* bright copper: marks only (eyebrow bar, nav underline, stars, dots), never behind text */
  --brass-soft:#FBEFE4; /* soft copper: chips and soft highlights on white */
  --copper:#AD5D1D;     /* the button face, white text on it; copper text on white only at this value (4.82 to 1) */
  --copper-2:#8F4B15;   /* copper hover */
  --copper-light:#E08A45; /* ticks, the star and the phone icon on steel blue (4.32 to 1, icons need 3) */
  --line:rgba(91,107,128,.24);
  --white:#fff;
  --radius:6px;
  --gutter:clamp(16px,4vw,32px);
  --maxw:1240px;
  --display:Manrope,"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --body:"Source Sans 3","Source Sans Pro",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --header-h:92px;      /* 7 Oct: taller, so the 61px square sits with at least a quarter of its width of air above and below (74px on phones around the 49px square) */
  --veil:linear-gradient(100deg,rgba(30,58,95,.96) 0%,rgba(30,58,95,.86) 45%,rgba(22,44,74,.6) 100%);  /* the steel blue overlay on the hero photo; the hero and every sub page banner share it */
  --veil-m:linear-gradient(180deg,rgba(30,58,95,.94) 0%,rgba(22,44,74,.9) 100%);                        /* phones: darker, top to bottom */
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.6;overflow-x:hidden}
img,svg{max-width:100%}
img{height:auto;display:block}
a{color:var(--pipe);text-underline-offset:3px}
a:hover{color:var(--ink)}
p{margin:0 0 1em}
h1,h2,h3{font-family:var(--display);font-weight:800;color:var(--ink);margin:0 0 .5em;line-height:1.1;letter-spacing:-.012em;text-wrap:balance}
h1{font-size:clamp(2.1rem,4.8vw,3.6rem);line-height:1.06}
h2{font-size:clamp(1.65rem,3.2vw,2.5rem)}
h3{font-size:clamp(1.18rem,1.8vw,1.4rem);font-weight:700}
ul,ol{margin:0;padding:0}
address{font-style:normal}
[id]{scroll-margin-top:calc(var(--header-h) + 12px)}
:focus-visible{outline:3px solid var(--pipe);outline-offset:2px}
.band :focus-visible,.band-dark :focus-visible,.hero :focus-visible,.site-header :focus-visible,.proof :focus-visible{outline-color:var(--copper-light)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:8px;z-index:100;background:#fff;padding:8px 12px}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:62ch}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.section{padding:clamp(52px,7vw,96px) 0}
.section-tight{padding:clamp(36px,5vw,60px) 0}
.muted{color:var(--slate)}
.small{font-size:.9rem}
.nw{white-space:nowrap}
.nowrap{white-space:nowrap}
[hidden]{display:none!important}
.no-js .js-only{display:none}
.js .no-js-only{display:none}

/* labels (kickers) */
.label{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin:0 0 14px}
.label::before{content:"";width:22px;height:4px;background:var(--brass);border-radius:2px;flex:none}
.band .label,.band-dark .label,.hero .label{color:rgba(255,255,255,.82)}
.lead{font-size:clamp(1.08rem,1.4vw,1.22rem);line-height:1.55}
.sec-head{max-width:760px;margin-bottom:clamp(26px,4vw,40px)}
.sec-head .lead{text-wrap:pretty}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;border-radius:var(--radius);font-family:var(--body);font-weight:700;font-size:1.02rem;line-height:1.2;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s;text-align:center}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary{background:var(--copper);color:#fff;border-color:var(--copper)}
.btn-primary:hover{background:var(--copper-2);border-color:var(--copper-2);color:#fff}
.btn-outline{background:transparent;color:var(--pipe);border-color:var(--pipe)}
.btn-outline:hover{background:var(--pipe);color:#fff}
.btn-light{background:#fff;color:var(--pipe);border-color:#fff}
.btn-light:hover{background:var(--mist);border-color:var(--mist);color:var(--ink)}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.75)}
.btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
a[href^="tel:"]{white-space:nowrap}
a.bigcall,.btn[href^="tel:"]{white-space:normal}
.textlink{font-weight:700;color:var(--pipe)}
.band .textlink,.band-dark .textlink{color:#fff}

/* bands */
.band{background:var(--pipe);color:#fff}
.band-dark{background:var(--deep);color:rgba(255,255,255,.86)}
.band h1,.band h2,.band h3,.band-dark h2,.band-dark h3{color:#fff}
.band p,.band li{color:rgba(255,255,255,.9)}
.band a:not(.btn){color:#fff}
.mist{background:var(--mist)}

/* icons */
.ico{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--pipe);border-bottom:1px solid rgba(255,255,255,.14)}
.header-in{display:flex;align-items:center;gap:16px;min-height:var(--header-h)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;margin-right:auto;min-width:0}
.brand-badge{width:52px;height:52px;flex:none;border-radius:50%}
.brand-text{display:flex;flex-direction:column;min-width:0}
.brand-name{font-family:var(--display);font-weight:800;font-size:1.22rem;line-height:1.05;color:#fff;letter-spacing:-.01em}
.brand-place{font-family:var(--display);font-weight:700;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-top:4px}
.nav{display:none;gap:22px;align-items:center}
.nav a{color:#fff;text-decoration:none;font-weight:600;font-size:1rem;padding:10px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{color:#fff;border-bottom-color:var(--brass)}
.head-tel{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:700;text-decoration:none;white-space:nowrap;min-height:44px}
.head-tel:hover{color:var(--brass-soft)}
.head-tel .ico{color:var(--copper-light)}
.head-cta{min-height:46px;padding:0 20px;white-space:nowrap}
.menu{position:static}
.menu summary{list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1.5px solid rgba(255,255,255,.65);border-radius:var(--radius);font-weight:700;font-size:.95rem;cursor:pointer;color:#fff;user-select:none}
.menu summary::-webkit-details-marker{display:none}
.menu summary .bars{width:16px;height:10px;border-top:2px solid #fff;border-bottom:2px solid #fff;position:relative}
.menu summary .bars::after{content:"";position:absolute;left:0;right:0;top:2px;height:2px;background:#fff}
.menu[open] summary{background:#fff;border-color:#fff;color:var(--pipe)}
.menu[open] summary .bars{border-color:var(--pipe)}
.menu[open] summary .bars::after{background:var(--pipe)}
.menu-panel{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 18px 30px rgba(0,0,0,.08)}
.menu[open] .menu-panel{max-height:calc(100vh - var(--header-h));max-height:calc(100dvh - var(--header-h));overflow:auto}
.menu-panel a{display:block;padding:15px var(--gutter);border-top:1px solid var(--line);font-weight:600;font-size:1.05rem;color:var(--ink);text-decoration:none}
.menu-panel a[aria-current="page"]{box-shadow:inset 4px 0 0 var(--brass)}
.menu-panel a.tel{color:var(--pipe);font-weight:700}
.menu-panel a.go{background:var(--copper);color:#fff;font-weight:700}
@media (max-width:767px){
  :root{--header-h:74px}
  .brand-badge{width:46px;height:46px}
  .brand-name{font-size:1.02rem;max-width:9em}
  .brand-place{display:none}
  .head-tel{width:44px;height:44px;justify-content:center;border:1.5px solid rgba(255,255,255,.4);border-radius:50%}
  .head-tel span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .head-cta{display:none}
  .header-in{gap:10px}
}
@media (min-width:768px) and (max-width:1023px){
  .head-tel{width:44px;height:44px;justify-content:center;border:1.5px solid rgba(255,255,255,.4);border-radius:50%}
  .head-tel span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}
@media (min-width:1200px){.nav{display:flex}.menu{display:none}}
@media (min-width:1200px) and (max-width:1299px){.nav{gap:18px}.header-in{gap:14px}}

/* ---------- Google badge ---------- */
.gbadge{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--ink);text-decoration:none;border-radius:999px;padding:8px 14px 8px 10px;font-size:.95rem;font-weight:600;min-height:44px;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.gbadge:hover{color:var(--ink);box-shadow:0 4px 16px rgba(0,0,0,.2)}
.gbadge .g{width:20px;height:20px}
.gbadge .stars{display:inline-flex;gap:1px;color:var(--brass)}
.gbadge .stars svg{width:14px;height:14px;fill:currentColor}
.gbadge b{font-weight:800}

/* ---------- hero with the form beside it (home and the county pages) ---------- */
.hero{position:relative;background:var(--pipe);color:#fff;background-image:var(--veil),url(/images/hero-real-1600.jpg);background-size:cover;background-position:center right}
@media (min-width:1400px){.hero{background-image:var(--veil),url(/images/hero-real-2400.jpg)}}
@media (max-width:699px){.hero{background-image:var(--veil-m),url(/images/hero-real-1600.jpg)}}
/* the 4 county and 9 town pages (8 Oct 2026): their own photo, an aerial over a suburban neighborhood, so the home photo is on
   home only. Positioned low and to the right so the rooftops sit beside the copy and the hazy horizon is cropped off the top. */
.hero--area{background-image:var(--veil),url(/images/area-1600.jpg);background-position:right 78%}
@media (min-width:1400px){.hero--area{background-image:var(--veil),url(/images/area-2400.jpg)}}
@media (max-width:699px){.hero--area{background-image:var(--veil-m),url(/images/area-1600.jpg);background-position:68% center}}
.hero-grid{display:grid;gap:clamp(28px,4vw,56px);padding:clamp(28px,4vw,48px) 0 clamp(32px,4vw,52px);align-items:center}
@media (min-width:960px){.hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,460px)}}
.hero h1{color:#fff;margin-bottom:.35em;max-width:16ch}
.hero .lead{color:rgba(255,255,255,.9);max-width:52ch;margin-bottom:26px}
.hero .btn-row{margin-bottom:22px}
.hero-meta{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center}
.hero-call{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:#fff;font-weight:700;text-decoration:none}
.hero-call:hover{color:var(--brass-soft);text-decoration:underline}
@media (max-width:560px){.hero .btn-row .btn{flex:1 1 100%}}
@media (max-width:767px){.hero-grid{padding-top:30px;padding-bottom:36px}.hero .lead{margin-bottom:20px}}

/* the proof strip under the hero */
.proof{background:var(--deep);border-top:1px solid rgba(255,255,255,.14);color:#fff}
.proof ul{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.proof li{padding:18px 18px 18px 0;display:flex;flex-direction:column;gap:3px}
.proof li+li{padding-left:22px;border-left:1px solid rgba(255,255,255,.2)}
.proof b{font-family:var(--display);font-weight:800;font-size:1.22rem;color:#fff;line-height:1.15}
.proof span{font-family:var(--display);font-weight:700;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.72)}
@media (max-width:767px){
  .proof ul{grid-template-columns:1fr 1fr}
  .proof li,.proof li+li{padding:14px 12px;border-left:0}
  .proof li:nth-child(even){border-left:1px solid rgba(255,255,255,.2)}
  .proof li:nth-child(n+3){border-top:1px solid rgba(255,255,255,.2)}
  .proof b{font-size:1.06rem}
  .proof span{font-size:.7rem}
}

/* ---------- the form card (hero, county pages, contact) ---------- */
.form-card{background:#fff;color:var(--ink);border-radius:12px;padding:clamp(18px,2.4vw,24px);box-shadow:0 14px 40px rgba(22,39,61,.22)}
.form-card h2,.form-card h3{font-size:clamp(1.3rem,2vw,1.55rem);margin-bottom:6px;color:var(--ink)}
.form-card .form-intro{color:var(--slate);font-size:.95rem;margin-bottom:10px}
.form{display:grid;gap:10px}
.field-inline{flex-direction:row;align-items:center;gap:12px;flex-wrap:wrap}
.field-inline input[type=file]{flex:1;min-width:0;font-size:.9rem}
.field{display:flex;flex-direction:column;gap:4px;min-width:0;border:0;padding:0;margin:0}
.field>label{font-weight:700;font-size:.98rem;padding:0}
.opt{font-weight:400;color:var(--slate)}
.req{color:var(--copper)}
input[type=text],input[type=tel],input[type=email],input[type=number],select,textarea{width:100%;min-height:44px;padding:8px 12px;border:1.5px solid #8593A5;border-radius:var(--radius);background:#fff;font:inherit;font-size:1rem;color:var(--ink);-webkit-appearance:none;appearance:none}
textarea{min-height:auto;resize:vertical}
/* the only select (commercial call request, 8 Oct): appearance is off above, so it draws its own steel blue chevron */
select{padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231E3A5F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px;cursor:pointer}
input:focus,select:focus,textarea:focus{border-color:var(--pipe);outline:3px solid rgba(30,58,95,.22);outline-offset:0}
input[type=file]{font:inherit;font-size:.95rem;color:var(--ink);padding:6px 0}
input[type=file]::file-selector-button{font:inherit;font-weight:700;color:var(--pipe);background:#fff;border:1.5px solid var(--pipe);border-radius:var(--radius);padding:8px 14px;margin-right:12px;cursor:pointer}
.two{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:560px){.two{grid-template-columns:1fr 1fr}}
.field-msg{font-size:.88rem;color:var(--slate);margin:0}
.field-err{font-size:.95rem;color:#7a2b2b;font-weight:700;margin:0}
.field-err:empty{display:none}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.consent{display:flex;gap:8px;align-items:flex-start;font-size:.78rem;line-height:1.4;color:var(--slate);cursor:pointer}
.consent input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--pipe);flex:none}
.consent a{color:var(--pipe)}
.submit-row .btn{width:100%;min-height:54px;font-size:1.06rem}
.form-note{font-size:.92rem;color:var(--slate);margin:10px 0 0;text-align:center}
.form-card .btn-row.alt{margin-top:14px;justify-content:center}

/* ---------- inner page head band: the hero photo and veil on every sub page, shorter than the home hero ----------
   .pagehead sits after .band in this file on purpose: its background-image has to win over .band's shorthand. */
.pagehead{padding:clamp(40px,6vw,72px) 0 clamp(36px,5vw,60px);background-color:var(--pipe);background-image:var(--veil),url(/images/hero-real-1600.jpg);background-size:cover;background-position:center right}
@media (min-width:1400px){.pagehead{background-image:var(--veil),url(/images/hero-real-2400.jpg)}}
@media (max-width:699px){.pagehead{background-image:var(--veil-m),url(/images/hero-real-1600.jpg)}}
/* the service area hub (8 Oct 2026): the same aerial as the county and town heroes (.hero--area) */
.pagehead--area{background-image:var(--veil),url(/images/area-1600.jpg);background-position:right 78%}
@media (min-width:1400px){.pagehead--area{background-image:var(--veil),url(/images/area-2400.jpg)}}
@media (max-width:699px){.pagehead--area{background-image:var(--veil-m),url(/images/area-1600.jpg);background-position:68% center}}
/* sub pages other than the service areas carry the second photo (hands on a fitting under a sink, 30 Sep) */
.pagehead--work{background-image:var(--veil),url(/images/head-1600.jpg);background-position:center 40%}
@media (min-width:1400px){.pagehead--work{background-image:var(--veil),url(/images/head-2400.jpg)}}
@media (max-width:699px){.pagehead--work{background-image:var(--veil-m),url(/images/head-1600.jpg)}}
.pagehead h1{font-size:clamp(1.9rem,4.2vw,3.2rem);color:#fff;max-width:20ch}
.pagehead .sub{color:rgba(255,255,255,.88);max-width:62ch;font-size:clamp(1.05rem,1.4vw,1.18rem);text-wrap:pretty}
.pagehead .sub a{color:#fff;font-weight:700}
.crumb{font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.72);margin:0 0 16px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crumb a{color:rgba(255,255,255,.85);text-decoration:none}
.crumb a:hover{color:#fff;text-decoration:underline}
.crumb .sep{opacity:.6}
.pagehead .btn-row{margin-top:20px}
@media (max-width:560px){.pagehead .btn-row .btn{flex:1 1 100%}}

/* ---------- service cards ---------- */
.svc-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:640px){.svc-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.svc-grid{grid-template-columns:repeat(3,1fr)}}
.svc{border:1px solid var(--line);border-radius:10px;padding:22px 20px 18px;background:#fff;display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden}
.svc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--pipe)}
.svc h3{margin:0;font-size:1.12rem}
.svc h3 a{color:var(--ink);text-decoration:none;display:inline-block;padding:6px 0;margin:-6px 0}
.svc h3 a:hover{color:var(--pipe);text-decoration:underline}
.svc p{margin:0;font-size:.98rem;color:var(--ink);text-wrap:pretty}
.svc .signs{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.svc .signs li{font-size:1.02rem;font-weight:600;color:var(--ink);padding-left:18px;position:relative;line-height:1.35}
.svc .signs li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--brass)}
.svc .more{margin-top:auto;padding-top:6px;font-weight:700;font-size:.95rem}
.svc-go{margin-top:clamp(24px,3vw,32px)}
@media (max-width:560px){.svc-go .btn{flex:1 1 100%}}

/* how it works, the small list (services page) */
.steps{list-style:none;display:grid;gap:18px 32px;grid-template-columns:1fr;margin-top:clamp(36px,5vw,56px);padding-top:clamp(24px,3vw,32px);border-top:1px solid var(--line)}
@media (min-width:768px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.steps li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:start}
.step-n{grid-row:span 2;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--pipe);color:#fff;font-family:var(--display);font-weight:800;font-size:1rem}
.steps b{font-family:var(--display);font-weight:800;font-size:1.15rem;line-height:1.2;color:var(--ink);margin-top:5px}
.steps li>span:last-child{color:var(--slate);font-size:.98rem;line-height:1.45;margin-top:2px}
.steps-h{font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin:0 0 18px}

/* ---------- how it works (home): three steps on one connecting line, the ChemTec timeline in deep blue and brass ----------
   Up to 899px the line runs down the left with a brass diamond beside each number. From 900px it runs across the top,
   the blue fill draws in when the list scrolls into view ([data-rail] in site.js adds .is-in), and each node turns brass. */
.process{list-style:none;position:relative;display:grid;gap:16px;grid-template-columns:1fr;padding:0 0 0 30px}
.pstep{position:relative;background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px 20px 20px}
.pstep-big{display:block;font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,4vw,3.2rem);line-height:.9;letter-spacing:-.04em;color:var(--pipe);font-variant-numeric:tabular-nums;margin-bottom:12px}
.pstep h3{font-size:1.15rem;line-height:1.2;margin:0 0 6px}
.pstep p{margin:0;color:var(--slate);font-size:.98rem;line-height:1.5;text-wrap:pretty}
.pstep::before{content:"";position:absolute;width:12px;height:12px;background:var(--mist);border:2px solid var(--pipe);transform:rotate(45deg);z-index:2;transition:background .3s var(--ease),border-color .3s var(--ease)}
.process.is-in .pstep::before,.no-js .pstep::before{background:var(--brass);border-color:var(--brass)}
.process.is-in .pstep:nth-child(1)::before{transition-delay:.35s}
.process.is-in .pstep:nth-child(2)::before{transition-delay:.7s}
.process.is-in .pstep:nth-child(3)::before{transition-delay:1.05s}
@media (max-width:899px){
  .pstep::before{left:-29px;top:33px;background:var(--brass);border-color:var(--brass)}
  .pstep::after{content:"";position:absolute;left:-24px;top:48px;bottom:-46px;width:2px;background:var(--line);z-index:1}
  .pstep:last-child::after{display:none}
}
@media (min-width:900px){
  .process{grid-template-columns:repeat(3,minmax(0,1fr));padding:36px 0 0}
  .process::before,.process::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;pointer-events:none}
  .process::before{background:var(--line)}
  .process::after{background:var(--pipe);transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease) .15s}
  .process.is-in::after,.no-js .process::after{transform:scaleX(1)}
  .pstep::before{left:50%;top:-36px;margin:-6px 0 0 -6px}
  .pstep{transition:border-color .2s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
  .pstep:hover{border-color:var(--pipe);transform:translateY(-3px);box-shadow:0 8px 24px rgba(22,39,61,.08)}
}

/* ---------- reviews ---------- */
.reviews-head{display:grid;gap:18px;margin-bottom:clamp(26px,4vw,40px)}
@media (min-width:900px){.reviews-head{grid-template-columns:1.3fr 1fr;align-items:end}.reviews-head .rating{justify-self:end;text-align:right}}
.pull{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,4.4vw,3.2rem);line-height:1.05;color:#fff;margin:0 0 8px}
.pull-by{font-family:var(--display);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.8rem;color:rgba(255,255,255,.78)}
.rating{color:#fff;font-size:1.06rem;margin:0}
.rating b{font-weight:800}
.rating-stars{display:inline-flex;gap:2px;color:var(--copper-light);vertical-align:-3px;margin-right:10px}
.rating-stars svg{width:18px;height:18px;fill:currentColor}
.cards{list-style:none;display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:700px){.cards{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.cards{grid-template-columns:repeat(3,1fr)}}
@media (max-width:699px){
  .cards{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1*var(--gutter));padding:0 var(--gutter) 8px;scroll-padding-inline:var(--gutter);-webkit-overflow-scrolling:touch}
  .card{scroll-snap-align:start}
}
.card{background:#fff;color:var(--ink);border-radius:10px;padding:22px 22px 18px;display:flex;flex-direction:column;gap:12px}
.card blockquote{margin:0;font-size:1.04rem;line-height:1.5}
.card blockquote p{color:var(--ink);margin:0}
.card .who{margin-top:auto;display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:.92rem;padding-top:10px;border-top:1px solid var(--line);color:var(--ink)}
.card .who b{font-weight:800}
.card .src{font-family:var(--display);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.72rem;color:var(--slate)}
.card .stars{display:inline-flex;gap:1px;color:var(--brass);flex:none}
.card .stars svg{width:14px;height:14px;fill:currentColor}
.card-cta{background:transparent;color:#fff;border:2px dashed rgba(255,255,255,.5);justify-content:center}
.card-cta .q{font-family:var(--display);font-weight:800;font-size:1.5rem;line-height:1.1;color:#fff;margin:0}
.card-cta p{margin:0;color:rgba(255,255,255,.86)}
.card-cta .btn{align-self:flex-start;margin-top:4px}

/* ---------- service area ---------- */
.area-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:640px){.area-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.area-grid{grid-template-columns:repeat(4,1fr)}}
.county{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:10px;padding:22px 20px 18px;background:#fff;text-decoration:none;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.county:hover{border-color:var(--pipe);box-shadow:0 8px 24px rgba(22,39,61,.08);color:var(--ink)}
.county .st{font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.county h3{margin:0;font-size:1.2rem}
.county p{margin:0;font-size:.95rem;color:var(--slate);text-wrap:pretty}
.county .more{margin-top:auto;padding-top:8px;font-weight:700;color:var(--pipe);font-size:.95rem;border:0;border-radius:0;background:none}  /* 8 Oct: the home page also loads services.css, whose .more box (the "More services" panel) was framing these links */
.towns{display:block;margin-top:clamp(28px,4vw,40px);padding-top:clamp(24px,3vw,32px);border-top:1px solid var(--line)}
.towns-grid{display:grid;gap:24px 40px;grid-template-columns:1fr}
@media (min-width:768px){.towns-grid{grid-template-columns:1fr 1fr}}
.towns summary{display:none}
@media (max-width:719px){
  .towns summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;cursor:pointer;font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--pipe);list-style:none}
  .towns summary::-webkit-details-marker{display:none}
  .towns summary::after{content:"+";font-size:1.6rem;line-height:1;color:var(--copper)}
  .towns[open] summary::after{content:"\2212"}
  .towns-grid{padding-top:10px}
}
.towns h3{font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin:0 0 10px}
.towns p{margin:0;text-wrap:pretty}
.towns-grid p a{white-space:nowrap}
.towns b{font-weight:700}
.area-note{margin:clamp(20px,3vw,28px) 0 0;color:var(--slate);max-width:70ch}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:0;max-width:820px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 0;font-family:var(--display);font-weight:700;font-size:1.08rem;color:var(--ink);min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--pipe);flex:none;width:28px;text-align:center}
.faq details[open] summary::after{content:"\2212"}
.faq .a{padding:0 0 18px;max-width:66ch}
.faq .a p{margin:0 0 .6em}
.faq .a p:last-child{margin:0}

/* ---------- three generic cards (why a licensed plumber) ---------- */
.trio{list-style:none;display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:768px){.trio{grid-template-columns:repeat(3,1fr)}}
.trio li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px 20px}
.trio h3{font-size:1.12rem;margin-bottom:6px}
.trio p{margin:0;font-size:.98rem;text-wrap:pretty}

/* ---------- closing band ---------- */
.closing{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;padding:24px 26px;border-radius:12px;background:var(--pipe);color:#fff}
.closing p{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(1.2rem,2.2vw,1.55rem);color:#fff;max-width:30ch;text-wrap:balance}
@media (max-width:560px){.closing .btn-row{width:100%}.closing .btn-row .btn{flex:1 1 100%}}

/* ---------- services page: one section per service ---------- */
.svc-list{display:grid;gap:0;max-width:860px}
.svc-row{padding:clamp(28px,4vw,40px) 0;border-top:1px solid var(--line)}
.svc-row:first-child{border-top:0;padding-top:0}
.svc-row h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin-bottom:.4em}
.svc-row p{max-width:66ch;text-wrap:pretty}
.svc-row .call{background:var(--mist);border-left:4px solid var(--pipe);border-radius:0 var(--radius) var(--radius) 0;padding:14px 18px;margin:14px 0 0;font-size:.98rem}
.svc-row .call b{font-family:var(--display);font-weight:800;color:var(--pipe);letter-spacing:.06em;text-transform:uppercase;font-size:.78rem;display:block;margin-bottom:4px}
.svc-row .call p{margin:0}
.svc-toc{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(28px,4vw,40px)}
.svc-toc a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1.5px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none;font-weight:600;font-size:.92rem;background:#fff}
.svc-toc a:hover{border-color:var(--pipe);color:var(--pipe)}

/* ---------- contact ---------- */
.contact-wrap{padding:clamp(36px,5vw,64px) 0 clamp(56px,7vw,96px)}
.contact-grid{display:grid;gap:clamp(24px,4vw,48px)}
@media (min-width:960px){.contact-grid{grid-template-columns:minmax(0,640px) minmax(0,1fr);align-items:start}}
.contact-grid .form-card{box-shadow:none;border:1px solid var(--line)}
.aside-sticky{display:grid;gap:18px}
@media (min-width:960px){.aside-sticky{position:sticky;top:calc(var(--header-h) + 20px)}}
.nap-box{background:var(--mist);border-radius:10px;padding:22px 22px 20px}
.nap-box h2{font-size:1.3rem;margin-bottom:12px}
.nap{font-size:1.05rem;margin:0 0 14px}
.nap strong{font-family:var(--display);font-weight:800}
.nap-box .btn-row{margin:6px 0 14px}
@media (max-width:560px){.nap-box .btn-row .btn{flex:1 1 100%}}
.mail{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;word-break:break-all}
.hours-h{font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin:14px 0 4px}
.hours{list-style:none;margin:0;max-width:440px}
.hours li{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--line)}
.hours li span:last-child{font-weight:700;text-align:right}
.nap-notes{margin:12px 0 0;color:var(--slate);font-size:.95rem}
.nap-notes p{margin:0 0 8px}
.next-box{border:1px solid var(--line);border-radius:10px;padding:22px 22px 18px}
.next-box h2{font-size:1.2rem;margin-bottom:10px}
.next-box ol{list-style:none;counter-reset:s}
.next-box li{counter-increment:s;position:relative;padding-left:38px;margin-bottom:10px;font-size:.98rem}
.next-box li::before{content:counter(s);position:absolute;left:0;top:1px;width:26px;height:26px;border-radius:50%;background:var(--pipe);color:#fff;font-family:var(--display);font-weight:800;font-size:.85rem;display:grid;place-items:center}

/* ---------- thank you ---------- */
.thanks-wrap{padding:clamp(36px,5vw,64px) 0 clamp(56px,7vw,96px)}
.thanks-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,48px)}
@media (min-width:960px){.thanks-grid{grid-template-columns:1.2fr 1fr;align-items:start}.thanks-grid:has(> [data-sent][hidden]){grid-template-columns:minmax(0,760px)}}
@media (max-width:959px){.thanks-grid > [data-sent]{order:-1}}
.bigcall{display:flex;flex-direction:column;gap:6px;background:var(--pipe);color:#fff;border-radius:12px;padding:22px 24px;text-decoration:none}
.bigcall:hover{background:var(--pipe-2);color:#fff}
.bigcall .num{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,4vw,2.3rem);line-height:1.1;display:flex;align-items:center;gap:12px}
.bigcall .num .ico{width:28px;height:28px}
@media (max-width:339px){.bigcall .num{font-size:min(1.7rem,calc((100vw - 124px) / 7.4))}}
.bigcall .sm{color:rgba(255,255,255,.86);font-size:1rem}
.summary{background:var(--mist);border:1px solid var(--line);border-radius:10px;padding:20px 22px}
.summary h2{font-size:1.3rem;margin-bottom:10px}
.summary ul{list-style:none;margin:0}
.summary li{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:12px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line);font-size:.98rem}
.summary li:last-child{border-bottom:0}
.summary .k{font-family:var(--display);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.72rem;color:var(--slate)}
.thanks-back{grid-column:1/-1;margin:0}

/* ---------- legal pages ---------- */
.legal{padding:clamp(36px,5vw,64px) 0 clamp(56px,7vw,96px)}
.legal .wrap{max-width:820px}
.legal h2{font-size:clamp(1.3rem,2.2vw,1.7rem);margin:1.6em 0 .5em}
.legal h3{font-size:1.1rem;margin:1.2em 0 .4em}
.legal p,.legal li{text-wrap:pretty}
.legal ul{list-style:disc;padding-left:1.3em;margin:0 0 1em}
.legal li{margin-bottom:.4em}
.legal .short{background:var(--mist);border-left:4px solid var(--pipe);border-radius:0 var(--radius) var(--radius) 0;padding:16px 20px;margin:0 0 1.5em}
.legal .short h2{margin:0 0 .5em;font-size:1.1rem}
.legal .short ul{margin:0}
.legal .updated{color:var(--slate);font-size:.92rem}
.legal .contact-block{background:var(--mist);border-radius:10px;padding:18px 20px;margin-top:1.5em}
.legal .contact-block p{margin:0 0 .4em}

/* ---------- 404 ---------- */
.nf{padding:clamp(56px,8vw,110px) 0}
.nf-links{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin:22px 0 0}
.nf-links a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}

/* ---------- footer ---------- */
.site-footer{padding:clamp(48px,6vw,72px) 0 0;font-size:.98rem}
.site-footer a{color:rgba(255,255,255,.9)}
.site-footer a:hover{color:#fff}
.foot-grid{display:grid;gap:32px;grid-template-columns:1fr}
.foot-brand{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.halo{display:inline-grid;place-items:center;width:104px;height:104px;border-radius:50%;background:#fff}
.halo img{width:96px;height:96px;border-radius:50%}
.foot-name{font-family:var(--display);font-weight:800;font-size:1.3rem;color:#fff;line-height:1.1;margin:0}
.foot-brand p{text-wrap:balance;max-width:30ch}
.foot-h{font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.66);margin:0 0 12px}
.foot-list{list-style:none}
.foot-list li{margin:0 0 6px}
.foot-links a{display:inline-block;padding:3px 0;text-decoration:none}
.foot-links a:hover{text-decoration:underline}
.footer-bot{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;align-items:center;margin-top:36px;padding:18px 0 24px;border-top:1px solid rgba(255,255,255,.16);font-size:.82rem;color:rgba(255,255,255,.7)}
.footer-bot a{color:inherit}
.footer-bot .legal-links{display:inline-flex;gap:16px}
@media (min-width:768px){.foot-grid{grid-template-columns:1.2fr 1fr 1fr}}
@media (min-width:1100px){.foot-grid{grid-template-columns:1.3fr 1fr 1fr .9fr}}
@media (max-width:767px){
  .site-footer{padding-bottom:calc(28px + env(safe-area-inset-bottom))}
  .site-footer address a{display:inline-block;padding:10px 0}
  .foot-links{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
  .foot-links a,.site-footer p a,.footer-bot .apex-credit a,.footer-bot .legal-links a{display:inline-flex;align-items:center;min-height:44px}
  .foot-links a{padding:0}
  .foot-list li{margin:0}
  .foot-brand{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px}
  .foot-brand .halo{width:64px;height:64px}
  .foot-brand .halo img{width:58px;height:58px}
  .foot-brand p:not(.foot-name){flex-basis:100%;margin:0}
  .textlink{display:inline-flex;align-items:center;min-height:44px}
  p .textlink,li .textlink{display:inline;min-height:0;padding:12px 0}
}

@media print{
  .site-header,.site-footer,.btn-row,.closing,.form-card{display:none!important}
  body{font-size:11.5pt;color:#000}
  .band,.hero,.proof{background:none!important;color:#000}
  .pagehead h1,.pagehead .sub,.band .label{color:#000!important}
  a{color:#000;text-decoration:none}
}

/* logo lockup in the header and footer (30 Sep; sizes restated in brand.css, which loads after this file) */
.brand-logo{width:252px;max-width:100%;height:auto;display:block}
@media (max-width:720px){.brand-logo{width:200px}}
.foot-logo{width:280px;max-width:100%;height:auto;display:block}
@media (max-width:720px){.foot-logo{width:220px}}

/* phones: sticky call bar once the hero buttons scroll away, hidden while a form is on screen (30 Sep) */
.mobile-bar{display:none}
@media (max-width:719px){
  .mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .25s ease}
  .mobile-bar.is-on{transform:none}
  .mobile-bar .btn{flex:1 1 0;min-height:48px;padding:0 10px;font-size:.98rem;white-space:nowrap}
  /* 7 Oct: the bar's Call button is steel blue, not copper, so the page keeps one copper action in view (brand sheet: never two copper buttons in one view); white on #1E3A5F is 11.2 to 1 */
  .mobile-bar .btn-primary{background:var(--pipe);border-color:var(--pipe);color:#fff}
  .mobile-bar .btn-primary:hover{background:var(--pipe-2);border-color:var(--pipe-2)}
  html.bar-on body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){.mobile-bar{transition:none}}
@media print{.mobile-bar{display:none!important}}

/* privacy and terms: the copper pipe schematic on steel blue instead of a photo (Alex, 30 Sep; palette C 7 Oct) */
.pagehead--schematic{background-color:#1E3A5F;background-image:url(/images/pipes.svg?v=brass1),linear-gradient(100deg,#1E3A5F 0%,#1E3A5F 45%,#294B78 100%);background-repeat:no-repeat,no-repeat;background-size:min(1400px,140%) auto,cover;background-position:right -20px top 8px,center;position:relative}
.pagehead--schematic::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(30,58,95,.85) 0%,rgba(30,58,95,.35) 50%,rgba(30,58,95,0) 100%);pointer-events:none}
.pagehead--schematic .wrap{position:relative;z-index:1}
@media (max-width:699px){.pagehead--schematic{background-size:210% auto,cover;background-position:right -160px top 40px,center}.pagehead--schematic::after{background:linear-gradient(180deg,rgba(30,58,95,.9),rgba(30,58,95,.7))}}

/* ======================================================================================
   v2 (7 Oct 2026): text wordmark, the big home hero with two big buttons and the trust line,
   the trust cards, the six service cards, the request page, the contact page and the commercial page.
   ====================================================================================== */

/* PLACEHOLDER: the text wordmark stands in for Bryce's own logo files (header and footer). Same height as the old lockup. */
.wordmark{display:inline-flex;flex-direction:column;justify-content:center;height:64px;font-family:var(--display);line-height:1;white-space:nowrap;color:var(--pipe)}
.wordmark .wm-top{font-weight:800;font-size:1.78rem;letter-spacing:.015em}
.wordmark .wm-bot{display:flex;align-items:center;gap:8px;margin-top:7px;font-weight:700;font-size:.8rem;letter-spacing:.44em;color:var(--ink)}
.wordmark .wm-bot::before{content:"";width:20px;height:3px;border-radius:2px;background:var(--brass);flex:none}
.wordmark--rev{height:60px;color:#fff}
.wordmark--rev .wm-bot{color:rgba(255,255,255,.82)}
@media (max-width:720px){
  .wordmark{height:50px}
  .wordmark .wm-top{font-size:1.32rem}
  .wordmark .wm-bot{font-size:.62rem;letter-spacing:.4em;margin-top:5px;gap:6px}
  .wordmark .wm-bot::before{width:14px}
  .wordmark--rev{height:52px}
}

/* big buttons: the quote and the call, side by side, stacked on phones.
   7 Oct (v7, Alex): Request a quote is the primary, first, filled, a small lift on hover; Call is the solid white button
   beside it, same height. Palette C: the fill is the deep copper #AD5D1D with white text (4.82 to 1; the bright copper
   #C8742B fails with white text at 3.51, so it draws the marks only). The class name stays so the markup does not change. */
.btn-xl{min-height:60px;padding:0 30px;font-size:1.16rem;border-radius:8px}
.btn-xl svg{width:22px;height:22px}
.btn-brass{background:var(--copper);color:#fff;border-color:var(--copper);box-shadow:0 2px 0 rgba(0,0,0,.12);transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s}
.btn-brass:hover{background:var(--copper-2);border-color:var(--copper-2);color:#fff;transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.24)}
.btn-brass:active{transform:none;box-shadow:0 2px 0 rgba(0,0,0,.12)}
.hero .btn-brass:focus-visible{outline-color:#fff}
.hero .hero-ctas{gap:14px;margin-bottom:24px}
@media (max-width:560px){.hero-ctas .btn{flex:1 1 100%;min-height:56px}}

/* the trust line under the hero buttons */
.hero-trust{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;margin:0;padding:0;color:rgba(255,255,255,.94);font-weight:600;font-size:1.02rem}
.hero-trust li{display:inline-flex;align-items:center;gap:8px}
.hero-trust svg{width:18px;height:18px;flex:none}
.hero-trust .tick{color:var(--copper-light);fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.hero-trust .star{color:var(--copper-light);fill:currentColor}
.hero-trust a{color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:8px;min-height:44px}
.hero-trust a:hover{text-decoration:underline}
@media (max-width:560px){.hero-trust{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;font-size:.95rem}}

/* the hero without a form beside it (home, counties, towns) */
.hero-grid--solo{grid-template-columns:minmax(0,1fr)!important}
.hero-grid--solo .hero-copy{max-width:780px}

/* home: the hero, rebuilt 8 Oct 2026 (Alex: "the same size hero and wording as we have for Fisher's Fine Painting").
   Same structure and sizes as Fisher's home hero (#hero-1467): a small boxed topper, the H1 at 40px on phones to 66px on desktop
   (line height 1.15, balanced), a two sentence lead at 18px to 22px, two big buttons side by side (56px to 68px tall, 18px to 20px
   text, stacked full width under 768px), the Google rating centered under the buttons at 1.6 times the old trust line.
   Left aligned on desktop (block 760px, lead 640px), centered on tablets and phones. Fisher's 157px header sits over his hero;
   ours is 92px and sits above it, so the desktop hero gets a min height that puts its bottom edge about 865px from the top of
   the page at 1280 wide, where Fisher's lands. Below 1024px the veil runs top to bottom (94 to 90 percent) so centered text keeps
   4.5 to 1 or better on the photo. Buttons keep palette C: copper #AD5D1D with white text, then the white call button. */
.hero--home{display:flex;flex-direction:column;justify-content:center;padding:clamp(4rem,7.3vw,5.8rem) 0 clamp(6rem,7vw,10rem)}
@media (max-width:1023px){.hero--home{background-image:var(--veil-m),url(/images/hero-real-1600.jpg)}}
/* 16 Oct 2026 (Alex: "have the hero be the entire page... there is white at the bottom where it shouldnt. clean page break"):
   the home hero fills the whole window under the sticky header at every width, so the page breaks cleanly at the bottom edge
   and no white shows below it. Replaces the 54rem desktop rule (about 865px from the top), which left a white strip on tall
   screens. svh is the small viewport height on phones, so the hero does not jump when the browser bar slides away; the vh line
   is the fallback for older browsers. min-height, never height: in a short window the hero grows instead of clipping its copy. */
/* The header is --header-h plus its 1px bottom border, hence the extra 1px, so the hero ends exactly on the window edge. */
.hero--home{min-height:calc(100vh - var(--header-h) - 1px);min-height:calc(100svh - var(--header-h) - 1px)}
.hero--home .hero-in{display:flex;justify-content:center}
.hero--home .hero-copy{width:100%;max-width:47.5rem;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero--home .hero-topper{display:inline-flex;align-items:center;gap:.625rem;max-width:100%;margin:0 0 .25rem;padding:.4rem .75rem;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);border-radius:4px;font-family:var(--display);font-weight:700;font-size:.8125rem;line-height:1.2;letter-spacing:.2em;text-transform:uppercase;color:#fff}
.hero--home .hero-topper::before{content:"";width:18px;height:3px;border-radius:2px;background:var(--brass);flex:none}
.hero--home h1{width:100%;max-width:47.5rem;font-size:clamp(2.5rem,5.6vw,4.125rem);line-height:1.15;text-wrap:balance;margin:0 0 1rem;color:#fff}
.hero--home .lead{width:100%;max-width:40rem;font-size:clamp(1.125rem,2.1vw,1.375rem);line-height:1.5;margin:0 0 clamp(1.5rem,3vw,2rem);color:#fff;text-wrap:pretty}
.hero--home .hero-cta{width:100%;display:flex;flex-direction:column;align-items:center;gap:1.25rem}
.hero--home .hero-ctas{width:100%;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:.75rem;margin:0}
.hero--home .hero-ctas .btn{flex:none;width:100%;min-height:clamp(3.5rem,5.5vw,4.25rem);padding:0 2rem;gap:.75rem;border-radius:8px;font-size:clamp(1.125rem,1.6vw,1.25rem)}
.hero--home .hero-ctas .btn svg{width:1.5rem;height:1.5rem}
/* the Google rating: the G, five stars over "5.0 on Google", 67px tall like Fisher's badge (1.6 times the old 42px line) */
.hero-google{display:inline-flex;align-items:center;gap:.75rem;min-height:4.1875rem;padding:0 .25rem;border-radius:8px;color:#fff;text-decoration:none}
.hero-google:hover{color:#fff}
.hero-google .g{width:4rem;height:4rem;flex:none}
.hero-google .hg-text{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;text-align:left}
.hero-google .hg-stars{display:block;width:8.9375rem;height:1.625rem;fill:var(--copper-light)}
.hero-google .hg-score{font-family:var(--display);font-weight:800;font-size:1.625rem;line-height:1.05;letter-spacing:-.01em;color:#fff;white-space:nowrap}
.hero-google:hover .hg-score{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
@media (max-width:420px){.hero--home .hero-topper{letter-spacing:.14em;gap:.5rem;padding:.4rem .625rem}}
@media (max-width:359px){.hero--home .hero-topper{font-size:.75rem;letter-spacing:.06em;text-wrap:balance}}
@media (min-width:768px){
  .hero--home .hero-cta{width:auto;max-width:100%}
  .hero--home .hero-ctas{width:auto;flex-direction:row;justify-content:center;align-items:center;gap:1rem}
  .hero--home .hero-ctas .btn{width:auto;min-width:13rem}
}
@media (min-width:1024px){
  .hero--home .hero-in{justify-content:flex-start}
  .hero--home .hero-copy{align-items:flex-start;text-align:left}
  .hero--home .hero-ctas{justify-content:flex-start}
}
@media print{.hero--home h1,.hero--home .lead,.hero--home .hero-topper,.hero-google,.hero-google .hg-score{color:#000!important}.hero-google .g,.hero-google .hg-stars{display:none}}

/* home: trust cards */
.trust-grid{list-style:none;display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:700px){.trust-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1050px){.trust-grid{grid-template-columns:repeat(3,1fr)}}
.trust-grid li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px 20px 20px}
.trust-grid h3{font-size:1.12rem;margin:0 0 6px;display:flex;gap:10px;align-items:center}
.trust-grid h3 svg{width:22px;height:22px;flex:none;color:var(--brass);fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.trust-grid p{margin:0;font-size:.98rem;color:var(--slate);text-wrap:pretty}
.trust-sign{margin:clamp(22px,3vw,30px) 0 0;color:var(--slate);max-width:70ch}
.trust-sign b{color:var(--ink)}

/* the sixth service card: everything else, in plain words */
.svc--more{background:var(--brass-soft)}
.svc--more::before{background:var(--brass)}
.svc--more p{color:var(--ink)}
.svc .tag{font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}

/* home: the commercial line */
.com-teaser{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between}
.com-teaser h2{margin-bottom:.25em}
.com-teaser p{margin:0;max-width:60ch}
@media (max-width:560px){.com-teaser .btn{flex:1 1 100%}}

/* services page: the plain rows at the end */
.svc-row--plain h2{font-size:clamp(1.2rem,2vw,1.45rem)}
.svc-sub{font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin:clamp(30px,4vw,44px) 0 0;padding-top:clamp(22px,3vw,30px);border-top:1px solid var(--line)}
.svc-sub + .svc-row{border-top:0}

/* contact page: two ways to reach Bryce */
.reach{display:grid;gap:16px;align-content:start}
.bigreq{display:flex;flex-direction:column;gap:6px;background:#fff;color:var(--ink);border:2px solid var(--pipe);border-radius:12px;padding:22px 24px;text-decoration:none}
.bigreq:hover{background:var(--mist);color:var(--ink)}
.bigreq .num{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,3.4vw,2rem);line-height:1.1;color:var(--pipe)}
.bigreq .sm{color:var(--slate);font-size:1rem}
.reach .mail{margin-top:4px}

/* county pages: the towns Bryce added, as plain names */
.town-also{margin:12px 0 0;color:var(--slate);max-width:70ch}

/* commercial page */
.check-list{list-style:none;display:grid;gap:16px;grid-template-columns:1fr;max-width:980px}
@media (min-width:768px){.check-list{grid-template-columns:1fr 1fr}}
.check-list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:10px;padding:20px}
.check-list svg{grid-row:span 2;width:24px;height:24px;margin-top:2px;color:var(--brass);fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.check-list b{font-family:var(--display);font-weight:800;font-size:1.1rem;line-height:1.25}
.check-list span{color:var(--slate);font-size:.98rem;text-wrap:pretty}
.logo-wall{list-style:none;display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:768px){.logo-wall{grid-template-columns:repeat(3,minmax(0,1fr))}}
.logo-tile{display:grid;place-items:center;min-height:110px;border:1.5px dashed rgba(91,107,128,.45);border-radius:10px;background:#fff;color:var(--slate);font-family:var(--display);font-weight:700;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:12px}
.com-note{margin:16px 0 0;color:var(--slate);font-size:.95rem}
/* the hero grid's padding shorthand was zeroing the .wrap side gutter below 1240px (v1 too): put it back */
.hero .wrap.hero-grid{padding-left:var(--gutter);padding-right:var(--gutter)}

/* 7 Oct (v4): the commercial page head carries the tenant build-out photo (one size, 1280 wide), same veil as every other page head */
.pagehead--commercial{background-image:var(--veil),url(/images/commercial-tenant-buildout.jpg);background-position:center 45%}
@media (max-width:699px){.pagehead--commercial{background-image:var(--veil-m),url(/images/commercial-tenant-buildout.jpg)}}
/* a text link inside the blue closing band (the commercial page's email) reads white, not blue on blue */
.closing a:not(.btn){color:#fff;text-decoration:underline;text-underline-offset:3px}
.closing a:not(.btn):hover{color:var(--brass-soft)}

/* ---------- footer map (8 Oct 2026) ----------
   Bryce's Google listing as the footer's right hand block on every page, like Fisher's. Google only draws the listing card
   (name, stars, review count) when the frame is at least 300px tall and about 400px wide, so the frame is 300px wherever it
   is that wide (768px and up); on phones it is narrower than that, Google shows its compact "Open in Maps" map, and 220px is
   plenty. Grid: phones stack, map last. 768 to 1199: brand, call, service area on top; pages bottom left, map bottom right
   across two columns. 1200 and up: brand over call, service area, pages, then the map in the right column, set to the bottom. */
.foot-map{margin:0;min-width:0}
.foot-map-frame{border:1px solid rgba(255,255,255,.18);border-radius:10px;overflow:hidden;background:var(--pipe)}
.foot-map iframe{display:block;width:100%;height:220px;border:0}
.foot-map figcaption{margin-top:10px;font-size:.92rem}
.foot-map figcaption a{text-decoration:underline;text-underline-offset:3px}
@media (max-width:767px){
  .foot-map figcaption{margin-top:2px}
  .foot-map figcaption a{display:inline-flex;align-items:center;min-height:44px}
}
@media (min-width:768px){
  .foot-map iframe{height:300px}
  .foot-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);grid-template-areas:"brand call area" "pages map map"}
  .foot-grid>:nth-child(1){grid-area:brand}
  .foot-grid>:nth-child(2){grid-area:call}
  .foot-grid>:nth-child(3){grid-area:area}
  .foot-grid>:nth-child(4){grid-area:pages}
  .foot-grid>.foot-map{grid-area:map}
}
@media (min-width:1200px){
  .foot-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.95fr) minmax(0,.8fr) minmax(420px,1.9fr);grid-template-areas:"brand area pages map" "call area pages map"}
  .foot-grid>.foot-map{align-self:end}
}

/* ---------- how it works (home and /option-bronze/, 8 Oct 2026): Bryce's three steps on the Apex timeline ----------
   Alex: "underneath right above the commercial, we should have his three step process with the apex timeline mechanism".
   The APEX Method section of apex-solved.com rebuilt in palette C with three steps. When the steps scroll into view the rail
   fills left to right in copper (#C8742B to #AD5D1D), the three nodes (over the three column centers: 16.67, 50 and 83.33
   percent, corrected for the gaps) light and ping in turn as the fill reaches them, each big step number stamps in as its node
   lights, and a small spark runs the rail once (APEX loops it forever; one pass keeps all motion under 5 seconds, so no pause
   control is needed). All three numbers are solid steel blue (Alex, 8 Oct evening: the outline on 1 and 3 is gone).
   Phones (under 700px): the steps stack and the rail runs down the left edge, a diamond node beside each number, filling top
   to bottom in two copper segments (no spark there).
   The default is the finished state. site.js adds .is-armed only when it is about to animate (IntersectionObserver present, no
   reduced motion), so without JavaScript, if site.js never loads, or with reduced motion, every word shows and nothing moves.
   .is-in starts the motion. All scoped to .how-* inside #how. (.process and .pstep further up are the older ChemTec version, unused.)
   Contrast on white: the copper word #AD5D1D 4.82 to 1, slate body 5.44, ink headings 15.09, the steel blue numbers 11.5; the
   rail and nodes #C8742B 3.51 (marks need 3). */
#how{background:#fff}
.how-track{--how-gap:16px;position:relative}
.how-rail{position:relative;height:3px;margin:0 0 34px;background:var(--line);border-radius:2px}
.how-rail i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--brass),var(--copper));transform-origin:left center}
.how-node{position:absolute;top:50%;width:14px;height:14px;box-sizing:border-box;margin:-7px 0 0 -7px;transform:rotate(45deg);background:var(--brass);border:2px solid var(--brass);box-shadow:0 0 0 4px rgba(200,116,43,.16);z-index:2}
.how-node.n1{left:calc((100% - 2 * var(--how-gap)) / 6)}
.how-node.n2{left:50%}
.how-node.n3{left:calc(100% - (100% - 2 * var(--how-gap)) / 6)}
.how-spark{position:absolute;top:50%;left:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--copper-light);box-shadow:0 0 14px 2px rgba(200,116,43,.7);opacity:0;z-index:3;pointer-events:none}
.how-steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--how-gap);grid-template-columns:repeat(3,minmax(0,1fr))}
.how-step{position:relative;background:#fff;border:1px solid var(--line);border-radius:10px;padding:26px 24px 24px}
.how-num{display:block;width:-moz-fit-content;width:fit-content;font-family:var(--display);font-weight:800;font-size:clamp(3.6rem,6vw,5rem);line-height:.9;letter-spacing:-.03em;color:var(--pipe);margin:0 0 12px;font-variant-numeric:lining-nums}
.how-word{display:block;font-family:var(--display);font-weight:800;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--copper);margin:0 0 10px}
.how-step h3{font-size:clamp(1.15rem,1.6vw,1.3rem);line-height:1.2;margin:0 0 8px}
.how-step p{margin:0;color:var(--slate);font-size:1rem;line-height:1.55;text-wrap:pretty}
.how-step p a{font-weight:700;color:var(--pipe)}
.how-step p a:hover{color:var(--ink)}
@media (min-width:700px) and (max-width:959px){.how-step{padding:22px 18px 20px}}

/* the motion: armed (hidden or empty, waiting), then in (playing) */
.how-track.is-armed .how-rail i{transform:scaleX(0)}
.how-track.is-armed.is-in .how-rail i{transform:scaleX(1);transition:transform 1.5s linear .2s}
.how-track.is-armed .how-node{background:#fff;box-shadow:none}
.how-track.is-armed.is-in .how-node{background:var(--brass);box-shadow:0 0 0 4px rgba(200,116,43,.16);transition:background .3s,box-shadow .3s}
.how-track.is-armed.is-in .how-node.n1{transition-delay:.45s;animation:how-ping .9s var(--ease) .45s 1}
.how-track.is-armed.is-in .how-node.n2{transition-delay:.95s;animation:how-ping .9s var(--ease) .95s 1}
.how-track.is-armed.is-in .how-node.n3{transition-delay:1.45s;animation:how-ping .9s var(--ease) 1.45s 1}
.how-track.is-armed.is-in .how-spark{animation:how-spark 2.6s linear 1.9s 1 both}
.how-track.is-armed .how-step{opacity:0;transform:translateY(22px)}
.how-track.is-armed.is-in .how-step{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.how-track.is-armed.is-in .how-step:nth-child(1){transition-delay:.05s}
.how-track.is-armed.is-in .how-step:nth-child(2){transition-delay:.13s}
.how-track.is-armed.is-in .how-step:nth-child(3){transition-delay:.21s}
.how-track.is-armed .how-num{opacity:0}
.how-track.is-armed.is-in .how-num{opacity:1;animation:how-stamp .55s var(--ease) both}
.how-track.is-armed.is-in .how-step:nth-child(1) .how-num{animation-delay:.4s}
.how-track.is-armed.is-in .how-step:nth-child(2) .how-num{animation-delay:.9s}
.how-track.is-armed.is-in .how-step:nth-child(3) .how-num{animation-delay:1.4s}
@keyframes how-ping{0%{box-shadow:0 0 0 0 rgba(200,116,43,.6)}100%{box-shadow:0 0 0 14px rgba(200,116,43,0)}}
@keyframes how-spark{0%{left:0;opacity:0}8%{opacity:1}90%{opacity:1}100%{left:100%;opacity:0}}
@keyframes how-stamp{0%{opacity:0;transform:scale(1.7);filter:blur(8px)}60%{opacity:1;transform:scale(.96);filter:blur(0)}100%{opacity:1;transform:scale(1);filter:blur(0)}}

/* phones: stacked, the rail down the left edge as two segments, a node beside each number.
   9 Oct: tightened into a compact list (How it works moved up to second, under the hero, Alex 9 Oct), so the Services
   heading shows within about one screen height below the hero at 390 wide. Desktop is unchanged. */
@media (max-width:699px){
  #how{padding:32px 0}
  #how .sec-head{margin-bottom:16px}
  .how-track{--how-gap:8px;padding-left:30px}
  .how-rail{display:none}
  .how-steps{grid-template-columns:minmax(0,1fr)}
  .how-step{padding:12px 16px}
  .how-num{font-size:2rem;margin:0 0 4px}
  .how-word{margin:0 0 4px}
  .how-step h3{margin:0 0 4px}
  .how-step p{font-size:.95rem;line-height:1.4}
  .how-step::before{content:"";position:absolute;left:-30px;top:18px;width:14px;height:14px;box-sizing:border-box;transform:rotate(45deg);background:var(--brass);border:2px solid var(--brass);box-shadow:0 0 0 4px rgba(200,116,43,.16);z-index:2}
  .how-step::after{content:"";position:absolute;left:-24px;top:25px;width:3px;height:calc(100% + var(--how-gap) + 2px);border-radius:2px;background:linear-gradient(180deg,var(--brass),var(--copper)) top left/100% 100% no-repeat,var(--line);z-index:1}
  .how-step:last-child::after{display:none}
  .how-track.is-armed .how-step::before{background:#fff;box-shadow:none}
  .how-track.is-armed.is-in .how-step::before{background:var(--brass);box-shadow:0 0 0 4px rgba(200,116,43,.16);transition:background .3s,box-shadow .3s}
  .how-track.is-armed.is-in .how-step:nth-child(1)::before{transition-delay:.35s;animation:how-ping .9s var(--ease) .35s 1}
  .how-track.is-armed.is-in .how-step:nth-child(2)::before{transition-delay:.95s;animation:how-ping .9s var(--ease) .95s 1}
  .how-track.is-armed.is-in .how-step:nth-child(3)::before{transition-delay:1.55s;animation:how-ping .9s var(--ease) 1.55s 1}
  .how-track.is-armed .how-step::after{background-size:100% 0,auto}
  .how-track.is-armed.is-in .how-step::after{background-size:100% 100%,auto;transition:background-size .6s linear}
  .how-track.is-armed.is-in .how-step:nth-child(1)::after{transition-delay:.35s}
  .how-track.is-armed.is-in .how-step:nth-child(2)::after{transition-delay:.95s}
  .how-track.is-armed.is-in .how-step:nth-child(1) .how-num{animation-delay:.3s}
  .how-track.is-armed.is-in .how-step:nth-child(2) .how-num{animation-delay:.9s}
  .how-track.is-armed.is-in .how-step:nth-child(3) .how-num{animation-delay:1.5s}
}
/* reduced motion switched on after the page loaded, and print: the finished state */
@media (prefers-reduced-motion:reduce){
  .how-track *,.how-track *::before,.how-track *::after{animation:none!important}
  .how-track.is-armed .how-step,.how-track.is-armed .how-num{opacity:1;transform:none}
  .how-track.is-armed .how-rail i{transform:none}
  .how-track.is-armed .how-node,.how-track.is-armed .how-step::before{background:var(--brass);box-shadow:0 0 0 4px rgba(200,116,43,.16)}
  .how-track.is-armed .how-step::after{background-size:100% 100%,auto}
}
@media print{
  .how-track .how-step,.how-track .how-num{opacity:1!important;transform:none!important;animation:none!important}
  .how-track .how-rail i{transform:none!important}
  .how-spark{display:none}
}