@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&family=Nunito+Sans:wght@400;600;700&display=swap');

:root{
  --navy:#1B3A6B;
  --navy-dark:#122748;
  --blue:#2E7FC4;
  --blue-light:#5DAEE0;
  --sky:#9AD4EE;
  --orange:#F0A83C;
  --bg:#FFFFFF;
  --bg-alt:#F3F6F9;
  --card-bg:#FFFFFF;
  --line: rgba(27,58,107,0.12);
  --text:#1B2A3A;
  --text-dim:#5C7089;
  --amber:#B8790C;
  --amber-dim: rgba(240,168,60,0.14);
  --clay:#C0392B;
  --clay-dim: rgba(192,57,43,0.09);
  --aqua-dark: var(--navy);
  --aqua: var(--blue);
  --aqua-dim: rgba(46,127,196,0.10);
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif: 'Poppins', 'Nunito Sans', sans-serif;
  --sans: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);}
body{font-family: var(--sans); color: var(--text); line-height:1.7; font-size:17px;}
a{color: var(--blue); font-weight:700;}
a:hover{color:var(--navy);}
.wrap{max-width: 780px; margin: 0 auto; padding: 0 20px 60px;}

/* --- header + layered wave hero, matching halowater.com's signature banner --- */
.topbar{background:#fff; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line);}
.topbar-inner{max-width:780px; margin:0 auto; width:100%; display:flex; align-items:center; justify-content:space-between;}
.brand{font-family: var(--serif); font-weight:800; font-size:22px; color:var(--navy); letter-spacing:-0.01em;}
.brand span{color:var(--blue); font-weight:800;}

.hero{background: linear-gradient(180deg, var(--navy) 0%, var(--blue) 100%); padding: 0; position:relative;}
.hero-inner{max-width:780px; margin:0 auto; color:#fff; padding: 30px 20px 46px;}
.hero .eyebrow{color:var(--orange); opacity:1;}
.hero h1{color:#fff;}
.hero .lede{color:rgba(255,255,255,0.88);}

.wave-stack{display:block; width:100%; line-height:0; margin-top:-2px;}

.crumbs{font-family: var(--mono); font-size: 13px; letter-spacing:0.03em; color: rgba(255,255,255,0.75); margin-bottom: 16px;}
.crumbs a{color: rgba(255,255,255,0.85); text-decoration: none; font-weight:400;}
.crumbs a:hover{color: #fff;}

.eyebrow{font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; font-weight:700;}
h1{font-family: var(--serif); font-weight:800; font-size: 46px; line-height: 1.15; margin: 0 0 18px; color:var(--navy); letter-spacing:-0.01em;}
h2{font-family: var(--serif); font-weight:800; font-size: 30px; margin: 40px 0 16px; color:var(--navy);}
h3{font-family: var(--serif); font-weight:700; font-size: 21px; margin: 20px 0 8px; color: var(--navy);}
.lede{font-size: 19px; color: var(--text-dim); max-width: 660px; margin: 0 0 24px;}

/* --- icon benefit row, echoing halo's "why you gotta have" callouts --- */
.benefit-row{display:grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap:18px; margin: 26px 0 8px;}
.benefit{text-align:left;}
.benefit .icon{font-size:34px; margin-bottom:8px; display:block;}
.benefit b{display:block; color:var(--navy); font-size:17px; font-family:var(--serif); font-weight:700;}
.benefit p{margin:4px 0 0; font-size:15px; color:var(--text-dim);}

.quick-answer{
  border: none; background: var(--bg-alt); border-left: 6px solid var(--clay);
  border-radius: 18px; padding: 28px 30px; margin: 28px 0 34px; font-size: 18px;
  box-shadow: 0 4px 16px rgba(27,58,107,0.09);
}
.quick-answer b{color:var(--navy);}
.quick-answer ul{margin: 16px 0 0 0; padding: 0; list-style:none; display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap:10px 22px;}
.quick-answer li{padding-left:30px; position:relative; font-size:17px; font-weight:700; color:var(--navy); overflow-wrap:anywhere; word-break:break-word; line-height:1.35;}
.quick-answer li::before{content:"⚠"; color:var(--clay); position:absolute; left:0; top:-1px; font-size:16px;}

.meta-row{display:flex; flex-wrap:wrap; gap: 10px 26px; font-size: 15px; color: var(--text-dim); margin: 12px 0 20px; font-family: var(--mono);}
.meta-row b{color: var(--navy); font-weight:700;}

.tag{display:inline-block; font-size: 14px; font-family: var(--mono); font-weight:700; padding: 6px 16px; border-radius: 20px; margin: 0 8px 8px 0;}
.tag.ok{background: var(--aqua-dim); color: var(--navy);}
.tag.warn{background: var(--amber-dim); color: var(--amber);}
.tag.bad{background: var(--clay-dim); color: var(--clay);}

.contam-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-top:14px;}
.contam-card{border:1px solid var(--line); background: #fff; border-radius: 14px; padding: 14px 16px; min-width:0; overflow:hidden; box-shadow: 0 1px 4px rgba(27,58,107,0.05);}
.contam-card.viol{border-color: var(--clay); border-width:1.5px;}
.contam-name{font-weight:700; font-size: 17px; margin-bottom: 8px; overflow-wrap:anywhere; word-break:break-word; color:var(--navy);}
.contam-nums{font-size: 15px; color: var(--text-dim); margin-bottom: 8px;}
.contam-nums b{color: var(--text);}
.contam-meta{font-size: 13.5px; color: var(--text-dim); font-family: var(--mono);}
.contam-info{font-size:14px; color:var(--text-dim); margin-top:8px; padding-top:8px; border-top:1px solid var(--line); line-height:1.5;}

.cat-label{font-size: 14px; font-family: var(--mono); font-weight:700; color: var(--blue); text-transform: uppercase; letter-spacing: 0.06em; margin: 24px 0 4px;}
.cat-desc{font-size: 14px; color: var(--text-dim); margin-bottom: 8px;}

.faq dt{font-weight:700; color:var(--navy); margin-top:20px; font-size:18px;}
.faq dd{margin:8px 0 0; color: var(--text-dim); font-size:17px;}

.filter-note{
  background: var(--bg-alt); border-radius: 16px; padding: 24px 26px; margin: 28px 0;
  font-size:16px; color:var(--text-dim); border-left: 5px solid var(--orange);
}
.filter-note b{color:var(--navy);}

/* --- filtration comparison grid --- */
.compare-table{width:100%; border-collapse:collapse; margin: 18px 0 8px; font-size:15px; background:#fff; border-radius:14px; overflow:hidden; box-shadow: 0 2px 10px rgba(27,58,107,0.06);}
.compare-table th, .compare-table td{padding:13px 15px; text-align:left; border-bottom:1px solid var(--line);}
.compare-table th{background: var(--navy); color:#fff; font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:0.04em;}
.compare-table td.sys{font-weight:700; color:var(--navy); white-space:nowrap;}
.compare-table td.center, .compare-table th.center{text-align:center;}
.compare-table .yes{color:var(--blue); font-weight:800;}
.compare-table .partial{color:var(--orange); font-weight:800;}
.compare-table .no{color:var(--text-dim); opacity:0.45;}
.compare-note{font-size:13.5px; color:var(--text-dim); margin-top:10px;}

.data-timestamp{
  display:inline-block; font-family:var(--mono); font-size:12px; color:rgba(255,255,255,0.75);
  background:rgba(255,255,255,0.1); padding:5px 12px; border-radius:20px; margin-top:6px;
}

.jump-nav{
  position:sticky; top:0; z-index:50; background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:14px 18px; margin:4px 0 24px; display:flex; flex-wrap:wrap;
  gap:10px 22px; box-shadow:0 4px 16px rgba(27,58,107,0.10);
}
.jump-nav a{color:var(--navy); font-size:15px; font-weight:700; text-decoration:none; padding:4px 2px; border-bottom:2px solid transparent;}
.jump-nav a:hover{border-bottom-color:var(--aqua);}

.extra-rows-hidden{display:none;}
.table-toggle{
  display:block; width:100%; text-align:center; background:#fff; border:1px solid var(--line);
  border-top:none; border-radius:0 0 14px 14px; padding:12px; margin-top:-14px;
  font-family:var(--mono); font-size:13px; font-weight:700; color:var(--blue); cursor:pointer;
}
.table-toggle:hover{background:var(--bg-alt);}

.scale-row{
  margin-top:16px; padding:16px 18px; background:#fff; border-radius:12px;
  border:1px solid var(--line); font-size:14.5px; color:var(--text-dim);
}
.scale-row b{color:var(--navy);}

.cta{margin: 30px 0; background: linear-gradient(135deg, var(--navy), var(--blue)); color:#fff; border-radius: 16px; padding: 24px 26px; font-size: 16px;}
.cta b{color: var(--orange);}
.cta a{color:#fff; text-decoration:underline;}

.hub-links{margin: 30px 0; font-size:16px;}
.hub-links ul{margin:8px 0 0 22px; padding:0;}

.search-cta{
  border:none; background: var(--bg-alt); border-radius:16px; padding:26px 28px; margin:34px 0;
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-size:17px;
}
.search-cta a.btn{
  background: var(--navy); color: #fff; font-weight:700; text-decoration:none;
  padding: 14px 26px; border-radius: 30px; font-size: 16px; white-space:nowrap;
  box-shadow: 0 4px 12px rgba(27,58,107,0.3);
}
.search-cta a.btn:hover{background:var(--navy-dark);}

footer{margin-top: 48px; font-size: 14px; color: var(--text-dim); line-height: 1.65; border-top: 1px solid var(--line); padding-top: 18px;}
footer p{margin:0 0 12px;}

.footer-band{background: var(--navy); color:rgba(255,255,255,0.85); text-align:center; padding:18px 20px; font-size:13px; font-family:var(--mono); letter-spacing:0.02em; margin-top:54px;}

@media (max-width: 680px){
  .contam-grid{grid-template-columns: repeat(2, 1fr);}
}

/* Tablet-width pass */
@media (max-width: 768px){
  .hero-inner{padding: 24px 18px 36px;}
  h1{font-size: 36px;}
  .lede{font-size: 16px;}
  .wave-stack{height: 110px !important;}
  .benefit-row{grid-template-columns: repeat(2, 1fr); gap: 14px;}
  .compare-table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap;}
  .compare-table td.sys{white-space:normal;}
}

/* Phone-width pass */
@media (max-width: 480px){
  h1{font-size:28px;}
  .lede{font-size:15px;}
  .eyebrow{font-size:11px;}
  .wave-stack{height: 70px !important;}
  .topbar-inner{flex-wrap:wrap; gap:10px;}
  .topbar nav{gap:14px !important; font-size:13px !important;}
  .search-cta{flex-direction:column; align-items:flex-start;}
  .compare-table{font-size:13px;}
  .quick-answer ul{grid-template-columns: 1fr;}
  .contam-grid{grid-template-columns: 1fr;}
  .benefit-row{grid-template-columns: 1fr 1fr; gap:12px;}
  .back-to-top{width:42px; height:42px; font-size:17px; bottom:16px; right:16px;}
  .cat-label{margin-top:16px;}
  #wq-zip{min-width:0 !important; width:100%;}
  #wq-form{flex-direction:column; align-items:stretch !important;}
  #wq-btn{width:100%;}
}

/* =====================================================================
   Live-search results compatibility layer — same class names the ported
   interactive-tool JS already emits (unchanged), re-themed onto the new
   navy/blue/orange palette instead of rewriting the tested JS.
   ===================================================================== */
.wq-status{font-family: var(--mono); font-size: 16px; color: var(--text-dim); margin: 18px 0 24px; min-height: 18px; display:flex; align-items:center; gap:14px;}
.wq-error{border: 1px solid var(--clay); background: var(--clay-dim); padding: 16px 18px; border-radius: 12px; font-size: 14.5px; max-width: 620px; margin-bottom: 20px;}
.wq-error a{color: var(--navy); font-weight:700;}
.wq-results{display:flex; flex-direction:column; gap:16px;}
.wq-card{border: 1px solid var(--line); background: #fff; border-radius: 14px; padding: 22px 24px; display:grid; grid-template-columns: 84px 1fr; gap: 18px; box-shadow: 0 1px 4px rgba(27,58,107,0.05);}
.wq-gauge{width:64px; height:112px; border: 1px solid var(--line); border-radius: 10px; position:relative; overflow:hidden; background: var(--bg-alt);}
.wq-gauge-fill{position:absolute; left:0; right:0; bottom:0; transition: height .6s ease;}
.wq-gauge-label{font-family: var(--mono); font-size: 10px; text-align:center; margin-top:6px; color: var(--text-dim); letter-spacing:0.04em;}
.wq-card-name{font-family: var(--serif); font-weight:700; font-size: 20px; margin: 0 0 6px; color: var(--navy);}
.wq-rec{font-size: 14.5px; line-height: 1.55; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 6px; color: var(--text-dim);}
.wq-rec b{color: var(--navy);}
.wq-fields{display:flex; flex-wrap:wrap; gap: 8px 20px; font-size: 13.5px; color: var(--text-dim); margin-top: 10px;}
.wq-fields span b{color: var(--text); font-weight: 700;}
.wq-empty{color: var(--text-dim); font-size: 15px; max-width: 620px; line-height: 1.65;}
.wq-contam-ratio{font-family: var(--mono); color: var(--clay); font-weight:800;}
.wq-ewg{margin-top: 22px; border-left: 4px solid var(--blue); background: var(--bg-alt); border-radius: 12px; padding: 18px 20px; font-size: 14.5px; max-width: 620px;}
.wq-ewg a{color: var(--navy); font-weight:700;}
.back-to-top{
  position: fixed; bottom: 24px; right: 24px; width: 48px; height: 48px;
  border-radius: 50%; background: var(--navy); color: #fff; border: none;
  font-size: 20px; cursor: pointer; box-shadow: 0 4px 14px rgba(27,58,107,0.35);
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 500;
}
.back-to-top.visible{ opacity: 1; pointer-events: auto; }
.back-to-top:hover{ background: var(--navy-dark); transform: translateY(-2px); }
.wq-spinner{
  display:inline-block; width:34px; height:34px; border-radius:50%; flex-shrink:0;
  border: 4px solid rgba(46,127,196,0.2); border-top-color: var(--blue);
  animation: wq-spin 0.8s linear infinite;
}
@keyframes wq-spin{ to{ transform: rotate(360deg); } }
.wq-tag{display:inline-block; font-size: 12px; font-family: var(--mono); font-weight:700; padding: 5px 14px; border-radius: 20px; margin: 0 8px 8px 0;}
.wq-tag.ok{background: var(--aqua-dim); color: var(--navy);}
.wq-tag.warn{background: var(--amber-dim); color: var(--amber);}
.wq-tag.bad{background: var(--clay-dim); color: var(--clay);}
.wq-contam-grid{display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap:12px; margin-top:12px;}
.wq-contam-card{border:1px solid var(--line); background: #fff; border-radius: 12px; padding: 14px 16px; min-width: 0; overflow: hidden; box-shadow: 0 1px 4px rgba(27,58,107,0.05);}
.wq-contam-name{font-weight:700; font-size: 15px; margin-bottom: 6px; overflow-wrap: anywhere; word-break: break-word; line-height: 1.35; color: var(--navy);}
.wq-contam-nums{display:flex; flex-wrap:wrap; gap: 6px 12px; font-size: 13px; color: var(--text-dim); margin-bottom: 6px;}
.wq-contam-nums b{color: var(--text);}
.wq-contam-meta{font-size: 12px; color: var(--text-dim); font-family: var(--mono);}
.wq-hidden{display:none !important;}
.wq-cta{margin-top: 14px; background: linear-gradient(135deg, var(--navy), var(--blue)); color:#fff; border-radius: 14px; padding: 18px 20px; font-size: 14.5px; max-width: 620px;}
.wq-cta b{color: var(--orange);}
.wq-cta a{color:#fff; text-decoration:underline;}
.wq-footer{margin-top: 34px; font-size: 12.5px; color: var(--text-dim); max-width: 620px; line-height: 1.6; border-top: 1px solid var(--line); padding-top: 16px;}
.wq-footer a{color: var(--navy); font-weight:700;}
.wq-footer p{margin: 0 0 10px;}
.wq-footer p:last-child{margin-bottom: 0;}