/* Mikes Plumbing Tacoma. Hand-written; nothing from the infected source.
   Palette measured off the original Elementor kit, not chosen:
   #253047 primary, #40A4F1 secondary, #1f396d deep navy, #3871c1 mid blue. */
:root{
  --navy:#1f396d; --primary:#253047; --blue:#3871c1; --sky:#40a4f1;
  --ink:#243044; --muted:#5d6b80; --line:#e2e7ee; --bg:#fff; --soft:#f5f8fc;
  --wrap:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:"Work Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.62;font-size:17px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue)}

.topbar{background:var(--primary);color:#cfd8e6;font-size:13.5px}
.topbar .wrap{display:flex;justify-content:space-between;gap:16px;padding-block:9px;flex-wrap:wrap}

header.site{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.head{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:14px;flex-wrap:wrap}
.logo img{width:175px;height:auto}
.contacts{display:flex;gap:26px;flex-wrap:wrap}
.contacts a{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);font-size:14px}
.contacts strong{color:var(--navy);font-size:12.5px;text-transform:uppercase;letter-spacing:.06em}
.contacts span{color:var(--muted)}

.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-bottom:12px;flex-wrap:wrap}
.nav .links{display:flex;gap:26px;flex-wrap:wrap}
.nav a{color:var(--primary);text-decoration:none;font-weight:600;font-size:15.5px;padding:4px 0;
  border-bottom:2px solid transparent}
.nav a:hover{color:var(--blue)}
.nav a.on{border-bottom-color:var(--sky);color:var(--blue)}

.btn{display:inline-block;background:var(--sky);color:#fff;text-decoration:none;font-weight:700;
  padding:13px 26px;border-radius:6px;border:0;cursor:pointer;font-size:16px}
.btn:hover{background:var(--blue)}
.btn.sm{padding:9px 18px;font-size:14.5px}

.hero{background:var(--navy) center/cover no-repeat;color:#fff;padding:96px 0 100px;text-align:center}
.hero .eyebrow{font-size:clamp(19px,2.6vw,27px);font-weight:600;color:#eaf3ff;
  margin-bottom:10px;letter-spacing:.01em}
.hero h1{font-size:clamp(30px,5vw,50px);line-height:1.15;font-weight:700;letter-spacing:-.01em}
.hero p{margin:14px auto 0;max-width:720px;font-size:18px;color:#dbe6f5}
.hero .btn{margin-top:26px}

main.page{padding:56px 22px 72px}
main.page h2{color:var(--primary);font-size:clamp(23px,3vw,31px);line-height:1.25;margin:38px 0 12px}
main.page h3{color:var(--primary);font-size:20px;margin:28px 0 8px}
main.page h4{color:var(--primary);font-size:17.5px;margin:22px 0 6px}
main.page > :first-child{margin-top:0}
main.page p{margin:0 0 14px;max-width:74ch;overflow-wrap:anywhere}
/* A long unbroken token, a URL in copy for instance, must never widen the page. */
.list li,main.page h2,main.page h3{overflow-wrap:anywhere}
.list{margin:0 0 18px 20px}
.list li{margin-bottom:7px}

/* Photos are banners, not full screens. Unconstrained, a 1024x768 job photo rendered ~800px tall
   and every single one owned an entire viewport, so the page read as an endless slideshow with
   sentences between. Capping the height is what turns 39 stacked images back into a page. */
.shot{margin:26px 0}
.shot img{border-radius:10px;width:100%;height:auto;max-height:420px;object-fit:cover;
  object-position:center}
.shot.small img{max-height:320px}
/* A small source image is small. Upscaling a 150px icon to the column width is what produced a
   full-screen blur; max-width is set per image from its real pixel size at build time. */
.shot.small{margin:22px 0}
/* Decorative line art sat alone on its own line above a heading, reading as a stray mark.
   Pulled tight to the heading it belongs to and shrunk. */
.icon{margin:22px 0 -6px}
.icon img{height:auto;opacity:.85}
.icon + h2, .icon + h3{margin-top:6px}
/* Consecutive images sit side by side instead of stacking one per screen. */
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin:26px 0}
.shots figure{margin:0}
.shots img{border-radius:8px;width:100%;height:auto}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.grid img{border-radius:8px;aspect-ratio:4/3;object-fit:cover;width:100%}

.cform{margin-top:30px;max-width:720px;background:var(--soft);border:1px solid var(--line);
  border-radius:12px;padding:26px}
.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:600;color:var(--primary);font-size:14.5px}
.cform input,.cform textarea{width:100%;margin-top:6px;font:inherit;font-size:16px;color:var(--ink);
  background:#fff;border:1px solid #c8d2e0;border-radius:6px;padding:11px 12px}
.cform textarea{resize:vertical}
.cform .status{margin:12px 0 0;font-weight:400;font-size:14.5px;color:var(--muted);min-height:1.3em}

footer.site{background:var(--primary);color:#c3cddd;margin-top:64px;font-size:15px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:30px;padding:46px 22px 26px}
.fgrid strong{display:block;color:#fff;margin-bottom:12px;font-size:15.5px}
.fgrid a{display:block;color:#c3cddd;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,.13);padding:16px 22px 26px;font-size:13.5px}
.fbot .backlink{color:#c3cddd;text-decoration:none}
.fbot .backlink:hover{color:#fff}

@media (max-width:760px){
  /* Tighten the stack. Unstyled, the header put the logo, phone, email, nav and CTA on five
     separate rows and pushed the hero off the first screen. On a phone every band before the
     content is a thumb flick between the visitor and the call button. */
  body{font-size:16px}
  header.site{position:static}                    /* sticky costs a third of a small screen */
  .topbar{font-size:12.5px}
  .topbar .wrap{justify-content:center;text-align:center;gap:2px;padding-block:6px}
  .head{justify-content:center;text-align:center;gap:10px;padding-block:10px}
  .logo img{width:132px}
  .contacts{justify-content:center;gap:22px}
  .contacts a{align-items:center}
  .contacts strong{font-size:11px}
  .contacts span{font-size:14px}
  .nav{justify-content:center;gap:10px;padding-bottom:10px}
  .nav .links{justify-content:center;gap:14px}
  .nav a{font-size:14.5px}
  .hero{padding:44px 0 48px}
  .hero .eyebrow{font-size:17px;margin-bottom:6px}
  main.page{padding-top:30px}
  main.page h2{margin-top:28px}
  footer.site{margin-top:44px}
  .fgrid{padding:32px 22px 18px;gap:22px}
}