/* 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){
  .mainnav{ display:flex; align-items:center; gap:26px; }
  .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; }
@media (min-width:980px) and (max-width:1200px){
  .mainnav{ gap:18px; }
  .mainnav a{ font-size:14.5px; }
  .head-cta .btn{ padding:12px 16px; font-size:15px; }
}

/* ---------- 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, not portrait: the source photo is 1024x768, so a 4:5 crop could
     only be 614px wide and would render soft in this 400px slot. A square
     uses the full height of the original and lands at 1.9x. */
  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); }