/* SlimElektro website 4: the Meterkast design (approved 2026-09-26) for the whole site.
   Elektra side = orange, night house, groepenkast. Airco side = logo blue, summer house, afstandsbediening.
   Light and dark (data-thema on <html>, same switch as the live thema.js). */
@import url("fonts/fonts.css");

:root{
  --canvas:#f0efe9; --paper:#fbfaf7; --panel:#e5e3dc; --panel-2:#d7d4cc; --ink:#111014; --carbon:#34302c; --mute:#6a665f;
  --line:rgba(52,48,44,.14); --line-2:rgba(52,48,44,.24); --night:#121116; --on-night:#f4f2ee; --on-night-mute:rgba(244,242,238,.66);
  --acc:#f47b20; --acc-hi:#ff8b35; --on-acc:#1b0c02; --acc-text:#a9500c; --acc-soft:rgba(244,123,32,.14); --acc-glow:rgba(244,123,32,.55);
  --led:#35d27c; --led-glow:rgba(53,210,124,.85); --warn:#c2361b;
  --shadow:0 30px 70px -34px rgba(40,30,20,.45); --shadow-sm:0 1px 2px rgba(40,30,20,.08),0 8px 20px -14px rgba(40,30,20,.35);
  --r-frame:36px; --r-tile:24px; --r-in:14px; --r-brk:8px;
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-io:cubic-bezier(.77,0,.175,1); --ease-drawer:cubic-bezier(.32,.72,0,1);
  --spring:linear(0,.2 5%,.6 12%,.96 20%,1.08 28%,1.05 36%,1 46%,.985 56%,1 70%,1);
  --spring-soft:linear(0,.25 7%,.66 16%,.94 26%,1.03 36%,1.01 48%,1);
  --wrap:1520px; --gut:clamp(16px,4vw,64px); --hd:84px;
  --sans:"Mona Sans",system-ui,sans-serif; --mono:"Martian Mono",ui-monospace,monospace;
  color-scheme:light;
}
body.side-airco{
  --canvas:#eef0f0; --paper:#fafbfb; --panel:#e2e6e8; --panel-2:#d2d8db;
  --acc:#0b6fd1; --acc-hi:#1a82ea; --on-acc:#fff; --acc-text:#0a5cae; --acc-soft:rgba(11,111,209,.12); --acc-glow:rgba(26,130,234,.55);
  --shadow:0 30px 70px -34px rgba(16,40,70,.45);
}
html[data-thema="dark"]{ color-scheme:dark;
  --canvas:#0f0f12; --paper:#18181c; --panel:#222228; --panel-2:#2b2b32; --ink:#f3f1ec; --carbon:#d9d5ce; --mute:#9d9891;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.17); --night:#1c1c22; --acc-text:#ff9a4d;
  --shadow:0 30px 80px -30px rgba(0,0,0,.8); --shadow-sm:0 1px 2px rgba(0,0,0,.4),0 10px 24px -16px rgba(0,0,0,.8);
}
html[data-thema="dark"] body.side-airco{ --canvas:#0c1014; --paper:#141a20; --panel:#1b232b; --panel-2:#243039; --acc:#1a82ea; --acc-hi:#3b95ef; --acc-text:#6db3ff; }

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip;font-variation-settings:"wdth" 100;
  transition:background-color .3s ease,color .3s ease}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:60;padding:10px 16px;border-radius:999px;background:var(--ink);color:var(--canvas);text-decoration:none;transition:top .2s var(--ease-out)}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.ic{display:inline-block;width:1em;height:1em;flex:none;fill:currentColor}
.mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:54px;padding:0 8px 0 24px;border-radius:999px;border:0;font:inherit;font-weight:580;font-size:16px;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .16s var(--ease-out),background-color .2s ease,box-shadow .2s ease,color .2s ease}
.btn:active{transform:scale(.97)}
.btn .bi{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.12);font-size:16px;transition:transform .25s var(--ease-out)}
.btn--acc{background:var(--acc);color:var(--on-acc)}
.btn--line{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);padding-right:24px}
.btn--ink{background:var(--ink);color:var(--canvas)}
.btn--ink .bi{background:rgba(255,255,255,.14)}
html[data-thema="dark"] .btn--ink .bi{background:rgba(0,0,0,.14)}
.btn--sm{height:44px;font-size:15px;padding:0 6px 0 18px}.btn--sm .bi{width:32px;height:32px;font-size:14px}
.btn--plain{padding-right:22px}
.link{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;color:var(--acc-text)}
.link .ic{transition:transform .2s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .btn--acc:hover{background:var(--acc-hi)}.btn:hover .bi{transform:translate(2px,-1px)}
  .btn--line:hover{box-shadow:inset 0 0 0 1px var(--carbon)}
  .link:hover .ic{transform:translateX(3px)}
}

/* ---------- header ---------- */
.hd{position:sticky;top:10px;z-index:30;padding:0 var(--gut);margin-top:10px}
.hd-in{max-width:calc(var(--wrap) - 2*var(--gut) + 24px);margin:0 auto;display:flex;align-items:center;gap:18px;height:72px;padding:0 10px 0 22px;border-radius:999px;
  background:color-mix(in srgb,var(--paper) 78%,transparent);backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
  box-shadow:inset 0 0 0 1px var(--line),0 10px 30px -22px rgba(0,0,0,.45)}
.logo{display:block;flex:none}.logo img{height:50px;width:auto} /* groter logo in de balk (2026-10-03): de ondertitel is nu leesbaar */
.logo .l-dark{display:none}
html[data-thema="dark"] .logo .l-light{display:none} html[data-thema="dark"] .logo .l-dark{display:block}
.nav{display:flex;gap:2px;margin-left:8px}
.nav>a,.nav>div>button{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 14px;border-radius:999px;border:0;background:none;cursor:pointer;text-decoration:none;font-size:15px;color:var(--carbon);transition:background-color .18s ease}
.nav>a:hover,.nav>div>button:hover,.nav>div>button[aria-expanded="true"]{background:var(--acc-soft)}
.nav>a[aria-current="page"]{color:var(--ink);font-weight:600}
.nav .ic{font-size:12px;transition:transform .2s var(--ease-out)}
.nav button[aria-expanded="true"] .ic{transform:rotate(180deg)}
.hd-r{margin-left:auto;display:flex;align-items:center;gap:12px}
.tel{font-weight:600;text-decoration:none;font-variant-numeric:tabular-nums;font-size:15px;display:inline-flex;gap:8px;align-items:center}
.tel .ic{font-size:17px;color:var(--acc-text)}
.hd .btn{height:46px}.hd .btn .bi{width:34px;height:34px}
.burger{display:none;width:46px;height:46px;border-radius:50%;border:0;background:var(--ink);color:var(--canvas);cursor:pointer;place-items:center;font-size:20px}

/* side switch: Elektra | Airco (a two-position changeover switch) */
.side{position:relative;display:grid;grid-template-columns:1fr 1fr;height:42px;padding:3px;border-radius:999px;background:var(--panel);box-shadow:inset 0 1px 3px rgba(0,0,0,.14)}
.side a{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 14px;border-radius:999px;text-decoration:none;font-size:14px;font-weight:560;color:var(--mute);transition:color .2s ease}
.side a[aria-current="page"],.side a.is-here{color:var(--on-acc)}
.side .th{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:var(--acc);box-shadow:0 2px 8px -2px var(--acc-glow);
  transition:transform .42s var(--spring),background-color .3s ease}
body.side-airco .side .th{transform:translateX(100%)}
.side.is-going-airco .th{transform:translateX(100%)}
.side.is-going-elektra .th{transform:translateX(0)}
.side a:hover{color:var(--ink)}
.side a[aria-current="page"]:hover{color:var(--on-acc)}

/* mega menu = groepenverklaring */
.mega-wrap{position:relative}
.mega{position:absolute;left:-12px;top:calc(100% + 14px);width:min(780px,86vw);padding:10px;border-radius:28px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line),0 40px 80px -30px rgba(0,0,0,.45);
  display:grid;grid-template-columns:1fr 1fr 220px;gap:6px;opacity:0;transform:translateY(-6px) scale(.985);transform-origin:12% 0;pointer-events:none;visibility:hidden;
  transition:opacity .16s ease,transform .18s var(--ease-out),visibility 0s linear .18s}
.mega::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.mega.is-open{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .18s ease,transform .22s var(--ease-out),visibility 0s}
.mega h4{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--mute);padding:12px 12px 6px;letter-spacing:.04em}
.mega a{display:grid;grid-template-columns:34px 1fr;gap:2px 10px;align-items:center;padding:10px 12px;border-radius:14px;text-decoration:none;transition:background-color .15s ease}
.mega a:hover,.mega a:focus-visible{background:var(--acc-soft)}
.mega .gno{grid-row:span 2;display:grid;place-items:center;height:34px;border-radius:9px;background:var(--panel);font-family:var(--mono);font-size:11px;color:var(--carbon);position:relative}
.mega .gno::after{content:"";position:absolute;top:4px;right:4px;width:5px;height:5px;border-radius:50%;background:transparent;transition:background-color .15s ease,box-shadow .15s ease}
.mega a:hover .gno::after,.mega a:focus-visible .gno::after,.mega a[aria-current="page"] .gno::after{background:var(--led);box-shadow:0 0 6px var(--led-glow)}
.mega b{font-weight:580;font-size:15px}
.mega small{font-size:13px;color:var(--mute);line-height:1.3}
.mega-ph{border-radius:20px;overflow:hidden;position:relative;background:var(--panel)}
.mega-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .25s ease}
.mega-all{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding:12px 14px 6px;border-top:1px solid var(--line);margin-top:4px;font-size:14px;color:var(--mute)}

/* mobile menu */
.mnav{position:fixed;inset:0;z-index:40;background:var(--canvas);padding:92px var(--gut) 32px;display:flex;flex-direction:column;gap:6px;overflow:auto;
  opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s}
.mnav.is-open{opacity:1;visibility:visible;transition:opacity .22s ease,visibility 0s}
.mnav a{display:flex;align-items:center;gap:14px;padding:14px 4px;border-bottom:1px solid var(--line);text-decoration:none;font-size:19px;
  transform:translateY(12px);opacity:0;transition:transform .4s var(--ease-out),opacity .3s ease}
.mnav.is-open a{transform:none;opacity:1}
.mnav .gno{font-family:var(--mono);font-size:11px;color:var(--mute);width:28px}
.mnav .close{position:absolute;top:22px;right:var(--gut);width:46px;height:46px;border-radius:50%;border:0;background:var(--ink);color:var(--canvas);font-size:20px;display:grid;place-items:center;cursor:pointer}

/* ---------- typography blocks ---------- */
.kicker{font-size:15px;font-weight:560;color:var(--acc-text);letter-spacing:-.005em}
.display{font-size:clamp(42px,4.6vw,72px);font-weight:300;line-height:1.02;letter-spacing:-.038em;font-variation-settings:"wdth" 108;text-wrap:balance}
.display b{font-weight:560}
.sub{margin-top:20px;font-size:clamp(17px,1.2vw,19px);color:var(--mute);max-width:44ch;text-wrap:pretty}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.h2{font-size:clamp(34px,3.7vw,60px);font-weight:300;letter-spacing:-.035em;line-height:1.04;font-variation-settings:"wdth" 108;max-width:18ch;text-wrap:balance}
.lead{margin-top:18px;color:var(--mute);max-width:54ch;font-size:18px;text-wrap:pretty}
.sec{padding:clamp(96px,10vw,160px) 0}
.sec--tight{padding-top:0}

/* ---------- hero (shared) ---------- */
.hero{padding:clamp(28px,3.4vw,52px) 0 clamp(56px,7vw,110px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,480px) minmax(0,1fr);}
body[data-page="dienst"] .hero-grid,body[data-page="plaats"] .hero-grid,body[data-page="faq"] .hero-grid,body[data-page="contact"] .hero-grid{grid-template-columns:minmax(0,540px) minmax(0,1fr)}
.hero-grid{grid-template-areas:"text frame" "ctrl frame";grid-template-rows:auto 1fr;column-gap:clamp(28px,4vw,64px);row-gap:clamp(24px,3vh,40px);align-items:start}
.h-text{grid-area:text}.h-ctrl{grid-area:ctrl;align-self:end}.h-frame{grid-area:frame}

/* double-bezel frame around the house */
.shell{padding:8px;border-radius:calc(var(--r-frame) + 8px);background:var(--panel);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),var(--shadow)}
html[data-thema="dark"] .shell{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),var(--shadow)}
.frame{position:relative;border-radius:var(--r-frame);overflow:hidden;background:#0b1026;aspect-ratio:2000/1328;isolation:isolate}
.frame .base,.frame .room{position:absolute;inset:0;background-size:100% 100%;background-repeat:no-repeat}
.frame .room{opacity:0;transition:opacity .22s ease}
.frame .room.is-on{opacity:1;transition:opacity .5s var(--ease-out)}
.frame .room.is-flick{animation:flick .5s steps(1,end)}
@keyframes flick{0%{opacity:0}12%{opacity:.7}22%{opacity:.1}34%{opacity:.85}44%{opacity:.35}58%{opacity:1}}
.frame.is-trip .room{transition:opacity .08s linear}
.flows{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.flows path{fill:none;stroke:#f47b20;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:2 14;opacity:0;transition:opacity .4s ease;filter:drop-shadow(0 0 6px rgba(244,123,32,.9))}
.flows path.is-on{opacity:1;animation:flow 1.1s linear infinite}
.flows path.glint{stroke:url(#gl);stroke-width:30;stroke-dasharray:none;stroke-linecap:butt;filter:none;mix-blend-mode:screen;transition:opacity .6s ease}
.flows path.glint.is-on{opacity:.3;animation:none}
@keyframes flow{to{stroke-dashoffset:-32}}

/* the status display under the house (part of the shell) */
.status{margin-top:8px;border-radius:calc(var(--r-frame) - 12px);background:var(--night);color:var(--on-night);padding:16px 16px 16px 24px;min-height:96px;display:grid;align-items:center}
.status .swap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;transition:opacity .2s ease,transform .3s var(--ease-out),filter .2s ease}
.status .swap.is-out{opacity:0;transform:translateY(6px);filter:blur(2px)}
.status .g{font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--on-night-mute);display:flex;gap:8px;align-items:center}
.status .g .dot{width:7px;height:7px;border-radius:50%;background:var(--led);box-shadow:0 0 8px var(--led-glow)}
.status h3{margin-top:4px;font-size:21px;font-weight:560;letter-spacing:-.015em}
.status p{margin-top:3px;font-size:15px;color:var(--on-night-mute);line-height:1.45;max-width:60ch}
.status .acts{display:flex;gap:8px;align-items:center}
.status .btn{height:46px;font-size:15px}
.status .more{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:14px;font-weight:600;color:#ffb27a;text-decoration:none}
body.side-airco .status .more{color:#8cc6ff}
.status .more .ic{transition:transform .2s var(--ease-out)}
.status .more:hover .ic{transform:translateX(3px)}
.status .btn--line{box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);color:var(--on-night)}
.status .btn.is-added{background:transparent;box-shadow:inset 0 0 0 1px var(--led);color:var(--on-night)}
.status .btn.is-added .bi{background:rgba(53,210,124,.18);color:var(--led)}

/* ---------- groepenkast (hero control) ---------- */
.kast{position:relative;border-radius:26px;padding:14px 14px 12px;background:linear-gradient(180deg,#ecebe6,#dcd9d1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 1px rgba(52,48,44,.14),var(--shadow-sm)}
html[data-thema="dark"] .kast{background:linear-gradient(180deg,#2a2a30,#222227);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(255,255,255,.06),var(--shadow-sm)}
.kast::before,.kast::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;top:10px;background:radial-gradient(circle at 35% 35%,#fff,#9d998f 60%,#6f6b63);box-shadow:0 1px 1px rgba(0,0,0,.25)}
.kast::before{left:10px}.kast::after{right:10px}
.kast-top{display:flex;justify-content:space-between;align-items:center;padding:0 16px 10px;font-family:var(--mono);font-size:11px;color:var(--mute)}
.kast-top .v{display:flex;align-items:center;gap:7px;color:var(--carbon)}
.kast-top .v i{width:7px;height:7px;border-radius:50%;background:#b9b5ac;transition:background-color .25s ease,box-shadow .25s ease}
.kast.has-power .kast-top .v i{background:var(--led);box-shadow:0 0 8px var(--led-glow)}
.rail{position:relative;display:flex;gap:5px;align-items:stretch;padding:10px 10px 8px;border-radius:16px;background:#cfccc3;box-shadow:inset 0 2px 7px rgba(52,48,44,.22)}
html[data-thema="dark"] .rail{background:#17171b;box-shadow:inset 0 2px 8px rgba(0,0,0,.6)}
.rail::before{content:"";position:absolute;left:8px;right:8px;top:50%;height:16px;margin-top:-14px;border-radius:3px;background:linear-gradient(180deg,#b9b6ad,#a9a59b);opacity:.7}
html[data-thema="dark"] .rail::before{background:linear-gradient(180deg,#34343b,#2a2a30)}
.brk{all:unset;box-sizing:border-box;cursor:grab;position:relative;flex:1 1 0;min-width:30px;max-width:56px;height:150px;border-radius:var(--r-brk);background:linear-gradient(180deg,#fdfcf9,#eeebe4);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 5px rgba(52,48,44,.22);display:flex;flex-direction:column;align-items:center;padding:8px 0 6px;touch-action:none;user-select:none;-webkit-user-select:none;
  transition:transform .12s var(--ease-out)}
.brk:active{cursor:grabbing;transform:translateY(1px)}
.brk:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.brk .led{width:14px;height:5px;border-radius:3px;background:#b9b5ac;transition:background-color .25s ease,box-shadow .25s ease}
.brk.is-on .led{background:var(--led);box-shadow:0 0 10px var(--led-glow)}
.brk .slot{position:relative;margin-top:9px;width:22px;height:78px;border-radius:6px;background:#2b2926;box-shadow:inset 0 2px 5px rgba(0,0,0,.6)}
.brk .lever{position:absolute;left:2px;right:2px;top:2px;height:36px;border-radius:4px;background:linear-gradient(180deg,#fbfaf6,#d9d5cb);box-shadow:0 1px 2px rgba(0,0,0,.5);transform:translateY(38px);transition:transform .42s var(--spring)}
.brk.is-on .lever{transform:translateY(0)}
.brk .lever::after{content:"";position:absolute;left:4px;right:4px;top:50%;height:2px;margin-top:-1px;border-radius:1px;background:rgba(0,0,0,.18)}
.brk .no{margin-top:auto;font-family:var(--mono);font-size:10.5px;color:#4a4540;padding:2px 6px;border-radius:4px;background:#f7f1dc;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.brk.main{max-width:66px;min-width:48px;flex:1.35 1 0}
.brk.main .lever{background:linear-gradient(180deg,#f06a4a,#c2381c)}
.brk.acc.is-on .lever{background:linear-gradient(180deg,#ff8b35,#f47b20)}
.tbtn{all:unset;cursor:pointer;position:absolute;right:5px;top:24px;width:18px;height:18px;border-radius:4px;background:#f4d24b;color:#3a2c00;font-family:var(--mono);font-size:10px;font-weight:500;display:grid;place-items:center;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .12s var(--ease-out)}
.tbtn:active{transform:scale(.9)}.tbtn:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.legend{display:grid;grid-template-columns:1fr 1fr;gap:1px 14px;margin-top:10px;padding:8px 10px;border-radius:12px;background:#fbf8ec;box-shadow:inset 0 0 0 1px rgba(52,48,44,.12)}
html[data-thema="dark"] .legend{background:#1b1b20;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.legend button{all:unset;cursor:pointer;display:flex;gap:8px;align-items:center;padding:3px 4px;border-radius:6px;font-family:var(--mono);font-size:11px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s ease,background-color .15s ease}
.legend button:hover{background:rgba(0,0,0,.05)}
.legend button:focus-visible{outline:2px solid var(--acc)}
.legend b{font-weight:500;width:12px;color:var(--carbon)}
.legend i{width:6px;height:6px;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);flex:none;transition:background-color .2s ease,box-shadow .2s ease}
.legend .is-on{color:var(--ink)}.legend .is-on i{background:var(--led);box-shadow:0 0 6px var(--led-glow)}

/* ---------- afstandsbediening (airco hero control) ---------- */
.remote{border-radius:30px;padding:14px;background:linear-gradient(180deg,#fdfdfd,#eceff1);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(16,40,70,.12),var(--shadow-sm);display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:stretch}
html[data-thema="dark"] .remote{background:linear-gradient(180deg,#232a31,#1b2127);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(255,255,255,.06),var(--shadow-sm)}
.dialbox{position:relative;border-radius:22px;background:#0f1a24;padding:10px;display:grid;place-items:center;box-shadow:inset 0 2px 10px rgba(0,0,0,.6)}
.dial{position:relative;width:176px;height:176px;touch-action:none;user-select:none;-webkit-user-select:none;border-radius:50%}
.dial>svg{position:absolute;inset:0;width:100%;height:100%}
.dial .read .ic{font-size:12px}
.dial .trk{fill:none;stroke:rgba(255,255,255,.1);stroke-width:12;stroke-linecap:round}
.dial .arc{fill:none;stroke:url(#dialg);stroke-width:12;stroke-linecap:round;transition:stroke-dashoffset .2s var(--ease-out)}
.dial.is-drag .arc{transition:none}
.dial .thumb{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #0f1a24,0 2px 8px rgba(0,0,0,.5);cursor:grab;transition:transform .15s var(--ease-out)}
.dial.is-drag .thumb{cursor:grabbing;transform:scale(1.12)}
.dial .read{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:#e9f4ff;pointer-events:none}
.dial .read b{font-size:46px;font-weight:300;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;font-variation-settings:"wdth" 108}
.dial .read b sup{font-size:.42em;vertical-align:top;margin-left:2px;font-weight:400}
.dial .read span{margin-top:6px;font-family:var(--mono);font-size:10.5px;color:#8fb6d9;display:flex;gap:6px;justify-content:center;align-items:center}
.dial:focus-visible{outline:2px solid var(--acc);outline-offset:4px}
.rbtns{display:grid;grid-template-rows:auto 1fr auto;gap:10px;min-width:0}
.rrow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rkey{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:10px;min-height:66px;padding:10px 12px;border-radius:16px;background:#fff;box-shadow:0 1px 0 #fff inset,0 2px 6px rgba(16,40,70,.16),inset 0 0 0 1px rgba(16,40,70,.08);font-size:13.5px;font-weight:560;color:#1f2a33;
  transition:transform .12s var(--ease-out),box-shadow .2s ease,background-color .2s ease}
html[data-thema="dark"] .rkey{background:#2a333c;color:#e7eef4;box-shadow:0 2px 6px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.06)}
.rkey:active{transform:scale(.96)}
.rkey:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.rkey .row{display:flex;width:100%;justify-content:space-between;align-items:center}
.rkey .ic{font-size:19px;color:#5d7386}
.rkey i.l{width:8px;height:8px;border-radius:50%;background:#c9d1d8;transition:background-color .25s ease,box-shadow .25s ease}
.rkey[aria-pressed="true"] i.l{background:#39a3ff;box-shadow:0 0 8px rgba(57,163,255,.9)}
.rkey[aria-pressed="true"] .ic{color:var(--acc)}
.rkey small{font-family:var(--mono);font-size:10.5px;font-weight:400;color:#6c7e8e;font-variant-numeric:tabular-nums}
.rmodes{display:flex;gap:6px;padding:4px;border-radius:14px;background:#e8edf0}
html[data-thema="dark"] .rmodes{background:#141a1f}
.rmodes button{all:unset;cursor:pointer;flex:1;display:flex;align-items:center;justify-content:center;gap:6px;height:36px;border-radius:10px;font-size:13.5px;font-weight:560;color:#5d7386;transition:background-color .2s ease,color .2s ease}
.rmodes button[aria-pressed="true"]{background:#fff;color:#12202b;box-shadow:0 1px 3px rgba(16,40,70,.2)}
html[data-thema="dark"] .rmodes button[aria-pressed="true"]{background:#2a333c;color:#fff}
.rmodes button:focus-visible{outline:2px solid var(--acc)}
.rpower{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;height:44px;padding:0 8px 0 14px;border-radius:14px;background:#12202b;color:#fff;font-size:14px;font-weight:560;transition:transform .12s var(--ease-out)}
.rpower:active{transform:scale(.98)}
.rpower .pw{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12)}
.rpower[aria-pressed="true"] .pw{background:#39a3ff;box-shadow:0 0 12px rgba(57,163,255,.7)}
.rpower:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* airco house overlays */
.frame--air{background:#9fb7cc}
.zone{position:absolute;inset:0;background-size:100% 100%;opacity:0;transition:opacity 1.6s var(--ease-out)}
.zone.is-on{opacity:1}
.zone.is-heat{opacity:0}
.tt{position:absolute;transform:translate(-50%,-50%);padding:5px 9px 5px 7px;border-radius:999px;background:rgba(18,24,30,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;font-family:var(--mono);font-size:11.5px;display:flex;align-items:center;gap:5px;
  font-variant-numeric:tabular-nums;transition:background-color .6s ease}
.tt .ic{font-size:13px;color:#ffb27a;transition:color .6s ease}
.tt.is-cool{background:rgba(10,70,140,.62)}.tt.is-cool .ic{color:#9fd3ff}
.tt.is-warm{background:rgba(150,60,10,.62)}
.airflow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.airflow path{fill:none;stroke:#bfe4ff;stroke-width:3;stroke-linecap:round;stroke-dasharray:6 18;opacity:0;transition:opacity .6s ease}
.airflow path.is-on{opacity:.85;animation:breeze 1.6s linear infinite}
.airflow.is-heat path{stroke:#ffc38f}
@keyframes breeze{to{stroke-dashoffset:-48}}
.fan{position:absolute;border-radius:50%;pointer-events:none}
.fan svg{width:100%;height:100%;opacity:.0;transition:opacity .5s ease}
.fan.is-on svg{opacity:.8;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- odometer stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.stats>div{padding:26px 0 0}
.stats b{display:flex;font-size:clamp(44px,5vw,84px);font-weight:250;letter-spacing:-.04em;line-height:1;font-variation-settings:"wdth" 112;font-variant-numeric:tabular-nums;height:1em;overflow:hidden}
.stats b .col{display:inline-flex;flex-direction:column;transition:transform 1.4s var(--ease-io)}
.stats b .col span{height:1em;line-height:1}
.stats>div>span{display:block;margin-top:12px;color:var(--mute);font-size:15px;max-width:22ch}

/* ---------- groepenverklaring (services) ---------- */
.gv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(32px,5vw,90px);margin-top:clamp(40px,5vw,64px);align-items:start}
.gv-list{border-radius:var(--r-tile);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);padding:8px}
.gv-cap{display:flex;justify-content:space-between;padding:12px 14px 10px;font-family:var(--mono);font-size:11px;color:var(--mute)}
.gv-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 12px 12px 14px;border-radius:16px;cursor:pointer;transition:background-color .18s ease}
.gv-row+.gv-row{box-shadow:0 -1px 0 var(--line)}
.gv-row:hover,.gv-row.is-cur{background:var(--acc-soft);box-shadow:none}
.gv-row.is-cur+.gv-row,.gv-row:hover+.gv-row{box-shadow:none}
.gv-row .gno{display:grid;place-items:center;height:36px;border-radius:9px;background:var(--panel);font-family:var(--mono);font-size:11px;color:var(--carbon)}
.gv-row .gno img{display:none}.gv-row .gno b{font-weight:inherit}
.gv-row h3{font-size:18px;font-weight:560;letter-spacing:-.01em}
.gv-row h3 a{text-decoration:none}
.gv-row h3 a::after{content:"";position:absolute;inset:0}
.gv-row .t{position:relative}
.gv-row p{font-size:14.5px;color:var(--mute);line-height:1.4;margin-top:2px}
.gv-row .side-tag{font-family:var(--mono);font-size:10.5px;color:#0a5cae;margin-left:8px;font-weight:400}
html[data-thema="dark"] .gv-row .side-tag{color:#6db3ff}
.gv-panel{position:sticky;top:calc(var(--hd) + 28px)}
.gv-ph{position:relative;border-radius:var(--r-frame);overflow:hidden;aspect-ratio:5/4;background:var(--panel)}
.gv-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.03);transition:opacity .45s ease,transform .9s var(--ease-out)}
.gv-ph img.is-cur{opacity:1;transform:none}
.gv-info{margin-top:16px;padding:22px 24px;border-radius:var(--r-tile);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:10px;transition:opacity .2s ease,filter .2s ease}
.gv-info.is-out{opacity:0;filter:blur(2px)}
.gv-info h3{font-size:26px;font-weight:420;letter-spacing:-.02em}
.gv-info p{color:var(--mute)}
.ticks{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:4px}
.ticks li{display:flex;gap:8px;align-items:center;font-size:15px}
.ticks .ic{color:var(--acc-text);font-size:14px}
.gv-acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px}


/* ---------- twin: same house, two specialisms (clip-path compare) ---------- */
.twin{position:relative;margin-top:clamp(36px,4vw,56px);border-radius:var(--r-frame);overflow:hidden;aspect-ratio:2000/1328;max-height:78vh;width:100%;background:#111;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize}
.twin>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.twin .b{clip-path:inset(0 0 0 var(--x,50%))}
.twin .h{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 18px rgba(0,0,0,.4)}
.twin .knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:54px;padding:0 6px;border-radius:999px;background:#fff;color:#111;display:flex;align-items:center;gap:4px;box-shadow:0 8px 30px -8px rgba(0,0,0,.5)}
.twin .knob span{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;font-size:20px}
.twin .knob span:first-child{background:#f47b20;color:#1b0c02}.twin .knob span:last-child{background:#0b6fd1;color:#fff}
.twin .lab{position:absolute;bottom:22px;display:flex;flex-direction:column;gap:2px;padding:12px 16px;border-radius:18px;background:rgba(15,15,18,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;max-width:300px}
.twin .lab b{font-size:18px;font-weight:560}.twin .lab small{font-size:14px;color:rgba(255,255,255,.75)}
.twin .lab.l{left:22px}.twin .lab.r{right:22px;text-align:right;align-items:flex-end}
.twin .lab a{color:#fff;font-weight:600;font-size:14px;margin-top:6px;text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.twin:focus-visible{outline:2px solid var(--acc);outline-offset:4px}
.twin-head{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}

/* ---------- wire (werkwijze) ---------- */
.wire{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:clamp(44px,5vw,72px);padding-top:44px}
.wire::before,.wire::after{content:"";position:absolute;left:12px;right:12px;top:12px;height:3px;border-radius:2px;background:var(--line-2)}
.wire::after{background:var(--acc);box-shadow:0 0 12px var(--acc-glow);transform:scaleX(0);transform-origin:left;transition:transform 2.2s var(--ease-io)}
.wire.is-in::after{transform:scaleX(1)}
.wire li{position:relative}
.wire .node{position:absolute;top:-44px;left:0;width:27px;height:27px;border-radius:50%;background:var(--canvas);box-shadow:inset 0 0 0 3px var(--line-2);transition:box-shadow .3s ease,background-color .3s ease}
.wire .node::after{content:"";position:absolute;inset:8px;border-radius:50%;background:transparent;transition:background-color .3s ease}
.wire.is-in li .node{box-shadow:inset 0 0 0 3px var(--acc);transition-delay:calc(var(--i) * .55s)}
.wire.is-in li .node::after{background:var(--acc);transition-delay:calc(var(--i) * .55s + .1s)}
.wire h3{font-size:20px;font-weight:560;letter-spacing:-.01em}
.wire p{margin-top:8px;color:var(--mute);font-size:15.5px;max-width:30ch}

/* ---------- reviews ---------- */
.rev{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,110px);align-items:start}
.score{font-size:clamp(130px,15vw,250px);font-weight:200;letter-spacing:-.06em;line-height:.8;font-variation-settings:"wdth" 115;margin:18px 0 34px}
.stars{display:flex;gap:4px;color:var(--acc);font-size:20px}
.quotes figure{padding:26px 0;border-top:1px solid var(--line)}
.quotes figure:first-child{border-top:0;padding-top:0}
.quotes blockquote{margin-top:10px;font-size:clamp(21px,1.8vw,28px);font-weight:350;letter-spacing:-.015em;line-height:1.28;max-width:34ch}
.quotes figcaption{margin-top:10px;color:var(--mute);font-size:15px}

/* ---------- brands ---------- */
.brands{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.brand{height:76px;flex:1 1 150px;border-radius:18px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center}
.brand i{display:block;height:28px;width:124px;background:var(--carbon);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;opacity:.82;transition:opacity .2s ease}
.brand.wm i{height:40px;-webkit-mask-size:118px 118px;mask-size:118px 118px}
.brand.mk{display:flex;align-items:center;justify-content:center;gap:12px;padding:0 14px}
.brand.mk i{height:30px;width:34px;flex:none}
.brand.mk span{font-weight:650;font-size:15px;line-height:1.15;letter-spacing:-.01em;color:var(--carbon);opacity:.86}
.brand:hover i{opacity:1}

/* ---------- aanvraag teaser (mini kast) ---------- */
.teaser{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,6vw,110px);align-items:center}
.tkast{border-radius:30px;padding:16px;background:linear-gradient(180deg,#ecebe6,#dcd9d1);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 1px rgba(52,48,44,.14),var(--shadow)}
html[data-thema="dark"] .tkast{background:linear-gradient(180deg,#2a2a30,#222227);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),var(--shadow)}
.tkast .rail{gap:6px}
.tkast .brk{height:138px;max-width:none}
.tkast .brk .no{font-size:10px}
.brk.air.is-on .lever{background:linear-gradient(180deg,#3b95ef,#0b6fd1)}
.tkast-labels{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;padding:10px 10px 4px}
.tkast-labels span{font-family:var(--mono);font-size:10px;line-height:1.25;color:var(--mute);text-align:center;hyphens:auto;overflow-wrap:anywhere}
.tkast-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:12px;padding:14px 14px 4px;border-top:1px dashed var(--line-2)}
.tkast-foot p{font-size:15px;color:var(--carbon)}
.tkast-foot p b{font-variant-numeric:tabular-nums}
.towns{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.towns a{padding:9px 15px;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;font-size:15px;transition:box-shadow .2s ease}
.towns a:hover,.towns a[aria-current="page"]{box-shadow:inset 0 0 0 1px var(--carbon)}
.contact-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}

/* ---------- island: your aanvraag follows you ---------- */
.island{position:fixed;left:50%;bottom:18px;z-index:35;transform:translate(-50%,140%);display:flex;align-items:center;gap:12px;height:60px;padding:0 8px 0 18px;border-radius:999px;background:#121116;color:#f4f2ee;
  box-shadow:0 20px 50px -18px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.06);transition:transform .5s var(--spring-soft),width .45s var(--spring-soft);overflow:hidden;white-space:nowrap}
.island.is-shown{transform:translate(-50%,0)}
.island .leds{display:flex;gap:4px}
.island .leds i{width:8px;height:8px;border-radius:50%;background:#3a3842}
.island .leds i.on{background:var(--led);box-shadow:0 0 8px var(--led-glow)}
.island .leds i.air.on{background:#39a3ff;box-shadow:0 0 8px rgba(57,163,255,.9)}
.island .txt{display:grid;font-size:15px}
.island .txt>span{grid-area:1/1;transition:opacity .25s ease,transform .35s var(--ease-out),filter .25s ease}
.island .txt .note{opacity:0;transform:translateY(10px);filter:blur(3px);color:#fff}
.island.is-note .txt .note{opacity:1;transform:none;filter:none}
.island.is-note .txt .base{opacity:0;transform:translateY(-10px);filter:blur(3px)}
.island .txt small{color:rgba(244,242,238,.6);font-size:13px}
.island .btn{height:44px;font-size:15px}
.island .clr{all:unset;cursor:pointer;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:rgba(255,255,255,.55);font-size:14px}
.island .clr:hover{color:#fff;background:rgba(255,255,255,.08)}
.island .clr:focus-visible{outline:2px solid var(--acc)}

/* ---------- footer ---------- */
.ft{background:var(--night);color:var(--on-night-mute);padding:72px 0 40px;margin-top:clamp(40px,6vw,90px)}
html[data-thema="dark"] .ft{background:#0a0a0c}
.ft-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:40px}
.ft h4.mt{margin-top:30px}
.ft h4{font-family:var(--mono);font-size:11px;font-weight:500;color:rgba(244,242,238,.5);margin-bottom:14px;letter-spacing:.04em}
.ft a{text-decoration:none;color:var(--on-night)}
.ft a:hover{color:#fff}
.ft li{padding:5px 0;font-size:15px;display:flex;gap:10px}
.ft li .gno{font-family:var(--mono);font-size:10.5px;color:rgba(244,242,238,.45);width:22px;padding-top:3px}
.ft .logo img{height:34px}
.ft .about{margin-top:18px;font-size:15px;max-width:34ch}
.ft .bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:56px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);font-size:14px}
.ft .nen{display:flex;align-items:center;gap:10px;margin-top:20px;font-size:13px}

/* ---------- inner page bits ---------- */
.crumbs{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--mute);margin-bottom:22px}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--ink)}
.crumbs .ic{font-size:11px}
.h1-lg{font-size:clamp(36px,3.5vw,56px);font-weight:300;line-height:1.03;letter-spacing:-.036em;font-variation-settings:"wdth" 108;text-wrap:balance}

/* single breaker module next to a photo (service pages) */
.solo{display:flex;gap:16px;align-items:center;padding:14px 18px 14px 14px;border-radius:24px;background:linear-gradient(180deg,#ecebe6,#dcd9d1);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 1px rgba(52,48,44,.14),var(--shadow-sm)}
html[data-thema="dark"] .solo{background:linear-gradient(180deg,#2a2a30,#222227);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),var(--shadow-sm)}
.solo>div{display:grid;gap:10px;justify-items:start}
.solo b{display:block;font-size:17px;font-weight:580}
.solo p{font-size:14.5px;color:var(--mute);margin-top:2px;max-width:30ch}

/* voor / na switch */
.swapfig{position:relative;border-radius:var(--r-frame);overflow:hidden;aspect-ratio:3/2;background:#222}
.swapfig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .35s ease}
.swapfig img.old{opacity:0}
.swapfig.is-old img.old{opacity:1}
.swapfig.is-flick img.old{animation:flick2 .45s steps(1,end)}
@keyframes flick2{0%{opacity:1}20%{opacity:.2}35%{opacity:.9}55%{opacity:0}}
.swapfig .tag{position:absolute;left:18px;top:18px;padding:7px 12px;border-radius:999px;background:rgba(15,15,18,.6);color:#fff;font-size:13.5px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.voorna{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(32px,5vw,90px);align-items:center}
.flip{display:inline-flex;align-items:center;gap:14px;margin-top:26px;padding:10px 18px 10px 10px;border-radius:20px;background:var(--panel);cursor:pointer;border:0;font:inherit;font-weight:560;color:var(--ink)}
.flip small{display:block;font-weight:400;color:var(--mute);font-size:14px}
.flip:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

.cols2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,110px);align-items:start}
.checks{display:grid;gap:0;margin-top:26px}
.checks li{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--line)}
.checks li:first-child{border-top:0}
.checks .ic{flex:none;margin-top:4px;color:var(--acc-text)}
.checks b{display:block;font-weight:580}
.checks span{color:var(--mute);font-size:15.5px}

.bento5{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-top:clamp(40px,5vw,60px)}
.bento5 article{border-radius:var(--r-tile);padding:26px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;gap:10px;min-height:210px}
.bento5 article:nth-child(1),.bento5 article:nth-child(2){grid-column:span 3}
.bento5 article:nth-child(n+3){grid-column:span 2}
.bento5 .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--acc-soft);color:var(--acc-text);font-size:22px}
.bento5 h3{font-size:20px;font-weight:560;letter-spacing:-.01em;margin-top:auto}
.bento5 p{color:var(--mute);font-size:15.5px}
.bento5 article.ph{padding:0;overflow:hidden;position:relative;color:#fff;box-shadow:none;background:#222}
.bento5 article.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bento5 article.ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.72))}
.bento5 article.ph .in{position:relative;z-index:1;margin-top:auto;padding:26px}
.bento5 article.ph p{color:rgba(255,255,255,.8)}

.price{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(32px,5vw,90px);align-items:center;padding:clamp(28px,4vw,56px);border-radius:var(--r-frame);background:var(--night);color:var(--on-night)}
.price .h2{color:#fff}
.price .lead{color:var(--on-night-mute)}
.price .tip{display:flex;gap:16px;align-items:flex-start;padding:22px;border-radius:var(--r-tile);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.price .tip .ic{font-size:28px;color:var(--acc-hi);flex:none}
.price .tip p{color:var(--on-night-mute);font-size:15.5px}
.price .tip b{color:#fff;display:block;margin-bottom:4px}

.others{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-top:32px}
.others a{display:flex;flex-direction:column;gap:10px;padding:6px 6px 14px;border-radius:18px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;min-height:132px;transition:box-shadow .2s ease,transform .2s var(--ease-out)}
.others a:hover{box-shadow:inset 0 0 0 1px var(--carbon);transform:translateY(-2px)}
.others .oimg{display:block;aspect-ratio:4/3;border-radius:13px;overflow:hidden;background:var(--line)}
.others .oimg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.others a:hover .oimg img{transform:scale(1.04)}}
.others .gno{font-family:var(--mono);font-size:11px;color:var(--mute);display:flex;justify-content:space-between;align-items:center;padding:2px 8px 0}
.others .gno i{width:6px;height:6px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-2)}
.others a:hover .gno i{background:var(--led);box-shadow:0 0 6px var(--led-glow)}
.others b{font-size:15px;font-weight:560;line-height:1.3;margin-top:auto;padding:0 8px}

/* town page: the werkgebied on a real map (OpenStreetMap, drawn once, self-hosted) with the feeders on top */
.net{position:relative;border-radius:var(--r-frame);background:#16161b;aspect-ratio:1200/948;overflow:hidden}
.net>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.net svg{position:absolute;inset:0;width:100%;height:100%}
.net .ln-on{stroke:#f47b20;stroke-width:3;fill:none;stroke-linecap:round;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.1s var(--ease-io),stroke-width .2s ease;filter:drop-shadow(0 0 5px rgba(244,123,32,.8))}
.net.is-in .ln-on{stroke-dashoffset:0}
.net .ln-on.is-hot{stroke-width:5}
.net .n circle{fill:#1c1b22;stroke:#f47b20;stroke-width:3;transition:fill .25s ease,r .25s var(--ease-out)}
.net .n text{fill:#f4f2ee;font-family:var(--sans);font-size:21px;font-weight:560;paint-order:stroke;stroke:#16161b;stroke-width:6px;stroke-linejoin:round}
.net .n.hub circle{fill:#f47b20;stroke:#ffd2ad}
.net .n.hub text{font-size:28px;font-weight:650}
.net .n.w circle{fill:#f4f2ee;stroke:none}
.net .n.w text{font-size:15px;font-family:var(--mono);font-weight:400;fill:rgba(244,242,238,.78)}
.net a.n:hover circle,.net a.n:focus-visible circle,.net a.n.is-hot circle{fill:#f47b20}
.net a.n:focus-visible{outline:none}
.net a.n:focus-visible text{text-decoration:underline}
.net .cap{position:absolute;left:18px;bottom:14px;color:rgba(255,255,255,.66);font-family:var(--mono);font-size:11px;pointer-events:none}
.net .osm{position:absolute;right:12px;bottom:10px;padding:3px 7px;border-radius:6px;background:rgba(22,22,27,.72);color:rgba(255,255,255,.72);font-size:11px;text-decoration:none}
.net .osm:hover{color:#fff}

/* ---------- offerte configurator ---------- */
.cfg-wrap{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:clamp(24px,3vw,48px);align-items:start;margin-top:clamp(28px,3vw,44px)}
.rail-steps{display:flex;align-items:center;gap:6px;margin-bottom:18px}
.rail-steps li{display:flex;align-items:center;gap:6px;flex:1}
.rail-steps li:last-child{flex:none}
.rail-steps button,.rail-steps .tile{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;height:40px;padding:0 14px 0 6px;border-radius:12px;font-size:14px;font-weight:560;color:var(--mute);cursor:default;white-space:nowrap}
.rail-steps button{cursor:pointer}
.rail-steps button:hover{color:var(--ink)}
.rail-steps button:focus-visible{outline:2px solid var(--acc)}
.rail-steps .n{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-2);font-family:var(--mono);font-size:11.5px;color:var(--mute);transform:scale(.92);transition:transform .3s var(--spring),background-color .2s ease,color .2s ease}
.rail-steps [aria-current="step"]{color:var(--ink)}
.rail-steps [aria-current="step"] .n{transform:none;background:var(--ink);color:var(--canvas);box-shadow:none}
.rail-steps .is-done .n{background:var(--acc);color:var(--on-acc);box-shadow:none}
.rail-steps .bar{flex:1;height:3px;border-radius:2px;background:var(--line);overflow:hidden;min-width:12px}
.rail-steps .bar i{display:block;height:100%;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--spring-soft)}
.rail-steps .bar.is-full i{transform:none}
.stage{position:relative;border-radius:var(--r-frame);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);padding:clamp(22px,3vw,40px);min-height:520px;overflow:hidden}
.step{display:none}
.step.is-cur{display:block}
.step.is-enter{animation:stepIn .42s var(--spring-soft) both}
.step.is-enter-back{animation:stepInBack .42s var(--spring-soft) both}
@keyframes stepIn{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@keyframes stepInBack{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
.step h2{font-size:clamp(28px,2.4vw,38px);font-weight:340;letter-spacing:-.03em;line-height:1.1;font-variation-settings:"wdth" 106}
.step>p.lead{margin-top:10px;font-size:16.5px}
.pick{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;margin-top:28px}
.pick-e .rail{gap:6px;padding:12px 12px 10px}
.pick-e .brk{height:140px;max-width:none}
.pick-labels{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;padding:10px 12px 2px}
.pick-labels button{all:unset;cursor:pointer;font-size:12.5px;line-height:1.25;color:var(--carbon);text-align:center;border-radius:6px;padding:2px}
.pick-labels button:focus-visible{outline:2px solid var(--acc)}
.pick-h{display:flex;justify-content:space-between;align-items:baseline;padding:0 6px 10px;font-family:var(--mono);font-size:11px;color:var(--mute)}
.pick-a{border-radius:26px;padding:14px;background:linear-gradient(180deg,#fdfdfd,#eceff1);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(16,40,70,.12),var(--shadow-sm);display:flex;flex-direction:column;gap:8px}
html[data-thema="dark"] .pick-a{background:linear-gradient(180deg,#232a31,#1b2127);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.pick-a .rkey{min-height:74px;flex:1}
.pick-a .rkey b{font-size:15px}
.urgent{display:none;margin-top:16px;padding:16px 18px;border-radius:18px;background:rgba(194,54,27,.08);box-shadow:inset 0 0 0 1px rgba(194,54,27,.3);gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.urgent.is-shown{display:flex}
.urgent p{font-size:15px;max-width:52ch}.urgent b{color:var(--warn)}
html[data-thema="dark"] .urgent b{color:#ff8c73}
.q{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.q:first-of-type{border-top:0;padding-top:0}
.q-h{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.q-h .gno{display:grid;place-items:center;min-width:34px;height:26px;padding:0 6px;border-radius:7px;background:var(--panel);font-family:var(--mono);font-size:10.5px;color:var(--carbon)}
.q-h h3{font-size:19px;font-weight:560;letter-spacing:-.01em}
.qq{margin-top:14px}
.qq>label,.qq>.lbl{display:block;font-size:14.5px;font-weight:560;color:var(--carbon);margin-bottom:8px}
.qq .opt{font-weight:400;color:var(--mute)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:999px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--line-2);font-size:15px;color:var(--carbon);
  transition:background-color .18s ease,box-shadow .18s ease,color .18s ease,transform .12s var(--ease-out)}
.chip:active{transform:scale(.97)}
.chip:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.chip[aria-pressed="true"],.chip[aria-checked="true"]{background:var(--ink);color:var(--canvas);box-shadow:none}
.chip .ic{font-size:14px}
.chip.danger[aria-pressed="true"],.chip.danger[aria-checked="true"]{background:var(--warn);color:#fff}
.range{display:flex;align-items:center;gap:16px}
.range input{flex:1;accent-color:var(--acc);height:28px}
.range output{min-width:74px;font-variant-numeric:tabular-nums;font-weight:580;text-align:right}
.stepper{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2)}
.stepper button{all:unset;cursor:pointer;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--panel)}
.stepper button:focus-visible{outline:2px solid var(--acc)}
.stepper output{min-width:40px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}
.f{display:grid;gap:7px}
.f label{font-size:14.5px;font-weight:560;color:var(--carbon)}
.f input,.f select,.f textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--canvas);border:1px solid var(--line-2);border-radius:var(--r-in);height:52px;padding:0 14px;transition:border-color .2s ease,box-shadow .2s ease;width:100%}
.f textarea{height:110px;padding:12px 14px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--acc-soft)}
.f [aria-invalid="true"]{border-color:var(--warn)}
.err{color:var(--warn);font-size:13.5px}
html[data-thema="dark"] .err{color:#ff8c73}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid-f{display:grid;gap:16px;margin-top:26px}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--carbon);cursor:pointer}
.chk input{width:18px;height:18px;margin-top:3px;accent-color:var(--acc);flex:none}
.req{font-size:13px;color:var(--mute)}
.drop{display:flex;align-items:center;gap:16px;padding:18px;border-radius:18px;border:1.5px dashed var(--line-2);background:var(--canvas);cursor:pointer;transition:border-color .2s ease,background-color .2s ease}
.drop:hover,.drop.is-over{border-color:var(--acc);background:var(--acc-soft)}
.drop .ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--panel);font-size:22px;flex:none}
.drop b{display:block;font-size:15.5px}.drop small{color:var(--mute);font-size:13.5px}
.drop input{position:absolute;width:1px;height:1px;opacity:0}
.thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.thumbs figure{position:relative;width:72px;height:72px;border-radius:12px;overflow:hidden;background:var(--panel)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.thumbs button{all:unset;cursor:pointer;position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;display:grid;place-items:center;font-size:11px}
.navrow{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:34px;padding-top:22px;border-top:1px solid var(--line)}
.navrow .hint{font-size:14px;color:var(--mute)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn[disabled]:active{transform:none}

/* werkbon = the live summary, reads like a groepenverklaring label */
.werkbon{position:sticky;top:calc(var(--hd) + 26px);border-radius:28px;background:#fbf8ec;color:#27231f;padding:22px 22px 18px;box-shadow:inset 0 0 0 1px rgba(52,48,44,.14),var(--shadow)}
html[data-thema="dark"] .werkbon{background:#1d1c19;color:#ece7dc;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),var(--shadow)}
.werkbon .wb-h{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:11px;color:#7d766b;padding-bottom:12px;border-bottom:1px dashed rgba(52,48,44,.3)}
html[data-thema="dark"] .werkbon .wb-h{color:#9b9384;border-color:rgba(255,255,255,.18)}
.werkbon h3{font-size:22px;font-weight:460;letter-spacing:-.02em;margin-top:14px}
.wb-list{margin-top:10px;display:grid;gap:2px}
.wb-empty{padding:18px 0 8px;color:#7d766b;font-size:15px}
.wb-item{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid rgba(52,48,44,.1);animation:wbIn .35s var(--ease-out) both}
html[data-thema="dark"] .wb-item{border-color:rgba(255,255,255,.07)}
@keyframes wbIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.wb-item .gno{display:grid;place-items:center;height:24px;border-radius:6px;background:rgba(52,48,44,.08);font-family:var(--mono);font-size:10.5px;position:relative}
.wb-item .gno::after{content:"";position:absolute;right:-3px;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--led);box-shadow:0 0 6px var(--led-glow)}
.wb-item.air .gno::after{background:#39a3ff;box-shadow:0 0 6px rgba(57,163,255,.9)}
.wb-item b{font-weight:580;font-size:15px;display:block}
.wb-item small{display:block;font-family:var(--mono);font-size:11px;color:#7d766b;line-height:1.5;margin-top:2px}
html[data-thema="dark"] .wb-item small{color:#9b9384}
.wb-meta{margin-top:12px;display:grid;gap:6px;font-size:14.5px}
.wb-meta div{display:flex;justify-content:space-between;gap:12px}
.wb-meta span{color:#7d766b}
html[data-thema="dark"] .wb-meta span{color:#9b9384}
.wb-foot{margin-top:16px;padding-top:14px;border-top:1px dashed rgba(52,48,44,.3);font-size:13.5px;color:#7d766b;display:flex;gap:10px;align-items:center}
html[data-thema="dark"] .wb-foot{border-color:rgba(255,255,255,.18);color:#9b9384}
.wb-foot .ic{font-size:18px;color:var(--acc-text)}
.stamp{display:none;position:absolute;right:18px;top:48px;transform:rotate(-8deg);padding:6px 12px;border:2px solid #1f8a4c;border-radius:8px;color:#1f8a4c;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.06em}
.werkbon.is-sent .stamp{display:block;animation:stampIn .5s var(--spring) both}
@keyframes stampIn{from{opacity:0;transform:rotate(-8deg) scale(1.4)}to{opacity:1;transform:rotate(-8deg) scale(1)}}
.done{display:none}
.stage.is-sent .step{display:none!important}
.stage.is-sent .done{display:block;animation:stepIn .45s var(--spring-soft) both}
.done .big{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:rgba(53,210,124,.16);color:#1f8a4c;font-size:30px}
.done pre{margin-top:18px;white-space:pre-wrap;font-family:var(--mono);font-size:12px;line-height:1.6;padding:16px;border-radius:16px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--line);color:var(--carbon);max-height:320px;overflow:auto}
.done details summary{cursor:pointer;margin-top:18px;font-weight:560}

/* preview-only tool (not part of the site) */
.pv{position:fixed;left:14px;bottom:14px;z-index:50;display:flex;flex-direction:row;gap:6px;padding:6px;border-radius:16px;background:rgba(20,20,24,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
.pv button,.pv a{all:unset;cursor:pointer;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;color:#ddd;font-size:17px}
.pv button:hover,.pv a:hover{background:rgba(255,255,255,.1);color:#fff}
.pv button:focus-visible,.pv a:focus-visible{outline:2px solid #f47b20}
.pv .tip{position:absolute;bottom:50px;white-space:nowrap;padding:5px 9px;border-radius:8px;background:#141418;color:#fff;font-size:12px;opacity:0;pointer-events:none;transition:opacity .15s ease}
.pv button:hover .tip,.pv a:hover .tip{opacity:1}

/* reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.rv.is-in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1280px){
  .tel span{display:none}
  .nav>a.opt{display:none}
}
@media (max-width:1100px){
  .hero-grid{grid-template-columns:1fr;grid-template-areas:"text" "frame" "ctrl";grid-template-rows:auto;row-gap:24px}
  body[data-page] .hero-grid{grid-template-columns:1fr}
  .h-ctrl{align-self:start;max-width:620px}
  .nav,.hd .tel{display:none}
  .burger{display:grid}
  .gv{grid-template-columns:1fr}
  .gv-panel{display:none}
  /* geen fotopaneel naast de lijst: elke rij krijgt zijn foto, met de groepcode erop */
  .gv-row{grid-template-columns:76px minmax(0,1fr) auto}
  .gv-row .gno{position:relative;height:76px;border-radius:12px;overflow:hidden;place-items:start}
  .gv-row .gno img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .gv-row .gno b{position:relative;margin:5px;padding:2px 6px;border-radius:6px;background:rgba(18,17,22,.72);color:#fff;font-size:10px;line-height:1.4}
  .cfg-wrap{grid-template-columns:1fr}
  .werkbon{position:relative;top:auto}
  .others{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pick{grid-template-columns:1fr}
}
@media (max-width:980px){
  .rev,.teaser,.cols2,.voorna,.price{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr;row-gap:12px}
  .wire{grid-template-columns:1fr 1fr;row-gap:44px}
  .wire::before,.wire::after{display:none}
  .wire li .node{box-shadow:inset 0 0 0 3px var(--acc)}
  .ft-grid{grid-template-columns:1fr 1fr}
  .bento5 article:nth-child(n){grid-column:span 3}
  .bento5 article:nth-child(5){grid-column:span 6}
}
@media (max-width:720px){
  .hd{top:8px;margin-top:8px}
  .hd-in{height:64px;padding:0 6px 0 14px;gap:10px}
  .logo img{height:40px}
  .hd .btn{display:none}
  .side{height:40px}.side a{padding:0 11px;font-size:13.5px}.side a .ic{display:none}
  body{font-size:16px}
  .cta .btn{flex:1 1 auto}
  .rail{gap:3px;padding:8px 6px 6px}
  .brk{height:124px;min-width:0;border-radius:7px}
  .brk .slot{width:17px;height:64px}.brk .lever{height:30px;transform:translateY(30px)}
  .brk .no{font-size:9.5px;padding:1px 4px}
  .brk.main{min-width:0}
  .tbtn{right:2px;top:20px;width:16px;height:16px}
  .legend{grid-template-columns:1fr}
  .shell{padding:6px;border-radius:30px}
  .frame{border-radius:24px}
  .status{border-radius:22px;padding:16px}
  .status .swap{grid-template-columns:1fr}
  .status .acts{flex-wrap:wrap}
  .remote{grid-template-columns:1fr}
  .dialbox{justify-self:stretch}
  .tt{font-size:10px;padding:3px 7px 3px 5px}
  .gv-row{grid-template-columns:68px minmax(0,1fr);row-gap:10px;align-items:start}
  .gv-row .gno{height:68px}
  .gv-row .add-row{grid-column:2;justify-self:start}
  .twin{aspect-ratio:4/5}
  .twin .lab{max-width:44%;padding:10px 12px}.twin .lab small{display:none}
  .twin .lab.l{left:10px}.twin .lab.r{right:10px}
  .usp div{grid-template-columns:1fr}
  .two{grid-template-columns:1fr}
  .sec{padding:84px 0}
  .stats b{font-size:52px}
  .wire{grid-template-columns:1fr}
  .tkast .brk{height:118px}
  .tkast-labels span{font-size:8.5px}
  .tkast-foot{flex-direction:column;align-items:stretch}
  .tkast-foot .btn{width:100%}
  .pick-e .brk{height:120px}
  .pick-labels button{font-size:10.5px}
  .rail-steps .lbl{display:none}
  .rail-steps button,.rail-steps .tile{padding:0 4px}
  .stage{padding:20px 16px;border-radius:26px}
  .navrow .hint{display:none}
  .island{left:12px;right:12px;transform:translateY(140%);bottom:12px}
  .island.is-shown{transform:none}
  .island .txt small{display:none}
  .island .btn{margin-left:auto;flex:none}
  .island .txt{min-width:0;flex:1}
  .island .txt>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .island .txt .long{display:none}
  .island .leds{display:none}
  .island .txt .note{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .island.is-note .txt .base{opacity:1;transform:none;filter:none}
  .ft-grid{grid-template-columns:1fr}
  .others{grid-template-columns:1fr 1fr}
  .bento5 article:nth-child(n){grid-column:span 6}
  .net{border-radius:22px}
  .net .n text{font-size:31px;stroke-width:8px}.net .n.hub text{font-size:38px}.net .n.w text{display:none}
  .net .cap{display:none}
  .pv{bottom:84px;left:12px}
  .pv .tip{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .brk .lever,.side .th{transition:none}
  .frame .room,.frame .room.is-on{transition:opacity .2s ease}
  .frame .room.is-flick,.swapfig.is-flick img.old{animation:none}
  .flows path.is-on{animation:none;stroke-dasharray:none;opacity:.8}
  .airflow path.is-on{animation:none;stroke-dasharray:none;opacity:.5}
  .fan.is-on svg{animation:none}
  .zone{transition:opacity .3s ease}
  .rv{opacity:1;transform:none;transition:none}
  .stats b .col{transition:none}
  .wire::after,.net .ln-on{transition:none}
  .step.is-enter,.step.is-enter-back,.stage.is-sent .done,.wb-item{animation:none}
  .island{transition:transform .01s}
}

/* =========================================================
   KAST BUILDER: the aanvraag is a groepenkast that builds itself
   ========================================================= */
.kb{position:relative;border-radius:28px;padding:14px 14px 16px;background:linear-gradient(180deg,#ecebe6,#dcd9d1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 1px rgba(52,48,44,.14),var(--shadow)}
html[data-thema="dark"] .kb{background:linear-gradient(180deg,#2a2a30,#222227);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(255,255,255,.06),var(--shadow)}
.kb::before,.kb::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;top:11px;background:radial-gradient(circle at 35% 35%,#fff,#9d998f 60%,#6f6b63);box-shadow:0 1px 1px rgba(0,0,0,.25)}
.kb::before{left:11px}.kb::after{right:11px}
.kb-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:0 18px 12px;font-family:var(--mono);font-size:11px;color:var(--mute)}
.kb-title{color:var(--carbon);font-weight:500}
.kb-meta{font-variant-numeric:tabular-nums;text-align:right}
.kb-body{display:grid;gap:10px;transition:opacity .3s ease}
.kb-rail{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3px;padding:8px 8px 7px;border-radius:12px;background:#cfccc3;box-shadow:inset 0 2px 7px rgba(52,48,44,.22)}
html[data-thema="dark"] .kb-rail{background:#17171b;box-shadow:inset 0 2px 8px rgba(0,0,0,.6)}
.kb-rail::before{content:"";position:absolute;left:6px;right:6px;top:50%;height:14px;margin-top:-10px;border-radius:3px;background:linear-gradient(180deg,#bcb9b0,#a8a49a);opacity:.75}
html[data-thema="dark"] .kb-rail::before{background:linear-gradient(180deg,#34343b,#2a2a30)}
.m{position:relative;height:108px;border-radius:6px;background:linear-gradient(180deg,#fdfcf9,#eeebe4);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 5px rgba(52,48,44,.22);
  display:flex;flex-direction:column;align-items:center;padding:7px 0 5px;transition:transform .5s var(--spring-soft);min-width:0}
.m .led{width:10px;height:4px;border-radius:2px;background:var(--led);box-shadow:0 0 8px var(--led-glow);flex:none}
.m--air .led{background:#39a3ff;box-shadow:0 0 8px rgba(57,163,255,.9)}
.m--hs .led,.m--rcd .led{background:#b9b5ac;box-shadow:none}
.m .levers{position:relative;display:flex;gap:5px;margin-top:8px}
.m .slot{position:relative;width:14px;height:50px;border-radius:4px;background:#2b2926;box-shadow:inset 0 2px 4px rgba(0,0,0,.6)}
.m .lever{position:absolute;left:2px;right:2px;top:2px;height:22px;border-radius:3px;background:linear-gradient(180deg,#fbfaf6,#d9d5cb);box-shadow:0 1px 2px rgba(0,0,0,.5)}
.m .bar{position:absolute;left:1px;right:1px;top:10px;height:6px;border-radius:2px;background:linear-gradient(180deg,#f4f1ea,#cfcabf);box-shadow:0 1px 2px rgba(0,0,0,.35)}
.m--hs .lever{background:linear-gradient(180deg,#f06a4a,#c2381c)}
.m--hs .slot{width:22px}
.m--rcd{background:linear-gradient(180deg,#f7f5ef,#e6e2d8)}
.m--rcd .lever{background:linear-gradient(180deg,#8fa6bb,#5d7488)}
.m--rcd .slot{width:18px}
.m .tb{position:absolute;right:5px;top:18px;width:14px;height:14px;border-radius:3px;background:#f4d24b;color:#3a2c00;font-family:var(--mono);font-size:8.5px;display:grid;place-items:center}
.m .ma{font-family:var(--mono);font-size:8.5px;color:#6f6a62;margin-top:3px}
.m .no{margin-top:auto;font-family:var(--mono);font-size:9.5px;color:#4a4540;padding:1px 5px;border-radius:3px;background:#f7f1dc;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.m--blank{background:repeating-linear-gradient(180deg,#f2f0ea 0 7px,#e7e4dc 7px 8px);box-shadow:inset 0 0 0 1px rgba(52,48,44,.08);opacity:.75}
html[data-thema="dark"] .m--blank{background:repeating-linear-gradient(180deg,#26262c 0 7px,#202025 7px 8px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.m .x{all:unset;cursor:pointer;position:absolute;top:-8px;right:-8px;z-index:2;width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--canvas);display:grid;place-items:center;font-size:11px;
  opacity:0;transform:scale(.8);transition:opacity .15s ease,transform .2s var(--ease-out)}
.m:hover .x,.m:focus-within .x{opacity:1;transform:none}
.m .x:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@media (hover:none){.m .x{opacity:.9;transform:scale(.9)}}
.m.is-new{animation:mountIn .62s var(--spring) both}
.m.is-new .led{animation:ledOn 1s ease both}
@keyframes mountIn{from{transform:translateY(-30px) scale(.94);opacity:0}to{transform:none;opacity:1}}
@keyframes ledOn{0%,40%{background:#b9b5ac;box-shadow:none}55%{background:#d6ffe8;box-shadow:0 0 22px var(--led-glow)}100%{}}
.kb-lab{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3px;padding:6px 8px 0}
.kb-lab span{min-width:0;padding:3px 4px;border-radius:4px;background:#fbf8ec;box-shadow:inset 0 0 0 1px rgba(52,48,44,.1);font-family:var(--mono);font-size:9.5px;line-height:1.3;color:#3a352f;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
html[data-thema="dark"] .kb-lab span{background:#1d1c19;color:#d9d3c7;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.kb-lab span:empty{background:none;box-shadow:none}
.kb-lab span.sys{color:#8a847a;background:none;box-shadow:none;text-align:center}
.kb-lab b{font-weight:500;margin-right:2px}
.kb-empty{position:absolute;left:14px;right:14px;top:44px;bottom:16px;display:none;place-content:center;justify-items:center;pointer-events:none}
.kb-empty span{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;background:var(--paper);box-shadow:var(--shadow-sm);font-size:15px;color:var(--carbon);max-width:36ch;text-align:left}
.kb-empty .ic{font-size:22px;color:var(--acc-text);flex:none}
.kb-empty{gap:0}
.kb-empty > .ic{display:none}
.kb.is-empty .kb-empty{display:grid}
.kb.is-empty .kb-body{opacity:.5}
.kb-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;padding:0 4px}
.kb-tags:empty{display:none}
.kb-tag{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 6px 0 12px;border-radius:8px;background:#fbf8ec;box-shadow:inset 0 0 0 1px rgba(52,48,44,.16);font-size:13.5px;color:#27231f;animation:tagIn .4s var(--spring) both}
html[data-thema="dark"] .kb-tag{background:#1d1c19;color:#ece7dc;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.kb-tag.is-urgent{background:#fde8e3;color:#8a2412;box-shadow:inset 0 0 0 1px rgba(194,54,27,.3)}
.kb-tag .ic{font-size:15px}
.kb-tag .tx{all:unset;cursor:pointer;width:24px;height:24px;border-radius:6px;display:grid;place-items:center;font-size:11px;opacity:.6}
.kb-tag .tx:hover{opacity:1;background:rgba(0,0,0,.06)}
.kb-tag .tx:focus-visible{outline:2px solid var(--acc)}
@keyframes tagIn{from{opacity:0;transform:translateY(-8px) rotate(-3deg)}to{opacity:1;transform:none}}
.kb-lab{display:none!important}
.kb-legend{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;margin-top:12px;padding:10px 12px;border-radius:12px;background:#fbf8ec;box-shadow:inset 0 0 0 1px rgba(52,48,44,.12);font-family:var(--mono);font-size:11px;color:#3a352f}
html[data-thema="dark"] .kb-legend{background:#1d1c19;color:#d9d3c7}
.kb-legend:empty{display:none!important}
.kb-legend li{display:flex;gap:8px}
.kb-legend li::before{content:"";width:6px;height:6px;border-radius:50%;margin-top:4px;background:var(--led);box-shadow:0 0 6px var(--led-glow);flex:none}
.kb-legend li.air::before{background:#39a3ff;box-shadow:0 0 6px rgba(57,163,255,.9)}
.kb-legend b{font-weight:500;min-width:14px}
.kb--sm .m{height:92px}
.kb--sm .slot{height:40px}.kb--sm .lever{height:18px}
.kb .stamp{position:absolute;right:22px;top:40px;z-index:3}
.kb.is-sent .stamp{display:block;animation:stampIn .5s var(--spring) both}

/* quick-add chips */
.qadds{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.qadd{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 6px 0 14px;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-2);font-size:15px;font-weight:560;color:var(--carbon);
  transition:background-color .18s ease,color .18s ease,box-shadow .18s ease,transform .12s var(--ease-out)}
.qadd:active{transform:scale(.97)}
.qadd:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.qadd>.ic{font-size:18px;color:var(--acc-text)}
.qadd .pl{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--acc-soft);color:var(--acc-text);font-size:14px;transition:background-color .2s ease,color .2s ease}
.qadd[aria-pressed="true"]{background:var(--ink);color:var(--canvas);box-shadow:none}
.qadd[aria-pressed="true"]>.ic{color:var(--acc-hi)}
.qadd[aria-pressed="true"] .pl{background:var(--acc);color:var(--on-acc)}
@media (hover:hover) and (pointer:fine){.qadd:hover{box-shadow:inset 0 0 0 1px var(--carbon)}.qadd[aria-pressed="true"]:hover{box-shadow:none}}

/* misc additions */
.mega-st{margin-top:10px;padding:12px;border-radius:14px;background:var(--panel);font-size:14px;line-height:1.4}
.mega-st a{font-weight:600}
.ft-contact{margin-top:18px}
.ft-contact a{display:inline-flex;gap:10px;align-items:center}
.ft .nen img{width:44px;height:auto;border-radius:6px;background:#fff;padding:3px}
.voorbeeld{max-width:var(--wrap);margin:14px auto 0;padding:0 var(--gut)}
.voorbeeld p{padding:10px 16px;border-radius:12px;background:var(--acc-soft);font-size:14px}
.island .leds i.rcd{width:9px;background:#8fa6bb;box-shadow:none}
.island .leds i{flex:none}
.island .leds{max-width:180px;overflow:hidden}

/* offerte page: catalogue + kast */
.cfg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);grid-template-areas:"steps kast";gap:clamp(24px,3vw,48px);align-items:start;margin-top:clamp(28px,3vw,40px)}
.cfg-steps{grid-area:steps;min-width:0}
.cfg-kast{grid-area:kast;position:sticky;top:calc(var(--hd) + 24px);min-width:0}
.cfg-note{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:0 6px;font-size:14px;color:var(--mute)}
.cfg-note .ic{font-size:18px;color:var(--acc-text);flex:none;margin-top:2px}
.cat-group+.cat-group{margin-top:22px}
.cat-group h3{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--mute);letter-spacing:.03em;margin-bottom:10px}
.cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cat-card{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:12px 12px 12px 12px;border-radius:18px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--line);
  transition:background-color .2s ease,box-shadow .2s ease}
.cat-card.is-on{background:var(--acc-soft);box-shadow:inset 0 0 0 1.5px var(--acc)}
.cat-card .ico{grid-row:span 2;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--paper);font-size:21px;color:var(--acc-text);box-shadow:inset 0 0 0 1px var(--line)}
.cat-card b{font-size:15.5px;font-weight:580;line-height:1.25}
.cat-card small{grid-column:2;font-size:13.5px;color:var(--mute);line-height:1.35}
.cat-card .add{all:unset;box-sizing:border-box;cursor:pointer;grid-row:1 / span 2;grid-column:3;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--canvas);font-size:16px;transition:transform .15s var(--ease-out),background-color .2s ease}
.cat-card .add::after{content:"";position:absolute;inset:0;border-radius:18px}
.cat-card .add:active{transform:scale(.92)}
.cat-card .add:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.cat-card.is-on .add{background:var(--acc);color:var(--on-acc)}
.cat-card .chips{grid-column:1/-1;margin-top:10px;position:relative;z-index:1}
.cat-card .chips .chip{height:36px;padding:0 12px;font-size:14px;background:var(--paper)}
.cat-card .chips .chip[aria-pressed="true"]{background:var(--ink)}
.cat-card.wide{grid-column:1/-1}
.cat-card .cnt{position:absolute;top:10px;right:60px;font-family:var(--mono);font-size:10.5px;color:var(--acc-text)}
.stepnav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}
.stepnav .hint{font-size:14px;color:var(--mute)}
@media (max-width:1100px){
  .cfg{grid-template-columns:1fr;grid-template-areas:"kast" "steps"}
  .cfg-kast{position:relative;top:auto}
}
@media (max-width:720px){
  .m{height:70px;padding:5px 0 4px;border-radius:4px}
  .m .levers{gap:2px;margin-top:5px}
  .m .slot{width:8px;height:30px;border-radius:2px}.m .lever{left:1px;right:1px;height:13px;border-radius:2px}
  .m--hs .slot{width:12px}.m--rcd .slot{width:10px}
  .m .tb,.m .ma{display:none}
  .m .no{font-size:8px;padding:0 3px}
  .m .led{width:7px;height:3px}
  .kb-rail{gap:2px;padding:5px}
  .kb-lab{display:none}
  .kb-legend{display:grid}
  .kb{padding:12px 10px 14px;border-radius:22px}
  .kb-top{padding:0 12px 10px}
  .cat-grid{grid-template-columns:1fr}
  .cfg[data-step="1"] .cfg-kast{position:sticky;top:74px;z-index:6}
  .cfg[data-step="1"] .cfg-kast .kb-legend,.cfg[data-step="1"] .cfg-kast .cfg-note{display:none}
  .qadd{height:44px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .m,.m.is-new,.m.is-new .led,.kb-tag{animation:none;transition:none}
}
.kb-legend li.is-new{animation:wbIn .45s var(--ease-out) both}
.kb-legend{column-gap:18px}
.kb--lg .kb-legend{font-size:11.5px;padding:12px 14px}

/* kast = diensten: code tag on catalogue cards, storing module and legend in red */
.cat-card .ico-col{grid-row:span 2;display:grid;justify-items:center;gap:5px}
.cat-card .ico-col .ico{grid-row:auto}
.cat-card .code{font-family:var(--mono);font-size:10.5px;color:var(--mute)}
.cat-card.is-on .code{color:var(--acc-text)}
.m--urgent .led{background:#ff5a3c;box-shadow:0 0 8px rgba(255,90,60,.9)}
.kb-legend li.is-urgent::before{background:#ff5a3c;box-shadow:0 0 6px rgba(255,90,60,.9)}
.island .leds i.on.urgent{background:#ff5a3c}
.m .no{letter-spacing:0}

/* "Uw aanvraag" card in the teasers (2026-09-27: the approved offerte is B4, a list, so the teaser shows the same list, no kast) */
.av{padding:26px;border-radius:var(--r-tile);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line),var(--shadow-sm)}
.av-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.av-h b{font-size:21px;font-weight:600;letter-spacing:-.01em}
.av-n{font-family:var(--mono);font-size:12px;color:var(--mute)}
.av-list{list-style:none;margin:0;padding:0;display:grid}
.av-list li{display:grid;grid-template-columns:8px minmax(0,1fr) auto 32px;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:16px}
.av-list li i{width:8px;height:8px;border-radius:50%;background:var(--led)}
.av-list li.air i{background:#39a3ff}.av-list li.urg i{background:#ff5a3c}
.av-list code{font-family:var(--mono);font-size:11.5px;color:var(--mute)}
.av-list li.is-new{animation:avIn .22s var(--ease-out) both}
@keyframes avIn{from{opacity:0;transform:translateY(6px)}}
.av-x{all:unset;box-sizing:border-box;cursor:pointer;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:15px;color:var(--mute);transition:background-color .15s ease,color .15s ease}
@media (hover:hover) and (pointer:fine){.av-x:hover{background:var(--canvas);color:var(--carbon)}}
.av-x:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.av-empty{padding:20px 0 4px;color:var(--mute);font-size:15.5px;max-width:34ch}
@media (prefers-reduced-motion:reduce){.av-list li.is-new{animation:none}}

/* ======================================================================
   Website 4 production additions (2026-09-27): parts the live site needs that the mock-up did not have.
   Same tokens as above; state classes are is-*; hover only on fine pointers.
   ====================================================================== */

/* simple page hero (FAQ, contact, privacy) */
.hero--plain{padding-bottom:clamp(40px,5vw,80px)}
.hero--plain .sub{max-width:60ch}
.noscript{margin-top:18px;padding:14px 18px;border-radius:var(--r-in);background:var(--acc-soft);color:var(--ink)}
.proof-h{color:var(--mute);margin-bottom:4px}
.brand-more{margin-top:18px;color:var(--mute);font-size:15px}

/* FAQ: same markup and script as the live site (script.js toggles .open) */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,110px);align-items:start}
.faq-h{position:sticky;top:calc(var(--hd) + 32px)}
.faq-h .lead a{color:var(--acc-text)}
.faq-pro-list{display:grid}
.faq-pro-item{border-top:1px solid var(--line)}
.faq-pro-item:last-child{border-bottom:1px solid var(--line)}
.faq-pro-question{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 2px;font-size:clamp(17px,1.3vw,20px);font-weight:500;letter-spacing:-.01em}
.faq-pro-question:focus-visible{outline:2px solid var(--acc);outline-offset:4px;border-radius:8px}
.faq-pro-question b{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:400;font-size:20px;box-shadow:inset 0 0 0 1px var(--line-2);transition:transform .25s var(--ease-out),background-color .2s ease}
.faq-pro-item.open .faq-pro-question b{transform:rotate(180deg);background:var(--acc-soft);box-shadow:none;color:var(--acc-text)}
.faq-pro-answer{display:none;padding:0 2px 24px;color:var(--mute);max-width:64ch}
.faq-pro-item.open .faq-pro-answer{display:block;animation:faqIn .22s var(--ease-out) both}
.faq-pro-answer p+p,.faq-pro-answer p+ul,.faq-pro-answer ul+p{margin-top:10px}
.faq-pro-answer ul{list-style:disc;padding-left:20px}
.faq-pro-answer a{color:var(--acc-text)}
@keyframes faqIn{from{opacity:0;transform:translateY(-4px)}}
@media (hover:hover) and (pointer:fine){.faq-pro-question:hover b{box-shadow:inset 0 0 0 1px var(--carbon)}}
.faq-search{display:flex;align-items:center;gap:10px;margin-top:26px;padding:0 16px;height:52px;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-2);max-width:420px}
.faq-search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;color:var(--ink);outline:none}
.faq-search:focus-within{box-shadow:inset 0 0 0 2px var(--acc)}

/* prose (privacy, contact) */
.prose{max-width:76ch}
.prose h2{font-size:clamp(26px,2.4vw,36px);font-weight:350;letter-spacing:-.025em;line-height:1.1;margin:44px 0 14px}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose h3{font-size:19px;font-weight:580;margin:28px 0 8px}
.prose p,.prose ul,.prose ol{color:var(--mute);margin-top:12px}
.prose ul{list-style:disc;padding-left:22px}.prose ol{list-style:decimal;padding-left:22px}
.prose li+li{margin-top:6px}
.prose a{color:var(--acc-text)}
.prose strong,.prose b{color:var(--ink);font-weight:580}
.prose--card{padding:clamp(22px,3vw,36px);border-radius:var(--r-tile);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.prose--long{max-width:80ch}

/* contact cards */
.contact-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.cc{display:flex;flex-direction:column;gap:8px;padding:24px;border-radius:var(--r-tile);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;min-height:190px;transition:box-shadow .2s ease,transform .2s var(--ease-out)}
.cc .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--acc-soft);color:var(--acc-text);font-size:22px;margin-bottom:auto}
.cc .mono{color:var(--mute)}
.cc b{font-size:19px;font-weight:560;letter-spacing:-.01em}
.cc small{color:var(--mute);font-size:14.5px}
@media (hover:hover) and (pointer:fine){.cc:hover{box-shadow:inset 0 0 0 1px var(--carbon);transform:translateY(-2px)}}
.kvk{margin-top:18px;color:var(--mute);font-size:14px}

/* cookie notice, newsletter and success popups (markup and script from the live site) */
.cookie-badge{position:fixed;left:16px;bottom:16px;z-index:34;height:38px;padding:0 14px;border-radius:999px;border:0;background:var(--paper);color:var(--carbon);box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow-sm);font:inherit;font-size:13.5px;cursor:pointer;transition:transform .45s var(--spring-soft)}
.cookie-badge.is-accepted{color:#1d8a4e}.cookie-badge.is-rejected{color:var(--warn)}
body.has-island .cookie-badge{transform:translateY(-64px)}
.cookie-popup,.nb-popup,.success-popup{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(10,10,12,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cookie-popup.show,.nb-popup.show,.success-popup.show{display:flex}
.cookie-dialog,.nb-dialog,.success-popup>div{position:relative;width:100%;max-width:440px;padding:32px 28px 26px;border-radius:var(--r-tile);background:var(--paper);color:var(--ink);box-shadow:var(--shadow);text-align:center;animation:popIn .26s var(--ease-out) both}
@keyframes popIn{from{opacity:0;transform:translateY(8px) scale(.97)}}
.cookie-close,.nb-close{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:0;background:transparent;box-shadow:inset 0 0 0 1px var(--line);font-size:20px;line-height:1;cursor:pointer;color:var(--mute)}
.cookie-icon,.nb-icon{width:56px;height:56px;margin:0 auto 14px;border-radius:16px;display:grid;place-items:center;background:var(--acc-soft);color:var(--acc-text);font-size:26px}
.cookie-dialog strong,.nb-dialog strong,.success-popup strong{display:block;font-size:21px;font-weight:580;letter-spacing:-.01em;margin-bottom:8px}
.cookie-dialog p,.nb-dialog p,.success-popup p{color:var(--mute);font-size:15px}
.cookie-more{display:inline-block;color:var(--acc-text);font-weight:580;font-size:14.5px;margin:10px 0 18px;text-decoration:none}
.cookie-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cookie-reject,.cookie-accept,.nb-submit,.success-popup button{height:50px;padding:0 20px;border-radius:999px;border:0;font:inherit;font-weight:580;cursor:pointer;background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2);transition:transform .16s var(--ease-out)}
.cookie-accept,.nb-submit,.success-popup button{background:var(--acc);color:var(--on-acc);box-shadow:none}
.cookie-reject:active,.cookie-accept:active,.nb-submit:active,.success-popup button:active{transform:scale(.97)}
.success-popup button{margin-top:18px;width:100%}
.nb-form{display:grid;grid-template-columns:1fr auto;gap:8px;margin:14px 0 10px}
.nb-form input[type=email]{height:50px;border-radius:999px;border:0;padding:0 18px;font:inherit;background:var(--canvas);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.nb-form input[type=email]:focus{outline:none;box-shadow:inset 0 0 0 2px var(--acc)}
.nb-small{font-size:12.5px;color:var(--mute);margin:0}.nb-small a{color:var(--acc-text)}
.nb-done{color:#1d8a4e;font-weight:580;margin:0}.nb-done[hidden]{display:none}
@media (max-width:720px){
  .faq{grid-template-columns:1fr}.faq-h{position:static}
  .contact-cards{grid-template-columns:1fr 1fr}
  .cookie-actions,.nb-form{grid-template-columns:1fr}
  body.has-island .cookie-badge{transform:translateY(-70px)}
}
@media (max-width:980px) and (min-width:721px){.contact-cards{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){.faq-pro-item.open .faq-pro-answer,.cookie-dialog,.nb-dialog,.success-popup>div{animation:none}.cookie-badge{transition:none}}

/* offerte form extras (photos, newsletter, required marks) */
.req{color:var(--acc-text)}
.hint{font-size:13.5px;color:var(--mute);margin-top:6px}
/* compare slider: no native image drag or text selection while dragging; vertical scrolling stays with the page on touch */
.twin{touch-action:pan-y;user-select:none;-webkit-user-select:none}
.twin img{-webkit-user-drag:none}

/* ---------- werkgebied: buiten de Drechtsteden op aanvraag (2026-10-03) ---------- */
.op-aanvraag{display:flex;gap:10px;align-items:flex-start;margin:18px 0 0;padding:12px 16px;border-radius:14px;background:var(--acc-soft);color:var(--ink);font-size:15px;line-height:1.5;max-width:58ch}
.op-aanvraag>i{flex:0 0 18px;width:18px;height:18px;margin-top:2px;color:var(--acc-text)}
.op-aanvraag>i svg{width:100%;height:100%;display:block}
.op-aanvraag b{font-weight:620}
.wg-buiten{margin-top:16px;color:var(--mute);font-size:15px;line-height:1.5}
.wg-buiten a{color:var(--acc-text)}
.wg-note{display:flex;gap:8px;align-items:flex-start;margin:-2px 0 14px;padding:10px 12px;border-radius:12px;background:var(--acc-soft);color:var(--ink);font-size:14px;line-height:1.45}
.wg-note[hidden]{display:none}
.wg-note>i{flex:0 0 16px;width:16px;height:16px;margin-top:2px;color:var(--acc-text)}
.wg-note>i svg{width:100%;height:100%;display:block}

/* ---------- "Toevoegen" in de dienstenlijst: een knop, geen schakelaar (alleen de hero heeft schakelaars, 2026-10-03) ---------- */
.add-row{all:unset;box-sizing:border-box;cursor:pointer;position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px 0 10px;border-radius:999px;background:var(--panel);font-size:13px;font-weight:560;color:var(--carbon);white-space:nowrap;
  transition:background-color .18s ease,color .18s ease,transform .12s var(--ease-out)}
.add-row>i{display:inline-flex;width:15px;height:15px}
.add-row>i svg{width:100%;height:100%}
.add-row:active{transform:scale(.97)}
.add-row:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.add-row[aria-pressed="true"]{background:var(--acc);color:var(--on-acc)}
@media (hover:hover) and (pointer:fine){.add-row:hover{background:var(--panel-2)}.add-row[aria-pressed="true"]:hover{background:var(--acc-hi)}}
@media (prefers-reduced-motion:reduce){.add-row{transition:none}.add-row:active{transform:none}}

/* ---------- Google-reviews (2026-10-03): gevuld uit reviews.json, verborgen zonder gegevens ---------- */
[data-reviews][hidden],[data-rev-stat][hidden]{display:none}
.stats:has(>[data-rev-stat][hidden]){grid-template-columns:repeat(3,minmax(0,1fr))}
.stars .is-off{opacity:.25}
.quotes blockquote{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.quotes figcaption a{color:inherit}
.rev-more{margin-top:-14px}
.rev-attr{margin-top:18px;color:var(--mute);font-size:13px}
@media (max-width:720px){.stats:has(>[data-rev-stat][hidden]){grid-template-columns:1fr 1fr}}

/* Menu-item Reviews alleen zichtbaar als er Google-reviews op de pagina staan (site.js googleReviews) */
[data-rev-nav][hidden]{display:none!important}

/* ---------- zwevende WhatsApp-knop, alle pagina's (2026-10-03): donker zoals de aanvraagbalk, in de themakleur ---------- */
.wa-fixed{position:fixed;right:20px;bottom:20px;z-index:33;display:flex;align-items:center;gap:10px;height:58px;padding:0 7px 0 8px;border-radius:999px;
  background:#121116;color:#f4f2ee;text-decoration:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 16px 34px -14px rgba(0,0,0,.55);
  transition:transform .22s var(--ease-out)}
html[data-thema="dark"] .wa-fixed{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 16px 34px -14px rgba(0,0,0,.7)}
.wa-fixed .g{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--acc-soft);color:var(--acc-hi);flex:none}
.wa-fixed .g .ic{width:22px;height:22px}
.wa-fixed .t{display:grid;line-height:1.15;padding-right:6px}
.wa-fixed .t b{font-size:15px;font-weight:600}
.wa-fixed .t small{font-size:12.5px;color:rgba(244,242,238,.6);font-variant-numeric:tabular-nums}
.wa-fixed .bi{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--acc);color:var(--on-acc);flex:none;transition:transform .22s var(--ease-out)}
.wa-fixed .bi .ic{width:17px;height:17px}
.wa-fixed:active{transform:scale(.97)}
.wa-fixed:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.wa-fixed:hover .bi{transform:translate(2px,-2px) scale(1.05)}}
/* de aanvraagbalk onderin (smallere schermen over de hele breedte): knop schuift er dan boven */
@media (max-width:1100px){body.has-island .wa-fixed{transform:translateY(-78px)}}
@media (max-width:720px){.wa-fixed{right:12px;bottom:12px;height:52px;gap:8px;padding:0 6px 0 7px}.wa-fixed .g{width:38px;height:38px}.wa-fixed .g .ic{width:20px;height:20px}
  .wa-fixed .t small{display:none}.wa-fixed .bi{width:38px;height:38px}body.has-island .wa-fixed{transform:translateY(-72px)}}
@media (prefers-reduced-motion:reduce){.wa-fixed,.wa-fixed .bi{transition:none}.wa-fixed:active,.wa-fixed:hover .bi{transform:none}}
@media print{.wa-fixed{display:none}}

/* ---------- keuze Elektra of Airco over het hele scherm (ontwerp D, 2026-10-03) ---------- */
.kies{position:fixed;inset:0;z-index:48;opacity:0;transition:opacity .3s ease}
.kies[hidden]{display:none}
.kies.is-open{opacity:1}
.kies.is-closing{opacity:0;transition:opacity .2s ease}
html.kies-open{overflow:hidden}
.kies-split{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr}
.kies-half{all:unset;box-sizing:border-box;cursor:pointer;position:relative;overflow:hidden;display:grid;align-content:end;padding:clamp(28px,4vw,56px);color:#fff;text-decoration:none}
.kies-half.k-el{background:#3a1d08}.kies-half.k-ai{background:#0a2546}
.kies-half img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform .9s var(--ease-out)}
.kies.is-open .kies-half img{transform:scale(1)}
.kies-half::before{content:"";position:absolute;inset:0;z-index:1}
.kies-half.k-el::before{background:linear-gradient(180deg,rgba(244,123,32,.12),rgba(120,50,0,.82))}
.kies-half.k-ai::before{background:linear-gradient(180deg,rgba(11,111,209,.12),rgba(4,40,90,.82))}
.kies-half .kies-in{position:relative;z-index:2;display:grid;gap:10px;justify-items:start;transform:translateY(16px);opacity:0;transition:transform .5s var(--ease-out) .12s,opacity .4s ease .12s}
.kies.is-open .kies-half .kies-in{transform:none;opacity:1}
.kies-half b{font-size:clamp(48px,6vw,96px);font-weight:300;letter-spacing:-.05em;line-height:.95}
.kies-half small{font-size:clamp(15px,1.3vw,18px);opacity:.9;max-width:30ch;line-height:1.4}
.kies-half .go{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#fff;color:#121116;margin-top:8px;transition:transform .2s var(--ease-out)}
.kies-half .go .ic{width:20px;height:20px}
.kies-half:focus-visible{outline:3px solid #fff;outline-offset:-10px}
.kies-half:active .go{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){.kies-half:hover img{transform:scale(1.03)}.kies-half:hover .go{transform:translate(3px,-3px)}}
/* logo en vraag samen op een dichte lichte kaart: leesbaar boven oranje en blauw (founder 2026-10-03) */
.kies-mid{position:absolute;left:50%;top:clamp(20px,4vh,40px);transform:translateX(-50%);z-index:3;display:grid;justify-items:center;gap:8px;text-align:center;pointer-events:none;opacity:0;transition:opacity .4s ease .2s;
  padding:18px 34px 16px;border-radius:26px;background:#fbfaf7;box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 24px 60px -20px rgba(8,10,20,.6)}
.kies.is-open .kies-mid{opacity:1}
.kies-mid img{height:clamp(58px,5.4vw,78px);width:auto}
.kies-mid span{font-size:clamp(16px,1.3vw,19px);font-weight:600;letter-spacing:-.01em;color:#15141a;white-space:nowrap}
.kies-skip{all:unset;cursor:pointer;position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;padding:8px 14px;border-radius:999px;color:#fff;font-size:15px;text-decoration:underline;text-underline-offset:3px;opacity:.9}
.kies-skip:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:720px){
  .kies-split{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
  .kies-half{padding:22px 22px 26px}
  .kies-half.k-ai{padding-bottom:62px} /* ruimte voor "Gewoon rondkijken" */
  .kies-half b{font-size:46px}.kies-half small{font-size:14px}
  .kies-half .go{width:44px;height:44px}
  .kies-mid{top:14px;padding:11px 20px 10px;border-radius:20px;gap:5px}.kies-mid img{height:44px}.kies-mid span{font-size:14px}
  .kies-skip{bottom:12px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){.kies,.kies-half img,.kies-half .kies-in,.kies-mid,.kies-half .go{transition:opacity .2s ease}.kies-half img,.kies-half .kies-in{transform:none}}