/* ===== Advair Water — bespoke "Clean water at home" design system ===== */
/* Theme variables. Theme 1 = Springwater (default, light & airy). */
:root{
  --maxw:1080px;
  --font-d:'Fraunces',Georgia,serif;
  --font-b:'Mulish','Segoe UI',sans-serif;
}
/* 1 — Springwater (default): bright daylight on still water */
html.t-springwater{
  --bg:#eef7f7; --bg2:#dceeef; --ink:#0d2b33; --ink2:#3c5b62; --mut:#6f8a90;
  --panel:rgba(255,255,255,.66); --panel-solid:#ffffff; --line:rgba(13,43,51,.12);
  --accent:#0aa6b8; --accent2:#1ec8c8; --accent-ink:#05646f; --gold:#c98a3a;
  --ripple:rgba(30,200,200,.16); --shadow:0 18px 50px -24px rgba(8,60,68,.45);
  --caustic1:rgba(120,224,228,.55); --caustic2:rgba(255,255,255,.7);
}
/* 2 — Deep Well: dark aquifer, light from above */
html.t-deepwell{
  --bg:#04141c; --bg2:#072330; --ink:#dff3f5; --ink2:#9fc4cb; --mut:#5f8b93;
  --panel:rgba(10,40,52,.55); --panel-solid:#0a2734; --line:rgba(120,210,220,.16);
  --accent:#33d6e0; --accent2:#5ef0d8; --accent-ink:#bff3f7; --gold:#e6b15e;
  --ripple:rgba(51,214,224,.18); --shadow:0 22px 60px -26px rgba(0,0,0,.7);
  --caustic1:rgba(51,214,224,.28); --caustic2:rgba(94,240,216,.18);
}
/* 3 — Chalk & Mineral: warm limestone, mineral water */
html.t-chalk{
  --bg:#f6f1e7; --bg2:#ece3d2; --ink:#2c2a22; --ink2:#5b5446; --mut:#8a8270;
  --panel:rgba(255,253,247,.72); --panel-solid:#fffdf7; --line:rgba(44,42,34,.13);
  --accent:#3f8f86; --accent2:#6bb3a2; --accent-ink:#2c6a62; --gold:#b07b2f;
  --ripple:rgba(63,143,134,.14); --shadow:0 18px 48px -24px rgba(80,60,30,.35);
  --caustic1:rgba(107,179,162,.4); --caustic2:rgba(255,255,255,.6);
}
/* 4 — Glacier: cold clear ice */
html.t-glacier{
  --bg:#eaf2f8; --bg2:#d6e6f2; --ink:#10283b; --ink2:#3a5670; --mut:#6d869c;
  --panel:rgba(255,255,255,.7); --panel-solid:#ffffff; --line:rgba(16,40,59,.12);
  --accent:#3a7bd5; --accent2:#5aa9e6; --accent-ink:#235ba8; --gold:#c08a4a;
  --ripple:rgba(90,169,230,.16); --shadow:0 18px 50px -24px rgba(20,50,90,.4);
  --caustic1:rgba(140,200,245,.55); --caustic2:rgba(255,255,255,.75);
}
/* 5 — Rain: storm slate, water in low light */
html.t-rain{
  --bg:#1a2127; --bg2:#222c34; --ink:#e7edf1; --ink2:#aebcc6; --mut:#74838f;
  --panel:rgba(38,49,58,.6); --panel-solid:#26313a; --line:rgba(180,200,212,.14);
  --accent:#69b6d8; --accent2:#8fd0e6; --accent-ink:#cfeaf5; --gold:#d9a85c;
  --ripple:rgba(105,182,216,.16); --shadow:0 22px 58px -26px rgba(0,0,0,.6);
  --caustic1:rgba(105,182,216,.22); --caustic2:rgba(180,210,225,.14);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-b);color:var(--ink);font-size:16px;line-height:1.7;
  background:var(--bg);
  background-image:
    radial-gradient(1200px 600px at 78% -8%, var(--caustic1), transparent 60%),
    radial-gradient(900px 500px at 8% 4%, var(--caustic2), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  position:relative;overflow-x:hidden;
}
/* subtle moving caustic light layer */
body::before{
  content:"";position:fixed;inset:-20%;z-index:0;pointer-events:none;opacity:.5;
  background:
    radial-gradient(closest-side, var(--ripple), transparent) 12% 30%/42vmax 42vmax no-repeat,
    radial-gradient(closest-side, var(--ripple), transparent) 82% 64%/52vmax 52vmax no-repeat,
    radial-gradient(closest-side, var(--ripple), transparent) 48% 12%/36vmax 36vmax no-repeat;
  filter:blur(8px);
  animation:drift 34s ease-in-out infinite alternate;
}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2.5%,-2%,0) scale(1.06)}
  100%{transform:translate3d(-2%,2.5%,0) scale(1.02)}
}
@media(prefers-reduced-motion:reduce){body::before{animation:none}}
.wrap{position:relative;z-index:1}
.w{max-width:var(--maxw);margin:0 auto;padding:0 26px}
a{color:var(--accent-ink);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--font-d);line-height:1.12;font-weight:600;letter-spacing:-.01em;color:var(--ink)}

/* ---- top nav ---- */
.nav{position:sticky;top:0;z-index:60;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line)}
.ni{max-width:var(--maxw);margin:0 auto;padding:13px 26px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-d);font-weight:600;font-size:1.18rem;color:var(--ink);letter-spacing:-.02em}
.brand .drop{width:22px;height:22px;flex:none}
.brand b{color:var(--accent-ink);font-weight:600}
.navlinks{margin-left:auto;display:flex;flex-wrap:wrap;gap:2px;align-items:center}
.navlinks a{color:var(--ink2);font-family:var(--font-b);font-weight:600;font-size:.82rem;
  padding:6px 11px;border-radius:999px;letter-spacing:.01em;transition:.18s}
.navlinks a:hover{color:var(--accent-ink);background:var(--ripple);text-decoration:none}
.wt-pill{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:800;
  letter-spacing:.04em;color:var(--accent-ink);background:var(--ripple);
  border:1px solid var(--line);padding:5px 11px;border-radius:999px}

/* ---- hero ---- */
.hero{position:relative;padding:74px 0 30px;text-align:center}
.eyebrow{font-family:var(--font-b);font-weight:800;font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent-ink);margin-bottom:18px}
.hero h1{font-size:clamp(2.5rem,6.2vw,4.6rem);font-weight:600;letter-spacing:-.025em;line-height:1.02}
.hero h1 em{font-style:italic;color:var(--accent-ink)}
.hero .lead{max-width:620px;margin:20px auto 0;font-size:1.12rem;color:var(--ink2);line-height:1.65}
.hero .cta{margin-top:30px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-b);font-weight:700;
  font-size:.92rem;padding:12px 22px;border-radius:999px;border:1px solid transparent;transition:.18s;cursor:pointer}
.btn-p{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#04222a;
  box-shadow:0 10px 26px -10px var(--accent)}
.btn-p:hover{text-decoration:none;transform:translateY(-2px)}
.btn-g{background:var(--panel);color:var(--ink);border-color:var(--line);backdrop-filter:blur(6px)}
.btn-g:hover{text-decoration:none;border-color:var(--accent)}

/* wave divider under hero */
.wave{display:block;width:100%;height:64px;margin-top:18px}
.wave path{fill:var(--panel-solid);opacity:.5}

/* ---- sections ---- */
.section{padding:46px 0}
.section-head{margin-bottom:26px}
.section-head .kicker{font-family:var(--font-b);font-weight:800;font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-ink);display:flex;align-items:center;gap:10px;margin-bottom:8px}
.section-head .kicker::before{content:"";width:26px;height:2px;background:var(--accent);border-radius:2px}
.section-head h2{font-size:clamp(1.7rem,3.4vw,2.4rem)}
.section-head p{color:var(--ink2);margin-top:8px;max-width:680px}

/* flowing offset panel layout (NOT a uniform card grid) */
.flow{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:20px;
  padding:24px 24px;backdrop-filter:blur(10px) saturate(1.15);-webkit-backdrop-filter:blur(10px);
  box-shadow:var(--shadow);transition:.22s;position:relative;overflow:hidden}
.panel::after{content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 40%);mix-blend-mode:soft-light}
.panel:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.panel .tag{font-family:var(--font-b);font-weight:800;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-ink);display:inline-flex;align-items:center;gap:7px;margin-bottom:9px}
.panel h3{font-size:1.18rem;margin-bottom:8px;color:var(--ink)}
.panel p{color:var(--ink2);font-size:.93rem;line-height:1.62}
.panel .picks{margin-top:10px;font-size:.8rem;color:var(--mut)}
.panel .picks b{color:var(--accent-ink);font-weight:700}
.col-6{grid-column:span 6}.col-5{grid-column:span 5}.col-7{grid-column:span 7}
.col-4{grid-column:span 4}.col-8{grid-column:span 8}.col-12{grid-column:span 12}
/* spec list inside a panel */
.specs{list-style:none;margin:8px 0 0;padding:0}
.specs li{display:flex;gap:10px;padding:7px 0;border-top:1px solid var(--line);font-size:.9rem;color:var(--ink2)}
.specs li:first-child{border-top:none}
.specs li b{color:var(--ink);min-width:108px;font-weight:700}

/* big numeric drop caps for the well-water / testing rhythm */
.lead-num{font-family:var(--font-d);font-size:2.2rem;color:var(--accent2);line-height:1;opacity:.8}

/* ---- generic article (about/guide/faq) ---- */
.article{max-width:760px;margin:0 auto;padding:54px 0 30px}
.article h1{font-size:clamp(2.1rem,4.6vw,3rem);margin-bottom:8px}
.article .sub{color:var(--ink2);font-size:1.05rem;margin-bottom:30px}
.article h2{font-size:1.45rem;margin:34px 0 12px;padding-top:18px;border-top:1px solid var(--line)}
.article p{margin-bottom:15px;color:var(--ink2)}
.article strong{color:var(--ink)}
.article ul{margin:0 0 16px 22px;color:var(--ink2)}
.article li{margin-bottom:7px}

/* faq accordion */
.faq{margin-bottom:13px;background:var(--panel);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;backdrop-filter:blur(8px);box-shadow:var(--shadow)}
.faq-q{padding:16px 20px;cursor:pointer;font-family:var(--font-d);font-weight:600;font-size:1.02rem;
  display:flex;justify-content:space-between;align-items:center;gap:14px;color:var(--ink)}
.faq-q:hover{color:var(--accent-ink)}
.faq-a{padding:0 20px 17px;font-size:.93rem;color:var(--ink2);line-height:1.7;display:none}
.faq.open .faq-a{display:block}
.faq .arrow{color:var(--accent);transition:transform .2s;flex:none}
.faq.open .arrow{transform:rotate(180deg)}

/* resources / sources list */
.res{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px 24px;
  margin-bottom:15px;backdrop-filter:blur(8px);box-shadow:var(--shadow);position:relative}
.res-rank{position:absolute;top:18px;right:22px;font-family:var(--font-d);font-size:1.5rem;color:var(--accent2);opacity:.6}
.res h3{font-size:1.12rem;margin-bottom:5px;padding-right:40px}
.res-url{font-size:.78rem;color:var(--accent-ink);font-family:var(--font-b);word-break:break-all;margin-bottom:3px}
.res-contact{font-size:.76rem;color:var(--mut);margin-bottom:8px}
.res-summary{font-size:.92rem;color:var(--ink2);margin-bottom:7px}
.res-commentary{font-size:.86rem;color:var(--mut);font-style:italic;border-left:2px solid var(--accent);padding-left:12px}

/* social cards */
.social-card{display:flex;align-items:center;gap:16px;background:var(--panel);border:1px solid var(--line);
  border-radius:18px;padding:18px 20px;margin-bottom:13px;backdrop-filter:blur(8px);box-shadow:var(--shadow);transition:.2s}
.social-card:hover{transform:translateY(-3px);border-color:var(--accent);text-decoration:none}
.social-icon{font-size:1.7rem;width:50px;height:50px;display:flex;align-items:center;justify-content:center;
  background:var(--ripple);border-radius:14px;flex:none;color:var(--accent-ink)}
.social-name{font-family:var(--font-d);font-weight:600;font-size:1.05rem;color:var(--ink)}
.social-handle{font-size:.8rem;color:var(--accent-ink);font-weight:700}
.social-desc{font-size:.84rem;color:var(--ink2);margin-top:3px}
.social-btn{margin-left:auto;font-weight:700;font-size:.82rem;color:var(--accent-ink);
  border:1px solid var(--accent);padding:7px 16px;border-radius:999px;flex:none}

/* videos grid */
.vid-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.vid{background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  box-shadow:var(--shadow);transition:.2s;backdrop-filter:blur(8px)}
.vid:hover{transform:translateY(-4px);border-color:var(--accent)}
.vid .frame{position:relative;padding-top:56.25%;background:#000}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.vid-info{padding:14px 16px}
.vid-title{font-family:var(--font-d);font-weight:600;font-size:.98rem;margin-bottom:5px;color:var(--ink);line-height:1.25}
.vid-meta{font-size:.76rem;color:var(--mut)}

/* news feed */
.news-item{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:17px 20px;
  margin-bottom:12px;backdrop-filter:blur(8px);box-shadow:var(--shadow)}
.news-title{font-family:var(--font-d);font-weight:600;font-size:1.06rem;margin-bottom:6px;line-height:1.3}
.news-meta{display:flex;gap:12px;font-size:.74rem;color:var(--mut);margin-bottom:7px;flex-wrap:wrap}
.news-source{color:var(--accent-ink);font-weight:700}
.news-snippet{font-size:.9rem;color:var(--ink2);line-height:1.6}
.loading{color:var(--mut);padding:24px;text-align:center}
.loading-dots::after{content:"";animation:dots 1.4s steps(4,end) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.pulse{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--accent2);
  margin-right:8px;box-shadow:0 0 0 0 var(--accent2);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--ripple)}70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
.load-more{display:block;margin:8px auto 0;background:var(--panel);border:1px solid var(--accent);
  color:var(--accent-ink);font-family:var(--font-b);font-weight:700;padding:11px 26px;border-radius:999px;cursor:pointer}

/* network + footer */
.net{text-align:center;padding:34px 0 8px;border-top:1px solid var(--line);margin-top:30px}
.net-label{font-size:.66rem;text-transform:uppercase;letter-spacing:.2em;color:var(--mut);margin-bottom:10px}
.net a{color:var(--ink2);margin:0 6px;font-size:.86rem;font-weight:600}
.footer{text-align:center;padding:22px;font-size:.8rem;color:var(--mut)}
.footer a{color:var(--accent-ink)}

/* ---- theme picker ---- */
#themebar{position:fixed;right:14px;bottom:14px;z-index:9998;display:flex;gap:6px;align-items:center;
  background:var(--panel-solid);border:1px solid var(--line);border-radius:999px;padding:6px 8px;
  box-shadow:var(--shadow);font-family:var(--font-b)}
#themebar .tl{font-size:.6rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mut);padding:0 5px 0 7px}
#themebar button{font-family:var(--font-b);font-size:.7rem;font-weight:700;color:var(--ink2);
  background:transparent;border:1px solid transparent;border-radius:999px;padding:5px 10px;cursor:pointer;transition:.15s}
#themebar button:hover{color:var(--ink);background:var(--ripple)}
#themebar button[aria-current="true"]{color:var(--accent-ink);background:var(--ripple);border-color:var(--accent)}
@media(max-width:720px){#themebar .tl{display:none}#themebar button{padding:6px 9px}}

@media(max-width:820px){
  .flow{gap:14px}
  .col-6,.col-5,.col-7,.col-4,.col-8{grid-column:span 12}
  .navlinks{display:none}
}