/* Mikes Plumbing Tacoma. Hand-written; nothing from the infected source, no framework, no build.
   The 2026 design language is ported from the Lovable concept study and rebuilt here in plain CSS:
   Lovable was the mood board, this is the implementation. Every colour below was read out of that
   study as oklch() and converted, not eyeballed; every keyframe is its own, copied rather than
   approximated. The brushed-steel surfaces exist because the new logo is brushed steel. */
/* Self-hosted. Google Fonts was the only third-party dependency left and the only
   render-blocking cross-origin request on the site, on a rebuild whose entire premise is that it
   loads nothing we do not control. Latin subset only: 7 faces, 169 KB, served from our origin. */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;
  src:url('/brand/fonts/manrope-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;
  src:url('/brand/fonts/manrope-600.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;
  src:url('/brand/fonts/manrope-700.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;
  src:url('/brand/fonts/manrope-800.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;
  src:url('/brand/fonts/sora-600.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;
  src:url('/brand/fonts/sora-700.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;
  src:url('/brand/fonts/sora-800.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* A display face with a voice. The rebuild ran two neutral sans faces, which is the
   "no display face = no voice" default, and it read like every contractor template. Instrument
   Serif against Manrope gives the headings a character no competitor in this map pack is using.
   Self-hosted like the rest: latin subset, 2 faces, 30 KB, so external-audit stays empty. */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url('/brand/fonts/instrumentserif-regular.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url('/brand/fonts/instrumentserif-italic.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --bg:#F9FAFB; --fg:#13191F; --deep:#101419; --deep-fg:#EFF2F5;
  --primary:#0064D2; --signal:#0A73F3; --sky:#49A9FF; --steel:#A2A5A8;
  --muted:#EDEFF0; --muted-fg:#5B6167; --line:#D8DBDE; --accent:#D9EAFC;
  --radius:3px; --wrap:1180px; --measure:768px;
  --gradient-deep:linear-gradient(160deg,#0B0E11,#1D252E);
  --gradient-steel:linear-gradient(100deg,#83868A 0%,#E6E8EA 18%,#A2A5A8 34%,#FBFCFD 52%,#8F9296 72%,#DCDEE0 88%,#777B7F 100%);
  --shadow-card:0 1px 2px rgba(1,35,50,.06), 0 12px 32px -18px rgba(1,35,50,.35);
  --shadow-lift:0 2px 4px rgba(1,35,50,.08), 0 28px 48px -24px rgba(1,35,50,.45);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:Manrope,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg);color:var(--fg);line-height:1.62;font-size:17px}
h1,h2{font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  letter-spacing:-.005em;line-height:1.04}
h3,h4{font-family:Sora,Manrope,system-ui,sans-serif;letter-spacing:-.02em;line-height:1.12}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ---- surfaces, from the concept -------------------------------------------------------- */
.surface{background-color:#0B0E11;color:var(--deep-fg);
  background-image:radial-gradient(120% 90% at 15% 0%, rgba(0,100,210,.22), transparent 60%),
                   radial-gradient(90% 80% at 100% 100%, rgba(0,134,249,.16), transparent 65%),
                   var(--gradient-deep)}
.brushed{position:relative}
.brushed::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:repeating-linear-gradient(92deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px)}
.gridlines::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:64px 64px}

/* ---- motion, the concept's own keyframes ----------------------------------------------- */
@keyframes ripple-out{0%{opacity:0;transform:scale(.35)}15%{opacity:.5}100%{opacity:0;transform:scale(1.6)}}
@keyframes drip{0%,70%{opacity:0;transform:translateY(-4px) scale(.9)}78%{opacity:1}100%{opacity:0;transform:translateY(18px) scale(1.05)}}
@keyframes sheen{0%{transform:translate(-120%) skew(-18deg)}100%{transform:translate(320%) skew(-18deg)}}
.ripple-field{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.ripple{position:absolute;border:1px solid rgba(73,169,255,.35);border-radius:9999px;
  box-shadow:inset 0 0 40px -12px rgba(0,134,249,.6);
  animation:ripple-out 7s cubic-bezier(.22,1,.36,1) infinite}
.ripple-a{animation-delay:0s;inset:-12% 55% 40% -10%}
.ripple-b{animation-delay:2.3s;inset:30% -12% -25% 58%}
.ripple-c{animation-delay:4.6s;inset:12% 20% 12% 22%}
.drip{width:7px;height:7px;border-radius:9999px;background:var(--sky);display:inline-block;
  animation:drip 3.2s ease-in infinite}
.sheen{position:relative;overflow:hidden}
.sheen::before{content:"";position:absolute;top:0;bottom:0;width:35%;z-index:1;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transform:translate(-120%) skew(-18deg)}
.sheen:hover::before{animation:sheen .9s ease-out}
/* Three infinite loops and a falling drip are exactly what motion-sensitive visitors turn this
   setting on to avoid. Not optional. */
@media (prefers-reduced-motion: reduce){
  *,::before,::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .ripple-field,.drip,.sheen::before{display:none!important}
}

/* ---- focus, contrast and targets -------------------------------------------------------- */
/* The site had exactly ONE authored focus style and it failed: 2.39:1 where 3:1 is required.
   Nothing at all on buttons, nav, cards or footer links, so a keyboard user had no idea where
   they were on any page. --primary #0064D2 is 5.59:1 on white and carries an offset ring so it
   also reads against the dark hero. */
:where(a,button,input,textarea,select,summary):focus-visible{
  outline:3px solid var(--primary);outline-offset:2px;border-radius:4px}
.hero a:focus-visible,footer.site a:focus-visible,.topbar a:focus-visible{
  outline-color:#fff;outline-offset:3px}

/* Keyboard users passed nine stops before reaching content on every page. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--primary);color:#fff;
  padding:12px 20px;border-radius:0 0 8px 0;font-weight:700;text-decoration:none}
.skip:focus{left:0}

/* ---- chrome ----------------------------------------------------------------------------- */
.topbar{background:#0B0E11;color:#98A1AB;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase}
.topbar .wrap{display:flex;justify-content:space-between;gap:16px;padding-block:10px;flex-wrap:wrap}
header.site{position:sticky;top:0;z-index:50;background:rgba(249,250,251,.88);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
/* One row. As two rows with a 110px stacked logo the header was 189px, and sticky, so it held
   29% of an 800px viewport permanently. */
.head{display:flex;align-items:center;gap:22px;padding-block:10px;flex-wrap:wrap}
.head .nav{flex:1 1 auto}
.logo img{width:150px;height:auto}
.contacts{display:flex;gap:26px;flex-wrap:wrap}
.contacts a{display:flex;flex-direction:column;text-decoration:none;color:var(--fg);font-size:14px}
.contacts strong{color:var(--primary);font-size:11.5px;text-transform:uppercase;letter-spacing:.08em}
.contacts span{color:var(--muted-fg)}
.nav{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.nav .links{display:flex;gap:24px;flex-wrap:wrap}
.nav a{color:var(--fg);text-decoration:none;font-weight:700;font-size:13px;letter-spacing:.09em;
  text-transform:uppercase;padding:4px 0;border-bottom:2px solid transparent}
.nav a:hover{color:var(--primary)}
.nav a.on{border-bottom-color:var(--primary);color:var(--primary)}  /* --sky was 2.39:1 */
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--primary);color:#fff;
  text-decoration:none;font-weight:700;font-size:16px;padding:13px 26px;border-radius:3px;
  border:0;cursor:pointer;font-family:inherit;transition:background .2s ease,transform .1s ease}
.btn:hover{background:#0052AC}   /* #0A73F3 was 4.41:1 on white, under AA for 16px text */
.btn:active{transform:translateY(1px)}
.btn.sm{padding:10px 20px;font-size:14.5px}

/* ---- hero ------------------------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;padding:92px 0 96px;background-size:cover;
  background-position:center;color:#fff}
.hero .wrap{position:relative;z-index:2}
.hero .eyebrow{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.2);
  border-radius:2px;padding:8px 18px;font-size:12px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:#C6D2DE;background:rgba(255,255,255,.05);margin-bottom:22px}
.hero h1{font-size:clamp(36px,6.4vw,80px);font-weight:800;color:#fff;max-width:16ch}
.hero p{margin-top:20px;max-width:58ch;font-size:18px;color:#C3CDD8}
.hero .btn{margin-top:30px}

/* A breadcrumb the reader can actually see. BreadcrumbList markup describing a trail that exists
   only in the head is the weakest possible reading of "markup must represent visible content". */
.crumb{border-bottom:1px solid var(--line);background:#fff;font-size:13.5px}
.crumb .wrap{display:flex;gap:10px;align-items:center;padding-block:11px;color:var(--muted-fg)}
.crumb a{color:var(--primary);text-decoration:none;font-weight:700}
.crumb a:hover{text-decoration:underline}
.crumb span[aria-hidden]{color:var(--steel)}

/* ---- sections --------------------------------------------------------------------------- */
main.page{padding:64px 0 8px}
main.page h2{font-size:clamp(27px,3.4vw,40px);font-weight:800;margin:52px 0 14px}
main.page h2:first-child{margin-top:0}
main.page h3{font-size:21px;font-weight:700;margin:30px 0 8px}
main.page h4{font-size:18px;font-weight:700;margin:24px 0 6px}
/* ONE text measure, in pixels. This was 74ch, and ch scales with each element's own font-size,
   so a 12px eyebrow ended at 599px, 16px prose at 767px and a 17px name at 808px: nine different
   right edges down one column. The eye aligns on EDGES, not character counts. */
main.page p,
main.page ul.list,
main.page h2,
main.page h3,
main.page form.cform{max-width:var(--measure)}
main.page p{margin-bottom:16px;color:#333C46}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--primary)}
.list{margin:6px 0 22px 0;padding-left:0;list-style:none;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px 26px}
.list li{position:relative;padding-left:26px;color:#333C46}
.list li::before{content:"";position:absolute;left:6px;top:.62em;width:7px;height:7px;
  border-radius:9999px;background:var(--sky)}

/* ---- service cards ---------------------------------------------------------------------- */
.svcgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px;margin:26px 0 8px}
.svc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px;
  display:flex;flex-direction:column;box-shadow:var(--shadow-card);
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s cubic-bezier(.22,1,.36,1)}
.svc:hover{border-color:var(--fg)}
.svc h3{margin:0;font-size:20px}
/* Clamped, because _first_sentence returns the WHOLE paragraph when his copy has no full stop
   after character 70, which is live on the Remodels card. The full text stays in the DOM for
   search engines and screen readers; the card just stops showing it after four lines. */
.svc p{margin:10px 0 0;color:var(--muted-fg);font-size:15.5px;flex:1;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.svc .more{margin-top:16px;font-size:12.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--primary);text-decoration:none;
  min-height:24px;display:inline-flex;align-items:center}  /* was 20px, under WCAG 2.5.8 */
.svc .more:hover{color:#0052AC}
.cardlink{margin-top:6px}
.cardlink a{font-weight:700;color:var(--primary);text-decoration:none;border-bottom:2px solid var(--sky)}
.cardlink a:hover{color:var(--fg);border-bottom-color:var(--fg)}

/* ---- photographs ------------------------------------------------------------------------ */
.shot{margin:26px 0}
.shot img{border-radius:var(--radius);width:100%;height:auto}
/* A portrait photograph capped at 520px was left-stranded in a 1180px column: 660px of empty
   white beside it, 56% of the width doing nothing, and because it is the FIRST element in <main>
   it sat above the section eyebrow belonging to neither the hero nor the About block. That is the
   orphan-in-white-space case, and it was introduced by the width cap that fixed the head crop.
   Floating it lets the heading and copy fill the space and attaches it to the section it belongs
   to. Guarded at >=900px only: the narrow layout stacks exactly as before and is untouched. */
@media (min-width:900px){
  main > figure.shot:first-child{float:right;max-width:420px;margin:0 0 20px 34px}
  main > figure.shot:first-child + .eyebrow{margin-top:0}
}
.portrait{margin:24px 0 10px}
/* The owner block renders as: round photo, a bare paragraph holding the name, then "Owner" set as
   an eyebrow, then an h2 that already says "About the Owner". The name floated loose and the
   small-caps role read as a stray label pointing at nothing. Binding the two into a caption under
   the portrait makes them one unit and stops the eyebrow reading as an orphan. Content is not
   moved: this is spacing and weight only, so the block order the legacy site had is preserved. */
.portrait + p{margin:8px 0 0;font-weight:600;font-size:17px;line-height:1.25}
.portrait + p + .eyebrow{margin:1px 0 22px;color:var(--muted-fg)}
.portrait img{width:150px;border-radius:9999px}
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:26px 0}
.shots figure{margin:0}
.shots img{border-radius:10px;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.grid figure{margin:0;border-radius:10px;overflow:hidden}
.grid img{aspect-ratio:4/3;object-fit:cover;width:100%;
  transition:transform .5s cubic-bezier(.22,1,.36,1)}
.grid figure:hover img{transform:scale(1.04)}

/* ---- contact details ------------------------------------------------------------------- */
.contactcard{display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:26px;align-items:start;
  margin:22px 0 10px;padding:24px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-card)}
.callbig{display:flex;flex-direction:column;gap:4px;background:var(--primary);color:#fff;
  text-decoration:none;border-radius:var(--radius);padding:20px 22px;transition:background .2s ease}
.callbig:hover{background:#0052AC}
.callbig span{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.callbig strong{font-family:Sora,sans-serif;font-size:27px;font-weight:800;letter-spacing:-.01em}
.cdetail{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0}
.cdetail dt{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-fg);padding-top:2px}
.cdetail dd{margin:0;color:var(--fg)}
.cdetail a{color:var(--primary);text-decoration:none;border-bottom:1px solid var(--sky)}
.cdetail a:hover{color:var(--fg);border-bottom-color:var(--fg)}

/* ---- forms ------------------------------------------------------------------------------ */
.cform{margin-top:30px;max-width:720px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-card)}
.cform .row{display:flex;gap:16px;flex-wrap:wrap}
.cform .row>label{flex:1 1 220px}
.cform label{display:block;margin-bottom:14px;font-weight:700;color:var(--fg);font-size:14px}
.cform input,.cform textarea,.cform select{width:100%;margin-top:6px;font:inherit;font-size:16px;
  color:var(--fg);background:#fff;border:1px solid #8A97A8;border-radius:8px;padding:11px 12px}  /* #C8D2E0 was 1.53:1 */
.cform input:focus,.cform textarea:focus{outline:2px solid var(--sky);outline-offset:1px;border-color:var(--sky)}
.cform textarea{resize:vertical}
.cform button{display:inline-block;background:var(--primary);color:#fff;font:inherit;font-weight:700;
  font-size:16px;padding:13px 26px;border-radius:3px;border:0;cursor:pointer}
.cform button:hover{background:#0052AC}
.cform .status{margin:12px 0 0;font-weight:400;font-size:14.5px;color:var(--muted-fg);min-height:1.3em}

/* ---- persistent call bar, phones only ---------------------------------------------------- */
/* The header is static on mobile, so after the first screen of an 11,800px page there was no way
   to call without scrolling all the way back. For a trade, the call IS the conversion. */
.callbar{display:none}
/* ---- footer ----------------------------------------------------------------------------- */
footer.site{position:relative;margin-top:72px;color:#98A1AB;font-size:15px}
footer.site .wrap{position:relative;z-index:1}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px;padding:50px 24px 26px}
.fgrid strong{display:block;color:#fff;margin-bottom:12px;font-size:15px}
.fgrid a{display:block;color:#98A1AB;text-decoration:none;margin-bottom:7px}
.fgrid a:hover{color:#fff}
.fgrid p{margin-bottom:7px}
.fbot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.12);padding:16px 24px 28px;font-size:13px}
.fbot .backlink{color:#98A1AB;text-decoration:none}
.fbot .backlink:hover{color:#fff}

@media (max-width:760px){
  body{font-size:16px;padding-bottom:66px}
  .callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    align-items:center;justify-content:center;gap:10px;
    background:var(--primary);color:#fff;text-decoration:none;
    padding:14px 18px;box-shadow:0 -6px 20px -8px rgba(1,35,50,.45)}
  .callbar:hover,.callbar:active{background:#0052AC}
  .callbar span{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.88}
  .callbar strong{font-family:Sora,sans-serif;font-size:19px;font-weight:800}
  header.site{position:static}
  .topbar .wrap{justify-content:center;text-align:center;gap:2px;padding-block:7px;font-size:11.5px}
  /* Logo and a tap-to-call button share one row; on a phone a plumber gets called, not emailed,
     so the email leaves the header only. It stays in the footer and on /contact/. */
  .head{flex-wrap:wrap;justify-content:space-between;gap:8px 12px;padding-block:9px}
  .head .nav{order:3;flex-basis:100%;justify-content:center}
  .logo img{width:132px}
  .contacts{justify-content:flex-end;gap:0;flex-wrap:nowrap}
  .contacts a[href^="mailto"]{display:none}
  .contacts a[href^="tel"]{background:var(--primary);border-radius:3px;padding:10px 16px;
    align-items:center;font-weight:700}
  .contacts a[href^="tel"] strong{display:none}
  .contacts a[href^="tel"] span{color:#fff;font-size:15px}
  .nav{justify-content:center;gap:8px;padding-bottom:6px}
  .nav .links{justify-content:center;gap:12px;flex-wrap:nowrap}
  .nav a{font-size:12px;letter-spacing:.03em;white-space:nowrap}
  /* The quote button now lives in .head, not .nav, so the old .nav .btn.sm rule stopped
     matching and mobile chrome went from 166px back up to 306px while desktop was being fixed.
     Same destination as the Contact link beside it, and the fixed call bar is the real CTA. */
  .head .btn.sm{display:none}
  .hero{padding:52px 0 58px}
  .hero p{font-size:16.5px}
  main.page{padding-top:34px}
  main.page h2{margin:36px 0 12px}
  .svcgrid{grid-template-columns:1fr;gap:12px}
  .contactcard{grid-template-columns:1fr;gap:18px;padding:18px}
  .callbig strong{font-size:24px}
  .shots{grid-template-columns:repeat(2,1fr);gap:10px}
  .grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .portrait img{width:122px}
  footer.site{margin-top:48px}
  .fgrid{padding:34px 24px 18px;gap:24px}
}


/* ---- composed sections ---------------------------------------------------------------------
   The home page order is chosen, not inherited. These are the containers _compose() emits. */
.band{padding:46px 0}
.band-tint{background:#F1F3F5}
.band + .band{border-top:1px solid var(--line)}
.band-tint, .band-tint + .band{border-top-color:transparent}
main.page .band > :first-child{margin-top:0}
main.page .band{max-width:none}

@media (min-width:900px){
  /* the picture sits beside the COPY; the heading above it keeps the full measure */
  .band figure.shot{float:right;max-width:44%;margin:2px 0 16px 38px}
  .band-flip figure.shot{float:left;margin:2px 38px 16px 0}
  .band::after{content:"";display:block;clear:both}
  /* a floated image narrows the column, so let the copy beside it use the room it has */
  .band figure.shot ~ p{max-width:none}
}
@media (max-width:899px){ .band{padding:32px 0} }


/* A numbered process, from concept 3. The steps exist in his copy as "1. Identifying the Issue";
   they were shipping as body paragraphs, so /fix-pipes/ had 295 words and no heading at all. */
.stephead{display:flex;align-items:baseline;gap:14px;margin:30px 0 8px;
  padding-top:12px;border-top:2px solid var(--fg)}
.stepn{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:26px;
  line-height:1;color:var(--primary);flex:none}
main.page .stephead + ul.list,
main.page .stephead + p{margin-top:8px}


/* Towns band, from concept 3. Also the internal-linking surface the city pages need to exist. */
.towns{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:22px 0 4px;
  background:var(--line);max-width:none}
.towns a{background:#fff;padding:18px 20px;text-decoration:none;display:block;transition:background .2s}
.towns a:hover{background:var(--muted)}
.towns b{display:block;font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--fg)}
.towns span{display:block;margin-top:3px;color:var(--muted-fg);font-size:13.5px}
.svc.lead{border-color:var(--fg)}
@media (max-width:760px){.towns{grid-template-columns:1fr 1fr}}


/* Trust band. A ruled strip of facts, not badge cards: "trust logos on individual white cards" is
   a banned default. Values come from client.json at build time so they cannot drift. */
.trustband{padding:22px 0 24px;border-bottom:1px solid var(--line)}
.trust{display:grid;grid-template-columns:repeat(6,1fr);gap:0;max-width:none}
.trust div{padding:0 18px;border-left:1px solid var(--line)}
.trust div:first-child{padding-left:0;border-left:0}
.trust span{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-fg)}
.trust b{display:block;margin-top:5px;font-size:15px;font-weight:600;line-height:1.3;color:var(--fg)}
@media (max-width:980px){.trust{grid-template-columns:repeat(3,1fr);gap:18px 0}
  .trust div:nth-child(3n+1){padding-left:0;border-left:0}}
@media (max-width:600px){.trust{grid-template-columns:1fr 1fr}
  .trust div:nth-child(odd){padding-left:0;border-left:0}}