/* a-day-with-better-water - shared stylesheet.
   Extracted from index.html on 2026-08-21 so every page of this demo is styled
   from one place. Do not re-inline it: interior pages must not drift. */
:root{
  --sea:#002a42; --blue:#003594; --lblue:#298fc2; --sky:#eef6fb;
  --green:#00c78b; --btn:#00855d; --btn-hover:#007a55;
  --ink:#22394a; --mut:#587082; --line:#e4ebf0; --tint:#ccd7dc;
  --w:1060px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Montserrat',sans-serif;font-size:16.5px;line-height:1.68;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue)}
::selection{background:#cdeee2;color:var(--sea)}
:focus-visible{outline:3px solid var(--lblue);outline-offset:2px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 24px}
h1,h2,h3{color:var(--sea);line-height:1.14;letter-spacing:-.015em}
.btn{display:inline-block;white-space:nowrap;font-weight:700;font-size:.98rem;text-decoration:none;padding:.95rem 1.9rem;border-radius:999px;background:var(--btn);color:#fff;transition:background .15s ease}
.btn:hover{background:var(--btn-hover);color:#fff}
.btn:active{transform:translateY(1px)}
.btn.line{background:transparent;color:var(--sea);border:2px solid var(--sea)}
.btn.line:hover{background:rgba(0,42,66,.05);color:var(--sea)}
/* header */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hd{display:flex;align-items:center;gap:1rem;max-width:var(--w);margin:0 auto;padding:.85rem 24px}
.brand{text-decoration:none}
.brand b{display:block;font-weight:800;font-size:1rem;color:var(--sea)}
.brand span{display:block;font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.hd a.tel{margin-left:auto;font-weight:800;color:var(--sea);text-decoration:none;white-space:nowrap}
.hd a.tel:hover{color:var(--blue)}
/* hero */
.hero{position:relative;text-align:center;padding:5.6rem 24px 4.6rem;background:linear-gradient(180deg,var(--sky) 0%,#fff 100%);overflow:hidden}
.hero .kick{font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin-bottom:1.2rem}
.hero h1{font-size:clamp(2.5rem,6vw,4rem);font-weight:800;max-width:11em;margin:0 auto}
.hero .sub{font-size:1.14rem;color:var(--mut);max-width:31em;margin:1.4rem auto 0}
.hero .clock{margin:1.9rem auto 0;font-size:.9rem;color:var(--mut)}
.hero .clock b{color:var(--sea);font-weight:800;font-variant-numeric:tabular-nums}
.hero .cta{margin-top:2.2rem;display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}
.hero svg.wl{display:block;margin:2.8rem auto 0;width:min(340px,70%);height:26px}
/* timeline */
.tl{position:relative;padding:4.2rem 0 1rem}
.tl::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--line);transform:translateX(-50%)}
.tl .fill{position:absolute;top:0;left:50%;width:2px;height:100%;background:linear-gradient(180deg,var(--lblue),var(--green));transform:translateX(-50%) scaleY(0);transform-origin:top;pointer-events:none}
.mo{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0 4.4rem;align-items:center;max-width:var(--w);margin:0 auto;padding:3.1rem 24px}
.mo::after{content:"";position:absolute;left:50%;top:50%;width:28px;height:28px;border-radius:50%;background:#fff;border:3px solid var(--tint);transform:translate(-50%,-50%);transition:border-color .5s ease,background .5s ease}
.mo.in::after{border-color:var(--green);background:#e5f8f1}
.mo .ph{border-radius:18px;overflow:hidden;box-shadow:0 20px 48px rgba(0,42,66,.14)}
.mo .ph img{width:100%;height:100%;object-fit:cover}
.mo .tx .tm{font-size:clamp(2rem,4.4vw,2.9rem);font-weight:800;color:var(--tint);letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;transition:color .6s ease}
.mo.in .tx .tm{color:var(--sea)}
.mo .tx .tm small{font-size:.45em;font-weight:800;letter-spacing:.04em;margin-left:.25em}
.mo .tx h2{font-size:1.45rem;font-weight:800;margin:.7rem 0 .6rem}
.mo .tx p{color:var(--mut);font-size:1rem;max-width:24em}
.mo:nth-child(odd) .ph{order:2}
.mo:nth-child(odd) .tx{order:1;text-align:right;justify-self:end}
.mo:nth-child(odd) .tx p{margin-left:auto}
.mo .ph,.mo .tx{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
.mo.in .ph,.mo.in .tx{opacity:1;transform:none}
.mo.in .ph{transition-delay:.08s}
/* dog interlude */
.dog{position:relative;text-align:center;padding:3.4rem 24px;max-width:var(--w);margin:0 auto}
.dog::after{content:"";position:absolute;left:50%;top:50%;width:28px;height:28px;border-radius:50%;background:#fff;border:3px solid var(--tint);transform:translate(-50%,-50%)}
.dog .card{position:relative;z-index:1;display:inline-block;background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:2rem 2.6rem 1.8rem;box-shadow:0 18px 44px rgba(0,42,66,.1);opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
.dog.in .card{opacity:1;transform:none}
.dog img{width:170px;margin:0 auto .6rem}
.dog .tm{font-size:1.5rem;font-weight:800;color:var(--sea);font-variant-numeric:tabular-nums}
.dog p{color:var(--mut);font-size:1rem;margin-top:.2rem}
/* behind-it-all band */
.band{position:relative;background:var(--sea);color:#fff;margin-top:4.2rem;padding:5.4rem 0;overflow:hidden}
.band::before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='96'%3E%3Cpath d='M0 48 Q105 18 210 48 T420 48' fill='none' stroke='%23ffffff' stroke-opacity='.05' stroke-width='2'/%3E%3Cpath d='M0 78 Q105 52 210 78 T420 78' fill='none' stroke='%23ffffff' stroke-opacity='.035' stroke-width='2'/%3E%3C/svg%3E");background-size:420px 96px}
.band .wrap{position:relative;display:grid;grid-template-columns:.85fr 1.15fr;gap:3.6rem;align-items:center}
.band .prod{background:radial-gradient(closest-side,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 78%);padding:1rem}
.band .prod img{max-height:400px;width:auto;margin:0 auto;filter:drop-shadow(0 22px 34px rgba(0,0,0,.35))}
.band h2{color:#fff;font-size:clamp(1.9rem,4vw,2.6rem);font-weight:800;max-width:14em}
.band p{color:#c3d3dd;font-size:1.05rem;max-width:30em;margin:1.1rem 0 0}
.band .cta{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2rem}
.band .btn{font-weight:800}
.band .btn.line{color:#fff;border-color:rgba(255,255,255,.75)}
.band .btn.line:hover{background:rgba(255,255,255,.1);color:#fff}
.band .note{font-size:.92rem;color:#c3d3dd;margin-top:1.2rem}
.band .note a{color:#fff;font-weight:700}
/* footer */
footer{background:#001b2c;color:#8fa5b3;padding:2.6rem 0 5rem}
.ft{max-width:var(--w);margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;font-size:.82rem}
.ft img{width:180px;height:auto}
.ft .dv{width:1px;height:30px;background:rgba(255,255,255,.15)}
.ft a{color:#c3d3dd}
/* mobile call bar */
.mcall{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--btn);text-align:center;padding:.95rem;box-shadow:0 -8px 24px rgba(0,42,66,.25)}
.mcall a{color:#fff;font-weight:800;text-decoration:none;font-size:1.02rem}
/* motion layer */
.hero .kick,.hero h1,.hero .sub,.hero .clock,.hero .cta,.hero svg.wl{animation:hup .7s cubic-bezier(.22,.9,.3,1) both}
.hero h1{animation-delay:.12s}
.hero .sub{animation-delay:.24s}
.hero .clock{animation-delay:.36s}
.hero .cta{animation-delay:.48s}
.hero svg.wl{animation-delay:.62s}
@keyframes hup{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero svg.wl path{stroke-dasharray:400;stroke-dashoffset:400;animation:draw 1.5s ease .8s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.clock .cl{animation:blink 2s ease infinite}
@keyframes blink{50%{opacity:.25}}
.mo.in .ph img{animation:kb 5.5s ease-out both}
@keyframes kb{from{transform:scale(1.07)}to{transform:scale(1)}}
.mo .ph{transition:opacity .6s ease,transform .6s ease,box-shadow .3s ease}
.mo.in .ph:hover{transform:translateY(-5px);box-shadow:0 30px 62px rgba(0,42,66,.2)}
.tm .ch{display:inline-block;opacity:0;transform:translateY(.55em)}
.mo.in .tm .ch{animation:chr .5s cubic-bezier(.22,.9,.3,1) both;animation-delay:calc(.15s + var(--i)*.06s)}
@keyframes chr{from{opacity:0;transform:translateY(.55em)}to{opacity:1;transform:none}}
.mo.in::after{animation:rip .9s ease .25s}
@keyframes rip{0%{box-shadow:0 0 0 0 rgba(0,199,139,.4)}100%{box-shadow:0 0 0 18px rgba(0,199,139,0)}}
.tl .fill{transition:transform .75s cubic-bezier(.45,.05,.25,1)}
.tl .drop{position:absolute;left:50%;top:0;width:15px;height:19px;transform:translate(-50%,-50%);pointer-events:none;z-index:2;opacity:0;transition:top .75s cubic-bezier(.45,.05,.25,1),opacity .3s ease}
.tl .drop svg{display:block;width:100%;height:100%;filter:drop-shadow(0 2px 5px rgba(0,133,93,.35))}
.dog .card{transform:translateY(26px) rotate(-2deg)}
.dog.in .card{transition:opacity .5s ease,transform .65s cubic-bezier(.34,1.56,.64,1)}
.dog .card:hover img{animation:wig .5s ease}
@keyframes wig{25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
.band::before{animation:drift 70s linear infinite}
@keyframes drift{to{background-position:420px 0}}
.band .prod img{animation:bob 6s ease-in-out infinite alternate}
@keyframes bob{from{transform:translateY(-6px)}to{transform:translateY(6px)}}
.band .wrap>*{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.band.in .wrap>*{opacity:1;transform:none}
.band.in .wrap>div:last-child{transition-delay:.12s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mo .ph,.mo .tx,.dog .card{opacity:1;transform:none;transition:none}
  .tl .fill,.tl .drop{display:none}
  .hero .kick,.hero h1,.hero .sub,.hero .clock,.hero .cta,.hero svg.wl,.mo.in .ph img,.mo.in::after,.band::before,.band .prod img,.clock .cl,.dog .card img{animation:none}
  .hero svg.wl path{animation:none;stroke-dashoffset:0}
  .tm .ch{opacity:1;transform:none;animation:none}
  .mo.in .tm .ch{animation:none}
  .band .wrap>*{opacity:1;transform:none;transition:none}
}
@media (max-width:860px){
  .tl::before,.tl .fill{left:26px;transform:none}
  .tl .drop{left:26px}
  .tl .fill{transform:scaleY(0)}
  .mo{grid-template-columns:1fr;gap:1.1rem;padding:2.3rem 24px 2.3rem 62px}
  .mo::after{left:26px;transform:translate(-50%,-50%);top:3rem}
  .mo:nth-child(odd) .ph{order:1}
  .mo:nth-child(odd) .tx{order:2;text-align:left;justify-self:start}
  .mo:nth-child(odd) .tx p{margin-left:0}
  .mo .tx{order:2}
  .dog{padding-left:62px}
  .dog::after{left:26px;top:3rem}
  .band .wrap{grid-template-columns:1fr;text-align:center;gap:2rem}
  .band .prod img{max-height:260px}
  .band .cta{justify-content:center}
  .band p{margin-left:auto;margin-right:auto}
  .mcall{display:block}
  footer{padding-bottom:6.5rem}
  .ft{justify-content:center;text-align:center}
}

/* ============================================================
   Interior pages. Added 2026-08-21 with the nine inside pages.
   Everything above this point drives index.html; everything below
   is shared by the inside pages and by the header nav on all of them.
   ============================================================ */

/* header nav. Sits on its own row under the brand so all nine pages fit. */
.hd{flex-wrap:wrap}
.hd .brand{order:1}
.hd a.tel{order:2}
.nav{order:3;width:100%;display:flex;align-items:center;gap:1.5rem;margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--line);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nav::-webkit-scrollbar{display:none}
.nav a{white-space:nowrap;font-size:.86rem;font-weight:700;color:var(--ink);text-decoration:none;padding:.15rem 0 .3rem;border-bottom:2px solid transparent}
.nav a:hover{color:var(--blue);border-bottom-color:var(--tint)}
.nav a.on{color:var(--sea);border-bottom-color:var(--btn)}
@media (max-width:420px){
  .brand b{font-size:.92rem}
  .hd a.tel{font-size:.9rem}
  .nav{gap:1.15rem}
}

/* page head */
.phead{text-align:center;padding:4.4rem 24px 3.4rem;background:linear-gradient(180deg,var(--sky) 0%,#fff 100%)}
.phead .kick{font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin-bottom:1.1rem}
.phead h1{font-size:clamp(2.1rem,4.8vw,3.1rem);font-weight:800;max-width:15em;margin:0 auto}
.phead .sub{font-size:1.1rem;color:var(--mut);max-width:34em;margin:1.3rem auto 0}
.phead .kick,.phead h1,.phead .sub{animation:hup .7s cubic-bezier(.22,.9,.3,1) both}
.phead h1{animation-delay:.1s}
.phead .sub{animation-delay:.2s}

/* sections */
.sec{padding:4.3rem 0}
.sec.tint{background:var(--sky)}
.sec.tight{padding:3rem 0}
.shd{text-align:center;max-width:36em;margin:0 auto 2.7rem}
.shd h2{font-size:clamp(1.65rem,3.4vw,2.2rem);font-weight:800}
.shd p{color:var(--mut);margin-top:.9rem}
.narrow{max-width:760px;margin:0 auto}
.prose h2{font-size:clamp(1.6rem,3.2vw,2.05rem);font-weight:800}
.prose h3{font-size:1.14rem;font-weight:800;margin-top:2rem}
.prose p{margin-top:1.1rem;color:var(--ink)}
.prose p.lead{font-size:1.1rem}
.prose ul{margin:1.1rem 0 0;padding-left:1.2rem}
.prose li{margin-top:.55rem}
.prose li::marker{color:var(--btn)}

/* image + copy split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:3.4rem;align-items:center}
.split.rv .fig,.split.rv .pfig{order:2}
.fig{border-radius:18px;overflow:hidden;box-shadow:0 20px 48px rgba(0,42,66,.14)}
.fig img{width:100%}
.fig .cap{padding:.85rem 1.1rem;background:#fff;font-size:.82rem;color:var(--mut)}
.pfig{background:linear-gradient(180deg,var(--sky) 0%,#fff 100%);border:1.5px solid var(--line);border-radius:20px;padding:2.6rem}
.pfig img{max-height:320px;width:auto;margin:0 auto}
.pfig.plain{background:#fff}
.pfig .cap{text-align:center;font-size:.82rem;color:var(--mut);margin-top:1.5rem}
@media (max-width:860px){
  .split{grid-template-columns:1fr;gap:2rem}
  .split.rv .fig,.split.rv .pfig{order:0}
}

/* card grids */
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
@media (max-width:860px){.g2,.g3{grid-template-columns:1fr}}
.crd{background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:1.7rem 1.6rem;box-shadow:0 12px 30px rgba(0,42,66,.06)}
.crd .t{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:.55rem}
.crd h3{font-size:1.08rem;font-weight:800}
.crd p{color:var(--ink);font-size:.98rem;margin-top:.55rem}

/* product cards */
.pcard{background:#fff;border:1.5px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 12px 30px rgba(0,42,66,.06)}
.pcard .im{background:linear-gradient(180deg,var(--sky) 0%,#fff 100%);padding:2.2rem}
.pcard .im img{max-height:220px;width:auto;margin:0 auto}
.pcard .bd{padding:1.5rem 1.6rem 1.8rem}
.pcard h3{font-size:1.06rem;font-weight:800}
.pcard p{color:var(--ink);font-size:.95rem;margin-top:.5rem}

/* hour by hour list */
.hrs{margin-top:.5rem}
.hr{display:grid;grid-template-columns:5.8rem 1fr;gap:1.6rem;padding:1.35rem 0;border-top:1px solid var(--line)}
.hr:last-child{border-bottom:1px solid var(--line)}
.hr .t{font-weight:800;color:var(--sea);font-variant-numeric:tabular-nums;font-size:.98rem;letter-spacing:.01em}
.hr h3{font-size:1.05rem;font-weight:800;margin-bottom:.35rem}
.hr p{color:var(--mut);font-size:.98rem}
@media (max-width:600px){.hr{grid-template-columns:1fr;gap:.35rem}}

/* quotes */
.quo{background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:1.8rem 1.7rem;box-shadow:0 12px 30px rgba(0,42,66,.06)}
.quo .st{display:block;color:#8a6a00;letter-spacing:.14em;font-size:1.05rem;line-height:1}
.quo blockquote{margin:.95rem 0 0;color:var(--ink);font-size:1rem}
.quo .who{margin-top:1.2rem;font-size:.88rem;font-weight:800;color:var(--sea)}
.quo .who span{display:block;font-weight:600;font-size:.8rem;color:var(--mut)}

/* question and answer */
.qa{border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line);background:#fff;padding:0 1.4rem}
.qa summary{cursor:pointer;list-style:none;position:relative;padding:1.2rem 2.6rem 1.2rem 0;font-weight:800;font-size:1.02rem;color:var(--sea)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:.4rem;top:.95rem;font-size:1.6rem;font-weight:700;line-height:1;color:var(--btn)}
.qa details[open] summary::after{content:"\2212"}
.qa .a{padding:0 0 1.5rem}
.qa .a p{color:var(--ink);font-size:.99rem}
.qa .a p+p{margin-top:.9rem}

/* definition style facts */
.fx{margin-top:1.6rem}
.fx div{padding:1.1rem 0;border-top:1px solid var(--line)}
.fx dt{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.fx dd{color:var(--ink);font-weight:600;margin-top:.3rem}
.fx dd a{font-weight:800;color:var(--sea);text-decoration:none}
.fx dd a:hover{color:var(--blue)}

/* request form */
.frm{max-width:640px;margin:0 auto}
.frm .fr{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
@media (max-width:600px){.frm .fr{grid-template-columns:1fr}}
.frm .f{margin-top:1.15rem}
.frm label{display:block;font-weight:700;font-size:.85rem;color:var(--sea);margin-bottom:.4rem}
.frm label span{font-weight:600;color:var(--mut)}
.frm input,.frm select,.frm textarea{width:100%;font-family:inherit;font-size:1rem;line-height:1.5;color:var(--ink);background:#fff;border:1.5px solid var(--mut);border-radius:12px;padding:.78rem .95rem}
.frm textarea{min-height:118px;resize:vertical}
.frm .hint{font-size:.83rem;color:var(--mut);margin-top:.55rem}
.frm .go{margin-top:1.8rem;text-align:center}
.frm .go button{border:0;cursor:pointer;font-family:inherit;font-size:1rem;padding:1rem 2.4rem}
.frm .err{color:#8a1c1c;font-weight:700;font-size:.9rem;margin-top:1rem;text-align:center}
.hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.ok{max-width:640px;margin:0 auto;background:#fff;border:1.5px solid var(--btn);border-radius:20px;padding:2.5rem 2rem;text-align:center;box-shadow:0 18px 44px rgba(0,42,66,.1)}
.ok .tick{width:58px;height:58px;margin:0 auto 1.2rem;border-radius:50%;background:#e5f8f1;display:flex;align-items:center;justify-content:center}
.ok .tick svg{width:27px;height:27px;stroke:var(--btn);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ok h2{font-size:1.5rem;font-weight:800}
.ok p{margin-top:.95rem;color:var(--ink)}
.ok .fine{font-size:.82rem;color:var(--mut);margin-top:1.5rem}
[hidden]{display:none!important}

/* single column closing band */
.band.solo .wrap{grid-template-columns:1fr;text-align:center}
.band.solo h2,.band.solo p{margin-left:auto;margin-right:auto}
.band.solo .cta{justify-content:center}
.band.solo .note a{text-decoration:underline;text-underline-offset:3px}

/* dark section, used where a white knockout logo has to sit on navy */
.sec.dark{background:var(--sea)}
.sec.dark h2{color:#fff}
.sec.dark .shd p{color:#c3d3dd}

/* brand strip */
.strip{display:flex;align-items:center;justify-content:center;gap:2.4rem;flex-wrap:wrap}
.strip img{max-height:44px;width:auto}

@media (prefers-reduced-motion:reduce){
  .phead .kick,.phead h1,.phead .sub{animation:none}
}