/* Effluent Works website. A deep navy theme that matches the Effluent Works HQ and Service apps,
   with the brand's cyan and purple accents (Poppins, like the flyers). All text colours meet WCAG AA
   against the surface they sit on. No inline styles anywhere, so the Content-Security-Policy stays strict. */

@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/poppins-regular.woff) format("woff")}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/poppins-medium.woff) format("woff")}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/poppins-bold.woff) format("woff")}

:root{
  color-scheme:dark;
  --bg:#06122a; --bg2:#081833; --card:#0c1f3f; --card2:#12305a; --panel:#0d2244; --panel2:#12305a; --foot:#030d20;
  --navy:#052a58; --ink:#eef4fb; --text:#c3d1e4; --muted:#9fb2cc; --line:rgba(173,196,235,.16); --field:#6f86a8;
  --cyan:#10b6ec; --cyanT:#3cc8f5; --link:#5ec9f5; --purple:#8a2fd0; --purpleL:#c58af2; --green:#1f9a3c; --leaf:#3db84a; --leafD:#1f9a3c; --lime:#8bd23a; --logoLine:linear-gradient(90deg,#9b2fd6 0%,#2a4fd6 30%,#1c7fe0 52%,#3db84a 78%,#8bd23a 100%); --amber:#fbbf24;
  --white:#fff;
  --r:18px; --r-sm:12px;
  --shadow:0 18px 40px -22px rgba(0,0,0,.8), 0 2px 6px -2px rgba(0,0,0,.4);
  --max:1160px; --gut:20px;
  --head-h:72px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 12px);background:var(--bg)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.65 Poppins,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:var(--link);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:#fff}
:focus-visible{outline:3px solid var(--link);outline-offset:3px;border-radius:6px}
h1,h2,h3,h4{color:var(--ink);font-weight:700;line-height:1.2;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2rem,5.2vw,3.35rem)}
h2{font-size:clamp(1.55rem,3.4vw,2.3rem)}
h3{font-size:1.15rem}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.2em}
strong{color:#fff;font-weight:600}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--card);color:#fff;padding:10px 16px;border-radius:10px;border:2px solid var(--link)}
.skip:focus{left:12px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.i{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.i.fill{fill:currentColor;stroke:none}

/* ---------- header ---------- */
.head{position:sticky;top:0;z-index:50;background:rgba(6,18,42,.92);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.head.scrolled{border-bottom-color:var(--line);box-shadow:0 6px 20px -12px rgba(0,0,0,.8)}
.head .wrap{display:flex;align-items:center;gap:18px;height:var(--head-h)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:none}
.brand .drop{width:34px;height:auto;filter:drop-shadow(0 0 6px rgba(94,201,245,.4))}
.brand .wm{display:flex;flex-direction:column;line-height:1}
.brand .wm b{font-weight:700;font-size:21px;letter-spacing:.02em;color:#fff}
.brand .wm i{font-style:normal;font-weight:700;font-size:15px;letter-spacing:.42em;color:var(--purpleL);margin-top:3px}
.brand .wm small{font-size:7.5px;font-weight:600;letter-spacing:.16em;color:#b5c7de;margin-top:4px;text-transform:uppercase}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav a{color:var(--ink);text-decoration:none;font-weight:500;font-size:15px;padding:8px 10px;border-radius:10px;white-space:nowrap}
.nav a:hover{background:rgba(173,196,235,.1);color:#fff}
.nav a[aria-current="page"]{color:#d9b2f7;background:rgba(169,70,234,.18)}
.head-call{display:inline-flex;align-items:center;gap:8px}
.nav .head-menu-call{display:none}
.menu-btn{display:none;margin-left:auto;background:none;border:0;padding:10px;border-radius:10px;color:var(--ink);cursor:pointer}
.menu-btn:hover{background:rgba(173,196,235,.1)}
.menu-btn .i{width:28px;height:28px}
@media (max-width:1080px){
  .nav{position:fixed;inset:var(--head-h) 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--bg2);border-bottom:1px solid var(--line);box-shadow:0 20px 30px -20px rgba(0,0,0,.8);padding:8px var(--gut) 18px;max-height:calc(100vh - var(--head-h));overflow:auto;display:none}
  .nav.open{display:flex}
  .nav a{font-size:17px;padding:13px 6px;border-bottom:1px solid var(--line);border-radius:0}
  .nav a:last-child{border-bottom:0}
  .nav .head-menu-call{display:inline-flex;margin-top:14px;justify-content:center;border-bottom:0;border-radius:999px;color:#fff}
  .menu-btn{display:block}
  .head .head-call{display:none}
}
@media (max-width:420px){.brand .wm b{font-size:18px}.brand .wm i{font-size:13px}.brand .drop{width:30px}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:600 16px/1.2 Poppins,system-ui,sans-serif;text-decoration:none;border-radius:999px;padding:14px 24px;border:2px solid transparent;cursor:pointer;transition:transform .15s,background .15s,box-shadow .15s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn .i{width:20px;height:20px}
.btn-call{background:linear-gradient(90deg,#8a1fcf,#5b2fd0);color:#fff;box-shadow:0 10px 24px -12px rgba(138,31,207,.9)}
.btn-call:hover{color:#fff;background:linear-gradient(90deg,#9a2fe0,#6a3fe0)}
.btn-light{background:#fff;color:var(--navy);border-color:#fff}
.btn-light:hover{background:#dcf1fb;color:var(--navy)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-ghost:hover{background:rgba(255,255,255,.1);color:#fff}
.btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-outline:hover{background:#fff;color:var(--navy)}
.btn-sm{padding:10px 18px;font-size:15px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn:focus-visible{outline-color:#fff}

/* ---------- hero (image on top, navy wave band below, like the flyer) ---------- */
.hero{background:var(--navy);color:#dbe8f7;position:relative;overflow:hidden;--next:var(--bg)}
.hero:has(+.sec.panel){--next:#0b1f40}
.hero:has(+.sec.tint){--next:var(--bg2)}
.hero-img{position:relative;height:clamp(190px,27vw,350px);background:#0b1f40;overflow:hidden}
.hero-img img{position:absolute;left:0;top:-30%;width:100%;height:130%;object-fit:cover;object-position:50% 62%;will-change:transform}
.hero-band{position:relative;background:linear-gradient(115deg,#05264f 0%,#0a386b 60%,#062c5a 100%);padding:clamp(24px,4vw,44px) 0 clamp(52px,7vw,84px)}
.hero-band .wave{position:absolute;left:0;right:0;top:0;transform:translateY(-98%);width:100%;height:clamp(28px,4.4vw,60px);z-index:2}
.hero h1{color:#fff;max-width:20ch}
.has-aside h1{font-size:clamp(2rem,4.6vw,2.95rem)}
.hero h1 span{color:var(--cyanT);display:block}
.hero .lead{font-size:clamp(1.02rem,1.6vw,1.2rem);max-width:58ch;color:#d3e2f3;margin-bottom:1.4em}
.eyebrow{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--cyanT);margin-bottom:12px}
.trust{display:flex;flex-wrap:wrap;gap:10px 24px;margin:26px 0 0;padding:0;list-style:none;font-size:15px}
.trust li{display:flex;align-items:center;gap:9px;color:#e5eef9}
.trust .dot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1.5px solid rgba(61,184,74,.7);background:rgba(61,184,74,.12);color:var(--lime);flex:none}
.trust .dot .i{width:16px;height:16px}
.hero-sub .hero-band{padding-top:clamp(28px,4vw,48px);padding-bottom:clamp(44px,5.5vw,68px)}
.hero-sub h1{max-width:26ch}
.crumbs{font-size:14px;margin:0 0 10px;color:#b4c8e2}
.crumbs a{color:#d6e5f6}
.crumbs a:hover{color:#fff}
.dl-note{margin:12px 0 0;color:#b4c8e2}

/* ---------- sections ---------- */
.sec{padding:clamp(52px,7vw,92px) 0}
.sec.tint{background:var(--bg2)}
.sec.panel{background:linear-gradient(180deg,#0b1f40 0%,#07152e 100%);position:relative}
.sec-head{max-width:720px;margin:0 0 clamp(26px,4vw,42px)}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head p{font-size:1.06rem;color:var(--muted);margin:0}
.kicker{display:block;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--purpleL);margin-bottom:8px}
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:960px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}
.split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,64px);align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.prose{max-width:70ch}
.prose h2{margin-top:1.4em}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.3em}

/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow);position:relative}
.card h3{margin-bottom:.35em}
.card p:last-child{margin-bottom:0}
.card .more{display:inline-flex;align-items:center;gap:6px;font-weight:600;text-decoration:none;margin-top:12px}
.card .more .i{width:18px;height:18px;transition:transform .15s}
.card .more:hover .i{transform:translateX(3px)}
.card.link-card{transition:transform .18s,box-shadow .18s,border-color .18s}
.card.link-card:hover{transform:translateY(-3px);border-color:rgba(94,201,245,.4)}
.ico{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;margin-bottom:16px;background:linear-gradient(135deg,#8a1fcf,#5b2fd0)}
.ico.c2{background:linear-gradient(135deg,#10b6ec,#0379cf)}
.ico.c3{background:linear-gradient(135deg,#3db84a,#1f9a3c)}
.ico.c4{background:linear-gradient(135deg,#1c4f93,#0f3a73)}
.ico .i{width:26px;height:26px}

/* ---------- prices ---------- */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
@media (max-width:960px){.prices{grid-template-columns:1fr;max-width:560px;margin:0 auto}}
.price{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.price .ph{background:var(--card2);color:#fff;padding:16px 24px;font-weight:600;font-size:17px}
.price .ph small{font-weight:400;color:#b9cde6}
.price .pb{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.amount{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.amount b{font-size:46px;line-height:1;color:var(--link);font-weight:700;letter-spacing:-.02em}
.amount span{color:var(--ink);font-weight:600;line-height:1.25}
.amount span small{display:block;font-weight:400;color:var(--muted);font-size:14px}
.price .save{display:inline-flex;align-self:flex-start;background:linear-gradient(90deg,#3db84a,#8bd23a);color:#06240f;font-weight:700;border-radius:10px;padding:6px 12px;font-size:14px;margin:4px 0 10px}
.price .btn{margin-top:auto;align-self:flex-start}
.price.feature{border:2px solid #a946ea}
.ticks{list-style:none;padding:0;margin:10px 0 20px}
.ticks li{position:relative;padding-left:30px;margin:0 0 9px;line-height:1.5}
.ticks li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:var(--purple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat}
.ticks.green li::before{background-color:var(--green)}
.crosses{list-style:none;padding:0;margin:10px 0 20px}
.crosses li{position:relative;padding-left:30px;margin:0 0 9px;line-height:1.5}
.crosses li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:#51627a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/11px no-repeat}
.note{font-size:15px;color:var(--muted)}
.fine{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:center;margin-top:26px;font-size:15px;color:var(--ink)}
.fine span{display:flex;align-items:center;gap:8px}
.fine .i{width:20px;height:20px;color:var(--purpleL)}

/* ---------- steps ---------- */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;list-style:none;padding:0;margin:0}
.steps.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:960px){.steps,.steps.four{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.steps,.steps.four{grid-template-columns:1fr}}
.steps li{counter-increment:s;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px 24px 22px;position:relative}
.steps li::before{content:counter(s);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#1a3a6b;color:#fff;font-weight:700;margin-bottom:14px}
.steps h3{font-size:1.05rem}
.steps p{margin:0;font-size:16px}

/* ---------- lists in two columns ---------- */
.checklist{columns:2;column-gap:36px;list-style:none;padding:0}
.checklist li{break-inside:avoid;position:relative;padding-left:32px;margin:0 0 12px;line-height:1.5}
.checklist li::before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat}
@media (max-width:640px){.checklist{columns:1}}

/* ---------- feature row ---------- */
.feat{display:flex;gap:16px;align-items:flex-start}
.feat .ico{margin:0;width:46px;height:46px}
.feat .ico .i{width:22px;height:22px}
.feat h3{margin-bottom:.25em;font-size:1.05rem}
.feat p{margin:0;font-size:16px}

/* ---------- callouts ---------- */
.callout{border-radius:var(--r);padding:22px 24px;display:flex;gap:16px;align-items:flex-start;background:var(--panel);border:1px solid rgba(94,201,245,.25)}
.callout .i{width:28px;height:28px;color:var(--link);margin-top:2px}
.callout h3{margin-bottom:.3em}
.callout p:last-child{margin-bottom:0}
.callout.warn{background:rgba(180,83,9,.16);border-color:rgba(251,191,36,.3)}
.callout.warn .i{color:var(--amber)}
.callout.dark{background:var(--card2);border-color:#1c3f73;color:#d7e5f5}
.callout.dark h3{color:#fff}
.callout.dark .i{color:var(--cyanT)}
.callout.dark a{color:#fff}

/* ---------- brands / chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.chips li{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-weight:500;color:var(--ink);font-size:15px}
.chips a{text-decoration:none;color:inherit}
.chips li:has(a):hover{border-color:var(--link)}
.chips.dark li{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#e8f0fa}

/* ---------- areas ---------- */
.area-card{display:block;text-decoration:none;color:inherit}
.area-card h3{display:flex;align-items:center;gap:8px;color:var(--ink)}
.area-card h3 .i{color:var(--purpleL);width:20px;height:20px}
.area-card p{color:var(--text);font-size:15px;margin:0}
.zone{border-radius:var(--r);padding:24px;border:1px solid var(--line);background:var(--card)}
.zone .amount b{font-size:38px}

/* ---------- FAQ ---------- */
.faq{max-width:860px}
.faq details{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);margin-bottom:12px}
.faq summary{cursor:pointer;list-style:none;padding:18px 54px 18px 22px;font-weight:600;color:var(--ink);position:relative;border-radius:var(--r-sm)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:20px;top:50%;width:12px;height:12px;border-right:2.5px solid var(--purpleL);border-bottom:2.5px solid var(--purpleL);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .a{padding:0 22px 18px}
.faq .a p:last-child{margin:0}

/* ---------- CTA band ---------- */
.cta{background:linear-gradient(115deg,#05264f 0%,#0a386b 60%,#062c5a 100%);color:#d3e2f3;position:relative;overflow:hidden;--next:var(--foot)}
.cta::before{content:"";position:absolute;inset:auto -10% -60% auto;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(16,182,236,.22),rgba(16,182,236,0) 70%)}
.cta .wrap{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:24px 40px;align-items:center;justify-content:space-between;padding-top:clamp(40px,6vw,64px);padding-bottom:clamp(56px,8vw,88px)}
.cta h2{color:#fff;margin-bottom:.25em}
.cta p{margin:0;max-width:52ch}

/* ---------- footer ---------- */
.foot{background:var(--foot);color:#b5c7de;font-size:15px}
.foot .wrap{padding-top:52px;padding-bottom:24px}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}
.foot h2{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:14px}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin:0 0 8px}
.foot a{color:#dbe7f5;text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}
.foot .contact-line{display:flex;align-items:center;gap:10px;margin:14px 0 0}
.foot .contact-line .i{width:18px;height:18px;color:var(--cyanT)}
.foot .legal{border-top:1px solid rgba(255,255,255,.1);margin-top:36px;padding-top:18px;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;font-size:13.5px;color:#93a9c4}

/* ---------- sticky mobile call bar ---------- */
.callbar{display:none}
@media (max-width:760px){
  .callbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(6,18,42,.96);border-top:1px solid var(--line);box-shadow:0 -10px 24px -14px rgba(0,0,0,.9)}
  .callbar .btn{padding:12px 10px;font-size:15px}
  body{padding-bottom:76px}
}

/* ---------- form ---------- */
.form-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:clamp(22px,3.5vw,34px)}
.field{margin:0 0 18px}
.field label,.legend{display:block;font-weight:600;color:var(--ink);margin-bottom:6px;font-size:15.5px}
.field .opt{font-weight:400;color:var(--muted);font-size:14px}
.field .hint{font-size:14px;color:var(--muted);margin:4px 0 0}
input[type=text],input[type=tel],input[type=email],input[type=date],select,textarea{width:100%;font:400 16px/1.4 Poppins,system-ui,sans-serif;color:var(--ink);background:var(--bg2);border:1.5px solid var(--field);border-radius:12px;padding:12px 14px;transition:border-color .15s,box-shadow .15s}
input::placeholder,textarea::placeholder{color:#8ea3c0;opacity:1}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--link);box-shadow:0 0 0 4px rgba(94,201,245,.25)}
input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill{-webkit-text-fill-color:var(--ink);caret-color:var(--ink);box-shadow:0 0 0 1000px var(--bg2) inset}
input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{border-color:#fb923c;box-shadow:0 0 0 4px rgba(251,146,60,.18)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media (max-width:560px){.two{grid-template-columns:1fr}}
fieldset{border:0;margin:0 0 18px;padding:0;min-width:0}
.choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.choice{position:relative}
.choice input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.choice span{display:flex;flex-direction:column;gap:2px;border:1.5px solid var(--field);border-radius:12px;padding:12px 14px 12px 44px;cursor:pointer;line-height:1.35;position:relative;height:100%;background:var(--bg2)}
.choice span b{color:var(--ink);font-weight:600;font-size:15.5px}
.choice span small{color:var(--muted);font-size:13.5px}
.choice span::before{content:"";position:absolute;left:14px;top:14px;width:18px;height:18px;border-radius:50%;border:2px solid #8aa0c0;background:var(--bg2)}
.choice input:checked+span{border-color:#a946ea;background:rgba(169,70,234,.16);box-shadow:0 0 0 3px rgba(169,70,234,.18)}
.choice input:checked+span::before{border-color:#c58af2;background:radial-gradient(circle,#c58af2 0 45%,var(--bg2) 50%)}
.choice input:focus-visible+span{outline:3px solid var(--link);outline-offset:2px}
.check{display:flex;gap:12px;align-items:flex-start;background:rgba(180,83,9,.16);border:1px solid rgba(251,191,36,.3);border-radius:12px;padding:14px}
.check input{width:20px;height:20px;margin-top:3px;accent-color:#f59e0b;flex:none}
.check label{margin:0;font-weight:500}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.form-status{border-radius:12px;padding:14px 16px;margin:0 0 18px;font-weight:500}
.form-status:empty{display:none}
.form-status.err{background:rgba(194,65,12,.18);border:1px solid rgba(251,146,60,.35);color:#fdba74}
.form-status.ok{background:rgba(4,178,90,.16);border:1px solid rgba(74,222,128,.3);color:#86efac}
.form-done{text-align:center;padding:24px 8px}
.form-done .ico{margin:0 auto 18px;width:64px;height:64px;background:linear-gradient(135deg,#3db84a,#1f9a3c)}
.form-done .ico .i{width:32px;height:32px}
.small{font-size:14px;color:var(--muted)}
.when-js-off{display:none}
.no-js .when-js-off{display:block}
[hidden]{display:none!important}
.sticky-side{position:sticky;top:calc(var(--head-h) + 20px)}
@media (max-width:900px){.sticky-side{position:static}}

/* ---------- care guide ---------- */
.flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;list-style:none;padding:0;margin:0;counter-reset:f}
@media (max-width:900px){.flow{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.flow{grid-template-columns:1fr}}
.flow li{counter-increment:f;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:18px}
.flow li::before{content:counter(f);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#10b6ec,#0379cf);color:#fff;font-weight:700;margin-bottom:10px;font-size:15px}
.flow b{display:block;color:var(--ink);margin-bottom:2px}
.flow span{font-size:15px}
.dos li b{color:#fff}

/* ---------- 404 ---------- */
.lost{text-align:center;padding:clamp(60px,10vw,120px) 0}
.lost .big{font-size:clamp(4rem,14vw,8rem);font-weight:700;line-height:1;color:var(--panel);-webkit-text-stroke:2px var(--link)}
.hero a:not(.btn){color:#fff}
.cta p a:not(.btn){color:#fff}
.lost .btn-row{justify-content:center}
.form-done .callout{text-align:left;margin:16px auto;max-width:460px}
a.card,a.link-card{color:var(--text);text-decoration:none}
a.card h3{color:var(--ink)}
a.card .more{color:var(--link)}
a.card:hover{color:var(--text)}
a.card:hover h3{color:#d9b2f7}
.hero h1{max-width:24ch}
.grid+.note,.steps+.note,.grid+.card,.grid+.grid{margin-top:22px}
.feat .ico{flex:none}
.hero-band .wrap.has-aside{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.75fr);gap:48px;align-items:center}
@media (max-width:1000px){.hero-band .wrap.has-aside{grid-template-columns:1fr;gap:28px}}
.glance{background:rgba(6,18,42,.55);border:1px solid rgba(255,255,255,.16);border-radius:var(--r);padding:22px 24px;color:#d3e2f3}
.glance h2{color:#fff;font-size:15px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.glance dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:0}
.glance dt,.glance dd{margin:0;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.glance dt{font-size:15.5px}
.glance dd{font-weight:700;color:#fff;font-size:18px;text-align:right}
.glance dd small{display:block;font-weight:400;font-size:12.5px;color:#b4c8e2}
.glance dl>*:nth-last-child(-n+2){border-bottom:0}
.glance a{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-weight:600;color:var(--cyanT);text-decoration:none}
.glance a .i{width:18px;height:18px}
.steps+.btn-row,.grid+.btn-row{margin-top:24px}
.form-card button[type=submit]+.small{margin-top:12px}
.checklist.one{columns:1}
.steps+.callout,.grid+.callout{margin-top:22px}

/* ---------- motion: water, bubbles and mist ----------
   Layered, slow and quiet, in the hero bands, the section dividers and the call-to-action band:
   drifting mist (and, over the photo, clouds), two slow water surfaces, and aeration bubbles that
   rise at different speeds. Only transform and opacity move, so it stays on the graphics card.
   Text always sits above these layers. They pause when the tab is hidden or scrolled out of view
   (site.js), and anyone who has asked their device for reduced motion sees a still picture. */
.hero-band .wrap,.cta .wrap{position:relative;z-index:1}
.fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fx::before,.fx::after{content:"";position:absolute;border-radius:50%;z-index:-1}
.fx::before{width:760px;height:760px;left:-260px;top:-420px;background:radial-gradient(circle,rgba(16,182,236,.17),rgba(16,182,236,0) 66%);animation:ew-drift-a 28s ease-in-out infinite alternate}
.fx::after{width:680px;height:680px;right:-220px;bottom:-460px;background:radial-gradient(circle,rgba(169,70,234,.18),rgba(169,70,234,0) 66%);animation:ew-drift-b 34s ease-in-out infinite alternate}
@keyframes ew-drift-a{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(120px,90px,0) scale(1.12)}}
@keyframes ew-drift-b{from{transform:translate3d(0,0,0) scale(1.04)}to{transform:translate3d(-140px,-70px,0) scale(.94)}}
.fx-mist,.fx-bub,.fx-sky{position:absolute;inset:0}
.fx-sky{background:linear-gradient(180deg,rgba(8,32,74,.5) 0%,rgba(8,32,74,.22) 55%,rgba(8,32,74,0) 100%)}
.fx-mist i,.fx-sky i{position:absolute;left:var(--l);top:var(--t);width:var(--w);height:var(--h);border-radius:50%;animation:ew-pass var(--d) linear infinite;animation-delay:var(--e)}
.fx-mist i{background:radial-gradient(closest-side,rgba(170,205,255,.14),rgba(170,205,255,0))}
.fx-mist i:nth-child(1){--l:2%;--t:-6%;--w:62%;--h:46%;--d:120s;--e:-40s}
.fx-mist i:nth-child(2){--l:30%;--t:8%;--w:48%;--h:38%;--d:96s;--e:-71s}
.fx-mist i:nth-child(3){--l:56%;--t:-12%;--w:70%;--h:52%;--d:150s;--e:-22s}
.fx-sky i{background:radial-gradient(closest-side,rgba(245,250,255,.72),rgba(245,250,255,.42) 55%,rgba(245,250,255,0))}
.fx-sky i::before,.fx-sky i::after{content:"";position:absolute;border-radius:50%;background:inherit}
.fx-sky i::before{left:22%;top:-30%;width:50%;height:100%}
.fx-sky i::after{left:52%;top:-10%;width:42%;height:90%}
.fx-sky i:nth-child(1){--l:8%;--t:2%;--w:30%;--h:22%;--d:190s;--e:-60s}
.fx-sky i:nth-child(2){--l:42%;--t:14%;--w:24%;--h:18%;--d:150s;--e:-95s}
.fx-sky i:nth-child(3){--l:70%;--t:0%;--w:34%;--h:24%;--d:230s;--e:-20s}
@keyframes ew-pass{from{transform:translate3d(-60%,0,0)}to{transform:translate3d(150%,0,0)}}
.fx-bub i{position:absolute;bottom:-26px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;opacity:0;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.75),rgba(16,182,236,.3) 58%,rgba(169,70,234,.08) 100%);box-shadow:inset 0 0 5px rgba(255,255,255,.45);animation:ew-rise var(--d) linear infinite;animation-delay:var(--e)}
.fx-bub i:nth-child(1){--x:5%;--s:11px;--d:21s;--e:-4s;--b:22%}
.fx-bub i:nth-child(2){--x:12%;--s:5px;--d:15s;--e:-11s;--b:58%}
.fx-bub i:nth-child(3){--x:21%;--s:15px;--d:27s;--e:-18s;--b:40%}
.fx-bub i:nth-child(4){--x:29%;--s:8px;--d:19s;--e:-6s;--b:70%}
.fx-bub i:nth-child(5){--x:37%;--s:4px;--d:13s;--e:-9s;--b:30%}
.fx-bub i:nth-child(6){--x:46%;--s:12px;--d:24s;--e:-21s;--b:62%}
.fx-bub i:nth-child(7){--x:54%;--s:7px;--d:17s;--e:-13s;--b:18%}
.fx-bub i:nth-child(8){--x:63%;--s:18px;--d:32s;--e:-25s;--b:48%}
.fx-bub i:nth-child(9){--x:70%;--s:6px;--d:14s;--e:-2s;--b:76%}
.fx-bub i:nth-child(10){--x:78%;--s:10px;--d:22s;--e:-15s;--b:34%}
.fx-bub i:nth-child(11){--x:85%;--s:5px;--d:16s;--e:-8s;--b:66%}
.fx-bub i:nth-child(12){--x:91%;--s:14px;--d:29s;--e:-19s;--b:26%}
.fx-bub i:nth-child(13){--x:96%;--s:8px;--d:20s;--e:-12s;--b:54%}
.fx-bub i:nth-child(14){--x:17%;--s:9px;--d:25s;--e:-3s;--b:82%}
.fx{--rise:-440px}
.cta .fx{--rise:-250px}
@keyframes ew-rise{0%{transform:translate3d(0,0,0) scale(.7);opacity:0}12%{opacity:.5}50%{transform:translate3d(10px,calc(var(--rise)*.5),0) scale(.95)}85%{opacity:.35}100%{transform:translate3d(-8px,var(--rise),0) scale(1.1);opacity:0}}
/* water surfaces: the tile repeats every half-width, so sliding by half the width loops without a seam */
.fx-wv,.dv{position:absolute;left:0;right:0;bottom:-1px;height:clamp(28px,4vw,48px);overflow:hidden;pointer-events:none}
.wv{position:absolute;left:0;bottom:0;width:max(200%,2400px);height:100%;max-width:none}
.wv-f path:first-child{fill:var(--next)}
.wv-f .ln{fill:none;stroke:rgba(94,201,245,.5);stroke-width:2;vector-effect:non-scaling-stroke}
.wv-b path{fill:rgba(94,201,245,.2)}
.wv-f{animation:ew-slide 34s linear infinite}
.wv-b{animation:ew-slide 52s linear infinite reverse}
@keyframes ew-slide{to{transform:translate3d(-50%,0,0)}}
.dv{--next:#0b1f40;bottom:auto;top:calc(1px - clamp(28px,4vw,48px));z-index:1}
.hero+.sec.panel>.dv{display:none}
.wave .glint{fill:none;stroke:rgba(255,255,255,.7);stroke-width:3;stroke-linecap:round;stroke-dasharray:7 93;stroke-dashoffset:100;animation:ew-glint 11s linear infinite}
@keyframes ew-glint{to{stroke-dashoffset:0}}
/* paused when the tab is hidden or the layer is off screen */
.tab-hidden *,.tab-hidden *::before,.tab-hidden *::after,.off *,.off *::before,.off *::after,.off::before,.off::after{animation-play-state:paused!important}
@media (max-width:640px){.fx-bub i:nth-child(n+9){display:none}.fx-sky i:nth-child(3){display:none}.fx-mist i:nth-child(3){display:none}}
@media (prefers-reduced-motion:reduce){
  .fx::before,.fx::after,.fx-mist i,.fx-sky i,.fx-bub i,.wv,.wave .glint{animation:none!important}
  .fx-bub i{opacity:.35;bottom:var(--b)}
  .fx-mist i,.fx-sky i{transform:translate3d(20%,0,0)}
  .hero-img img{will-change:auto}
}

/* ===================== quality-of-life visuals (Oct 2026) ===================== */
/* brand text selection and scrollbar */
::selection{background:rgba(169,70,234,.45);color:#fff}
html{scrollbar-color:#3b4f78 #06122a}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:#06122a}
::-webkit-scrollbar-thumb{background:#2e4470;border-radius:8px;border:3px solid #06122a}
::-webkit-scrollbar-thumb:hover{background:#4a64a0}

/* 1. reading progress along the bottom of the header */
.readbar{position:absolute;left:0;right:0;bottom:-1px;height:3px;pointer-events:none;overflow:hidden}
.readbar i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,#8a1fcf,#3b5ee0 55%,#10b6ec);box-shadow:0 0 10px rgba(16,182,236,.6)}

/* 2. compact, frosted header once the page scrolls */
.head .wrap{transition:height .25s ease}
.head .brand .drop{transition:width .25s ease}
.head.scrolled{background:rgba(6,18,42,.78);backdrop-filter:saturate(1.6) blur(14px)}
@media (min-width:821px){.head.scrolled .wrap{height:58px}.head.scrolled .brand .drop{width:28px}}

/* 3. back to the top */
.totop{position:fixed;right:18px;bottom:22px;z-index:45;width:48px;height:48px;border-radius:50%;border:1px solid rgba(94,201,245,.4);background:rgba(12,31,63,.92);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow);opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;transition:opacity .2s,transform .2s,background .15s}
.totop .i{width:22px;height:22px}
.totop:hover{background:#163a6e}
.totop.show{opacity:1;transform:none;pointer-events:auto}
@media (max-width:820px){.totop{bottom:calc(84px + env(safe-area-inset-bottom));right:14px;width:44px;height:44px}}

/* 4. sections and cards ease in as they arrive (never hides anything without JavaScript) */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}.js .rv.d4{transition-delay:.32s}.js .rv.d5{transition-delay:.4s}

/* 5. at-a-glance numbers */
.stats{list-style:none;padding:0;margin:0 0 clamp(36px,5vw,56px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.stats li{background:linear-gradient(160deg,rgba(138,47,208,.18),rgba(16,182,236,.08));border:1px solid var(--line);border-radius:var(--r);padding:20px 18px;display:flex;flex-direction:column;gap:4px}
.stats b{font:700 clamp(2rem,4vw,2.7rem)/1 Poppins,system-ui,sans-serif;color:#fff;background:linear-gradient(90deg,#d9b2f7,#5ec9f5);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-variant-numeric:tabular-nums}
.stats span{color:var(--muted);font-size:14.5px;line-height:1.4}
@media (max-width:820px){.stats{grid-template-columns:1fr 1fr}}

/* 6. do we service your area? */
.checker{background:var(--card);border:1px solid rgba(94,201,245,.3);border-radius:var(--r);padding:20px 22px;margin:0 0 22px;box-shadow:var(--shadow)}
.chk-label{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 10px;color:var(--ink)}
.chk-label .i{width:22px;height:22px;color:var(--cyanT)}
.chk-label b{font-size:1.08rem}
.chk-label span{color:var(--muted);font-size:14.5px}
.chk-row input{width:100%;font:400 17px/1.4 Poppins,system-ui,sans-serif;color:var(--ink);background:var(--bg2);border:1.5px solid var(--field);border-radius:12px;padding:13px 16px}
.chk-row input:focus{outline:none;border-color:var(--link);box-shadow:0 0 0 4px rgba(94,201,245,.25)}
.chk-out{margin:12px 0 0;min-height:1.5em;display:flex;gap:10px;align-items:flex-start;line-height:1.5}
.chk-out:empty{display:none}
.chk-out .i{flex:none;width:22px;height:22px;margin-top:1px}
.chk-out.yes{color:#bbf7d0}.chk-out.yes .i{color:#4ade80}
.chk-out.maybe{color:#fde68a}.chk-out.maybe .i{color:#fbbf24}
.chk-out a{color:#fff}

/* 7. savings bar under the prices */
.savebar{max-width:720px;margin:26px auto 0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 22px}
.sb-row{display:grid;grid-template-columns:170px 1fr 64px;align-items:center;gap:12px;margin:0 0 10px;font-size:15px}
.sb-row b{text-align:right;color:#fff;font-variant-numeric:tabular-nums}
.sb-l{color:var(--muted)}
.sb-track{display:block;width:100%;height:12px;overflow:visible}
.sb-track .bg{fill:rgba(255,255,255,.07)}
.sb-track .fill{fill:#5a6f94;transform-box:fill-box;transform-origin:0 50%}
.sb-row.best .sb-l{color:var(--ink);font-weight:600}
.sb-row.best .sb-track .fill{fill:url(#sbg)}
.sb-save b{color:#4ade80}
.js .savebar .sb-track .fill{transform:scaleX(0);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.js .savebar.in .sb-track .fill{transform:none}
.js .savebar.in .sb-row.best .sb-track .fill{transition-delay:.25s}
.sb-save{margin:6px 0 0;display:flex;align-items:flex-start;gap:8px;color:#bbf7d0}
.sb-save .i{width:20px;height:20px;color:#4ade80;flex:none;margin-top:3px}
@media (max-width:560px){.sb-row{grid-template-columns:1fr 64px}.sb-row .sb-track{grid-column:1 / -1;grid-row:2}}

/* 8. best value ribbon */
.price .ph{position:relative}
.ribbon{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:linear-gradient(90deg,#fbbf24,#f59e0b);color:#1a1206;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:99px;padding:4px 10px;box-shadow:0 4px 14px -4px rgba(251,191,36,.7)}
.price{transition:transform .2s,box-shadow .2s,border-color .2s}
@media (hover:hover){.price:hover{transform:translateY(-4px);box-shadow:0 26px 50px -24px rgba(0,0,0,.9),0 0 0 1px rgba(94,201,245,.25)}}

/* 9. steps joined by a line that fills as you scroll */
.steps.timeline{position:relative}
.steps.timeline li::before{position:relative;z-index:1;transition:background .4s,box-shadow .4s}
.steps.timeline li.reached::before{background:linear-gradient(135deg,#8a1fcf,#10b6ec);box-shadow:0 0 0 6px rgba(16,182,236,.14)}
@media (min-width:961px){
  .steps.timeline::before,.steps.timeline::after{content:"";position:absolute;left:44px;right:44px;top:44px;height:3px;border-radius:3px;background:rgba(255,255,255,.08);z-index:0}
  .steps.timeline::after{background:linear-gradient(90deg,#8a1fcf,#10b6ec);transform-origin:0 50%;transform:scaleX(var(--fill,0));transition:transform .3s linear}
}

/* 10. FAQ: smooth opening, and a link to each question */
.faq details{transition:border-color .2s,background .2s}
.faq details[open]{border-color:rgba(169,70,234,.45);background:#0f2549}
.faq summary::after{transition:transform .25s}
.faq .a{overflow:hidden}
.qlink{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:13.5px;color:var(--muted);text-decoration:none}
.qlink .i{width:15px;height:15px}
.qlink:hover{color:var(--link)}
:target>summary,.flash{animation:ew-flash 1.8s ease-out}
@keyframes ew-flash{0%{box-shadow:0 0 0 0 rgba(94,201,245,.7)}100%{box-shadow:0 0 0 14px rgba(94,201,245,0)}}

/* 11. search the questions */
.faq-find{position:relative;max-width:860px;margin:0 0 16px}
.faq-find .i{position:absolute;left:16px;top:15px;width:20px;height:20px;color:var(--muted);pointer-events:none}
.faq-find input{width:100%;font:400 16px/1.4 Poppins,system-ui,sans-serif;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:13px 14px 13px 46px}
.faq-find input:focus{outline:none;border-color:var(--link);box-shadow:0 0 0 4px rgba(94,201,245,.2)}
.faq-none{margin:12px 2px 0;color:var(--muted)}
.faq details.nomatch{display:none}
.faq mark{background:rgba(251,191,36,.35);color:#fff;border-radius:3px;padding:0 1px}

/* 12. copy a phone number or email, with a small confirmation */
.copy{display:inline-grid;place-items:center;width:30px;height:30px;margin-left:6px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;vertical-align:middle;transition:color .15s,border-color .15s,background .15s}
.copy .i{width:15px;height:15px}
.copy:hover{color:#fff;border-color:rgba(94,201,245,.5);background:rgba(94,201,245,.1)}
.copy.done{color:#4ade80;border-color:rgba(74,222,128,.5)}
.foot .contact-line .copy .i{width:15px;height:15px;color:inherit}
.toast{position:fixed;left:50%;bottom:28px;z-index:60;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#0f2a52;color:#fff;border:1px solid rgba(94,201,245,.4);border-radius:12px;padding:11px 18px;font-weight:500;box-shadow:var(--shadow);transition:opacity .2s,transform .2s}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:820px){.toast{bottom:calc(92px + env(safe-area-inset-bottom))}}

/* 13. enquiry type cards with icons */
.choice span{padding:14px 40px 14px 62px;min-height:74px;justify-content:center;transition:border-color .15s,background .15s,box-shadow .15s,transform .15s}
.choice span::before{display:none}
.choice .cico{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:#16325c;color:#9ad8f7;transition:background .15s,color .15s}
.choice .cico .i{width:20px;height:20px}
.choice .ctick{position:absolute;right:12px;top:12px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#a946ea;color:#fff;opacity:0;transform:scale(.4);transition:opacity .15s,transform .2s}
.choice .ctick .i{width:13px;height:13px;stroke-width:3}
.choice input:checked+span .cico{background:linear-gradient(135deg,#8a1fcf,#5b2fd0);color:#fff}
.choice input:checked+span .ctick{opacity:1;transform:none}
@media (hover:hover){.choice span:hover{border-color:#9db4d6;transform:translateY(-1px)}}

/* 14. fields confirm as they're filled in */
.field{position:relative}
.field .ok-tick{position:absolute;right:12px;top:41px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#04864a;color:#fff;opacity:0;transform:scale(.5);transition:opacity .15s,transform .2s;pointer-events:none}
.field .ok-tick .i{width:13px;height:13px;stroke-width:3}
.field.valid .ok-tick{opacity:1;transform:none}
.field.valid input{border-color:#22a565}
.field .msg{font-size:14px;color:#fdba74;margin:6px 0 0}
.field .msg:empty{display:none}
textarea+.count{display:block;text-align:right;font-size:13px;color:var(--muted);margin-top:4px}

/* 15. sending spinner and the success tick */
.btn .spin{width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:ew-spin .8s linear infinite}
@keyframes ew-spin{to{transform:rotate(360deg)}}
.btn{transition:transform .08s ease,background .15s,box-shadow .15s,color .15s,border-color .15s}
.btn:active{transform:translateY(1px) scale(.98)}
.form-done .ico{position:relative}
.form-done .ico .i{stroke-dasharray:30;stroke-dashoffset:30}
.form-done:not([hidden]) .ico{animation:ew-pop .45s cubic-bezier(.2,1.4,.4,1) both}
.form-done:not([hidden]) .ico .i{animation:ew-draw .5s .25s ease-out forwards}
.form-done:not([hidden]) .ico::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(139,210,58,.6);animation:ew-ring 1.2s .2s ease-out both}
@keyframes ew-pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
@keyframes ew-draw{to{stroke-dashoffset:0}}
@keyframes ew-ring{from{transform:scale(.7);opacity:1}to{transform:scale(1.5);opacity:0}}

/* 16. the hero photo fades in over a blurred preview */
.hero-img .lqip{position:absolute;inset:-24px;width:calc(100% + 48px);height:calc(100% + 48px);object-fit:cover;object-position:50% 62%;filter:blur(16px)}
.hero-img picture{position:absolute;inset:0}
.js .hero-img picture img{opacity:0;transition:opacity .7s ease}
.js .hero-img.loaded picture img{opacity:1}
.hero-img .fx-sky{z-index:1}

/* 17. "On this page" bar on the longer pages */
.toc{position:fixed;left:0;right:0;top:var(--toc-top,58px);z-index:44;background:rgba(8,24,51,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transform:translateY(-110%);opacity:0;transition:transform .25s,opacity .25s;pointer-events:none}
.toc.show{transform:none;opacity:1;pointer-events:auto}
.toc .wrap{display:flex;align-items:center;gap:10px;height:48px;overflow-x:auto;scrollbar-width:none}
.toc .wrap::-webkit-scrollbar{display:none}
.toc .tl{flex:none;display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding-right:6px}
.toc .tl .i{width:16px;height:16px}
.toc a{flex:none;font-size:14px;color:#cfe0f3;text-decoration:none;padding:6px 12px;border-radius:99px;border:1px solid transparent;white-space:nowrap}
.toc a:hover{background:rgba(255,255,255,.06)}
.toc a.on{background:rgba(169,70,234,.2);border-color:rgba(169,70,234,.45);color:#fff}
.read-time{display:inline-flex;align-items:center;gap:6px;margin-left:10px;color:#b4c8e2;font-size:14px;letter-spacing:0;text-transform:none;font-weight:500}
.read-time .i{width:15px;height:15px}

/* 18. downloads show what they are */
.dl .dl-meta{font-size:12.5px;font-weight:600;letter-spacing:.04em;background:rgba(5,42,88,.12);color:var(--navy);border-radius:99px;padding:3px 9px;margin-left:2px}

/* 20. a jumped-to section is easy to spot, and not hidden under the header */
html{scroll-padding-top:calc(var(--head-h) + 60px)}
.sec.flash,.card.flash{animation:ew-flash-sec 1.8s ease-out}
@keyframes ew-flash-sec{0%{box-shadow:inset 0 0 0 2px rgba(94,201,245,.6)}100%{box-shadow:inset 0 0 0 2px rgba(94,201,245,0)}}

/* 19. clean printing */
@media print{
  @page{margin:16mm 14mm}
  html,body{background:#fff!important;color:#111!important}
  *{box-shadow:none!important;text-shadow:none!important;animation:none!important}
  .head,.foot,.callbar,.totop,.toast,.toc,.cta,.fx,.fx-sky,.dv,.wave,.hero-img,.btn-row,.faq-find,.qlink,.copy,.skip,.checker,.readbar{display:none!important}
  .hero,.hero-band,.sec,.sec.tint,.sec.panel,.card,.callout,.price,.steps li,.faq details,.stats li,.savebar{background:#fff!important;color:#111!important;border-color:#bbb!important}
  h1,h2,h3,b,strong,.hero h1 span,.kicker{color:#111!important;-webkit-text-fill-color:#111!important}
  p,li,dd,dt,span,small{color:#222!important}
  .sec{padding:10mm 0!important}
  a{color:#111!important;text-decoration:underline}
  main a[href^="http"]::after,main a[href^="/"]:not(.btn)::after{content:" (effluentworks.com.au" attr(href) ")";font-size:9pt;color:#555}
  main a[href^="http"]::after{content:" (" attr(href) ")"}
  .faq details>*:not(summary){display:block!important}
  .js .rv{opacity:1!important;transform:none!important}
  .grid,.prices,.steps{display:block!important}
  .card,.price,.steps li,.callout{break-inside:avoid;margin:0 0 6mm}
  .hero .wrap::before{content:"Effluent Works · 0495 096 532 · effluentworks.com.au";display:block;font-size:10pt;color:#555;margin:0 0 4mm}
}

@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  .js .savebar .sb-track .fill{transform:none}
  .js .hero-img picture img{opacity:1}
  .toc,.totop,.toast{transition:none}
}

/* ---------- logo green (the drop's lower wave: #1f9a3c > #3db84a > #8bd23a) ---------- */
.head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--logoLine);opacity:.9;pointer-events:none}
.ticks.green li::before,.checklist li::before{background-color:var(--leafD)}
.foot .legal{border-image:var(--logoLine) 1;border-top-width:2px}
::selection{background:rgba(61,184,74,.35);color:#fff}