/* smart-home: enkel wat specifiek is voor deze pagina. Laadt na site.css. */
h1,h2,h3,p,ul,ol,figure{margin:0;padding:0}
.skip{position:fixed;left:var(--gutter);top:12px;z-index:100;background:var(--white);color:var(--night)!important;padding:12px 18px;border-radius:var(--radius);font:500 14px/1 var(--font-body);transform:translateY(-200%)}
.ph-block{border:1px dashed currentColor;border-radius:var(--radius);padding:16px 18px;font-size:var(--small);line-height:1.5}
.ph-img{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;border:1px dashed currentColor;border-radius:var(--radius);padding:20px;font-size:var(--small);line-height:1.5;overflow:hidden}
.ph-logo{display:flex;align-items:center;justify-content:center;width:140px;height:30px;border:1px dashed rgba(255,255,255,.45);border-radius:var(--radius);background:rgba(244,217,168,.08);color:var(--muted);font:400 11px/1 var(--font-head);letter-spacing:.32em;text-decoration:none}
.js body.home .hd:not(.is-solid) .logo{opacity:0}
.hd-prog{opacity:0;transition:opacity var(--fast) var(--ease)}
.hd.is-solid .hd-prog{opacity:1}
.logo{display:flex;align-items:center;min-height:44px;text-decoration:none;padding:6px 0}
.hl.is-on .ln{animation:tl 350ms linear calc(var(--i)*150ms) both}
.hl.is-on .gl{opacity:1;transition-delay:calc(var(--i)*150ms + 250ms)}
.hero{position:relative;min-height:88svh;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--hh) + 48px) 0 48px;text-align:center}
.hero-bg{position:absolute;inset:0;overflow:hidden}
.hero-main{position:relative;display:flex;flex-direction:column;align-items:center}
.hero h1{font:200 var(--display)/1.02 var(--font-head);letter-spacing:0;color:var(--white);max-width:15ch;margin:0 auto;text-wrap:balance}
.h1-label{display:block;font:400 var(--label)/1.5 var(--font-head);letter-spacing:.32em;text-transform:uppercase;color:var(--muted);margin-bottom:28px}
.hero .actions{margin-top:40px;justify-content:center}
.facts{margin:clamp(56px,8vw,96px) auto 0;display:grid;grid-template-columns:1fr 1fr;max-width:420px;font-size:var(--small);line-height:1.4;color:var(--muted)}
@media (min-width:1024px){
.hero{min-height:100svh;padding-top:calc(var(--hh) + 64px)}
.facts{display:flex;justify-content:center;max-width:none}
}
.band{aspect-ratio:4/3;border-left:0;border-right:0;border-radius:0;justify-content:center;align-items:center;text-align:center;padding:40px var(--gutter)}
.house{order:-1;margin:0 calc(-1*var(--gutter)*.5)}
.house svg{width:100%;height:auto;overflow:hidden}
.house path,.house circle,.house rect{fill:none;stroke:var(--white);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.house .g{stroke:var(--light)}
.house .heat circle{fill:var(--light);fill-opacity:.35}
.house text{font:400 var(--lfs,14px)/1 var(--font-body);fill:var(--muted);stroke:none;letter-spacing:.01em}
.house .nd,.house text.lb{transition:opacity 400ms var(--ease)}
.house .lp,.house .heat,.house .sun,.house .lk-o,.house .lk-c,.house .pv-on,.house .kd,.house .kb,.house .led,.house .hl,.house .flow-l,.house .cable,.house .cbar{transition:opacity 300ms var(--ease)}
.house .lp,.house .heat,.house .sun,.house .lk-o,.house .pv-on,.house .kd,.house .kb,.house .led,.house .hl,.house .flow-l,.house .cable,.house .cbar,.house .ray,.house .flow{opacity:0}
.house .fab{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0);transition:transform 600ms var(--ease)}
#zg{transform-origin:0 0;transition:transform 600ms var(--ease)}
.sw-row{display:none}
.scenes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.scenes button{min-height:52px;padding:10px 16px;text-align:left;background:transparent;color:var(--white);border:1px solid var(--line-dark);border-radius:var(--radius);font:500 14px/1.3 var(--font-body);letter-spacing:.02em;cursor:pointer}
@media (hover:hover){
.scenes button:hover{border-color:rgba(255,255,255,.4)}
}
.scenes button[aria-pressed="true"]{border-color:var(--light);color:var(--light)}
.funcs{margin-top:56px;border-top:1px solid var(--line-dark)}
@media (min-width:1024px){
.house{order:0;margin:0}
.scenes{grid-template-columns:1fr;max-width:340px}
.funcs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-bottom:1px solid var(--line-dark);margin-top:72px}
}
.panels{display:grid;gap:56px;margin-top:64px}
.panel{position:relative;padding-top:40px}
.pl-line line{stroke:var(--ink);stroke-width:1}
.js .pl-line line{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 900ms var(--ease)}
.js .pl-line.is-drawn line{stroke-dashoffset:0}
@media (min-width:768px){
.panels{grid-template-columns:1fr 1fr;gap:0}
.panel:nth-child(2){padding-left:48px;border-left:1px solid var(--line-light)}
}
.zb-grid{display:grid;gap:56px}
.sw-l{font:500 14px/1.35 var(--font-body);color:var(--stone);cursor:pointer;-webkit-user-select:none;user-select:none}
.sw-l{position:relative;transition:color 400ms var(--ease)}
.sw{position:relative;background:none;border:0;padding:0;cursor:pointer;color:var(--ink);border-radius:var(--radius);-webkit-tap-highlight-color:transparent}
.sw svg{position:relative;width:132px;height:auto;overflow:visible}
.sw .pl,.sw .fr,.sw .dv,.sw .rk rect{fill:none;stroke:var(--ink);stroke-width:1.5;vector-effect:non-scaling-stroke;transition:stroke 400ms var(--ease)}
.sw .rk{transition:transform 620ms cubic-bezier(.34,1.56,.5,1)}
.sw .rk-in{transform-box:fill-box;transform-origin:center}
.sw.zap .rk-in{animation:sw-press 620ms var(--ease)}
.sw .zp{fill:none;stroke:var(--light);stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:.22 .78;stroke-dashoffset:0;opacity:0}
.sw.zap .zp{animation:sw-run 900ms cubic-bezier(.45,0,.2,1)}
.sw .led{fill:transparent;stroke:var(--stone);stroke-width:1;vector-effect:non-scaling-stroke;transition:fill 300ms var(--ease) 350ms,stroke 300ms var(--ease) 350ms}
.sw .halo{fill:var(--light);opacity:0;transition:opacity 300ms var(--ease) 350ms}
.sw[aria-checked="false"] .h1,.sw[aria-checked="true"] .h2{opacity:.35}
@media (prefers-reduced-motion:reduce){
.sw .rk{transition:none}
.sw.zap::before,.sw.zap .zp,.sw.zap .rk-in{animation:none}
}
@media (min-width:1024px){
.sw svg{width:156px}
.sw-l{font-size:15px}
}
.tasks{width:100%;border-collapse:collapse;border-top:1px solid var(--line-light)}
.tag{display:inline-flex;align-items:center;justify-content:center;min-width:62px;height:30px;padding:0 12px;border:1px solid var(--ink);border-radius:var(--radius);font:500 13px/1 var(--font-body);letter-spacing:.02em}
.tag.jens{background:var(--ink);color:var(--paper)}
.note{margin-top:28px;font-size:calc(var(--body) + 1px);min-height:3.2em}
.nojs-only{display:block}
.zb-small{margin-top:20px;font-size:var(--small);color:var(--stone);max-width:60ch}
@media (min-width:1024px){
.zb-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:96px;align-items:start}
}
.ww-grid{display:grid;gap:56px}
.steps{position:relative;padding-left:48px}
.rail{position:absolute;left:4px;top:0;width:2px;height:100%;overflow:visible}
.rail line{stroke-width:1.5}
.js .rail-p{stroke-dasharray:1;stroke-dashoffset:1}
.dot{position:absolute;left:-47.5px;top:16px;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--muted);background:var(--night)}
.num{display:block;font:200 40px/1 var(--font-head);color:var(--muted);margin-bottom:16px}
.steps .ph-img{margin-top:28px;aspect-ratio:3/2;max-width:560px}
.ww-photo{margin:28px 0 0;max-width:400px;border-radius:var(--radius);overflow:hidden}
@media (min-width:1024px){
.ww-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:64px;align-items:start}
.steps{padding-left:64px}
.dot{left:-63.5px}
}
.about-photo{aspect-ratio:4/5;width:100%;max-width:260px}
.about-text{max-width:620px}
.about .ph-block{margin-top:28px}
.faq-grid{display:grid;gap:40px}
.pm{position:relative;flex:none;width:16px;height:16px}
.ans{padding:0 40px 28px 0;color:var(--stone);max-width:62ch}
@media (min-width:1024px){
.faq-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:64px}
}
.closer{position:relative;overflow:hidden;text-align:center;padding:calc(var(--section) + 40px) 0}
.has-hl{position:relative}
.closer .actions{margin-top:44px;justify-content:center;align-items:stretch}
@media (min-width:600px){
.closer .actions{align-items:center}
}
.ft{border-top:1px solid var(--line-dark);padding:72px 0 40px;font-size:14px}
.ft-grid{display:grid;gap:48px}
@media (min-width:1024px){
.ft{padding-top:96px}
.ft-grid{grid-template-columns:minmax(0,2fr) 1fr 1fr;gap:40px}
}
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:45;height:calc(64px + env(safe-area-inset-bottom));padding:8px var(--gutter) calc(8px + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1fr;gap:8px;background:var(--night);border-top:1px solid var(--line-dark);transition:transform 300ms var(--ease),visibility 0s}
.mbar.is-hidden{transform:translateY(100%);visibility:hidden;transition:transform 300ms var(--ease),visibility 0s 300ms}
@media (min-width:1024px){
.mbar{display:none}
}
.page-hero{padding:calc(var(--hh) + 32px) 0 36px}
.page-hero h1{font:200 clamp(38px,5.4vw,82px)/1.04 var(--font-head);letter-spacing:0;color:var(--white);max-width:20ch;text-wrap:balance}
.page-hero .h1-label{margin-bottom:16px}
.page-hero .hero-sub{margin:18px 0 0;max-width:60ch;font-size:17px}
.page-hero .actions{margin-top:28px}
.pnav{margin-top:36px}
.pnav .label{margin-bottom:16px}
.pnav ul{display:grid;grid-template-columns:1fr 1fr;font-size:var(--small);line-height:1.4}
.pnav li:nth-child(even){border-left:1px solid var(--line-dark)}
.pnav li:nth-child(n+3){border-top:1px solid var(--line-dark)}
.pnav a{display:flex;align-items:center;min-height:44px;padding:8px 14px;text-decoration:none;background:linear-gradient(var(--light),var(--light)) 14px calc(50% + 12px)/0 1px no-repeat}
.pnav li:nth-child(odd) a{padding-left:0;background-position:0 calc(50% + 12px)}
.dark .pnav a{color:var(--muted)}
.dark .pnav a:focus-visible{color:var(--white)}
.pnav a:focus-visible{background-size:calc(100% - 28px) 1px}
.pnav li:nth-child(odd) a:focus-visible{background-size:calc(100% - 14px) 1px}
@media (hover:hover){
.dark .pnav a:hover{color:var(--white)}
.pnav a:hover{background-size:calc(100% - 28px) 1px}
.pnav li:nth-child(odd) a:hover{background-size:calc(100% - 14px) 1px}
}
@media (min-width:1024px){
.page-hero{padding-top:calc(var(--hh) + 40px)}
.pnav ul{display:flex}
.pnav li,.pnav li:nth-child(n){border-top:0;border-left:1px solid var(--line-dark)}
.pnav li:first-child{border-left:0}
.pnav a,.pnav li:nth-child(odd) a{padding:0 16px;background-position:16px calc(50% + 12px)}
.pnav li:first-child a{padding-left:0;background-position:0 calc(50% + 12px)}
.pnav a:focus-visible,.pnav li:nth-child(odd) a:focus-visible{background-size:calc(100% - 32px) 1px}
.pnav li:first-child a:focus-visible{background-size:calc(100% - 16px) 1px}
.pnav a,.pnav li:nth-child(odd) a{padding:0 24px;background-position:24px calc(50% + 12px)}
.pnav li:first-child a{padding-left:0;background-position:0 calc(50% + 12px)}
.pnav a:focus-visible,.pnav li:nth-child(odd) a:focus-visible{background-size:calc(100% - 48px) 1px}
.pnav li:first-child a:focus-visible{background-size:calc(100% - 24px) 1px}
}
@media (min-width:1024px) and (hover:hover){
.pnav a:hover,.pnav li:nth-child(odd) a:hover{background-size:calc(100% - 48px) 1px}
.pnav li:first-child a:hover{background-size:calc(100% - 24px) 1px}
}
.fl{display:grid;gap:0 40px;border-bottom:1px solid var(--line-dark)}
.fl>li{border-top:1px solid var(--line-dark);padding:28px 0}
.fl h3{display:flex;align-items:center;gap:14px;font:400 var(--h3)/1.25 var(--font-head);margin-bottom:10px}
.fl .fl-lead{color:var(--white);margin-bottom:14px}
.fl-pts{display:grid;gap:8px;font-size:15px;line-height:1.45;color:var(--muted)}
#functies{padding-top:0}
#functies .ww-head{position:static}
#functies .intro{margin-top:16px}
.fx-pin{padding-top:calc(var(--section)*.6)}
.fx-body{display:grid;gap:24px;margin-top:32px}
.fx-stage .hx{order:0;margin:0}
.fx-stage svg{display:block;width:100%;height:auto}
.fx-prog{display:none}
.fx-body .fl>li:first-child{border-top:0}
.fl-body{display:grid;grid-template-rows:1fr}
.fl-body>div{overflow:hidden}
.fl h3 button{all:unset;cursor:pointer;display:flex;align-items:center;gap:14px;min-height:44px}
.fl h3 button:focus-visible{outline:2px solid var(--light);outline-offset:4px}
.fx-tabs{display:none}
.fx-a .fx-track{height:calc(100svh + 6*24svh)}
.fx-a .fx-pin{position:sticky;top:var(--hh);height:calc(100svh - var(--hh));display:flex;flex-direction:column;padding-top:48px;padding-bottom:40px;overflow:hidden}
.fx-a .fx-body{flex:1;min-height:0;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;margin-top:40px}
.fx-a .fx-list{align-self:start;min-width:0}
.fx-a .fx-stage,.fx-a .fx-stage .hx{height:100%;min-height:0}
.fx-a .fx-stage svg{height:100%}
.fx-a .fx-body .fl{display:grid;grid-template-columns:minmax(0,1fr);border:0}
.fx-a .fx-body .fl>li{display:contents}
.fx-a .fx-body .fl>li>h3{grid-column:1;margin:0;padding:4px 0;border-top:1px solid var(--line-dark);opacity:.45;transition:opacity var(--base) var(--ease)}
.fx-a .fx-body .fl>li:first-child>h3{border-top:0;padding-top:0}
.fx-a .fx-body .fl>li.on>h3{opacity:1}
.fx-a .fl-body{grid-row:7;grid-column:1;opacity:0;visibility:hidden;transition:opacity var(--base) var(--ease),visibility 0s var(--base)}
.fx-a .fl>li.on .fl-body{opacity:1;visibility:visible;transition:opacity var(--base) var(--ease)}
.fx-a .fl-body>div{padding-top:12px}
@media (min-height:1000px){
.fx-a .fx-body .fl>li>h3{padding:12px 0}
}
@media (max-height:820px){
.fx-a .fx-pin{padding-top:32px;padding-bottom:24px}
.fx-a .fx-body{margin-top:24px}
.fx-a .fx-body .fl>li>h3{padding:0}
.fx-a .fx-pin .h2{font-size:clamp(32px,3.6vw,52px)}
.fx-a .fx-pin .intro{display:none}
}
.fx-b .fx-track{height:auto}
.fx-b .fx-pin{position:static;height:auto;overflow:visible}
.fx-b .fx-stage .hx{height:auto}
.fx-b .fx-stage svg{--mh:calc(100svh - var(--hh) - 64px - env(safe-area-inset-bottom) - 120px);width:min(100%,calc(var(--mh)*1.5));height:auto;max-height:var(--mh);margin:0 auto}
.fx-b .fx-body .fl{border:0}
.fx-b .fx-body .fl>li{display:none;border:0;padding:0}
.fx-b .fx-body .fl>li.on{display:block}
.fx-b .fx-body .fl>li>h3{display:none}
.fx-b .fx-prog{display:none}
.fx-b .fx-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:24px}
.fx-tabs button{min-height:52px;padding:10px 16px;text-align:left;background:transparent;color:var(--white);border:1px solid var(--line-dark);border-radius:var(--radius);font:500 14px/1.3 var(--font-body);letter-spacing:.02em;cursor:pointer}
@media (hover:hover){
.fx-tabs button:hover{border-color:rgba(255,255,255,.4)}
}
.fx-tabs button[aria-pressed="true"]{border-color:var(--light);color:var(--light)}
@media (min-width:600px){
.fx-b .fx-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:599.98px){
.fx-b .fx-stage{margin:0 calc(-1*var(--gutter))}
.hx .zg{transition-duration:450ms}
.fx-b .fx-tabs{display:flex;flex-wrap:wrap}
.fx-b .fx-tabs button{flex:1 1 auto}
}
.fl .bars{--bar:var(--light)}
.fl .bars i{transform:scaleX(1);opacity:1}
.fl p{color:var(--muted);max-width:60ch}
.panel--list h3{font:300 clamp(26px,2.6vw,38px)/1.15 var(--font-head);margin-bottom:24px}
.links{display:flex;flex-wrap:wrap;gap:8px 32px;margin-top:20px}
@media (max-width:1023.98px){
.bord .scenes button:last-child{grid-column:1/-1}
}
.zelf .btn{margin-top:36px}
.tag{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;min-width:0;height:26px;padding:0 10px;border:1px solid var(--white);border-radius:2px;font:500 12px/1 var(--font-body);letter-spacing:.02em;white-space:nowrap;color:var(--white);background:transparent}
.tag.jens{background:var(--white);border-color:var(--white);color:var(--night)}
.light .tag{border-color:var(--ink);color:var(--ink);background:transparent}
.light .tag.jens{background:var(--ink);color:var(--white)}
.page-hero .hero-sub{max-width:50ch}
.page-hero .btn{white-space:nowrap}
.ph-grid{display:grid;gap:44px}
.wdw .label{margin-bottom:12px}
.wdw-l li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-top:1px solid var(--line-dark);font-size:15px;line-height:1.4;color:var(--white)}
.js .wdw-l li{opacity:0;transform:translateY(var(--rise));transition:opacity 300ms var(--ease),transform 300ms var(--ease);transition-delay:calc(var(--i)*var(--stagger))}
.js .wdw-l.in li{opacity:1;transform:none}
@media (min-width:1024px){
.ph-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:end}
}
.cmp-w{position:relative;margin-top:40px}
html:not(.js) .cmp .bars i,.cmp-w.is-on .bars i{transform:scaleX(1);opacity:1}
.cmp-w.is-on .bars i{transition-delay:calc(var(--r)*120ms + 300ms + var(--k,0ms))}
@media (max-width:1023.98px){
.js .cmp-w.is-on td.one::before{transform:none}
}
.pl-g line{stroke:var(--light);stroke-width:1.5;transition-delay:calc(var(--i,0)*150ms)}
.bd-blocks{display:grid;gap:40px;margin-top:96px}
.bd-blk{position:relative;padding-top:28px}
.bd-blk .pl-line,.why-g .pl-line{position:absolute;top:0;left:0;width:100%;height:2px;overflow:visible}
.bd-blk-h{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.bd-blk .num{margin:0;color:var(--muted)}
.bd-blk h3{font:400 var(--h3)/1.25 var(--font-head);color:var(--white);margin-bottom:10px}
.bd-blk p{font-size:16px;color:var(--muted);max-width:40ch}
@media (min-width:1024px){
.bd-blocks{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
}
.zs-leg{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:13px;color:var(--stone);margin-top:32px}
.zs{margin-top:28px;border-bottom:1px solid var(--line-light)}
.zs li{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-areas:"n h" "n t" "n p";column-gap:16px;padding:28px 0;border-top:1px solid var(--line-light)}
.zs .num{grid-area:n;color:var(--stone);margin:0}
.zs h3{grid-area:h;font:400 var(--h3)/1.25 var(--font-head);color:var(--ink)}
.zs p{grid-area:p;color:var(--stone);max-width:56ch;margin-top:10px}
.js .zs .tag{opacity:0;transform:translateX(6px);transition:opacity 300ms var(--ease),transform 300ms var(--ease)}
.js .zs li.in .tag{opacity:1;transform:none}
@media (min-width:1024px){
.zs li{grid-template-columns:64px minmax(0,1fr) auto;grid-template-areas:"n h t" "n p t"}
}
.kz .intro{max-width:62ch}
.kz .link{margin-top:12px}
.why-g{display:grid;gap:40px}
.why-g li{position:relative;padding-top:24px}
.why-g h3{font:400 20px/1.3 var(--font-head);color:var(--white)}
.closer .why-g p{margin:10px 0 0;font-size:15px;max-width:none;color:var(--muted)}
@media (min-width:1024px){
.why-g{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.faq .ans a{text-decoration:underline;text-underline-offset:4px}
.intro{font-size:var(--body);max-width:58ch}
.sec-head{max-width:820px}
.light + .light{border-top:1px solid var(--line-light)}
.dark + .dark:not(.has-hl){border-top:1px solid var(--line-dark)}
#bord{background:var(--carbon)}
.js .fx-pin.wrap{padding-left:var(--gutter);padding-right:var(--gutter)}
.carbon{background:var(--carbon)}
.tag{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;min-width:0;height:26px;padding:0 10px;border:1px solid var(--white);border-radius:2px;font:500 12px/1 var(--font-body);letter-spacing:.02em;white-space:nowrap;color:var(--white);background:transparent}
.tag.jens{background:var(--white);border-color:var(--white);color:var(--night)}
.light .tag{border-color:var(--ink);color:var(--ink);background:transparent}
.light .tag.jens{background:var(--ink);color:var(--white)}
.tag .sl{display:block;width:1px;height:13px;background:currentColor;transform:rotate(20deg)}
.callouts{display:grid;gap:16px;margin-top:48px}
@media (min-width:1024px){
.callouts{grid-template-columns:1fr 1fr;gap:24px}
}
.callout{position:relative;padding:22px 24px 24px 28px;border:1px solid var(--line-light);border-radius:var(--radius)}
.callout::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:3px;background:var(--light);border-radius:2px 0 0 2px}
.light .callout{background:rgba(255,255,255,.55)}
.light .callout::before{box-shadow:1px 0 0 rgba(11,13,16,.08)}
.dark .callout{border-color:var(--line-dark)}
.callout p{max-width:62ch}
.callout strong{display:block;font:500 var(--body)/1.4 var(--font-body);margin-bottom:6px}
.light .callout strong{color:var(--ink)}
.light .callout p{color:var(--stone)}
.dark .callout strong{color:var(--white)}
.dark .callout p{color:var(--muted)}
.callout .link{margin-top:8px}
.light .bd-blk .num{color:var(--stone)}
.light .bd-blk h3{color:var(--ink)}
.light .bd-blk p{color:var(--stone)}
.light .pl-g line{stroke-width:2}
.bd-photo{margin:0;max-width:320px}
.ph-frame{position:relative;border-radius:var(--radius);overflow:hidden}
.bd-photo img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.bd-photo figcaption{margin-top:14px;font-size:var(--small);line-height:1.5}
.dark .bd-photo figcaption{color:var(--muted)}
.light .bd-photo figcaption{color:var(--stone)}
.why-sec .why-g{margin-top:56px}
.why-g li{position:relative;padding-top:24px}
.why-g .pl-line{position:absolute;top:0;left:0;width:100%;height:2px;overflow:visible}
.why-g h3{font:400 20px/1.3 var(--font-head)}
.why-g p{margin-top:10px;font-size:15px}
.dark .why-g h3{color:var(--white)}
.dark .why-g p{color:var(--muted)}
.light .why-g h3{color:var(--ink)}
.light .why-g p{color:var(--stone)}
@media (min-width:768px){
.why-g{grid-template-columns:1fr 1fr;column-gap:40px;row-gap:48px}
}
@media (min-width:1024px){
.why-g{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.js [data-in] .tag{opacity:0;transform:translateX(var(--rise));transition:opacity 300ms var(--ease),transform 300ms var(--ease)}
.js [data-in].in .tag{opacity:1;transform:none}
.closer p.cl-small{margin-top:28px;font-size:var(--small)}
.faq .ans a{text-decoration:underline;text-underline-offset:4px}
.faq.dark .qa,.faq.dark .qa details{border-color:var(--line-dark)}
.faq.dark .pm::before,.faq.dark .pm::after{background:var(--white)}
.faq.dark .ans{color:var(--muted)}
.faq.dark details[open] summary h3{color:var(--white)}
.faq.dark details[open]{box-shadow:inset 2px 0 0 var(--light)}
.faq.dark details[open] summary,.faq.dark details[open] .ans{padding-left:20px}
.pts{display:grid;gap:32px;margin-top:56px}
.pts li{position:relative;padding-top:24px}
.pts .pl-line{position:absolute;top:0;left:0;width:100%;height:2px;overflow:visible}
.pts .num{font:200 40px/1 var(--font-head);color:var(--stone);margin-bottom:14px}
.pts h3{font:400 20px/1.3 var(--font-head);color:var(--ink);margin-bottom:8px}
.pts p{font-size:15px;line-height:1.55;color:var(--stone);max-width:34ch}
@media (min-width:600px){
.pts{grid-template-columns:1fr 1fr;column-gap:40px;row-gap:48px}
}
@media (min-width:1024px){
.pts{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.vs{display:grid;gap:16px;margin-top:72px}
.vs-col{padding:28px 28px 20px;border:1px solid var(--line-light);border-radius:var(--radius)}
.vs-col .label{margin-bottom:16px}
.vs-col li{padding:12px 0;border-top:1px solid var(--line-light);font-size:16px;line-height:1.45;color:var(--stone)}
.vs-one{position:relative;background:rgba(255,255,255,.55)}
.vs-one::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;background:var(--light);border-radius:2px 2px 0 0}
.vs-one li{display:flex;gap:12px;align-items:flex-start;color:var(--ink)}
.vs-one .bars{--bar:var(--light);margin-top:.55em}
.vs-one .bars i{transform:none;opacity:1}
@media (min-width:1024px){
.vs{grid-template-columns:1fr 1fr;gap:24px}
}
.wie-grid{display:grid;gap:40px}
.zs-leg{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:13px;color:var(--stone);margin-top:28px}
.zs-leg .tag + span{margin-right:12px}
.zs-p{display:inline-flex;align-items:center;gap:10px}
.tl{border-bottom:1px solid var(--line-light)}
.tl li{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;column-gap:16px;padding:18px 0;border-top:1px solid var(--line-light)}
.tl-n{font:200 24px/1 var(--font-head);color:var(--stone)}
.tl-h{display:block;font-size:var(--body);color:var(--ink);font-weight:500}
.tl li:nth-child(5){box-shadow:inset 3px 0 0 var(--light);padding-left:12px}
.wie-after{margin-top:28px;color:var(--stone);max-width:58ch}
.wie .link{margin-top:6px}
@media (min-width:1024px){
.wie-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:80px}
.wie-head{top:calc(var(--hh) + 48px);align-self:start}
}
.bb-grid{display:grid;gap:48px;margin-top:56px;align-items:start}
.bb-photo{max-width:420px}
.bb-blocks{margin-top:0}
@media (min-width:1024px){
.bb-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:80px}
.bb-blocks{grid-template-columns:1fr;gap:40px}
}
.mk{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--light);color:var(--ink);font:500 13px/1 var(--font-body);box-shadow:0 0 0 4px rgba(244,217,168,.28)}
.cl-check{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px;margin-top:40px;font-size:15px;color:var(--white)}
.cl-check li{display:flex;align-items:center;gap:10px}
.cl-check .bars{--bar:var(--light)}
.cl-check .bars i{transform:none;opacity:1}
.zs{margin-top:8px}
.callouts.one{grid-template-columns:1fr;margin-top:32px}
.ka-cols{display:grid;gap:56px;margin-top:64px}
.ka-col{position:relative;padding-top:32px}
.ka-col .pl-line{position:absolute;top:0;left:0;width:100%;height:2px;overflow:visible}
.ka-col h3{font:300 clamp(28px,2.6vw,36px)/1.1 var(--font-head);color:var(--white)}
.ka-col .label{margin:12px 0 24px}
.ka-lead{font-weight:500;margin-bottom:12px;color:var(--white)}
.ka-list{border-bottom:1px solid var(--line-dark)}
.ka-list li{display:flex;gap:14px;align-items:flex-start;border-top:1px solid var(--line-dark);padding:14px 0;font-size:16px;line-height:1.5;color:var(--white)}
.ka-list .bars{--bar:var(--light);margin-top:.6em}
.ka-list .bars i{transform:none;opacity:1}
.ka-after{margin-top:48px;color:var(--muted);max-width:62ch}
.kz .link{margin-top:8px}
@media (min-width:768px){
.ka-cols{grid-template-columns:1fr 1fr;gap:64px}
}
.hx{position:relative;margin:0 calc(-1*var(--gutter))}
.hx svg{display:block;width:100%;height:auto;overflow:hidden}
.hx :is(path,circle,rect,ellipse,line){fill:none;stroke:var(--white);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.hx .gold{stroke:var(--light)}
.hx .glow{fill:var(--light);fill-opacity:.2;stroke:none;filter:url(#sh-blur)}
.hx .glow.soft{fill-opacity:.12}
.hx .glow.strong{fill-opacity:.38}
.hx .mask{fill:var(--night)}
.hx .fill{fill:var(--white);fill-opacity:.14;stroke:none}
.hx .dot{fill:var(--light);stroke:none}
.hx text{font-family:var(--font-body);font-size:var(--fs,12px);font-weight:400;fill:var(--muted);stroke:none;dominant-baseline:middle;letter-spacing:.01em}
.hx text.lw{fill:var(--white)}
.hx .o,.hx .only,.hx .op,.hx .lw{transition:opacity 300ms var(--ease)}
.hx[data-m="thuis"] .o:not(.mt),
.hx[data-m="weg"] .o:not(.mw),
.hx[data-m="zon"] .o:not(.mz),
.hx[data-m="slaap"] .o:not(.ms),
.hx[data-m="stroom"] .o:not(.me){opacity:.35}
.hx .only,.hx .op,.hx .lw{opacity:0}
.hx[data-m="thuis"] .only.mt,
.hx[data-m="weg"] .only.mw,
.hx[data-m="zon"] .only.mz,
.hx[data-m="slaap"] .only.ms,
.hx[data-m="stroom"] .only.me{opacity:1}
.hx .leaf{transform-box:fill-box;transform-origin:0 50%;transition:transform 600ms var(--ease),opacity 400ms var(--ease) 200ms}
.hx .fab{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0);transition:transform 900ms var(--ease)}
.hx .heat{opacity:0;transform:translateY(10px);transition:opacity 500ms var(--ease),transform 900ms var(--ease)}
.hx .ray{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 450ms var(--ease)}
.hx .ray.flow{transition-duration:500ms}
.hx .car{transition:transform 1000ms var(--ease)}
.hx[data-m="weg"] .car{transition-timing-function:cubic-bezier(.5,0,.75,.4)}
.hx .bar{stroke-width:4;transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0);transition:transform 1500ms var(--ease) 150ms}
.hx.snap,.hx.snap *{transition:none!important}
.hx[data-m="stroom"][data-st="0"] .op.k-e0123,
.hx[data-m="stroom"][data-st="1"] .op.k-e0123,
.hx[data-m="stroom"][data-st="2"] .op.k-e0123,
.hx[data-m="stroom"][data-st="3"] .op.k-e0123,
.hx[data-m="stroom"][data-st="1"] .op.k-e123,
.hx[data-m="stroom"][data-st="2"] .op.k-e123,
.hx[data-m="stroom"][data-st="3"] .op.k-e123,
.hx[data-m="stroom"][data-st="2"] .op.k-e23,
.hx[data-m="stroom"][data-st="3"] .op.k-e23,
.hx[data-m="stroom"][data-st="3"] .op.k-e3,
.hx[data-m="slaap"][data-st="0"] .op.k-s01,
.hx[data-m="slaap"][data-st="1"] .op.k-s01,
.hx[data-m="slaap"][data-st="1"] .op.k-s12,
.hx[data-m="slaap"][data-st="2"] .op.k-s12,
.hx[data-m="slaap"][data-st="2"] .op.k-s2,
.hx[data-m="thuis"][data-st="1"] .op.k-t12,
.hx[data-m="thuis"][data-st="2"] .op.k-t12,
.hx[data-m="thuis"][data-st="2"] .op.k-t23,
.hx[data-m="thuis"][data-st="3"] .op.k-t23,
.hx[data-m="thuis"][data-st="3"] .op.k-t3,
.hx[data-m="weg"][data-st="0"] .op.k-w01,
.hx[data-m="weg"][data-st="1"] .op.k-w01,
.hx[data-m="weg"][data-st="0"] .op.k-w012,
.hx[data-m="weg"][data-st="1"] .op.k-w012,
.hx[data-m="weg"][data-st="2"] .op.k-w012,
.hx[data-m="weg"][data-st="0"] .op.k-w0123,
.hx[data-m="weg"][data-st="1"] .op.k-w0123,
.hx[data-m="weg"][data-st="2"] .op.k-w0123,
.hx[data-m="weg"][data-st="3"] .op.k-w0123,
.hx[data-m="weg"][data-st="1"] .op.k-w123,
.hx[data-m="weg"][data-st="2"] .op.k-w123,
.hx[data-m="weg"][data-st="3"] .op.k-w123,
.hx[data-m="weg"][data-st="2"] .op.k-w23,
.hx[data-m="weg"][data-st="3"] .op.k-w23,
.hx[data-m="weg"][data-st="3"] .op.k-w3,
.hx[data-m="zon"][data-st="0"] .op.k-z0123,
.hx[data-m="zon"][data-st="1"] .op.k-z0123,
.hx[data-m="zon"][data-st="2"] .op.k-z0123,
.hx[data-m="zon"][data-st="3"] .op.k-z0123,
.hx[data-m="zon"][data-st="1"] .op.k-z12,
.hx[data-m="zon"][data-st="2"] .op.k-z12,
.hx[data-m="zon"][data-st="1"] .op.k-z123,
.hx[data-m="zon"][data-st="2"] .op.k-z123,
.hx[data-m="zon"][data-st="3"] .op.k-z123,
.hx[data-m="zon"][data-st="2"] .op.k-z23,
.hx[data-m="zon"][data-st="3"] .op.k-z23{opacity:1}
.hx[data-m="thuis"][data-st="3"] .heat.k-t3,
.hx[data-m="weg"][data-st="0"] .heat.k-w01,
.hx[data-m="weg"][data-st="1"] .heat.k-w01{opacity:1;transform:none}
.hx[data-m="slaap"][data-st="2"] .fab.k-s2,
.hx[data-m="zon"][data-st="3"] .fab.k-z3{transform:scaleY(1)}
.hx[data-m="thuis"][data-st="3"] .leaf.k-t3{transform:scaleX(.3);opacity:0}
.hx[data-m="stroom"][data-st="2"] .ray.k-e23,
.hx[data-m="stroom"][data-st="3"] .ray.k-e23,
.hx[data-m="zon"][data-st="1"] .ray.k-z123,
.hx[data-m="zon"][data-st="2"] .ray.k-z123,
.hx[data-m="zon"][data-st="3"] .ray.k-z123{stroke-dashoffset:0}
.hx[data-m="thuis"][data-st="0"] .car.k-t0,
.hx[data-m="weg"][data-st="3"] .car.k-w3{transform:translateX(440px)}
.hx[data-m="stroom"][data-st="3"] .bar.k-e3{transform:scaleX(1)}
.hx[data-m="stroom"][data-st="1"] .lb.k-e123 .lw,
.hx[data-m="stroom"][data-st="2"] .lb.k-e123 .lw,
.hx[data-m="stroom"][data-st="3"] .lb.k-e123 .lw,
.hx[data-m="stroom"][data-st="2"] .lb.k-e23 .lw,
.hx[data-m="stroom"][data-st="3"] .lb.k-e23 .lw,
.hx[data-m="stroom"][data-st="3"] .lb.k-e3 .lw,
.hx[data-m="slaap"][data-st="1"] .lb.k-s12 .lw,
.hx[data-m="slaap"][data-st="2"] .lb.k-s12 .lw,
.hx[data-m="slaap"][data-st="2"] .lb.k-s2 .lw,
.hx[data-m="thuis"][data-st="2"] .lb.k-t23 .lw,
.hx[data-m="thuis"][data-st="3"] .lb.k-t23 .lw,
.hx[data-m="thuis"][data-st="3"] .lb.k-t3 .lw,
.hx[data-m="weg"][data-st="1"] .lb.k-w123 .lw,
.hx[data-m="weg"][data-st="2"] .lb.k-w123 .lw,
.hx[data-m="weg"][data-st="3"] .lb.k-w123 .lw,
.hx[data-m="weg"][data-st="2"] .lb.k-w23 .lw,
.hx[data-m="weg"][data-st="3"] .lb.k-w23 .lw,
.hx[data-m="zon"][data-st="2"] .lb.k-z23 .lw,
.hx[data-m="zon"][data-st="3"] .lb.k-z23 .lw,
.hx[data-m="zon"][data-st="3"] .lb.k-z3 .lw{opacity:1}
.hx{margin:0}
.hx .zg{transition:transform 600ms var(--ease)}
.hx[data-m="licht"][data-st="1"] :is(.op,.only).f-l,.hx[data-m="licht"][data-st="1"] .lb.f-l .lw,
.hx[data-m="warm"][data-st="1"] :is(.op,.only).f-w,.hx[data-m="warm"][data-st="1"] .lb.f-w .lw,
.hx[data-m="toegang"][data-st="1"] :is(.op,.only).f-a1,.hx[data-m="toegang"][data-st="1"] .lb.f-a1 .lw,.hx[data-m="toegang"][data-st="2"] :is(.op,.only).f-a1,.hx[data-m="toegang"][data-st="2"] .lb.f-a1 .lw,
.hx[data-m="toegang"][data-st="1"] :is(.op,.only).f-a1x,.hx[data-m="toegang"][data-st="1"] .lb.f-a1x .lw,
.hx[data-m="toegang"][data-st="2"] :is(.op,.only).f-a2,.hx[data-m="toegang"][data-st="2"] .lb.f-a2 .lw,
.hx[data-m="veilig"][data-st="1"] :is(.op,.only).f-v,.hx[data-m="veilig"][data-st="1"] .lb.f-v .lw{opacity:1}
.hx[data-m="veilig"][data-st="1"] .op.f-vd{opacity:.5}
.hx[data-m="warm"][data-st="1"] .heat.f-w{opacity:1;transform:none}
.hx[data-m="toegang"][data-st="2"] .leaf.f-a2{transform:scaleX(.3);opacity:0}
.hx[data-m="veilig"][data-st="1"] .fab.f-v{transform:scaleY(1)}
.tlx li{display:block;padding:0}
.tlx summary{display:grid;grid-template-columns:40px minmax(0,1fr) auto 16px;align-items:center;column-gap:16px;min-height:60px;padding:14px 0;cursor:pointer;list-style:none}
.tlx summary::-webkit-details-marker{display:none}
.tlx .tl-h{font:500 var(--body)/1.4 var(--font-body);color:var(--ink)}
.tlx .tl-a{padding:0 32px 22px 56px;color:var(--stone);max-width:62ch}
.tlx .tl-a a{text-decoration:underline;text-underline-offset:4px;margin-left:4px}
.tlx details[open]{box-shadow:inset 3px 0 0 var(--light)}
.tlx details[open] summary{padding-left:12px}
.tlx details[open] .tl-a{padding-left:68px;animation:ans 320ms var(--ease)}
.tlx .pm::before,.tlx .pm::after{background:var(--ink)}
.tl li:nth-child(5){box-shadow:none;padding-left:0}
.wie .callouts.one{grid-template-columns:1fr;margin-top:32px}
@media (max-width:599.98px){
.tlx summary{grid-template-columns:32px minmax(0,1fr) 16px;row-gap:8px}
.tlx summary .tag{grid-column:2;grid-row:2;justify-self:start}
.tlx summary .pm{grid-column:3;grid-row:1}
.tlx .tl-a{padding-left:48px;padding-right:0}
.tlx details[open] .tl-a{padding-left:60px}
}
.br{margin-top:96px;padding-top:40px;border-top:1px solid var(--line-dark)}
.br .label{margin-bottom:20px}
.br-btns{margin-bottom:32px}
html:not(.js) .br-btns{display:none}
.br .br-btns{max-width:none}
@media (min-width:768px){
.br .br-btns{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (max-width:767.98px){
.br-btns button:last-child{grid-column:1/-1}
}
.fw + .fw{margin-top:40px}
.fw-name{font:400 var(--h3)/1.25 var(--font-head);color:var(--white);margin-bottom:16px}
.js .fw-name{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.js .fw{display:none}
.js .fw.on{display:block}
.js .fw + .fw{margin-top:0}
.fw-steps{display:grid;gap:12px}
.fw-steps li{position:relative;padding:24px 24px 26px;border:1px solid var(--line-dark);border-radius:var(--radius)}
.fw-steps li:nth-child(2){border-color:rgba(244,217,168,.55);box-shadow:0 0 28px rgba(244,217,168,.08)}
.fw-n{display:block;font:200 40px/1 var(--font-head);color:var(--light);margin-bottom:14px}
.fw-steps .label{margin-bottom:8px}
.fw-steps p{color:var(--white);font-size:16px;line-height:1.5;max-width:36ch}
@media (min-width:1024px){
.fw-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.fw-steps li{border-radius:0}
.fw-steps li + li{border-left:0}
.fw-steps li:nth-child(2){border-left:1px solid rgba(244,217,168,.55)}
.fw-steps li:nth-child(3){border-left:0}
}
.rich .label{color:var(--stone)}
.rich .h2{color:var(--ink)}
.rich .pts{position:relative;overflow:hidden;background:var(--ink);color:var(--white);padding:44px 28px 40px;border-radius:var(--radius);row-gap:40px}
.rich .pts::before{display:none}
.rich .pts::after{content:"";position:absolute;left:0;right:0;top:0;height:160px;background:radial-gradient(ellipse 60% 100% at 50% 0%,rgba(244,217,168,.17),rgba(244,217,168,.06) 45%,rgba(244,217,168,0) 75%);pointer-events:none}
.rich .pts li{z-index:1}
.rich .pts .num{font-size:56px;color:var(--light)}
.rich .pts h3{color:var(--white)}
.rich .pts p{color:var(--muted)}
.rich .pts .pl-line line{stroke:rgba(255,255,255,.18)}
@media (min-width:1024px){
.rich .pts{padding:60px 48px 56px;column-gap:48px}
}
.rich .vs-col{border-color:rgba(11,13,16,.24);background:var(--white)}
.rich .vs-col li{border-top-color:var(--line-light)}
.rich .vs-one{background:var(--ink);border-color:var(--ink);box-shadow:0 24px 48px -28px rgba(11,13,16,.55)}
.rich .vs-one::before{display:none}
.rich .vs-one .label{color:var(--muted)}
.rich .vs-one li{color:var(--white);border-top-color:var(--line-dark)}
.rich .callout{background:var(--ink);border-color:var(--ink);padding:26px 28px 28px}
.rich .callout::before{display:none}
.rich .callout strong{color:var(--white)}
.rich .callout p{color:var(--muted)}
.rich .callout a{color:var(--white)}
.rich.wie .wie-head{position:relative;overflow:hidden;background:var(--ink);color:var(--white);padding:40px 28px 36px;border-radius:var(--radius)}
.rich.wie .wie-head::before{display:none}
.rich.wie .wie-head::after{content:"";position:absolute;left:0;right:0;top:0;height:150px;background:radial-gradient(ellipse 70% 100% at 30% 0%,rgba(244,217,168,.16),rgba(244,217,168,0) 75%);pointer-events:none}
.rich.wie .wie-head > *{position:relative;z-index:1}
.rich.wie .wie-head .label{color:var(--muted)}
.rich.wie .wie-head .h2{color:var(--white)}
.rich.wie .wie-head .intro,.rich.wie .wie-head .zs-leg{color:var(--muted)}
.rich.wie .wie-head .tag{border-color:var(--white);color:var(--white)}
.rich.wie .wie-head .tag.jens{background:var(--white);border-color:var(--white);color:var(--ink)}
@media (min-width:1024px){
.rich.wie .wie-head{padding:52px 44px 48px}
}
@media (min-width:1024px) and (min-height:880px){
.ww-head{position:sticky;top:calc(var(--hh) + 48px)}
#functies .ww-head{position:static}
.wie-head,.rich.wie .wie-head{position:sticky}
}
.rich .tl li:first-child{border-top:2px solid var(--ink)}
.rich .tl{border-bottom-color:var(--ink)}
.rich .tl-n{font-size:28px;font-weight:300;color:var(--ink)}
.rich .tlx .tag.jens{background:var(--white);border-color:var(--ink);color:var(--ink)}
.rich .tlx details{transition:background var(--fast) var(--ease)}
@media (hover:hover){
.rich .tlx details:not([open]):hover{background:rgba(0,0,0,.025)}
}
.rich .tlx details[open]{background:transparent;box-shadow:inset 3px 0 0 var(--gold-ink)}
.rich .tlx details[open] .tl-n{color:var(--gold-ink)}
.rich .tlx details[open] .tl-a{color:var(--ink)}
.rich .wie-after{color:var(--stone)}
@media (max-height:500px) and (orientation:landscape){
.hero,.page-hero{min-height:0}
.hero h1{font-size:clamp(36px,6vw,56px)}
.page-hero h1{font-size:min(clamp(38px,5.4vw,82px),clamp(36px,6vw,56px))}
.ww-head,.wie-head,.rich.wie .wie-head,.zb5-photo,.fx-pin{position:static}
.fx-b .fx-body{grid-template-columns:minmax(0,7fr) minmax(220px,5fr);gap:24px;align-items:start;margin-top:20px}
.fx-b .fx-stage{margin:0}
.fx-b .fx-stage svg{--mh:calc(100svh - var(--hh) - 24px)}
}
@media (max-height:500px) and (orientation:landscape) and (max-width:1023.98px){
.fx-b .fx-stage svg{--mh:calc(100svh - var(--hh) - 24px - 64px - env(safe-area-inset-bottom))}
.fx-b .fx-tabs{display:flex;flex-wrap:wrap}
.fx-b .fx-tabs button{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){
.hl .ln,.hl .gl{opacity:1!important}
}
.ws{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity 300ms cubic-bezier(.2,.7,.2,1),visibility 0s 300ms}
.ws-b{position:relative;overflow:hidden;width:min(100%,480px);background:#0E0F11;color:#fff;border:1px solid rgba(255,255,255,.14);border-radius:2px;padding:52px 32px 36px;transform:translateY(14px);transition:transform 450ms cubic-bezier(.2,.7,.2,1);box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.ws-b>*{position:relative;z-index:1}
.ws-l{display:block;font:400 12px/1.5 "Jost","Jost Fallback",system-ui,sans-serif;letter-spacing:.32em;text-transform:uppercase;color:#A1A8B0;margin:0 0 20px}
.ws-h{margin:0;font:200 clamp(30px,5vw,40px)/1.12 "Jost","Jost Fallback",system-ui,sans-serif;color:#fff;text-wrap:balance}
.ws-x{display:inline-flex;align-items:center;gap:12px;min-height:52px;margin-top:36px;padding:0 26px;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5);border-radius:2px;font:500 14px/1 "Inter","Inter Fallback",system-ui,sans-serif;letter-spacing:.02em;cursor:pointer}