/* Served from this site, not from Google. See design/fonts/README.md. Both files are VARIABLE
   fonts, so one file covers every weight in the family and the range below is what selects it. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/archivo.woff2) format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:200 900;font-display:swap;src:url(fonts/source-sans-3.woff2) format('woff2')}

:root{--ink:#252e2a;--paper:#f8f5ed;--accent:#aa421f;--soft:#ece6d8;--line:#c8c4b7}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 system-ui,sans-serif}a{color:inherit;text-underline-offset:5px}button,input,select,textarea{font:inherit}button,a,input,select,textarea{touch-action:manipulation}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:5px}.skip{position:absolute;top:-80px;background:white;padding:12px;z-index:5}.skip:focus{top:0}.banner{background:var(--ink);color:white;font-size:12px;letter-spacing:.04em;text-align:center;padding:9px 16px}.wrap{max-width:1160px;margin:auto;padding:0 28px}header{border-bottom:1px solid var(--line)}nav{min-height:96px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{text-decoration:none;font-weight:750;line-height:1.25;letter-spacing:-.6px;max-width:240px}.brand small{display:block;font-size:11px;letter-spacing:.14em;font-weight:500;margin-top:6px;text-transform:uppercase}.navlinks{display:flex;flex-wrap:wrap;align-items:center;gap:22px;font-size:14px}.navlinks a{text-decoration:none}.navlinks a[aria-current=page]{text-decoration:underline}.button,button{display:inline-block;background:var(--ink);color:white;border:1px solid var(--ink);padding:13px 22px;border-radius:2px;font-weight:650;cursor:pointer;text-decoration:none;min-height:48px}.button.light{background:transparent;color:var(--ink)}button:disabled{opacity:.65;cursor:default}.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center;padding:76px 0 70px}.eyebrow{font-size:12px;font-weight:750;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}h1{font:clamp(42px,5.7vw,72px)/1.06 Georgia,serif;letter-spacing:-2px;margin:20px 0 24px}h2{font:clamp(30px,3.4vw,44px)/1.15 Georgia,serif;letter-spacing:-.8px}h3{font-size:20px;line-height:1.3}p{max-width:730px}.lead{font-size:20px;line-height:1.6}.muted,figcaption{font-size:14px;color:#505a53}.actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0}.art{width:100%;height:auto;display:block;background:#e6ded0}figure{margin:0}figcaption{padding-top:12px}.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;display:flex;flex-wrap:wrap;gap:14px 35px;font-size:14px}.section{padding:65px 0}.section+.section{border-top:1px solid var(--line)}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.card{padding:25px;border:1px solid var(--line);background:#fffcf6}.card .number{font:36px Georgia,serif;color:var(--accent)}.two{display:grid;grid-template-columns:1fr 1fr;gap:60px}.price{font-size:48px;font-weight:750;line-height:1.2}.price small{font-size:18px;font-weight:400}.term{font-weight:750;font-size:17px}.note{border-left:3px solid var(--accent);padding:10px 18px;background:var(--soft)}li{margin:9px 0}details{padding:18px 0;border-bottom:1px solid var(--line)}summary{font-weight:650;cursor:pointer}.form{max-width:720px}label{display:block;font-weight:650;font-size:14px;margin:20px 0 7px}input,textarea,select{display:block;background:#fffdf8;border:1px solid #7c857e;border-radius:2px;width:100%;padding:12px;min-height:48px;color:var(--ink)}textarea{min-height:110px}.checkbox{display:flex;align-items:flex-start;gap:12px}.checkbox input{width:20px;min-height:20px;margin-top:4px;flex:none}.status{padding:15px;background:var(--soft);overflow-wrap:anywhere}.honeypot{display:none}footer{border-top:1px solid var(--line);padding:35px 0;font-size:14px}.footerline{display:flex;justify-content:space-between;gap:25px;flex-wrap:wrap}table{border-collapse:collapse;width:100%;font-size:15px}th,td{text-align:left;padding:12px;border-bottom:1px solid var(--line);vertical-align:top}.tablewrap{overflow:auto}.plumbing{--ink:#183c42;--accent:#17606b;--soft:#e5eeeb;--paper:#f5f6ee}.tag{display:inline-block;padding:4px 9px;background:var(--soft);font-size:12px}main{min-height:65vh}@media(max-width:760px){.hero,.two{grid-template-columns:1fr;gap:30px}.hero{padding:38px 0}.grid{grid-template-columns:1fr}.wrap{padding:0 20px}nav{align-items:flex-start;flex-direction:column;padding:20px 0;gap:18px}.navlinks{gap:16px}h1{letter-spacing:-1px}.section{padding:42px 0}.price{font-size:42px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.offer .hero{grid-template-columns:.85fr 1.15fr;gap:36px;padding:48px 0}.offer h1{font-size:clamp(40px,4.5vw,58px)}.demo-preview{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:white;box-shadow:0 14px 35px #252e2a18}.demo-preview>a{display:block;aspect-ratio:4/3;overflow:hidden}.demo-preview img{width:100%;height:auto;display:block}.demo-preview figcaption{padding:16px;background:white}.offer .term{margin:10px 0}.offer .actions{margin:20px 0}@media(max-width:760px){.offer .hero{grid-template-columns:1fr}.offer .hero figure{margin-top:4px}}

/* Step1: distinct trade identities; existing shared receiver unchanged. */
:root{--accent:#8a381b}body{font-size:17px}img{max-width:100%}summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}p{max-width:66ch}.banner{font-size:13px;letter-spacing:0}/* Shown only when the script that operates it is running: `js` is set on <html> by site.js.
   Without JavaScript the links are already visible, and a phone visitor was getting a Menu
   button that did nothing above links that were already expanded - with aria-expanded=false
   telling a screen reader the menu was collapsed while its contents were on the page. */
.nav-toggle{display:none}.navlinks a{padding:10px 2px;min-height:44px}.brand small{font-size:12px;letter-spacing:.08em}.photo{display:block;width:100%;height:100%;object-fit:cover;background:var(--soft)}.hero-photo{aspect-ratio:4/3;overflow:hidden}.image-label{font-size:13px;line-height:1.5;padding:12px 0}.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:38px}.project{margin:0;min-width:0}.project .image-frame{aspect-ratio:4/3;overflow:hidden}.project h2{font-size:28px;margin:12px 0}.project p{margin:8px 0}.sample{font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:750}.credit{font-size:13px}.reviewer{margin-top:32px;border:1px dashed var(--line);padding:16px}.reviewer summary{font-size:14px}.reviewer p{font-size:14px}.demo-return{display:inline-block;margin-top:18px}.contact-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px}.contact-layout h1{font-size:clamp(40px,5vw,64px)}
.concrete{--ink:#302c28;--paper:#f1ece2;--soft:#e2d8c8;--line:#bfb2a0;--accent:#883819}.concrete .brand{font:700 24px/1 Georgia,serif}.concrete h1{font-size:clamp(46px,6vw,84px);font-weight:400;letter-spacing:-2.8px}.concrete h2{font-family:Georgia,serif}.concrete .hero{grid-template-columns:1.05fr 1fr;gap:40px}.concrete .hero-photo{aspect-ratio:4/5;border-radius:50% 50% 0 0}.concrete .hero figure{border-bottom:4px solid var(--accent)}.concrete .card{background:transparent;border:0;border-top:2px solid var(--ink);padding:24px 0}.concrete .number{font-size:18px;font-family:monospace}.concrete .gallery .project:first-child{grid-column:1/-1;display:grid;grid-template-columns:1.6fr 1fr;gap:32px;align-items:center}.concrete .gallery .project:first-child .image-frame{aspect-ratio:16/10}.concrete .strip{font-family:Georgia,serif;font-size:18px}
.plumbing{--ink:#123a49;--paper:#f4f8fa;--soft:#e2edf1;--line:#b2cbd5;--accent:#07586e}.plumbing h1,.plumbing h2{font-family:system-ui,sans-serif;font-weight:780;letter-spacing:-1.8px}.plumbing h1{font-size:clamp(42px,5vw,68px)}.plumbing .brand{font-size:22px;letter-spacing:-.8px}.plumbing .hero{grid-template-columns:1.1fr .9fr;gap:48px}.plumbing .hero-photo{border-radius:24px 24px 80px 24px;aspect-ratio:1}.plumbing .button,.plumbing button{border-radius:30px}.plumbing .card{border-radius:18px;background:white;padding:28px;border-top:5px solid var(--accent)}.plumbing .number{font:700 16px system-ui;background:var(--soft);display:inline-block;border-radius:50%;padding:10px}.plumbing .strip{border:0;border-radius:14px;background:var(--soft);padding:22px}.plumbing .gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.plumbing .project{background:white;border:1px solid var(--line);border-radius:20px;overflow:hidden}.plumbing .project figcaption{padding:24px}.plumbing .project h2{font-size:25px;letter-spacing:-.6px}.plumbing .project .image-frame{aspect-ratio:1}.plumbing .contact-layout{background:white;border-radius:24px;padding:32px;gap:40px}
.offer h1{font-family:system-ui,sans-serif;font-weight:780;font-size:clamp(40px,4.5vw,60px);letter-spacing:-2px}.offer-intro{padding:48px 0 26px;display:grid;grid-template-columns:1.3fr 1fr;gap:50px;align-items:center}.offer-intro h1{margin:12px 0}.pilot-price{border-left:3px solid var(--accent);padding-left:28px}.demo-pair{display:grid;grid-template-columns:1fr 1fr;gap:28px}.demo-tile{border:1px solid var(--line);background:white;overflow:hidden}.demo-tile>a{display:block;aspect-ratio:1.6;overflow:hidden}.demo-tile img{display:block;width:100%;height:auto}.demo-tile figcaption{padding:18px 24px}.demo-tile h2{font-size:26px;margin:0 0 8px}.demo-tile p{margin:0;font-size:15px}.offer .section{padding:45px 0}.offer .card{padding:22px}.offer .card h3{margin-top:0}
@media(max-width:760px){nav{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:18px 0}.js .nav-toggle{display:block;background:transparent;color:var(--ink);padding:10px 16px;min-height:44px}.navlinks{grid-column:1/-1;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:2px 16px}.navlinks a{border-bottom:1px solid var(--line);padding:12px 4px}.js .navlinks:not(.is-open){display:none}.hero,.concrete .hero,.plumbing .hero,.contact-layout,.plumbing .contact-layout,.offer-intro,.demo-pair{grid-template-columns:1fr;gap:28px}.concrete .hero-photo{aspect-ratio:4/3;border-radius:40% 40% 0 0}.plumbing .hero-photo{aspect-ratio:4/3;border-radius:20px 20px 55px 20px}.gallery,.plumbing .gallery{grid-template-columns:1fr;gap:32px}.concrete .gallery .project:first-child{display:block;grid-column:auto}.concrete .gallery .project:first-child .image-frame{aspect-ratio:4/3}.plumbing .contact-layout{padding:22px 16px}.offer-intro{padding-top:32px}.pilot-price{padding-left:18px}.brand{max-width:230px}.concrete .brand{font-size:23px}.plumbing .brand{font-size:21px}.banner{font-size:12px}.wrap{padding:0 20px}.section{padding:42px 0}.lead{font-size:18px}.hero{padding:36px 0}.demo-tile>a{aspect-ratio:1.4}}

/* Portfolio expansion: seven-example collection and the pricing-status notice.
   Additive and scoped - no existing selector is redefined, so the accepted concrete and
   plumbing pages render exactly as before. */
.collection{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}.collection .demo-tile figcaption{padding:18px 22px}.collection .demo-tile h2{font-size:22px;margin:0 0 6px}.collection .demo-tile p{font-size:15px;margin:0}.collection .demo-tag{display:inline-block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;background:var(--soft);border:1px solid var(--line);padding:3px 8px;margin-bottom:8px}.collection .trade-tag{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:750;color:var(--accent);margin-bottom:7px}.collection .demo-tile .noshot{display:flex;align-items:center;justify-content:center;height:100%;background:var(--soft);font-size:13px;color:#505a53;text-align:center;padding:16px}.pricing-status{border-left:3px solid var(--accent);background:var(--soft);padding:18px 24px;margin:26px 0}.pricing-status p{margin:9px 0;max-width:74ch}.pricing-status strong{letter-spacing:.02em}@media(max-width:900px){.collection{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.collection{grid-template-columns:1fr}.pricing-status{padding:16px 18px}}

/* Conversion layer, added 2026-09-14. Additive and scoped: no existing selector is
   redefined, so the accepted concrete, plumbing and offer pages render exactly as before.

   Why it exists: every client build shipped with ZERO telephone links while the records held
   the number all along. For every trade here the customer's next action is a phone call, so
   the number is in the masthead on desktop and in a fixed bar within thumb reach on a phone. */
.masthead-call{margin-left:auto}
.masthead-call .button{padding:10px 18px;font-size:15px;white-space:nowrap}
a.call,a.footer-call{font-variant-numeric:tabular-nums;letter-spacing:.01em}
a.footer-call{color:inherit;font-weight:700}
.call-bar{display:none}
html:has(body:not(.offer)){scroll-padding-top:96px}
.phone-big{margin:14px 0 18px}
.phone-big .button{font-size:20px;padding:15px 26px}
.reach{border-left:3px solid var(--accent);background:var(--soft);padding:20px 26px;margin:22px 0}
.reach h2{margin-top:0}
.areas{margin:14px 0;max-width:62ch}
dl.hours{display:grid;grid-template-columns:1fr auto;gap:6px 24px;margin:16px 0 0;max-width:46ch;font-size:15px}
dl.hours>div{display:contents}
dl.hours dt{font-weight:650}
dl.hours dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:760px){
  /* The header grid is 1fr auto on small screens; a third child would break it, so the
     masthead link steps aside for a fixed bar that is always within reach. */
  .masthead-call{display:none}
  body:has(.call-bar){padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))}
  .call-bar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -6px 20px #0000001a}
  .call-bar .button{display:block;text-align:center;width:100%;font-size:18px;padding:15px}
  dl.hours{max-width:none}
}
@media print{.call-bar{display:none}}

/* ============================================================================================
   CLIENT SITE DESIGN, 2026-09-14. Scoped to body:not(.offer) so Snapline Web's own pages are
   untouched. This replaces a template built out of system-ui and two greys, which Jace called
   the worst website he had seen, three times, and was right about the third time.

   Built to the thing a contractor's customer actually does, taken from what converting trade
   sites do rather than from taste: the number huge and reachable without scrolling, licence and
   insurance visible before the fold ends, real job photos, the service area and the hours on the
   page people actually land on, and one unmissable way to call at the end.
   ------------------------------------------------------------------------------------------ */
body:not(.offer){
  --paper:#ffffff; --ink:#111b21; --muted:#56656f; --soft:#f2f6f8; --line:#d8e3ea;
  --brand:#0d2a3a;          /* dark bands and headings */
  --accent:#0f6f92;         /* links, eyebrows, quiet emphasis */
  --cta:#c2410c;            /* the call button, and nothing else - it must never blend in */
  --cta-ink:#ffffff;
  --shadow:0 18px 40px -22px rgba(13,42,58,.55);
  --display:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-family:var(--body); font-size:17.5px; line-height:1.62; color:var(--ink); background:var(--paper);
}
/* Per-trade identity. One accent each, warm CTA constant, so seven trades are not seven sites. */
body.plumbing{--brand:#0b2b3e;--accent:#0f6f92}
body.concrete{--brand:#2e2a25;--accent:#8a5a2b}
body.electrical,body.electric{--brand:#1d2330;--accent:#9a6a00}
body.hvac{--brand:#12303a;--accent:#127a6e}
body.roofing{--brand:#2b1f1c;--accent:#9b4722}
body.landscaping,body.garden{--brand:#1c2a1e;--accent:#3f7038}
body.remodeling{--brand:#26232c;--accent:#6b4a8a}

body:not(.offer) h1,body:not(.offer) h2,body:not(.offer) h3,body:not(.offer) .brand{
  font-family:var(--display); font-weight:800; letter-spacing:-.022em; line-height:1.03;
  text-wrap:balance; color:var(--brand);
}
body:not(.offer) h1{font-size:clamp(38px,5.6vw,62px)}
body:not(.offer) h2{font-size:clamp(27px,3.4vw,38px)}
body:not(.offer) h3{font-size:21px;letter-spacing:-.012em}
body:not(.offer) .lead{font-size:clamp(18.5px,1.8vw,21px);line-height:1.5;color:var(--muted);max-width:56ch}
body:not(.offer) p{max-width:66ch}
body:not(.offer) .eyebrow{
  font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--accent);display:block;margin-bottom:10px;
}

/* --- masthead: stays on screen, because the number is the product ------------------------- */
body:not(.offer) header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);
  backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
body:not(.offer) header nav{display:flex;align-items:center;gap:26px;padding:14px 0}
body:not(.offer) .brand{font-size:24px;line-height:1.06;text-decoration:none;display:block}
/* Their own mark, where our typography used to be. Capped so a wide logo cannot push the
   call button off a phone — the button is the point of the page. */
body:not(.offer) .brandmark{display:block;max-height:46px;width:auto;max-width:min(240px,52vw);height:auto}
@media(max-width:760px){body:not(.offer) .brandmark{max-height:38px}}
body:not(.offer) .brand small{display:block;font-family:var(--body);font-weight:600;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-top:4px}
body:not(.offer) .navlinks{display:flex;gap:22px;font-weight:600;font-size:15.5px}
body:not(.offer) .navlinks a{color:var(--ink);text-decoration:none;padding:8px 0;border-bottom:2px solid transparent}
body:not(.offer) .navlinks a:hover,body:not(.offer) .navlinks a[aria-current="page"]{
  color:var(--accent);border-bottom-color:var(--accent)}
body:not(.offer) .masthead-call{margin-left:auto}

/* --- buttons: one shape, and the call button is unmistakably the loud one ----------------- */
body:not(.offer) .button{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:.005em;
  padding:13px 22px;border-radius:7px;text-decoration:none;border:2px solid transparent;
  background:var(--brand);color:#fff;transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
body:not(.offer) .button:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
body:not(.offer) .button.call,body:not(.offer) .button.cta{background:var(--cta);color:var(--cta-ink)}
body:not(.offer) .button.light{background:transparent;color:var(--brand);border-color:var(--line)}
body:not(.offer) .button.light:hover{border-color:var(--brand)}
body:not(.offer) .button.big{font-size:20px;padding:17px 30px}
body:not(.offer) a.call,body:not(.offer) a.footer-call{font-variant-numeric:tabular-nums}

/* --- hero --------------------------------------------------------------------------------- */
body:not(.offer) .hero{
  display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center;padding:54px 0 46px}
body:not(.offer) .hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
body:not(.offer) .hero-photo{
  aspect-ratio:4/3;overflow:hidden;border-radius:14px;box-shadow:var(--shadow);background:var(--soft)}
body:not(.offer) .hero figcaption.image-label{
  font-size:13.5px;color:var(--muted);padding:11px 2px 0;line-height:1.45}

/* --- trust bar: the four things checked before dialling ----------------------------------- */
body:not(.offer) .trustbar{background:var(--brand);color:#eef5f8}
/* Flex, not equal columns: the bar carries however many facts the record can actually evidence -
   two for a client whose licence is still unverified, five for one whose is - and a two-item grid
   stretched across the full width reads as a bar with something missing from it. */
body:not(.offer) .trustbar-inner{
  display:flex;flex-wrap:wrap;gap:16px 46px;padding-block:18px}
body:not(.offer) .trust-item{display:flex;flex-direction:column;gap:2px;min-width:0}
body:not(.offer) .trust-k{
  font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.11em;
  text-transform:uppercase;color:#9ec6d8}
body:not(.offer) .trust-v{font-weight:600;font-size:16.5px;color:#fff;overflow-wrap:anywhere}
body:not(.offer) .trust-item:only-child .trust-k{font-size:15px;letter-spacing:.06em}

/* --- sections, cards, gallery -------------------------------------------------------------- */
body:not(.offer) .section{padding:56px 0;border-top:1px solid var(--line)}
body:not(.offer) .section.split{display:grid;grid-template-columns:1fr 1fr;gap:48px}
body:not(.offer) .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:28px}
body:not(.offer) .card{
  background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:24px;
  border-top:4px solid var(--accent);transition:box-shadow .15s ease,transform .15s ease}
body:not(.offer) .card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
body:not(.offer) .card h3{margin:0 0 7px}
body:not(.offer) .card p{margin:0;color:var(--muted);font-size:16px}
body:not(.offer) .number{
  font-family:var(--display);font-weight:800;font-size:13px;color:var(--accent);
  letter-spacing:.08em;display:block;margin-bottom:9px}
body:not(.offer) .gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;margin-top:30px}
body:not(.offer) .project{margin:0;min-width:0;background:var(--soft);border-radius:12px;overflow:hidden}
body:not(.offer) .project .image-frame{aspect-ratio:4/3;overflow:hidden}
body:not(.offer) .project figcaption{padding:20px 22px 24px}
body:not(.offer) .project h2{font-size:22px;margin:0 0 8px}
body:not(.offer) .sample{
  font-family:var(--display);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--muted);display:block;margin-bottom:7px}
body:not(.offer) .credit{font-size:13px;color:var(--muted);margin:10px 0 0}
body:not(.offer) .photo{width:100%;height:100%;object-fit:cover;display:block}

/* --- where we work / when we answer -------------------------------------------------------- */
body:not(.offer) .areas{font-size:18px;line-height:1.7}
body:not(.offer) dl.hours{
  display:grid;grid-template-columns:1fr auto;gap:0 24px;margin:18px 0 0;max-width:42ch;font-size:16.5px}
body:not(.offer) dl.hours>div{display:contents}
body:not(.offer) dl.hours dt,body:not(.offer) dl.hours dd{
  padding:9px 0;border-bottom:1px solid var(--line)}
body:not(.offer) dl.hours dt{font-weight:600}
body:not(.offer) dl.hours dd{margin:0;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
body:not(.offer) .reach{
  background:var(--soft);border:1px solid var(--line);border-left:4px solid var(--cta);
  border-radius:10px;padding:24px 26px;margin:24px 0}
body:not(.offer) .reach h2{margin-top:0}

/* --- the last call ------------------------------------------------------------------------- */
body:not(.offer) .callband{background:var(--brand);color:#fff;margin-top:8px}
body:not(.offer) .callband-inner{
  display:flex;align-items:center;justify-content:space-between;gap:28px;padding-block:38px;flex-wrap:wrap}
body:not(.offer) .callband h2{color:#fff;margin:0;font-size:clamp(26px,3vw,34px)}
body:not(.offer) .band-sub{color:#a9cadb;margin:7px 0 0;font-size:16px}
body:not(.offer) footer{background:var(--paper);border-top:1px solid var(--line);padding:30px 0;font-size:15px;color:var(--muted)}
body:not(.offer) .footerline{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
/* The licence number, in the footer of every page. A.R.S. 32-1124(B)(3) requires it on all
   published advertising and (B)(4) requires a linked site to display it PROMINENTLY, which is a
   test about display and not about presence. So it takes the body colour and weight rather than
   the muted footer grey - readable without shouting, on every page, including the three that
   used to carry the business name, the phone number and no licence number at all. */
/* A photograph that is taller than it is wide keeps its own shape. The 4/3 frame with
   object-fit: cover was showing roughly the middle 56% of a 480x640 file - the audit that
   found it noted that rewriting the alt text to describe what survives does not un-crop the
   picture. The builder measures each photograph and marks the portraits. */
body:not(.offer) .project .image-frame.portrait{aspect-ratio:3/4}
/* The out-of-hours route. Second to the phone, because for every trade here the phone is the
   right first move - but present, because "ring us" is not an answer at 5pm on a Saturday. */
body:not(.offer) .email-big{font-size:20px;margin:6px 0 2px;overflow-wrap:anywhere}
body:not(.offer) .email-big .mail{font-weight:600;text-decoration-thickness:2px}
body:not(.offer) .footer-licence{display:inline-block;margin-top:4px;color:var(--ink);font-weight:600;overflow-wrap:anywhere}

/* --- banner and skip link ------------------------------------------------------------------ */
body:not(.offer) .banner{
  background:var(--brand);color:#cfe3ec;font-size:12.5px;letter-spacing:.04em;
  text-align:center;padding:7px 16px}

/* --- phone --------------------------------------------------------------------------------- */
@media(max-width:900px){
  body:not(.offer) .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body:not(.offer) .trustbar-inner{gap:12px 28px}
}
@media(max-width:760px){
  body:not(.offer){font-size:17px}
  body:not(.offer) header{position:static}
  body:not(.offer) header nav{display:grid;grid-template-columns:1fr auto;gap:12px;padding:14px 0}
  body:not(.offer) .navlinks{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
  body:not(.offer) .navlinks a{border-bottom:1px solid var(--line);padding:12px 2px}
  /* `js` is added to <html> - an ANCESTOR of <body> - so `body ... .js` can never match. This
   rule was dead, and the mobile menu collapsed only because the older unscoped rule in the
   template block still matched and out-specified the display:grid above. Deleting that
   template block, an obviously safe cleanup, would have left every mobile menu on every
   client site permanently expanded. Independent review verified the precedence rather than
   assuming it, 2026-09-15. */
.js body:not(.offer) .navlinks:not(.is-open){display:none}
  body:not(.offer) .hero,body:not(.offer) .section.split{grid-template-columns:1fr;gap:28px}
  body:not(.offer) .hero{padding:32px 0 34px}
  body:not(.offer) .hero .actions .button{flex:1 1 100%}
  body:not(.offer) .grid,body:not(.offer) .gallery{grid-template-columns:1fr;gap:20px}
  body:not(.offer) .section{padding:40px 0}
  body:not(.offer) .callband-inner{padding-block:30px}
  body:not(.offer) .callband .button{width:100%}
  body:not(.offer) dl.hours{max-width:none}
}
@media(prefers-reduced-motion:reduce){
  body:not(.offer) *{transition:none!important}
  body:not(.offer) .button:hover,body:not(.offer) .card:hover{transform:none}
}