/* All Quality Plumbing — design system
   Navy from the logo mark (#2E437B), copper accent for action.
   Light theme only, by client direction. */

:root{
  color-scheme: light;

  /* brand */
  --navy:        #2E437B;
  --navy-deep:   #1B2A50;
  --navy-ink:    #131E3B;
  --ice:         #CCE4E6;
  --ice-soft:    #E8F2F4;

  /* action — copper, for the trade and for contrast against navy */
  --copper:      #B4541C;
  --copper-dark: #8F4113;
  --copper-soft: #FBEFE7;

  /* neutrals, biased toward the navy */
  --paper:   #F6F8FB;
  --surface: #FFFFFF;
  --rule:    #DCE3EC;
  --rule-soft:#EAEFF5;
  --ink:     #172033;
  --muted:   #596781;

  /* semantic */
  --urgent:  #B4541C;
  --good:    #18715C;

  --shadow-sm: 0 1px 2px rgba(23,32,51,.06);
  --shadow:    0 2px 4px rgba(23,32,51,.05), 0 12px 28px -14px rgba(23,32,51,.22);
  --shadow-lg: 0 4px 8px rgba(23,32,51,.06), 0 24px 48px -20px rgba(23,32,51,.30);

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;

  --wrap: 1180px;
  --gut: 20px;
  --radius: 10px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 0;
}

h1,h2,h3,h4{ font-family: var(--display); margin:0; line-height:1.12; letter-spacing:-.02em; text-wrap: balance; color: var(--navy-ink); }
h1{ font-size: clamp(32px, 6.4vw, 54px); font-weight:800; }
h2{ font-size: clamp(25px, 4vw, 36px); font-weight:800; }
h3{ font-size: clamp(19px, 2.4vw, 22px); font-weight:700; letter-spacing:-.01em; }
p{ margin:0; }
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--navy); text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 3px solid var(--copper); outline-offset: 2px; border-radius: 3px;
}

.wrap{ width:100%; max-width: var(--wrap); margin-inline:auto; padding-inline: var(--gut); }
.stack > * + *{ margin-top: 1rem; }
.lead{ font-size: clamp(17px, 2.1vw, 20px); color: var(--muted); max-width: 60ch; }
.eyebrow{
  font-family: var(--display); font-weight:700; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color: var(--copper); margin-bottom:10px;
}
.eyebrow.on-dark{ color: var(--ice); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- skip link ---------- */
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:12px; top:12px; z-index:200; background:var(--surface); padding:10px 14px; border-radius:6px; box-shadow:var(--shadow); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family: var(--display); font-weight:700; font-size:16px; letter-spacing:.01em;
  padding: 14px 22px; border-radius: 8px; border:2px solid transparent;
  text-decoration:none; cursor:pointer; transition: background .15s, color .15s, border-color .15s;
  min-height:52px; text-align:center;
}
.btn-call{ background: var(--copper); color:#fff; }
.btn-call:hover{ background: var(--copper-dark); }
.btn-book{ background: var(--navy); color:#fff; }
.btn-book:hover{ background: var(--navy-deep); }
.btn-ghost{ background: transparent; color: var(--navy); border-color: var(--rule); }
.btn-ghost:hover{ border-color: var(--navy); }
.btn-ghost.on-dark{ color:#fff; border-color: rgba(255,255,255,.45); }
.btn-ghost.on-dark:hover{ border-color:#fff; background: rgba(255,255,255,.08); }
.btn-lg{ font-size:17px; padding:16px 26px; min-height:58px; }
.btn svg{ width:19px; height:19px; flex:0 0 19px; fill:currentColor; }

.btn-row{ display:flex; flex-wrap:wrap; gap:12px; }
.btn-row .btn{ flex: 1 1 auto; }
@media (min-width:520px){ .btn-row .btn{ flex:0 0 auto; } }

/* ---------- header ---------- */
.topbar{
  background: var(--navy-ink); color:#fff;
  font-size:13.5px; letter-spacing:.01em;
}
.topbar .wrap{ display:flex; align-items:center; justify-content:center; gap:18px; min-height:38px; flex-wrap:wrap; padding-block:7px; }
.topbar b{ font-family:var(--display); font-weight:700; }
.topbar .dot{ color: var(--ice); opacity:.5; }
@media (max-width:600px){
  /* the service area line is hidden here, so its separators have nothing left
     to separate and were leaving an orphan dot at the end of the first line */
  .topbar .hide-sm, .topbar .dot{ display:none; }
  .topbar .wrap{ gap:4px 16px; }
}

.masthead{
  position: sticky; top:0; z-index:60;
  background: var(--surface); border-bottom:1px solid var(--rule);
}
.masthead .wrap{ display:flex; align-items:center; gap:16px; min-height:76px; }
.brand{ display:flex; align-items:center; flex:0 0 auto; text-decoration:none; }
.brand img{ width: 190px; }
@media (min-width:860px){ .brand img{ width: 232px; } }

.mainnav{ display:none; margin-left:auto; }
@media (min-width:980px){
  /* 20px, not the original 26px: six nav items plus both header buttons
     need 19px more than the 1180px wrap allows at 26px. */
  .mainnav{ display:flex; align-items:center; gap:20px; }
  .mainnav a{
    font-family:var(--display); font-weight:600; font-size:15px; color: var(--ink);
    text-decoration:none; padding-block:6px; border-bottom:2px solid transparent;
  }
  .mainnav a:hover, .mainnav a[aria-current="page"]{ color: var(--navy); border-bottom-color: var(--copper); }
}
.head-cta{ margin-left:auto; display:none; }
@media (min-width:980px){ .head-cta{ display:flex; gap:10px; margin-left:26px; } }

/* mobile floating call button
   One action, not two. It floats clear of the content instead of holding a
   permanent strip across the bottom of the screen. Desktop already carries the
   number in the masthead, so it is hidden there. */
.callfab{
  position:fixed; right:16px; z-index:80;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display:inline-flex; align-items:center; gap:9px;
  min-height:56px; padding:0 22px 0 19px; border-radius:999px;
  background: var(--copper); color:#fff; text-decoration:none;
  font-family:var(--display); font-weight:700; font-size:16.5px;
  box-shadow: 0 6px 22px -4px rgba(23,32,51,.45), 0 2px 6px rgba(23,32,51,.22);
}
.callfab svg{ width:20px; height:20px; fill:currentColor; }
/* the footer, not the body, carries the clearance, so no white strip appears
   below the footer on a phone */
@media (max-width:859px){ .site-foot{ padding-bottom:78px; } }
.callfab:active{ transform:translateY(1px); }
@media (min-width:860px){ .callfab{ display:none; } }

/* ---------- hero ---------- */
/* the hero is a <section>, so it would otherwise inherit the page section
   padding on top of its own. Zero it and let .hero .wrap set the height. */
.hero{ position:relative; background: var(--navy-ink); color:#fff; overflow:hidden; padding-block:0; }
.hero::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(103deg, rgba(19,30,59,.97) 0%, rgba(19,30,59,.92) 42%, rgba(27,42,80,.62) 72%, rgba(27,42,80,.45) 100%);
}
.hero-img{ position:absolute; inset:0; }
.hero-img img{ width:100%; height:100%; object-fit:cover; object-position: 62% 42%; }
.hero .wrap{ position:relative; z-index:2; padding-block: 30px 34px; }
@media (min-width:860px){ .hero .wrap{ padding-block: 42px 46px; } }
/* hero type runs tighter than the page scale: the headline earns two lines,
   not four, so the services below it sit above the fold. */
.hero h1{ color:#fff; max-width: 34ch; font-size: clamp(27px, 3.9vw, 38px); }
.hero .lead{ color: #D5E0EE; max-width: 62ch; margin-top:12px; font-size: clamp(16px,1.6vw,17.5px); }
.hero .btn-row{ margin-top:20px; }
.hero-note{ margin-top:14px; font-size:14px; color:#AFC0D8; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.hero-note strong{ color:#fff; font-weight:600; }

/* ---------- trust strip ---------- */
.trust{ background: var(--navy); color:#fff; }
.trust .wrap{ display:grid; grid-template-columns: repeat(2,1fr); gap:0; }
@media (min-width:760px){ .trust .wrap{ grid-template-columns: repeat(4,1fr); } }
.trust-item{ padding:20px 16px; border-right:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14); }
@media (min-width:760px){ .trust-item{ border-bottom:none; } .trust-item:last-child{ border-right:none; } }
.trust-item:nth-child(2n){ border-right:none; }
@media (min-width:760px){ .trust-item:nth-child(2n){ border-right:1px solid rgba(255,255,255,.14); } }
.trust-num{ font-family:var(--display); font-weight:800; font-size:clamp(22px,3.4vw,28px); line-height:1.1; display:block; }
.trust-lbl{ font-size:13.5px; color:#C3D0E4; margin-top:3px; display:block; line-height:1.35; }
.stars{ color:#F0B429; letter-spacing:1px; font-size:15px; }

/* ---------- sections ---------- */
section{ padding-block: 56px; }
@media (min-width:860px){ section{ padding-block: 84px; } }
.sec-paper{ background: var(--paper); }
.sec-ice{ background: var(--ice-soft); }
.sec-head{ max-width: 62ch; margin-bottom: 34px; }
.sec-head .lead{ margin-top:12px; }
/* split head: heading left, intro right. Used sparingly, where the block
   below is wide and the stacked head would waste vertical space. */
@media (min-width:1000px){
  .sec-head--split{
    max-width:none; display:grid; column-gap:60px; align-items:end;
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); margin-bottom:28px;
  }
  .sec-head--split .eyebrow{ grid-column:1; grid-row:1; }
  .sec-head--split h2{ grid-column:1; grid-row:2; margin-bottom:0; }
  .sec-head--split .lead{ grid-column:2; grid-row:2; margin-top:0; max-width:50ch; padding-bottom:5px; }
}

/* ---------- service cards ---------- */
.svc-grid{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:620px){ .svc-grid{ grid-template-columns: repeat(2,1fr); } }
@media (min-width:960px){ .svc-grid{ grid-template-columns: repeat(3,1fr); } }
.svc{
  display:flex; flex-direction:column; gap:8px;
  background: var(--surface); border:1px solid var(--rule); border-radius: var(--radius);
  padding: 22px 20px 20px; text-decoration:none; color:inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.svc:hover{ border-color: var(--navy); box-shadow: var(--shadow); transform: translateY(-2px); }
.svc-ico{ width:34px; height:34px; fill: var(--navy); margin-bottom:2px; }
.svc h3{ font-size:18.5px; }
.svc p{ font-size:15px; color: var(--muted); line-height:1.55; }
.svc .more{ margin-top:auto; padding-top:12px; font-family:var(--display); font-weight:700; font-size:14.5px; color:var(--copper); }
.svc.urgent{ border-left:4px solid var(--copper); }

/* ---------- split ---------- */
.split{ display:grid; gap:32px; align-items:center; grid-template-columns:1fr; }
@media (min-width:900px){ .split{ grid-template-columns: 1.05fr .95fr; gap:56px; } }
.split-media img{ border-radius: var(--radius); width:100%; }
.split.rev .split-media{ order:-1; }
@media (min-width:900px){ .split.rev .split-media{ order:1; } }

.checks{ list-style:none; padding:0; margin:22px 0 0; display:flex; flex-direction:column; gap:12px; }
.checks li{ display:flex; gap:11px; align-items:flex-start; font-size:16px; }
.checks svg{ width:20px; height:20px; flex:0 0 20px; margin-top:3px; fill: var(--good); }

/* ---------- reviews ---------- */
.rev-grid{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:760px){ .rev-grid{ grid-template-columns: repeat(3,1fr); } }
.rev{ background: var(--surface); border:1px solid var(--rule); border-radius: var(--radius); padding:22px 20px; display:flex; flex-direction:column; }
.rev .stars{ margin-bottom:10px; }
.rev blockquote{ margin:0; font-size:15.5px; line-height:1.6; color: var(--ink); }
.rev cite{ margin-top:auto; padding-top:14px; font-style:normal; font-size:13.5px; color: var(--muted); font-family:var(--display); font-weight:600; }

/* ---------- area ---------- */
.area-list{ display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; padding:0; list-style:none; }
.area-list li{
  font-family:var(--display); font-weight:600; font-size:14.5px;
  background: var(--surface); border:1px solid var(--rule); border-radius:999px; padding:8px 16px;
}

/* ---------- faq ---------- */
.faq{ max-width: 760px; }
.faq details{ border-bottom:1px solid var(--rule); }
.faq summary{
  cursor:pointer; list-style:none; padding:18px 36px 18px 0; position:relative;
  font-family:var(--display); font-weight:700; font-size:17.5px; color: var(--navy-ink);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:6px; top:26px; width:11px; height:11px;
  border-right:2.5px solid var(--copper); border-bottom:2.5px solid var(--copper);
  transform: rotate(45deg); transition: transform .18s;
}
.faq details[open] summary::after{ transform: rotate(-135deg); top:30px; }
.faq .ans{ padding:0 0 20px; color: var(--muted); font-size:16px; max-width:68ch; }

/* ---------- CTA band ---------- */
.cta-band{ background: var(--navy-ink); color:#fff; }
.cta-band h2{ color:#fff; max-width:20ch; }
.cta-band .lead{ color:#C3D0E4; margin-top:14px; }
.cta-band .btn-row{ margin-top:28px; }

/* ---------- form ---------- */
.form-card{ background: var(--surface); border:1px solid var(--rule); border-radius: var(--radius); padding: 26px 22px; box-shadow: var(--shadow); }
@media (min-width:700px){ .form-card{ padding:34px 32px; } }
/* the handler redirects back with ?error=, which the page turns into this */
.form-error{
  margin:0 0 20px; padding:14px 16px; border-radius:8px;
  background:#FDECEA; border:1px solid #F0B7AE; color:#8A2B18;
  font-size:15.5px; line-height:1.5;
}
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:18px; }
.field label{ font-family:var(--display); font-weight:600; font-size:14.5px; color: var(--navy-ink); }
.field .hint{ font-size:13.5px; color: var(--muted); }
.field input, .field select, .field textarea{
  font-family:var(--body); font-size:16.5px; color:var(--ink);
  padding:13px 14px; border:1.5px solid var(--rule); border-radius:7px; background:var(--surface);
  width:100%; min-height:50px;
}
.field input:hover, .field select:hover, .field textarea:hover{ border-color:#BFCADB; }
.field textarea{ min-height:120px; resize:vertical; line-height:1.5; }
.field-row{ display:grid; gap:0 16px; grid-template-columns:1fr; }
@media (min-width:620px){ .field-row{ grid-template-columns:1fr 1fr; } }
.req{ color: var(--copper); }
.radio-grid{ display:grid; gap:9px; grid-template-columns:1fr; }
@media (min-width:520px){ .radio-grid{ grid-template-columns:1fr 1fr; } }
.radio-grid label{
  display:flex; align-items:flex-start; gap:10px; padding:13px 14px;
  border:1.5px solid var(--rule); border-radius:7px; cursor:pointer; font-family:var(--body); font-size:15.5px; font-weight:400;
}
.radio-grid label:hover{ border-color:#BFCADB; }
.radio-grid input{ width:auto; min-height:0; margin:4px 0 0; accent-color: var(--navy); }
.radio-grid input:checked + span{ font-weight:600; color: var(--navy); }

.emergency-note{
  display:flex; gap:12px; align-items:flex-start;
  background: var(--copper-soft); border-left:4px solid var(--copper);
  padding:16px 18px; border-radius:0 7px 7px 0; margin-bottom:24px; font-size:15.5px;
}
.emergency-note svg{ width:22px; height:22px; flex:0 0 22px; fill: var(--copper); margin-top:2px; }
.emergency-note a{ font-weight:700; color: var(--copper-dark); white-space:nowrap; }

/* ---------- footer ---------- */
.site-foot{ background: var(--navy-ink); color:#B9C6DA; font-size:15px; padding-block: 48px 32px; }
.site-foot h4{ color:#fff; font-size:14px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:14px; font-family:var(--display); font-weight:700; }
.foot-grid{ display:grid; gap:34px; grid-template-columns:1fr; }
@media (min-width:700px){ .foot-grid{ grid-template-columns: 1.3fr 1fr 1fr; gap:44px; } }
.site-foot a{ color:#D5E0EE; text-decoration:none; }
.site-foot a:hover{ color:#fff; text-decoration:underline; }
.site-foot ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
.foot-logo{ width:210px; margin-bottom:16px; }
.foot-logo .mark-ink{ fill:#fff; }
.foot-phone{ font-family:var(--display); font-weight:800; font-size:26px; color:#fff !important; text-decoration:none !important; display:inline-block; margin-block:4px 2px; }
.lic{ font-size:13.5px; color:#8FA0BC; margin-top:14px; }
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.13); margin-top:36px; padding-top:20px;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:13.5px; color:#8FA0BC;
}

/* ---------- breadcrumb ---------- */
.crumb{ font-size:14px; color:var(--muted); padding-block:16px 0; }
.crumb a{ color:var(--muted); }
.crumb a:hover{ color:var(--navy); }

/* ---------- page hero (interior) ---------- */
.page-hero{ background: var(--paper); border-bottom:1px solid var(--rule); padding-block: 26px 46px; }
.page-hero h1{ max-width:18ch; }
.page-hero .lead{ margin-top:16px; }
.page-hero .btn-row{ margin-top:26px; }

/* ---------- prose ---------- */
.prose{ max-width: 68ch; }
.prose > * + *{ margin-top:1.05rem; }
.prose h2{ margin-top:2.4rem; }
.prose h3{ margin-top:1.9rem; }
.prose ul{ padding-left:1.15rem; display:flex; flex-direction:column; gap:.5rem; }
.prose li::marker{ color: var(--copper); }

.callout{
  border-left:4px solid var(--ice); background: var(--ice-soft);
  padding:18px 20px; border-radius:0 8px 8px 0; font-size:16px;
}
.callout strong{ color: var(--navy-ink); }

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}

/* =====================================================================
   v2 — local hero, James, process steps, full service list
   ===================================================================== */

/* hero keeps the photo in colour; the scrim carries the text */
.hero-local{ position:relative; background:var(--navy-ink); color:#fff; overflow:hidden; }
.hero-local .hero-img img{ object-position:50% 58%; }
.hero-local::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(14,22,45,.96) 0%, rgba(14,22,45,.90) 38%, rgba(17,28,56,.58) 66%, rgba(17,28,56,.30) 100%),
    linear-gradient(180deg, rgba(14,22,45,.35) 0%, rgba(14,22,45,0) 30%);
}
@media (max-width:760px){
  .hero-local::after{ background: linear-gradient(180deg, rgba(14,22,45,.80) 0%, rgba(14,22,45,.92) 45%, rgba(14,22,45,.96) 100%); }
}
.local-tag{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:11px;
  background:rgba(204,228,230,.14); border:1px solid rgba(204,228,230,.3);
  color:var(--ice); font-family:var(--display); font-weight:600; font-size:13px;
  letter-spacing:.06em; text-transform:uppercase; padding:7px 14px; border-radius:999px;
}
.local-tag svg{ width:14px; height:14px; fill:currentColor; }

/* ---------- Meet James ---------- */
.james-grid{ display:grid; gap:34px; grid-template-columns:1fr; align-items:center; }
@media (min-width:880px){ .james-grid{ grid-template-columns: 0.85fr 1.15fr; gap:56px; } }

.photo-slot{
  position:relative; border-radius:var(--radius); overflow:hidden;
  background:
    repeating-linear-gradient(135deg, var(--ice-soft) 0 14px, #DFEBEE 14px 28px);
  border:2px dashed var(--navy); aspect-ratio:4/5; display:flex;
  flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:28px; gap:10px;
}
.photo-slot svg{ width:46px; height:46px; fill:var(--navy); opacity:.55; }
.photo-slot b{ font-family:var(--display); font-weight:700; font-size:16px; color:var(--navy-ink); }
.photo-slot span{ font-size:14px; color:var(--muted); max-width:26ch; line-height:1.45; }
.photo-slot .tagline{
  position:absolute; top:12px; left:12px; background:var(--copper); color:#fff;
  font-family:var(--display); font-weight:700; font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; padding:5px 10px; border-radius:4px;
}
.james-sig{
  margin-top:24px; padding-top:20px; border-top:1px solid var(--rule);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.james-sig .nm{ font-family:var(--display); font-weight:800; font-size:19px; color:var(--navy-ink); }
.james-sig .rl{ font-size:14.5px; color:var(--muted); }
.pull{
  font-family:var(--display); font-weight:700; font-size:clamp(19px,2.6vw,24px);
  line-height:1.35; color:var(--navy-ink); border-left:4px solid var(--copper);
  padding-left:20px; margin:4px 0 20px;
}

/* ---------- process steps ---------- */
.steps{ display:grid; gap:18px; grid-template-columns:1fr; counter-reset:step; margin-top:8px; }
@media (min-width:720px){ .steps{ grid-template-columns:repeat(4,1fr); gap:20px; } }
.step{ position:relative; padding-top:14px; border-top:3px solid var(--ice); }
.step .n{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%; background:var(--navy); color:#fff;
  font-family:var(--display); font-weight:700; font-size:14px; margin-bottom:10px;
}
.step h3{ font-size:17.5px; margin-bottom:6px; }
.step p{ font-size:15px; color:var(--muted); line-height:1.55; }

/* ---------- full service list ---------- */
.svc-list{
  list-style:none; padding:0; margin:0; display:grid; gap:0 26px;
  grid-template-columns:1fr; border-top:1px solid var(--rule);
}
@media (min-width:640px){ .svc-list{ grid-template-columns:1fr 1fr; } }
@media (min-width:980px){ .svc-list{ grid-template-columns:repeat(3,1fr); } }
.svc-list li{ border-bottom:1px solid var(--rule); }
.svc-list a{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 4px; text-decoration:none; color:var(--ink); font-size:16px;
  transition:color .13s, padding .13s;
}
.svc-list a:hover{ color:var(--navy); padding-left:8px; }
.svc-list a::after{ content:"→"; color:var(--copper); font-size:15px; opacity:0; transition:opacity .13s; }
.svc-list a:hover::after{ opacity:1; }

/* ---------- real reviews ---------- */
.rev .src{
  display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--muted);
  font-family:var(--display); font-weight:600; letter-spacing:.03em;
}
.rev-head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.rev-when{ font-size:13px; color:var(--muted); }
.rating-badge{
  display:inline-flex; align-items:center; gap:12px; background:var(--surface);
  border:1px solid var(--rule); border-radius:10px; padding:14px 20px; box-shadow:var(--shadow-sm);
}
.rating-badge .big{ font-family:var(--display); font-weight:800; font-size:34px; color:var(--navy-ink); line-height:1; }
.rating-badge .meta{ font-size:14px; color:var(--muted); line-height:1.35; }

/* ---------- local proof band ---------- */
.local-band{ display:grid; gap:0; grid-template-columns:1fr; align-items:stretch; }
@media (min-width:900px){ .local-band{ grid-template-columns:1fr 1fr; } }
.local-band .lb-media img{ width:100%; height:100%; object-fit:cover; min-height:300px; }
.local-band .lb-body{ padding:44px 28px; background:var(--navy-ink); color:#fff; display:flex; flex-direction:column; justify-content:center; }
@media (min-width:900px){ .local-band .lb-body{ padding:60px 52px; } }
.local-band h2{ color:#fff; }
.local-band .lead{ color:#C3D0E4; margin-top:14px; }
.local-band .area-list li{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); color:#fff; }

/* ---------- James portrait ---------- */
.james-photo{ margin:0; position:relative; }
.james-photo img{
  width:100%; border-radius:var(--radius); display:block;
  box-shadow: var(--shadow-lg); object-fit:cover; aspect-ratio:1/1;
}
.james-photo figcaption{
  position:absolute; left:16px; bottom:16px; right:16px;
  background:rgba(19,30,59,.88); color:#fff; backdrop-filter:blur(4px);
  font-family:var(--display); font-weight:700; font-size:14.5px;
  padding:10px 14px; border-radius:7px;
}
.svc .more::after{ content:" \2192"; }
.mainnav a{ white-space:nowrap; }
.head-cta .btn{ white-space:nowrap; }
.masthead .wrap{ gap:12px; }
/* 980 to 1200 is the tight band: the nav appears at 980 but the viewport is
   still narrow. Adding Special Offer as a sixth item on 2026-09-28 pushed the
   masthead 126px over its own width at 980, which scrolled the whole page
   sideways. The ghost button is what gives way: the phone number is the
   primary action and Request Service is in every hero and every CTA band, so
   nothing is lost. */
@media (min-width:980px) and (max-width:1200px){
  .mainnav{ gap:15px; }
  .mainnav a{ font-size:14px; }
  .head-cta .btn{ padding:12px 15px; font-size:14.5px; }
  .head-cta .btn-ghost{ display:none; }
}

/* ---------- problem cards (pain led) ---------- */
.prob-grid{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:620px){ .prob-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:980px){ .prob-grid{ grid-template-columns:repeat(3,1fr); } }
.prob{
  background:var(--surface); border:1px solid var(--rule); border-left:4px solid var(--copper);
  border-radius:0 var(--radius) var(--radius) 0; padding:20px 20px 18px;
  display:flex; flex-direction:column; gap:7px; text-decoration:none; color:inherit;
  transition:box-shadow .15s, transform .15s;
}
.prob:hover{ box-shadow:var(--shadow); transform:translateY(-2px); }
.prob .sym{ font-family:var(--display); font-weight:700; font-size:17px; color:var(--navy-ink); }
.prob .fix{ font-size:15px; color:var(--muted); line-height:1.55; }
.prob .go{ margin-top:auto; padding-top:10px; font-family:var(--display); font-weight:700; font-size:14px; color:var(--copper); }
.prob .go::after{ content:" \2192"; }

/* ---------- proof stats from Google ---------- */
.proof{ display:grid; gap:0; grid-template-columns:repeat(2,1fr); border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden; background:var(--surface); }
@media (min-width:820px){ .proof{ grid-template-columns:repeat(4,1fr); } }
.proof-item{ padding:22px 18px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.proof-item:nth-child(2n){ border-right:none; }
@media (min-width:820px){
  .proof-item{ border-bottom:none; }
  .proof-item:nth-child(2n){ border-right:1px solid var(--rule); }
  .proof-item:last-child{ border-right:none; }
}
.proof-n{ font-family:var(--display); font-weight:800; font-size:clamp(28px,4vw,38px); color:var(--copper); line-height:1; display:block; }
.proof-l{ display:block; margin-top:6px; font-size:14.5px; color:var(--muted); line-height:1.4; }
.proof-src{ margin-top:14px; font-size:13.5px; color:var(--muted); }

/* ---------- offer bar ---------- */
.offer{
  background:var(--copper); color:#fff; text-align:center;
  padding:16px 20px; font-family:var(--display); font-weight:700; font-size:clamp(15px,2vw,18px);
}
.offer a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }

/* =====================================================================
   Symptom lattice. A compact grid, but ruled like a spec sheet rather
   than built from cards: no radius, no shadow, no fill, no accent rail.
   Cells share hairline rules so the whole block reads as one table.
   ===================================================================== */
.diag{
  display:grid; grid-template-columns:1fr; margin-top:4px;
  border-top:2px solid var(--navy-ink); border-left:1px solid var(--rule);
}
@media (min-width:600px){ .diag{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .diag{ grid-template-columns:repeat(4,1fr); } }
.diag-row{
  display:flex; flex-direction:column; min-width:0;
  padding:18px 18px 16px;
  border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
  text-decoration:none; color:inherit; background:transparent;
  transition:background .15s;
}
@media (min-width:1000px){ .diag-row{ padding:20px 20px 18px; } }
@media (max-width:599px){
  .diag-row{ padding:15px 2px 14px; border-right:0; }
  .diag{ border-left:0; }
  .diag-row.diag-more{ padding:18px 16px; }
}
.diag-row:hover{ background:var(--paper); }
.diag-row:hover .diag-sym{ color:var(--copper); }
.diag-n{
  font-family:var(--display); font-weight:700; font-size:11.5px; letter-spacing:.12em;
  color:var(--copper); font-variant-numeric:tabular-nums; margin-bottom:9px;
}
.diag-sym{
  font-family:var(--display); font-weight:700; font-size:17.5px;
  line-height:1.24; color:var(--navy-ink); letter-spacing:-.01em;
  transition:color .15s; margin-bottom:7px;
}
.diag-why{ color:var(--muted); font-size:14.5px; line-height:1.55; }
.diag-go{
  font-family:var(--display); font-weight:700; font-size:13px; color:var(--copper);
  margin-top:14px; padding-top:0;
}
.diag-go::after{ content:" \2192"; }
/* the closing cell: an invitation, not another symptom */
.diag-row.diag-more{ background:var(--navy-ink); }
.diag-row.diag-more:hover{ background:var(--navy-deep); }
.diag-more .diag-sym{ color:#fff; }
.diag-more:hover .diag-sym{ color:#fff; }
.diag-more .diag-why{ color:#C3D0E4; }
.diag-more .diag-n{ color:var(--ice); }
.diag-more .diag-go{ color:var(--ice); }

/* featured band: one horizontal strip, not a third card grid */
.band{
  display:grid; grid-template-columns:1fr; align-items:center;
  background:var(--navy-ink); color:#fff; border-radius:var(--radius); overflow:hidden;
}
@media (min-width:880px){ .band{ grid-template-columns:1.25fr .75fr; } }
.band-body{ padding:34px 28px; }
@media (min-width:880px){ .band-body{ padding:44px 48px; } }
.band h3{ color:#fff; font-size:clamp(21px,2.8vw,27px); margin-bottom:10px; }
.band p{ color:#C3D0E4; font-size:16px; max-width:52ch; }
.band .btn-row{ margin-top:22px; }
.band-media{ height:100%; min-height:200px; }
.band-media img{ width:100%; height:100%; object-fit:cover; min-height:200px; }

/* =====================================================================
   Placeholder block, dev site only. Deliberately plain so nobody
   mistakes an unwritten page for a finished one.
   ===================================================================== */
.stub{ max-width:60ch; }
.stub-tag{
  display:inline-block; font-family:var(--display); font-weight:700;
  font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--copper); border:1px solid var(--copper); padding:5px 10px;
  margin-bottom:16px;
}
.stub p{ color:var(--muted); font-size:16.5px; line-height:1.65; }
.stub .btn-row{ margin-top:22px; }

/* dev banner: only present on the dev deployment */
.devbar{
  background:#7A2E00; color:#FFE9DC; text-align:center;
  font-family:var(--display); font-weight:700; font-size:12.5px;
  letter-spacing:.06em; padding:7px 14px;
}

/* =====================================================================
   Scannable lists. Two and three column bullet grids so a long list of
   services or symptoms reads at a glance instead of as a tall column.
   ===================================================================== */
ul.bullet-grid{
  list-style:none; padding:0; margin:20px 0 0; display:grid; gap:0;
  grid-template-columns:1fr; border-top:1px solid var(--rule);
}
@media (min-width:640px){ ul.bullet-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ ul.bullet-grid{ grid-template-columns:repeat(3,1fr); } }
ul.bullet-grid li{
  padding:12px 16px 12px 0; border-bottom:1px solid var(--rule);
  font-size:16px; position:relative; padding-left:20px;
}
ul.bullet-grid li::before{
  content:""; position:absolute; left:2px; top:20px;
  width:6px; height:6px; background:var(--copper); border-radius:50%;
}
ul.bullet-list{ list-style:none; padding:0; margin:18px 0 0; }
ul.bullet-list li{
  padding:9px 0 9px 20px; position:relative; font-size:16.5px;
  border-bottom:1px solid var(--rule-soft);
}
ul.bullet-list li::before{
  content:""; position:absolute; left:2px; top:18px;
  width:6px; height:6px; background:var(--copper); border-radius:50%;
}
@media (min-width:760px){
  ul.checks-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px 34px; }
}
/* service list on the home page and services index */
.svcs{ display:grid; grid-template-columns:1fr; gap:0; border-top:2px solid var(--navy-ink); margin-top:4px; }
@media (min-width:700px){ .svcs{ grid-template-columns:repeat(2,1fr); column-gap:44px; } }
.svcs a{
  display:block; padding:16px 0; border-bottom:1px solid var(--rule);
  text-decoration:none; color:inherit; transition:padding-left .15s;
}
.svcs a:hover{ padding-left:6px; }
.svcs .s-name{
  display:block; font-family:var(--display); font-weight:700; font-size:17.5px;
  color:var(--navy-ink); margin-bottom:3px;
}
.svcs a:hover .s-name{ color:var(--copper); }
.svcs .s-desc{ display:block; color:var(--muted); font-size:15px; line-height:1.5; }

/* three step variant of the process strip, so three items fill the row */
@media (min-width:720px){ .steps.steps-3{ grid-template-columns:repeat(3,1fr); } }

/* =====================================================================
   HOME v2
   Compact credibility bar, a slim offer strip, and a six item service
   grid. The grid is ruled rather than carded: no radius, no shadow, no
   icon set, so the service names carry the section.
   ===================================================================== */

/* --- credibility bar: five signals, one line where there is room --- */
.creds{ background:var(--navy); color:#fff; }
.creds .wrap{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:0; padding-block:0;
}
.creds .c{
  display:flex; align-items:center; gap:7px;
  font-family:var(--display); font-weight:700; font-size:14px; letter-spacing:.01em;
  padding:13px 20px; white-space:nowrap;
}
@media (min-width:1000px){ .creds .c{ font-size:14.5px; padding:14px 26px; } }
.creds .c + .c{ box-shadow:-1px 0 0 rgba(255,255,255,.16); }
.creds .c .star{ color:#F0B429; }
@media (max-width:620px){
  .creds .wrap{ justify-content:center; gap:0 4px; }
  .creds .c{ font-size:12.5px; padding:8px 10px; }
  .creds .c + .c{ box-shadow:none; }
}

/* --- new customer offer: present, but not competing with the CTAs --- */
.offer-strip{ background:var(--copper-soft); border-bottom:1px solid #F0DCCC; }
.offer-strip .wrap{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:6px 12px; padding-block:11px; text-align:center;
}
.offer-strip .tag{
  font-family:var(--display); font-weight:700; font-size:11px; letter-spacing:.11em;
  text-transform:uppercase; color:#fff; background:var(--copper);
  padding:4px 9px; border-radius:3px;
}
.offer-strip p{ font-size:15px; color:var(--navy-ink); }
.offer-strip a{ color:var(--copper); font-weight:600; }

/* --- six core services --- */
.six{
  display:grid; grid-template-columns:1fr; gap:0;
  border-top:2px solid var(--navy-ink); margin-top:2px;
}
@media (min-width:680px){ .six{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .six{ grid-template-columns:repeat(3,1fr); } }
.six a{
  display:flex; flex-direction:column; min-width:0;
  padding:22px 24px 20px 0; text-decoration:none; color:inherit;
  border-bottom:1px solid var(--rule); transition:background .15s, padding-left .15s;
}
@media (min-width:680px){
  .six a{ padding:24px 28px 22px 0; }
  .six a:nth-child(2n){ padding-left:28px; box-shadow:inset 1px 0 0 var(--rule); }
}
@media (min-width:1000px){
  .six a:nth-child(2n){ padding-left:0; box-shadow:none; }
  .six a:nth-child(3n-1), .six a:nth-child(3n){
    padding-left:28px; box-shadow:inset 1px 0 0 var(--rule);
  }
}
.six a:hover{ background:var(--paper); }
.six .n{
  font-family:var(--display); font-weight:700; font-size:11.5px; letter-spacing:.12em;
  color:var(--copper); margin-bottom:10px;
}
.six h3{
  font-size:19px; line-height:1.2; color:var(--navy-ink); margin-bottom:7px;
  transition:color .15s;
}
.six a:hover h3{ color:var(--copper); }
.six p{ color:var(--muted); font-size:15px; line-height:1.55; }
.six .more{
  font-family:var(--display); font-weight:700; font-size:13.5px; color:var(--copper);
  margin-top:16px;
}
.six .more::after{ content:" \2192"; }
.six-foot{ margin-top:26px; }
.six-foot a{
  font-family:var(--display); font-weight:700; font-size:16px; color:var(--navy);
  text-decoration:none; border-bottom:2px solid var(--copper); padding-bottom:3px;
}
.six-foot a:hover{ color:var(--copper); }
.six-foot a::after{ content:" \2192"; }

/* a little more air between home sections */
#home-main > section{ padding-block:52px; }
@media (min-width:860px){ #home-main > section{ padding-block:78px; } }

/* --- reviews: the testimonials carry the section --- */
.sec-head h2 .star-lg{ color:#F0B429; font-size:.85em; margin-left:2px; }
.rev-more{ margin-top:26px; }
.rev-more a{
  font-family:var(--display); font-weight:700; font-size:16px; color:var(--navy);
  text-decoration:none; border-bottom:2px solid var(--copper); padding-bottom:3px;
}
.rev-more a::after{ content:" \2192"; }
.rev-more a:hover{ color:var(--copper); }

/* --- emergency CTA: distinct, but the same navy family as the rest --- */
.emergency{ background:var(--navy-deep); color:#fff; }
.emergency h2{ color:#fff; margin-top:4px; }
.emergency .lead{ color:#C9D6EA; margin-top:12px; max-width:52ch; }
.em-inner{ display:grid; grid-template-columns:1fr; gap:26px; align-items:center; }
@media (min-width:900px){
  .em-inner{ grid-template-columns:1.35fr auto; gap:48px; }
  .em-inner .btn-row{ justify-content:flex-end; }
}

/* =====================================================================
   HOME ART DIRECTION
   Fewer rules, fewer boxes, fewer repeated components. Hierarchy comes
   from type and spacing. Orange is reserved for actions and links.
   Scoped to .home so the interior pages are untouched.
   ===================================================================== */

/* container width lives with the other tokens at the top of this file:
   --wrap is 1180px sitewide so the masthead and footer stay aligned. */

/* deliberate rather than empty vertical rhythm, and varied per section */
.home main > section{ padding-block:54px; }
@media (min-width:860px){ .home main > section{ padding-block:70px; } }
.home #services{ padding-bottom:58px; }
@media (min-width:860px){ .home #services{ padding-bottom:64px; } }
.home #james{ padding-top:26px; }
@media (min-width:860px){ .home #james{ padding-top:34px; } }

/* --- credibility bar: dots, not dividers --- */
.home .creds .c + .c{ box-shadow:none; }
.home .creds .c + .c::before{
  content:"\2022"; color:var(--ice); opacity:.55; margin-right:20px; font-weight:400;
}
/* On a phone the bar wraps to three lines, and a separator dot that lands at
   the start of a line reads as a bullet point rather than a divider. Below this
   width the items are spaced instead of punctuated. */
@media (max-width:620px){
  .home .creds .c + .c::before{ display:none; }
  .home .creds .wrap{ gap:2px 4px; }
  .home .creds .c{ padding:7px 12px; }
}

/* --- six services: arranged links, not spreadsheet cells --- */
.home .six{ border-top:0; margin-top:6px; row-gap:34px; column-gap:52px; }
@media (min-width:1000px){ .home .six{ column-gap:64px; } }
.home .six a{
  border-bottom:0; box-shadow:none !important; padding:0 !important;
  background:none !important; max-width:34ch;
}
.home .six a:hover{ background:none; }
.home .six h3{ font-size:21px; margin-bottom:8px; }
.home .six p{ font-size:15.5px; }
.home .six .more{ margin-top:12px; font-size:13.5px; }
@media (max-width:679px){
  .home .six{ row-gap:0; }
  .home .six a{ padding:19px 0 !important; border-bottom:1px solid var(--rule-soft); max-width:none; }
  .home .six a:last-child{ border-bottom:0; }
}

/* --- James: editorial, photograph carries it --- */
@media (min-width:880px){
  .home .james-grid{ grid-template-columns:0.75fr 1.25fr; gap:56px; align-items:center; }
}
.home .james-photo img{
  /* square. Since 2026-10-13 the photo is a crop of the October shoot
     (assets/photos-2026-10, "15"), chest up with the pocket logo in frame,
     768px into this 400px slot. See change-24. */
  border-radius:4px; box-shadow:none; aspect-ratio:1/1;
  border:1px solid var(--rule); max-width:400px;
}
.home .james-photo figcaption{
  position:static; background:none; backdrop-filter:none; color:var(--muted);
  padding:12px 0 0; font-size:14px; font-family:var(--body); font-weight:400;
  border-radius:0; text-align:left;
}
.home #james h2{ font-size:clamp(26px,2.9vw,36px); max-width:19ch; }
.home #james .lead{ margin-top:14px; }
.home .james-sig{ border-top:0; padding-top:4px; margin-top:22px; }

/* --- reviews: testimonials, not data cards --- */
.home .rev-grid{ gap:44px; }
@media (min-width:760px){ .home .rev-grid{ column-gap:56px; } }
.home .rev{
  background:none; border:0; border-radius:0; padding:0;
}
.home .rev blockquote{ font-size:17px; line-height:1.62; color:var(--ink); }
.home .rev cite{
  padding-top:16px; font-size:14.5px; color:var(--navy-ink); font-weight:700;
}
.home .rev cite .src{ color:var(--muted); font-weight:400; }
.home .rev .stars{ font-size:14px; letter-spacing:2px; margin-bottom:12px; }

/* --- areas served: a compact supporting section, not a full band ---
   It lists nine place names. It does not need a photo, a dark panel or
   the height of a primary section, so it gets a quiet rule and tight type. */
.home #area{ padding-block:50px; border-top:1px solid var(--rule); text-align:center; }
@media (min-width:860px){ .home #area{ padding-block:62px; } }
.home #area h2{ font-size:clamp(25px,2.5vw,32px); }
.home #area .lead{
  font-size:17.5px; line-height:1.55; max-width:60ch;
  margin:12px auto 0; color:var(--muted);
}
.home .areas-type{
  list-style:none; padding:0; margin:24px auto 0;
  columns:2; column-gap:30px; max-width:700px;
}
@media (min-width:860px){ .home .areas-type{ columns:3; } }
.home .areas-type li{
  font-size:17px; color:var(--ink); padding:5px 0; break-inside:avoid;
}
.home .area-note{ margin-top:22px; font-size:15.5px; color:var(--muted); }

/* --- FAQ: use the width available --- */
.home .faq{ max-width:900px; }
/* Ask James: the heading carries the personality, so it sits a touch larger
   than a plain section head and the lead sits under it rather than beside it. */
.home #ask-james .sec-head h2{ max-width:20ch; }
.home #ask-james .sec-head .lead{ margin-top:12px; max-width:56ch; }
.home .faq-more{
  max-width:900px; margin:26px 0 0; font-size:16px; color:var(--muted);
  line-height:1.6;
}
/* Ask a question. Deliberately lighter than the service request form on
   request-a-visit.html: three fields, one button, no appointment language.
   The panel is tinted rather than carded so it reads as part of the section. */
.home .ask-box{
  max-width:900px; margin:34px 0 0; padding:28px 24px;
  background:var(--surface); border:1px solid var(--rule); border-radius:10px;
}
@media (min-width:700px){ .home .ask-box{ padding:32px 30px; } }
.home .ask-box h3{
  font-family:var(--display); font-weight:800; color:var(--navy-ink);
  font-size:clamp(20px,2vw,24px); margin:0 0 10px;
}
.home .ask-box > p{ margin:0 0 20px; color:var(--muted); max-width:62ch; font-size:16px; }
.home .ask-box .field{ margin-bottom:16px; }
.home .ask-box textarea{ min-height:110px; }
.home .ask-box .btn{ width:100%; }
@media (min-width:600px){ .home .ask-box .btn{ width:auto; min-width:230px; } }
.home .ask-box .hint{ font-size:14.5px; color:var(--muted); }
.home .faq .ans{ max-width:80ch; }

/* --- steps keep their shape, just a lighter top rule --- */
.home .step{ border-top-color:var(--rule); }

/* Areas We Serve, grouped rather than one flat list (2026-09-28).
   Each column is headed by the town that has a page of its own, so the three
   location pages get a contextual link that reads as part of the content. The
   towns underneath are plain text because they have nowhere to go; that is the
   point of the two levels, and it is why nothing here underlines inconsistently
   the way a part-linked flat list did. */
.home .areas-grid{
  display:grid; gap:26px; margin:28px auto 0; max-width:840px;
  grid-template-columns:1fr;
}
@media (min-width:700px){
  .home .areas-grid{ grid-template-columns:repeat(3,1fr); gap:22px; align-items:start; }
}
.home .areas-grid .area-col h3{
  font-family:var(--display); font-size:18.5px; font-weight:700;
  margin:0 0 9px; letter-spacing:-.005em;
}
.home .areas-grid .area-col h3 a{
  color:var(--navy); text-decoration:none;
  border-bottom:2px solid var(--ice); padding-bottom:1px;
}
.home .areas-grid .area-col h3 a:hover{ border-bottom-color:var(--copper); }
.home .areas-grid .area-col ul{ list-style:none; padding:0; margin:0; }
.home .areas-grid .area-col li{ font-size:16px; color:var(--muted); padding:3px 0; }

/* --- new customer offer on a phone (2026-09-28) ---
   The strip reads fine on a wide screen but disappears on a phone: small type,
   the discount buried mid sentence, and no nav to reach the offer page because
   the menu is hidden below 980px. So below 700px the strip becomes a tappable
   card with the number as the headline, and the sentence version is hidden.
   Above 700px nothing changes. */
.offer-head{ display:none; }
@media (max-width:699px){
  .offer-strip .wrap{ padding-block:14px; }
  .offer-strip .tag, .offer-strip p{ display:none; }
  /* .offer-strip a sets a copper link colour, which on a copper card is
     invisible. Scoped higher here so the card's own white wins. */
  .offer-strip .offer-head,
  .offer-strip .offer-head span{ color:#fff; }
  .offer-head{
    display:grid; gap:3px; width:100%;
    grid-template-columns:auto 1fr; align-items:center;
    column-gap:14px; text-decoration:none;
    background:var(--copper); color:#fff;
    border-radius:10px; padding:15px 16px;
    box-shadow:0 2px 10px -2px rgba(23,32,51,.28);
  }
  .offer-head-k{
    grid-row:1 / span 2; font-family:var(--display); font-weight:800;
    font-size:30px; line-height:1; letter-spacing:-.02em; white-space:nowrap;
  }
  .offer-head-t{ font-size:14px; line-height:1.35; text-align:left; }
  .offer-head-go{
    grid-column:2; font-family:var(--display); font-weight:700; font-size:13px;
    text-align:left; text-decoration:underline; text-underline-offset:3px;
  }
  .offer-head:active{ transform:translateY(1px); }
}

/* --- Areas We Serve: one flat list, laid out 4/3/3 (2026-09-28) ---
   CSS columns balanced this 4/4/2 and looked lopsided. Three explicit lists
   in a grid put the split under our control and render identically
   everywhere. One column on a phone, where three would be unreadable. */
.home .areas-cols{
  display:grid; gap:4px 24px; margin:26px auto 0; max-width:760px;
  grid-template-columns:1fr; justify-items:center;
}
@media (min-width:560px){
  .home .areas-cols{ grid-template-columns:repeat(3,1fr); align-items:start; }
}
.home .areas-cols .area-col{ list-style:none; padding:0; margin:0; }
.home .areas-cols .area-col li{
  font-size:17px; color:var(--ink); padding:5px 0; line-height:1.4;
}
/* [aqp-badge-css:start] */
/* --- BusinessRate badge beside the review rating (2026-10-06) ---
   Moved here from the trust bar, which is navy and five items wide and needed
   four separate workarounds to hold it. This section is paper, so the mark
   needs no white chip, and there is room for it to be legible.

   The head becomes a row above 760px, heading left and badge right. Below that
   it stacks, because a 96px badge beside a three line heading on a phone leaves
   the heading about twelve characters wide. */
.sec-head--badge{ max-width:none; }
.rev-badge{ display:block; flex:0 0 auto; }
.rev-badge picture{ display:block; }
.rev-badge img{ display:block; height:96px; width:auto; }

@media (min-width:760px){
  .sec-head--badge{
    display:flex; align-items:center; justify-content:space-between; gap:32px;
  }
  .sec-head--badge h2{ max-width:62ch; margin-bottom:0; }
}
@media (max-width:759px){
  .sec-head--badge{
    display:flex; flex-direction:column; align-items:flex-start; gap:18px;
  }
  .rev-badge img{ height:84px; }
}
/* [aqp-badge-css:end] */

/* [aqp-logo-css:start] */
/* --- new logo artwork (2026-10-06) ---
   `.brand` is a flex container and the mark is now wrapped in <picture>, which
   becomes the flex item. Without this the picture lays out inline and the
   sizing on the img inside it does not drive the brand's height. */
.brand picture{ display:flex; }
/* [aqp-logo-css:end] */
/* [aqp-scroll-padding:start] */
/* --- anchors clear the sticky header (2026-10-06) ---
   .masthead is sticky and 77px tall, so any jump to a #target put the target
   underneath it. The skip link was landing keyboard users 77px into the content
   with the first heading hidden, which defeats the point of having one.
   Set on the scroll container so it covers every anchor, including ones added
   later. If the masthead height changes, this changes with it. */
html{ scroll-padding-top:96px; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
/* [aqp-scroll-padding:end] */
/* [aqp-foot-areas:start] */
/* --- footer service area, the full list (2026-10-07) ---
   Ten towns in a single column would tower over the Services column beside it
   and push the Company block below the fold on a laptop. Two columns keeps the
   footer the shape it was. One column below 700px, where the footer is stacked
   anyway and two would be cramped.
   Written as `.site-foot .foot-areas`, not `.foot-areas`: the rule it has to
   beat is `.site-foot ul{ display:flex }`, which is a class plus an element and
   outranks a bare class however far down the file it sits. The first version
   was the short one and the list stayed a single tall column. */
.site-foot .foot-areas{
  display:grid; grid-template-columns:1fr; gap:9px 22px;
}
@media (min-width:700px){
  .site-foot .foot-areas{ grid-template-columns:repeat(2,auto); justify-content:start; }
}
/* [aqp-foot-areas:end] */

/* [aqp-masthead-logo:start] */
/* --- masthead: smaller logo, further left (2026-10-07) ---
   Larry's note. The logo was 232px and sat 130px from the window edge, because
   the masthead used the same 1180px centred wrap as the page. Moving it left
   means not using that wrap, so above 1100px the masthead runs full width with
   its own gutter, capped at 1600px.

   The cost: the masthead no longer aligns with the content below it. That is a
   deliberate look rather than an accident, and deleting this one rule puts it
   back.

   Shrinking the logo also returns the 64px that change set 08 had to claw out
   of the nav, so the ghost button comes back at 1024px instead of 1200px and
   the nav gap goes back up. render-check.py checks the masthead for overflow at
   five widths, 1200 among them, so this is verified rather than hoped. */
.brand img{ width:150px; }
@media (min-width:860px){ .brand img{ width:168px; } }

@media (min-width:1100px){
  .masthead .wrap{
    max-width:1600px;
    padding-inline:clamp(24px, 3vw, 44px);
  }
  .mainnav{ gap:24px; }
  .head-cta .btn-ghost{ display:inline-flex; }
}
/* [aqp-masthead-logo:end] */

/* [aqp-wrench-logo:start] */
/* --- wrench logo, header and footer (2026-10-12) ---
   The wrench changes the proportions: 3.07:1 against the old 4.05:1, so the
   same width is a third taller. Sized by height instead, so the masthead keeps
   the shape change set 18 settled rather than growing to fit the artwork.

   .foot-logo is now on a <picture>, which is not replaced content, so it needs
   display:block and the width goes on the img inside it. */
.brand img{ width:auto; height:44px; }
@media (min-width:860px){ .brand img{ width:auto; height:50px; } }

picture.foot-logo{ display:block; width:200px; margin-bottom:16px; }
picture.foot-logo img{ width:100%; height:auto; display:block; }
/* [aqp-wrench-logo:end] */
/* [aqp-offer-card:start] */
/* --- offer card in the special offer header (2026-10-12) ---
   Two columns above 900px, text left and card right. Below that it stacks with
   the card last: on a phone the headline and the call button are the page, and
   a 420px square above them pushes both below the fold.

   align-items:start, not center. The card is square and the copy is not, so
   centring leaves the breadcrumb floating away from the top of the card. */
.offer-hero{ display:block; margin-top:18px; }
.offer-card{ margin-top:26px; }
.offer-card picture{ display:block; }
.offer-card img{
  display:block; width:100%; height:auto; max-width:420px;
  border-radius:12px; box-shadow:0 6px 24px -8px rgba(23,32,51,.35);
}

@media (min-width:900px){
  .offer-hero{
    display:grid; grid-template-columns:minmax(0,1fr) auto;
    gap:40px; align-items:start;
  }
  .offer-hero-copy{ min-width:0; }
  .offer-card{ margin-top:0; width:420px; }
}
@media (max-width:899px){
  .offer-card img{ margin-inline:auto; }
}
/* [aqp-offer-card:end] */
/* [aqp-reviews:start] */
/* --- reviews rotator and quote bands (2026-10-13, change 25) --- */

/* Home: the reviews get their own band. Paper (#F6F8FB) under white was too
   close to tell apart; ice is the tint the site already uses for a separate
   block. The badge sits on it without a chip, as it did on paper. */
.sec-reviews{ background:var(--ice-soft); }

.rotator{ max-width:940px; margin:4px auto 0; }
.rot-card{
  position:relative; background:var(--surface, #fff); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:30px 22px 26px; text-align:center;
}
@media (min-width:760px){ .rot-card{ padding:44px 64px 38px; } }

/* Without JavaScript only the first review shows. With it, every slide sits
   in the same grid cell, so the card is always as tall as the longest review
   and nothing below it jumps as they change. */
.rot-slide{ margin:0; }
.rot-slide:not(.is-active){ display:none; }
.rotator.is-live .rot-stage{ display:grid; }
/* Out, then in. A crossfade puts two centred paragraphs on top of each other
   for half a second and reads as a mess. */
.rotator.is-live .rot-slide{
  display:flex; flex-direction:column; justify-content:center; grid-area:1/1;
  visibility:hidden; opacity:0; transition:opacity .22s ease, visibility 0s linear .22s;
}
.rotator.is-live .rot-slide.is-active{
  visibility:visible; opacity:1; transition:opacity .35s ease .22s, visibility 0s linear .22s;
}
@media (prefers-reduced-motion:reduce){
  .rotator.is-live .rot-slide, .rotator.is-live .rot-slide.is-active{ transition:none; }
}
.rot-slide .stars{ display:block; font-size:16px; letter-spacing:3px; margin-bottom:14px; }
.rot-slide blockquote{
  margin:0 auto; max-width:60ch; font-family:var(--display); font-weight:600;
  font-size:clamp(18px,2.1vw,22px); line-height:1.5; color:var(--navy-ink); text-wrap:pretty;
}
.rot-slide figcaption{ margin-top:18px; font-size:15px; color:var(--muted); }
.rot-slide figcaption strong{ color:var(--navy-ink); font-family:var(--display); font-weight:700; }

.rot-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0; border-radius:50%; cursor:pointer;
  border:1px solid var(--rule); background:#fff; color:var(--navy);
}
.rot-btn:hover{ border-color:var(--navy); }
.rot-btn svg{ width:20px; height:20px; fill:currentColor; }
.rot-pause{ position:absolute; top:10px; right:10px; width:36px; height:36px; border-color:transparent; color:var(--muted); }
.rot-pause svg{ width:16px; height:16px; }
.rot-pause .i-play{ display:none; }
.rotator.is-paused .rot-pause .i-play{ display:block; }
.rotator.is-paused .rot-pause .i-pause{ display:none; }
.rotator:not(.is-live) .rot-pause{ display:none; }

.rot-controls{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:18px; }
.rot-controls[hidden]{ display:none; }
.rot-dots{ display:flex; flex-wrap:wrap; justify-content:center; }
.rot-dot{
  width:24px; height:24px; padding:0; border:0; background:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.rot-dot::after{
  content:""; width:8px; height:8px; border-radius:50%; background:#9FB4C4;
  transition:background .2s, transform .2s;
}
.rot-dot[aria-current="true"]::after{ background:var(--navy); transform:scale(1.4); }

.sec-reviews .rev-more{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 32px; }

/* Interior pages: one quote between "Why Choose" (ice) and the next light
   section. Navy so it reads as its own band rather than the bottom of the
   list above it. */
.quote-band{ background:var(--navy); color:#fff; padding-block:52px; }
.quote-band .qb{ margin:0 auto; max-width:780px; text-align:center; }
.quote-band .stars{ display:block; font-size:16px; letter-spacing:3px; margin-bottom:14px; }
.quote-band blockquote{
  margin:0; font-family:var(--display); font-weight:700; color:#fff;
  font-size:clamp(20px,2.6vw,27px); line-height:1.38; text-wrap:balance;
}
.quote-band figcaption{ margin-top:16px; font-size:15px; color:var(--ice); }
.quote-band figcaption strong{ color:#fff; font-weight:600; }
/* [aqp-reviews:end] */
/* [aqp-chrome-26:start] */
/* --- closing call to action, footer, About James reviews (2026-10-13) --- */

/* The call to action was a full width band in the footer's own colour, so the
   two read as one dark block. Now a card in a white band: there is always a
   white gap above the footer. Drawn with ::before so the card lines up with
   the content edges at every width without changing the markup on 29 pages. */
.cta-band, main > section.cta-band{ background:var(--surface, #fff); padding-block:32px; }
@media (min-width:700px){ .cta-band, main > section.cta-band{ padding-block:48px; } }
/* the home page sets its own section padding with `.home main > section`;
   `main > section.cta-band` matches that and comes later, so it wins */
.cta-band .nw{ white-space:nowrap; }
.cta-band .wrap{
  position:relative; isolation:isolate;
  padding:32px calc(var(--gut) + 24px);
}
.cta-band .wrap::before{
  content:""; position:absolute; z-index:-1; inset:0 var(--gut);
  background:var(--navy-ink); border-radius:14px;
}
.cta-band h2{ max-width:24ch; font-size:clamp(24px,3vw,34px); }
.cta-band .lead{ margin-top:10px; }
.cta-band .btn-row{ margin-top:22px; }
@media (min-width:900px){
  .cta-band .wrap{
    display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:40px;
    grid-template-areas:"h b" "p b"; align-items:center;
    padding:40px calc(var(--gut) + 48px);
  }
  .cta-band h2{ grid-area:h; }
  .cta-band .lead{ grid-area:p; }
  .cta-band .btn-row{ grid-area:b; margin-top:0; flex-wrap:nowrap; }
}

/* Footer: 630px tall on desktop and 1,443px on a phone before this. Four
   columns on desktop, three under a full width brand row on a tablet, and on
   a phone Services and Company side by side with the service area in two
   columns below. Every link is still there. */
.site-foot{ padding-block:40px 22px; font-size:14.5px; }
@media (max-width:859px){ .site-foot{ padding-bottom:84px; } }
.site-foot h4{ font-size:13px; margin-bottom:10px; }
.site-foot ul{ gap:7px; }
.foot-grid{
  grid-template-columns:1fr 1fr; gap:28px 20px;
  grid-template-areas:"brand brand" "svc co" "area area";
}
.foot-grid > :nth-child(1){ grid-area:brand; }
.foot-grid > :nth-child(2){ grid-area:svc; }
.foot-grid > :nth-child(3){ grid-area:area; }
.foot-grid > :nth-child(4){ grid-area:co; }
@media (min-width:700px){
  .foot-grid{
    grid-template-columns:repeat(3, minmax(0,1fr)); gap:28px 36px;
    grid-template-areas:"brand brand brand" "svc area co";
  }
}
@media (min-width:1000px){
  .foot-grid{
    grid-template-columns:1.15fr 1fr 1.3fr .8fr; gap:40px;
    grid-template-areas:"brand svc area co";
  }
}
.site-foot .foot-areas{ grid-template-columns:repeat(2, max-content); gap:7px 22px; }
picture.foot-logo{ width:160px; margin-bottom:12px; }
.foot-grid > :first-child p{ margin:0 0 4px; }
.foot-phone{ font-size:22px; margin-block:6px 4px; }
.site-foot .lic{ margin-top:8px; }
.foot-bottom{ margin-top:28px; padding-top:16px; }

/* About James: one navy reviews band, the rotator inside it. Navy so it is
   clearly its own section after the ice "Why Choose" block. */
.reviews-band{ background:var(--navy); color:#fff; }
.reviews-band .sec-head{ text-align:center; margin:0 auto 28px; }
.reviews-band h2{ color:#fff; }
.reviews-band .lead{ color:#C9D6EA; margin-inline:auto; }
.reviews-band .rot-controls .rot-btn{ background:transparent; border-color:rgba(255,255,255,.45); color:#fff; }
.reviews-band .rot-controls .rot-btn:hover{ border-color:#fff; }
.reviews-band .rot-dot::after{ background:rgba(255,255,255,.4); }
.reviews-band .rot-dot[aria-current="true"]::after{ background:#fff; }
.reviews-band .rev-more{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 32px; }
.reviews-band .rev-more a{ color:#fff; }
.reviews-band .rev-more a:hover{ color:var(--ice); }
/* [aqp-chrome-26:end] */