/* WW-ONTWERP-20261004 — homepage wattenwater.nl. Stijl "Droog": diep water → warm zand. */
.ww{--d:#0f2233;--b:#1f6fa8;--b2:#8ec9ef;--z:#f2ece2;--z2:#e8dfd0;--w:#d9883f;--m:#5d6b78;--l:#e6e1d8;--e:cubic-bezier(.2,.8,.2,1);color:#0f2233;font-family:'Inter',system-ui,sans-serif}
.ww .wrap{max-width:1200px;margin:0 auto;padding:0 22px}
.ww h1,.ww h2,.ww h3{margin:0;color:var(--d);font-family:'Outfit',sans-serif}
.ww p{margin:0}
.ww-label{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--b);margin-bottom:14px!important}
.ww-druppel{width:10px;height:13px;background:var(--b);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;transform:rotate(0);animation:ww-drup 2.4s ease-in-out infinite}
@keyframes ww-drup{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
.ww-knop{display:inline-flex;align-items:center;justify-content:center;padding:16px 26px;border-radius:999px;background:var(--b);color:#fff!important;font-weight:700;text-decoration:none;border:2px solid var(--b);transition:transform .25s var(--e),background .25s,color .25s,border-color .25s;cursor:pointer;font-size:16px}
.ww-knop:hover{transform:translateY(-2px);background:var(--w);border-color:var(--w)}
.ww-knop.is-lijn{background:transparent;color:var(--d)!important;border-color:var(--d)}
.ww-knop.is-lijn:hover{background:var(--d);color:#fff!important}
.ww-knop.is-donker{background:var(--d);border-color:var(--d)}
.ww-hero{background:linear-gradient(180deg,#e9f3fa 0%,var(--z) 100%);padding:clamp(44px,6vw,90px) 0;position:relative;overflow:hidden}
.ww-hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,70px);align-items:center}
.ww-hero h1{font-size:clamp(2.8rem,6vw,5rem);line-height:.98;letter-spacing:-.04em;font-weight:800}
.ww-blauw{color:var(--b)}.ww-warm{color:var(--w)}
.ww-lead{margin-top:22px!important;font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:#3b4b59;max-width:560px}
.ww-knoppen{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
/* vochtmeter */
.ww-meter{display:grid;grid-template-columns:110px 1fr;grid-template-rows:auto 1fr auto auto;gap:14px 22px;background:#fff;border-radius:28px;padding:24px;box-shadow:0 40px 80px -46px rgba(15,34,51,.55);border:1px solid var(--l)}
.ww-meter-kop{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;font-weight:700;color:var(--m);font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.ww-meter-kop b{font-family:'Outfit',sans-serif;font-size:44px;letter-spacing:-.04em;color:var(--d);text-transform:none;transition:color .6s}
.ww-buis{grid-row:2/4;position:relative;height:300px;border-radius:60px;background:var(--z);border:3px solid var(--z2);overflow:hidden}
.ww-water{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,var(--b2),var(--b));transition:height 1.2s var(--e),background .8s;border-radius:0 0 56px 56px}
.ww-water.is-droog{background:linear-gradient(180deg,#f4c48f,var(--w))}
.ww-golfje{position:absolute;left:-50%;top:-8px;width:200%;height:16px;background:radial-gradient(12px 8px at 12px 8px,var(--b2) 98%,transparent) 0 0/24px 16px repeat-x;animation:ww-golfje 2.2s linear infinite}
.ww-water.is-droog .ww-golfje{opacity:0}
@keyframes ww-golfje{to{transform:translateX(24px)}}
.ww-schaal i{position:absolute;right:0;width:14px;border-top:2px solid rgba(15,34,51,.25)}
.ww-schaal b{position:absolute;right:18px;top:-8px;font-size:10px;color:var(--m);font-weight:700}
.ww-fasen{list-style:none;margin:0;padding:0;display:grid;gap:6px;align-content:start}
.ww-fase{width:100%;display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;border:1.5px solid var(--l);background:#fff;font:inherit;font-weight:700;color:var(--d);text-align:left;cursor:pointer;transition:background .25s,border-color .25s,transform .25s var(--e)}
.ww-fase span{font-family:'Outfit',sans-serif;color:var(--b);font-size:14px}
.ww-fase:hover{transform:translateX(3px);border-color:var(--b)}
.ww-fase.is-aan{background:var(--d);color:#fff;border-color:var(--d)}
.ww-fase.is-aan span{color:var(--b2)}
.ww-uitleg{grid-column:2;background:var(--z);border-radius:14px;padding:14px 16px;font-size:15px;line-height:1.5}
.ww-uitleg a{display:inline-block;margin-top:6px;font-weight:700;color:var(--b);text-decoration:none}
.ww-uitleg.is-wissel p{animation:ww-w .4s var(--e)}
@keyframes ww-w{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.ww-noot{grid-column:1/-1;font-size:12.5px;color:var(--m)}
/* secties */
.ww-sec{padding:clamp(64px,9vw,112px) 0}
.ww-zand{background:var(--z)}
.ww-donker{background:var(--d);color:#b9c7d3}
.ww-donker h2{color:#fff}.ww-donker .ww-label{color:var(--b2)}
.ww-kop{max-width:760px;margin-bottom:40px}
.ww-kop h2,.ww-twee h2{font-size:clamp(2.1rem,4.6vw,3.5rem);line-height:1;letter-spacing:-.035em;font-weight:800}
.ww-kop p:not(.ww-label){margin-top:14px!important;font-size:18px;color:var(--m)}
.ww-twee{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,70px);align-items:center}
.ww-twee p:not(.ww-label){margin-top:14px!important;font-size:18px}
.ww-smal{max-width:880px}
.ww-meer{margin-top:28px!important;font-weight:700}
.ww-meer a{color:var(--d);text-decoration:underline;text-decoration-color:var(--w);text-decoration-thickness:3px;text-underline-offset:4px}
.ww-diensten{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ww-dienst{position:relative;display:block;border-radius:22px;overflow:hidden;background:#fff;border:1px solid var(--l);text-decoration:none;color:var(--d);padding-bottom:22px;transition:transform .35s var(--e),box-shadow .35s var(--e)}
.ww-foto{display:block;aspect-ratio:4/3;overflow:hidden}
.ww-foto img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--e)}
.ww-dienst:hover{transform:translateY(-5px);box-shadow:0 26px 50px -28px rgba(15,34,51,.55)}
.ww-dienst:hover img{transform:scale(1.06)}
.ww-nr{position:absolute;top:12px;left:12px;background:#fff;color:var(--b);font-family:'Outfit',sans-serif;font-weight:800;font-size:13px;padding:4px 10px;border-radius:999px}
.ww-dienst h3{font-size:21px;margin:16px 20px 6px}
.ww-dienst p{margin:0 20px!important;color:var(--m);font-size:15px;line-height:1.5}
.ww-eerst{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ww-eerst li{display:flex;gap:14px;background:#fff;border-radius:14px;padding:15px 18px;font-size:16px;border:1px solid var(--l)}
.ww-eerst b{font-family:'Outfit',sans-serif;color:var(--w)}
.ww-eerst a{color:var(--d);font-weight:700}
.ww-strook{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.ww-strook figure{position:relative;margin:0;border-radius:18px;overflow:hidden;aspect-ratio:3/4;background:var(--d)}
.ww-strook figure:nth-child(odd){margin-top:28px}
.ww-strook img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--e)}
.ww-strook figure:hover img{transform:scale(1.06)}
.ww-strook figcaption{position:absolute;left:8px;right:8px;bottom:8px;padding:8px 10px;border-radius:10px;background:rgba(242,236,226,.94);font-size:12.5px;font-weight:700}
.ww-reviews{display:grid;grid-template-columns:.8fr repeat(3,1fr);gap:14px}
.ww-score{font-family:'Outfit',sans-serif;font-size:clamp(4.5rem,9vw,7rem);font-weight:800;line-height:.85;letter-spacing:-.05em}
.ww-sterren{color:#e3a23a;font-size:20px;margin-top:8px!important}
.ww-klein{font-size:14px;color:var(--m);margin:12px 0 18px!important}
.ww-rev{margin:0;background:#fff;border-radius:20px;padding:24px;display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.ww-rev blockquote{margin:0;font-size:17px;line-height:1.55}
.ww-rev figcaption b{display:block}
.ww-rev figcaption span{font-size:13px;color:var(--m)}
.ww-vraag{border-bottom:1px solid var(--l)}
.ww-vraag summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:20px 0;font-family:'Outfit',sans-serif;font-size:21px;font-weight:700}
.ww-vraag summary::-webkit-details-marker{display:none}
.ww-vraag summary::after{content:"+";color:var(--b);font-size:24px;transition:transform .3s var(--e)}
.ww-vraag[open] summary::after{transform:rotate(45deg)}
.ww-vraag p{padding:0 0 20px;color:var(--m);line-height:1.65}
.ww-vraag a{color:var(--b);text-decoration:underline}
.ww-tel{display:inline-block;margin-top:22px;font-family:'Outfit',sans-serif;font-size:clamp(2.2rem,4vw,3.2rem);font-weight:800;color:#fff!important;text-decoration:none;letter-spacing:-.03em;border-bottom:3px solid var(--w)}
.ww-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;background:#fff;color:var(--d);padding:clamp(22px,3vw,32px);border-radius:24px}
.ww-form label{font-size:13px;font-weight:700}
.ww-form small{font-weight:500;color:var(--m)}
.ww-form input,.ww-form textarea,.ww-form select{display:block;width:100%;margin-top:6px;padding:13px 14px;border:1.5px solid var(--l);border-radius:12px;background:var(--z);font:inherit;font-size:16px;font-weight:400;color:var(--d)}
.ww-form input:focus,.ww-form textarea:focus,.ww-form select:focus{outline:0;border-color:var(--b);background:#fff}
.ww-breed{grid-column:1/-1}
.ww-vink{display:flex;align-items:center;gap:10px}
.ww-vink input{width:auto!important;margin:0!important}
.ww-form .ww-knop{grid-column:1/-1}
.ww-proef{grid-column:1/-1;background:#fff4e6;border:1px dashed var(--w);color:#8a4f12;padding:9px 12px;border-radius:12px;font-size:13px}
.ww-js .ww-op{opacity:0;transform:translateY(22px);transition:opacity .8s var(--e),transform .8s var(--e)}
.ww-js .ww-op.is-zichtbaar{opacity:1;transform:none}
.ww-v1{transition-delay:.08s!important}.ww-v2{transition-delay:.16s!important}
@media(max-width:1000px){.ww-hero-in,.ww-twee{grid-template-columns:1fr}.ww-diensten{grid-template-columns:1fr 1fr}.ww-reviews{grid-template-columns:1fr 1fr}.ww-reviews>div:first-child{grid-column:1/-1}.ww-strook{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.ww-meter{grid-template-columns:78px 1fr;padding:18px;gap:12px 14px}.ww-buis{height:260px}.ww-uitleg{grid-column:1/-1}.ww-diensten,.ww-form,.ww-reviews{grid-template-columns:1fr}.ww-strook{grid-template-columns:1fr 1fr}.ww-strook figure:nth-child(odd){margin-top:0}.ww-knoppen .ww-knop{flex:1 1 100%}}
@media(prefers-reduced-motion:reduce){.ww *,.ww *::before,.ww *::after{animation:none!important;transition:none!important}.ww-js .ww-op{opacity:1!important;transform:none!important}}
/* A11Y-CONTRAST-20261004 — kleine tekst donkerder voor leesbaarheid (WCAG AA) */
li>b{color:#a25a18!important}