/* Well Services MN: water and wells (ideas/design-directions.md, "Wells"). Deep aquifer navy for headings and the
   footer, clear water blue for buttons and links, light sky sections, Archivo headings and Public Sans text. Squarer
   cards and navy table heads, so it reads as a public-works trade, not the septic site recolored. A rust orange only
   for the "No water?" strip. */
:root {
  --ink: #1c2b36;
  --muted: #566573;
  --line: #d6e2ea;
  --sky: #eef5fa;        /* light sections */
  --sky-2: #e1edf5;
  --white: #ffffff;
  --navy: #0b3a5c;       /* headings, footer, dark bands */
  --navy-2: #082b45;
  --blue: #1668a8;       /* buttons and links, white text */
  --blue-2: #11578e;     /* hover */
  --blue-tint: #e3eff8;
  --rust: #b8430f;       /* the "No water?" strip only */
  --radius: 6px;
  --head: "Archivo", system-ui, -apple-system, sans-serif;
  --sans: "Public Sans", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
h1, h2 { font-family: var(--head); font-weight: 800; letter-spacing: -0.02em; color: var(--navy); }
h2 { font-size: 27px; line-height: 1.2; margin-bottom: 16px; }
h3 { font-size: 17px; font-weight: 700; }
p { margin: 0 0 12px; }
a { color: inherit; }
button, input, select, textarea { font-family: inherit; }
[hidden] { display: none !important; }

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }
.sec { padding: 46px 0; border-top: 1px solid var(--line); scroll-margin-top: 72px; }
.sec > .wrap > h2::before { content: ""; display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--blue); margin-bottom: 14px; }
.sec-alt { background: var(--sky); border-top-color: var(--sky-2); }
.sec-lede { color: var(--muted); max-width: 42em; margin-top: -6px; margin-bottom: 22px; }
.small { font-size: 15px; }
.link { color: var(--blue); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.link:hover { color: var(--blue-2); }
.page-h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.08; margin-bottom: 8px; }

/* Header and the "No water?" strip */
.urgent { margin: 0; background: var(--rust); text-align: center; font-size: 15px; }
.urgent a { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 8px 16px; color: #fff; text-decoration: none; }
.urgent a b { text-decoration: underline; text-underline-offset: 3px; }
.drop { width: 10px; height: 10px; background: #fff; border-radius: 0 50% 50% 50%; transform: rotate(45deg); flex: none; }
.top { position: sticky; top: 0; z-index: 20; background: var(--white); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(11, 58, 92, .04); }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 66px; }
.brand { display: flex; align-items: center; text-decoration: none; flex: none; }
.brand img { display: block; height: 28px; width: auto; }
.top-links { display: flex; align-items: center; gap: 2px; }
.top-links a { text-decoration: none; font-size: 15px; font-weight: 600; padding: 9px 12px; border-radius: var(--radius); color: var(--navy); }
.top-links a:hover { background: var(--sky); }
.top-links a.top-cta { background: var(--blue); color: #fff; margin-left: 6px; font-weight: 700; white-space: nowrap; }
.top-links a.top-cta:hover { background: var(--blue-2); }
.top-links .nav-extra { display: none; }

/* Hero */
.hero { display: grid; gap: 28px; padding-top: 32px; padding-bottom: 40px; align-items: start; }
.crumbs { font-size: 14px; color: var(--muted); margin-bottom: 12px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.kicker { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; }
.kicker::before { content: ""; width: 9px; height: 9px; background: var(--blue); border-radius: 0 50% 50% 50%; transform: rotate(45deg); flex: none; }
.hero h1 { font-size: clamp(34px, 5vw, 54px); line-height: 1.04; color: var(--navy); }
.lede { font-size: 19px; color: var(--muted); max-width: 34em; margin: 14px 0 20px; }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 17px; font-weight: 600; }
.checks li { display: flex; align-items: center; gap: 12px; }
.checks svg { width: 22px; height: 22px; flex: none; }
.meta { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--navy); background: var(--blue-tint); border-radius: 999px; padding: 6px 12px; margin: 0 0 18px; }
.meta::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }

/* Home hero: finder on the left, well cutaway on the right, on a sky band */
.hero-home { background: linear-gradient(180deg, var(--sky) 0%, var(--sky) 70%, var(--white) 100%); border-bottom: 1px solid var(--line); }
.hero-home .hero { padding-bottom: 36px; }
.cutaway { margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 12px 6px; box-shadow: 0 10px 30px rgba(11, 58, 92, .10); }
.cutaway svg { display: block; width: 100%; height: auto; border-radius: 3px; }
.cutaway figcaption { font-size: 15px; color: var(--muted); padding: 10px 4px 4px; }
.cutaway ol { margin: 6px 0 0; padding-left: 20px; }
.cutaway li { margin-bottom: 3px; }
.cutaway li b { color: var(--navy); }
.cut-src { font-size: 13px; margin: 8px 0 0; }
.cut-src a { color: var(--muted); }

/* Finder: what do you need + where */
.finder { background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--navy); border-radius: var(--radius); padding: 16px; box-shadow: 0 6px 18px rgba(11, 58, 92, .10); max-width: 560px; margin-top: 4px; }
.finder-row { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.finder .f { display: block; border: 1px solid #b7c7d3; border-radius: var(--radius); padding: 9px 12px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); background: var(--white); }
.finder .f:focus-within { outline: 2px solid var(--blue); outline-offset: -1px; }
.finder select, .finder input { display: block; width: 100%; border: 0; padding: 3px 0 0; background: transparent; font: 600 16px/1.4 var(--sans); color: var(--ink); text-transform: none; letter-spacing: 0; outline: none; }
.finder .btn { margin-top: 10px; }
.finder-note { font-size: 15px; color: var(--muted); margin: 12px 2px 0; }
.finder-note a { color: var(--blue); font-weight: 700; }
.hero-home .finder { margin-bottom: 14px; }
.popular { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 12px; font-size: 15px; color: var(--muted); font-weight: 600; }
.popular a { padding: 6px 12px; border: 1px solid #b7c7d3; border-radius: var(--radius); background: var(--white); color: var(--navy); text-decoration: none; }
.popular a:hover { border-color: var(--blue); color: var(--blue); }
.start-note { font-size: 15px; color: var(--muted); margin: 0; }
.start-note a { color: var(--blue); font-weight: 700; }

/* Boxes */
.box { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; background: var(--white); }
.box h3 { font: 800 19px/1.2 var(--head); color: var(--navy); margin-bottom: 4px; }
.box p { font-size: 15px; margin: 0 0 10px; }
.box a { font-weight: 700; color: var(--blue); }

/* Cards and the quote form */
.card { border: 1px solid var(--line); border-top: 4px solid var(--blue); border-radius: var(--radius); padding: 22px; background: var(--white); box-shadow: 0 8px 24px rgba(11, 58, 92, .12); }
.card h2 { font-size: 25px; margin-bottom: 4px; }
.card .sub { color: var(--muted); font-size: 15px; margin-bottom: 16px; }
.fields { border: 1px solid #b7c7d3; border-radius: var(--radius); overflow: hidden; }
.fields .f { display: block; padding: 10px 12px; border-top: 1px solid #b7c7d3; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.fields .f:first-child { border-top: 0; }
.fields .pair { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #b7c7d3; }
.fields .pair:first-child { border-top: 0; }
.fields .pair .f { border-top: 0; }
.fields .pair .f + .f { border-left: 1px solid #b7c7d3; }
.fields input, .fields select, .fields textarea { display: block; width: 100%; border: 0; padding: 3px 0 0; background: transparent; font: 600 16px/1.4 var(--sans); color: var(--ink); text-transform: none; letter-spacing: 0; }
.fields textarea { resize: vertical; min-height: 44px; }
.fields .f:focus-within { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: var(--radius); }
.fields input:focus, .fields select:focus, .fields textarea:focus { outline: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn { display: block; width: 100%; border: 0; cursor: pointer; text-align: center; text-decoration: none; background: var(--blue); color: #fff; font: 700 17px/1 var(--sans); padding: 16px 20px; border-radius: var(--radius); margin-top: 16px; }
.btn:hover { background: var(--blue-2); }
.btn:disabled { opacity: .6; cursor: default; }
.btn-inline { display: inline-block; width: auto; padding: 14px 24px; margin: 6px 10px 0 0; }
.btn-ghost { background: var(--white); color: var(--blue); box-shadow: inset 0 0 0 2px var(--blue); }
.btn-ghost:hover { background: var(--blue-tint); }
.btn-light { background: #fff; color: var(--navy); margin: 0; }
.btn-light:hover { background: var(--sky); }
.fine { font-size: 13px; color: var(--muted); text-align: center; margin: 12px 0 0; }
.fine a { color: var(--muted); }
.err { color: #b3261e; font-size: 15px; font-weight: 600; margin: 12px 0 0; }
.done { text-align: center; padding: 18px 4px 6px; }
.done svg { width: 48px; height: 48px; margin-bottom: 10px; }
.done h2 { margin-bottom: 8px; }
.done p { color: var(--muted); }
.next { margin: 0 0 16px; padding: 12px 14px 12px 32px; background: var(--sky); border-radius: var(--radius); font-size: 15px; color: var(--navy); }
.next li { margin-bottom: 4px; }
.next li:last-child { margin-bottom: 0; }
#quote { scroll-margin-top: 80px; }
.qaside h2 { font-size: 23px; }
.qaside .btn { display: block; text-align: center; text-decoration: none; }
.qaside .fine { margin: 10px 0 0; }

/* Short answer at the top of a guide: the fact, its source and the date we checked it. */
.answer { background: var(--sky); border-left: 5px solid var(--blue); border-radius: var(--radius); padding: 16px 20px; margin: 16px 0 6px; max-width: 36em; }
.answer p { margin: 0; font-size: 17px; }
.answer b { color: var(--navy); }
.answer .answer-src { margin-top: 8px; font-size: 14px; color: var(--muted); }
.answer .answer-src a { color: var(--muted); }

/* Tiles and tables */
.tiles { display: grid; gap: 14px; }
.tile { display: block; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; text-decoration: none; background: var(--white); }
a.tile:hover { border-color: var(--blue); box-shadow: 0 4px 14px rgba(11, 58, 92, .10); }
.tile h3 { margin-bottom: 6px; font: 800 20px/1.2 var(--head); color: var(--navy); }
.tile p { color: var(--muted); font-size: 16px; margin: 0; }
.syms .sym { padding-top: 16px; }
.sym .ico { width: 30px; height: 30px; color: var(--blue); margin-bottom: 8px; }
.sym .go { display: inline-block; margin-top: 10px; font-weight: 700; font-size: 15px; color: var(--blue); }
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 480px; }
.tbl th, .tbl td { text-align: left; padding: 12px 16px; border-top: 1px solid var(--line); vertical-align: top; }
.tbl thead th { border-top: 0; background: var(--navy); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.tbl tbody tr:nth-child(even) td { background: #f7fafc; }
.tbl td:nth-child(2) { white-space: nowrap; font-weight: 700; }
.tbl a { color: var(--blue); }
.tbl-wrap + .tbl-wrap { margin-top: 14px; }
.note { background: var(--sky); border: 1px solid var(--sky-2); border-radius: var(--radius); padding: 16px 20px; font-size: 15px; }
.note p:last-child { margin: 0; }
.prose { max-width: 46em; }
.wrap.prose { max-width: 1140px; }
.wrap.prose > * { max-width: 46em; }
.wrap.prose > .tbl-wrap { max-width: 56em; }
.prose h2 { margin-top: 34px; }
.prose h2:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 20px; margin: 0 0 14px; }
.prose li { margin-bottom: 6px; }
.sources { font-size: 14px; color: var(--muted); margin-top: 16px; }
.sources a { color: var(--muted); }

/* County links */
.cities { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 8px; }
.cities a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 10px 9px 14px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; font-size: 16px; font-weight: 600; background: var(--white); }
.cities a:hover { border-color: var(--blue); color: var(--blue); }
.cities .muted { min-width: 26px; text-align: center; font-size: 13px; font-weight: 700; color: var(--blue); background: var(--blue-tint); border-radius: 999px; padding: 2px 7px; }

/* Listings */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chip { border: 1px solid #b7c7d3; background: var(--white); border-radius: var(--radius); padding: 9px 14px; font: 700 15px/1 var(--sans); color: var(--ink); cursor: pointer; }
.chip:hover { border-color: var(--blue); }
.chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.bizs { display: grid; gap: 12px; }
.biz { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; background: var(--white); }
.biz:hover { border-color: #b7c7d3; }
.biz h3 { font: 800 18px/1.25 var(--head); color: var(--navy); margin-bottom: 2px; }
.biz h3 a { color: inherit; text-decoration: none; }
.biz h3 a:hover { text-decoration: underline; }
.biz-where { color: var(--muted); font-size: 15px; margin: 0 0 10px; }
.biz-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.tag { font-size: 13px; font-weight: 700; padding: 3px 9px; border-radius: 4px; border: 1px solid #b7c7d3; color: var(--navy); background: var(--white); }
.tag-pump { border-color: var(--blue); color: var(--blue); }
.tag-drilling { background: var(--navy); border-color: var(--navy); color: #fff; }
.biz-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.biz-phone { display: inline-block; background: var(--blue); color: #fff; padding: 9px 14px; border-radius: var(--radius); font-size: 16px; font-weight: 700; text-decoration: none; }
.biz-phone:hover { background: var(--blue-2); }
.biz-web { display: inline-block; padding: 8px 13px; border-radius: var(--radius); font-size: 15px; font-weight: 700; color: var(--blue); text-decoration: none; box-shadow: inset 0 0 0 1.5px var(--blue); }
.biz-web:hover { background: var(--blue-tint); }
.biz-lic { font-size: 13px; color: var(--muted); margin: 10px 0 0; line-height: 1.6; }
.biz-lic:empty { display: none; }
.biz-lic a { color: var(--blue); font-weight: 600; }
.biz-act { font-size: 13px; margin: 6px 0 0; color: var(--muted); }
.biz-act a { color: var(--muted); }
.biz-act a:hover { color: var(--blue); }
.sec-meta { font-size: 14px; color: var(--muted); margin: -10px 0 18px; }
.sec-h { font-size: 24px; margin: 30px 0 16px; }
.anchor { display: block; height: 0; scroll-margin-top: 80px; }
.feat-open { border: 1px dashed #9fb4c3; border-radius: var(--radius); padding: 10px 14px; font-size: 14px; color: var(--muted); margin: 0 0 16px; }
.feat-open b { color: var(--ink); }
.feat-open a { color: var(--blue); font-weight: 700; }

/* County pages: listings beside a side column */
.county-main h2 { scroll-margin-top: 80px; }
.county-main .sec-h:first-of-type { margin-top: 18px; }
.county-side { display: grid; gap: 16px; align-content: start; }
.side-box { margin: 0; }
.towns { display: flex; flex-wrap: wrap; gap: 6px; }
.town { border: 1px solid #b7c7d3; background: var(--white); border-radius: var(--radius); padding: 6px 10px; font: 600 14px/1.2 var(--sans); color: var(--ink); cursor: pointer; }
.town span { color: var(--muted); }
.town:hover { border-color: var(--blue); }
.town.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.town.on span { color: #cfe0ee; }

/* Company pages: facts from their website, call and website buttons, and a phone bar that calls them */
.biz-cta { margin: 6px 0 18px; }
.biz-cta .btn-inline { margin-top: 6px; }
.facts { display: grid; margin: 0 0 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.facts > div { display: grid; gap: 2px; padding: 12px 16px; border-top: 1px solid var(--line); }
.facts > div:first-child { border-top: 0; }
.facts dt { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.facts dd { margin: 0; font-size: 16px; }
.facts .tag { margin-right: 2px; }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.faq summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 16px; color: var(--navy); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 24px; line-height: 1; color: var(--blue); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { color: var(--muted); margin: 10px 0 0; max-width: 46em; }
.faq a { color: var(--blue); }

/* Quote band */
.qband { background: linear-gradient(120deg, var(--navy) 0%, var(--blue-2) 100%); border-top: 0; }
.qband-in { display: grid; gap: 18px; align-items: center; }
.qband h2 { color: #fff; margin-bottom: 6px; }
.sec.qband > .wrap > div > h2::before { display: none; }
.qband p { color: #d6e6f2; margin: 0; max-width: 44em; }

/* Footer */
.foot { background: var(--navy-2); color: #e3edf4; padding: 40px 0 110px; font-size: 15px; margin-top: 20px; }
.foot-grid { display: grid; gap: 28px; }
.foot h4 { margin: 0 0 10px; font: 800 16px/1.2 var(--head); color: #fff; text-transform: uppercase; letter-spacing: .04em; }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.foot a { color: #e3edf4; text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot p a { text-decoration: underline; }
.foot .brand { margin-bottom: 12px; }
.foot .brand img { height: 24px; }
.foot p { color: #b9cddc; margin: 0 0 8px; max-width: 28em; }
.legal { border-top: 1px solid rgba(255, 255, 255, .16); margin-top: 28px; padding-top: 18px; color: #b9cddc; }

/* Mobile bottom bar */
.mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--navy); color: #fff; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.mbar b { display: block; font-size: 16px; }
.mbar span { font-size: 14px; color: #c3d6e4; }
.mbar a { flex: none; background: #fff; color: var(--navy); text-decoration: none; font-weight: 700; padding: 12px 18px; border-radius: var(--radius); }
.mbar-call a { background: var(--blue); color: #fff; padding: 12px 24px; }
.mbar-call b { max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (min-width: 640px) {
  .facts > div { grid-template-columns: 190px minmax(0, 1fr); gap: 14px; align-items: baseline; }
}
@media (min-width: 760px) {
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .bizs { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .foot { padding-bottom: 40px; }
  .qband-in { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (min-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; padding-top: 48px; padding-bottom: 56px; }
  .hero .card { position: sticky; top: 90px; }
  .hero-home .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 540px); align-items: center; }
  .top-links .nav-extra, .top-links a.top-cta { display: inline-block; }
  .mbar { display: none; }
  .county-side { position: sticky; top: 90px; }
  .county-side .card { position: static; }
}
@media (min-width: 1100px) {
  .hero:not(.hero-county) .bizs { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 959px) {
  .top-links a.top-cta { display: inline-block; }
  .hero-home .cutaway { order: 2; }
}
@media (max-width: 639px) {
  .finder .f { padding: 8px 10px; }
  .finder, .card { padding: 14px; }
  .hero-home .lede { font-size: 18px; margin: 10px 0 14px; }
  .cities { grid-template-columns: 1fr 1fr; gap: 6px; }
  .cities a { padding: 8px 8px 8px 10px; font-size: 15px; }
  table.tbl { min-width: 0; font-size: 15px; }
  .tbl th, .tbl td { padding: 10px 12px; }
  .tbl td:nth-child(2) { white-space: normal; }
  .urgent { font-size: 14px; }
}
@media (max-width: 420px) {
  .brand img { height: 21px; }
  .top-links a.top-cta { padding: 9px 11px; }
}
@media (max-width: 389px) {
  .brand img { height: 19px; }
  .top-links a.top-cta { font-size: 14px; padding: 8px 9px; }
}
.facts dd a[href^="tel:"], .biz-phone { white-space: nowrap; }