/* Approved interactive house, scoped to the homepage. */
.house-materials{position:absolute;left:0;top:0;width:2048px;height:1152px;transform-origin:0 0;pointer-events:none}
.house-window{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden}
.house-window>svg{display:block;width:100%;height:100%;overflow:hidden}
.shutter-curtain{position:absolute;inset:0;overflow:hidden;will-change:transform}
.shutter-texture{position:absolute;left:0;top:0;width:2048px;height:1152px;max-width:none;transform-origin:0 0}
.shutter-curtain>svg{position:absolute;inset:0;width:100%;height:100%}
.site-home .house-hero{display:block;min-height:0;background:var(--warm2);padding:112px 28px 0;overflow:hidden}
.house-hero::before{display:none}
.site-home .nav{background:rgba(250,248,245,.94);color:var(--navy);border-bottom:1px solid var(--rand)}
.site-home .nav ul a.actief{color:var(--blauw-h)}
.house-intro{max-width:1280px;margin:0 auto 30px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end}
.house-eyebrow{font-size:11px;letter-spacing:.16em;font-weight:700;color:var(--blauw-h)}
.house-hero h1{font-size:clamp(34px,4vw,58px);line-height:1.06;color:var(--navy);text-shadow:none;margin:12px 0 0;max-width:none;letter-spacing:-.04em}
.house-intro-copy{max-width:480px;padding-bottom:3px}.house-intro-copy p{font-size:16px;line-height:1.65;color:var(--t2);margin:0 0 18px}
.house-phone{font-size:14px;font-weight:600;color:var(--navy);text-decoration:none}
.house-demo{position:relative;max-width:1440px;margin:auto;aspect-ratio:1344/752;border-radius:22px;overflow:hidden;background:#b6bdbb;isolation:isolate}
.house-canvas{position:absolute;inset:0}.house-canvas>img,.house-shades{position:absolute;width:100%;height:100%;inset:0;display:block}.house-canvas>img{max-width:none}
.shade-panel{transition:transform 1.8s cubic-bezier(.45,0,.25,1);will-change:transform}.screen-panel{transform:translateY(-205px)}.shutter-panel{transform:translateY(-215px)}
.house-demo.screens-closed .screen-panel,.house-demo.shutters-closed .shutter-panel{transform:translateY(0)}
.house-toggle{position:absolute;left:73.8%;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:22px;padding:17px 20px;border-radius:22px;border:1px solid #ffffffaa;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);color:var(--navy);text-align:left;cursor:pointer;font-family:inherit;box-shadow:0 8px 28px #18273618;transition:background .2s,box-shadow .2s;min-width:175px}
.house-toggle:hover{background:white;box-shadow:0 8px 28px #18273635}.house-toggle:focus-visible{outline:3px solid #4a90b8;outline-offset:5px}.house-toggle:disabled{cursor:default;opacity:.7}
.house-toggle strong{display:block;font-size:19px;font-weight:600;line-height:1.2}.house-toggle small{display:block;font-size:11px;margin-top:5px;color:#475664}.toggle-arrow{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--licht);font-size:20px;color:var(--blauw-h)}
.toggle-screens{top:23.5%}.toggle-shutters{top:56%}.house-caption{position:absolute;bottom:20px;left:24px;color:white;background:#152733a6;border:1px solid #ffffff35;border-radius:50px;padding:10px 16px;display:flex;gap:8px;align-items:center;font-size:12px;backdrop-filter:blur(10px)}.house-dot{width:6px;height:6px;background:#c7e5d8;border-radius:50%}
.house-foot{max-width:1280px;margin:auto;display:flex;justify-content:space-between;gap:15px;padding:18px 0 24px;font-size:12px;color:var(--t2)}.house-rating{color:#ad7500;letter-spacing:1px}.house-rating b{color:var(--navy);letter-spacing:0;margin-left:7px;font-weight:600}
.house-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.house-nojs{text-align:center;padding:16px}
@media(max-width:860px){.site-home .house-hero{padding:95px 16px 0}.house-intro{grid-template-columns:1fr;gap:16px;margin-bottom:24px}.house-hero h1{font-size:38px;line-height:1.08;margin-top:10px}.house-intro-copy{max-width:560px}.house-intro-copy p{font-size:14px;line-height:1.6;margin-bottom:16px}.house-hero .acties{gap:14px}.house-hero .acties .knop{padding:13px 18px}.house-phone{font-size:12px}.house-demo{aspect-ratio:4/4.5;border-radius:16px}.house-canvas{width:180%;height:100%;left:-40%}.house-canvas>img{object-fit:fill}.house-shades{overflow:visible}.house-toggle{left:auto;right:10px;min-width:0;gap:10px;padding:11px 12px;border-radius:15px}.house-toggle strong{font-size:15px}.house-toggle small{font-size:10px}.toggle-arrow{width:27px;height:27px;font-size:17px}.toggle-screens{top:25%}.toggle-shutters{top:59%}.house-caption{left:12px;bottom:12px;right:12px;justify-content:center;padding:9px 6px;font-size:10px}.house-foot{flex-direction:column;align-items:center;gap:7px;text-align:center;padding:16px 0 22px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.shade-panel,.house-toggle{transition:none}}
/* Keep the photograph and its SVG in exactly the same coordinate system. */
@media(max-width:860px){.house-canvas{width:201.064%;height:auto;aspect-ratio:1344/752;left:-48%;bottom:auto}.house-canvas>img{object-fit:contain}}

.house-mobile-leaders{display:none}
@media(max-width:860px){.house-leaders{display:none}.house-mobile-leaders{display:block}.house-toggle{left:12px;right:auto}.toggle-screens{top:3%}.toggle-shutters{top:auto;bottom:4%}.house-caption{display:none}}
@media(max-width:380px){.site-home .nav{padding:12px}.site-home .nav .logo{font-size:22px;white-space:nowrap}.site-home .nav .in{gap:8px}.site-home .nav .rechts{gap:8px}.site-home .nav .tel{font-size:11px;padding:9px;white-space:nowrap}.site-home .werk-grid{grid-template-columns:minmax(0,1fr)}.site-home .werkfoto{min-width:0}}

/* Real generated footage inside each window, with independent playback. */
.house-video{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}.video-screens{clip-path:url(#video-clip-screens)}.video-shutters{clip-path:url(#video-clip-shutters)}.house-shades{pointer-events:none}

.house-video{opacity:0}

/* 4K fixed geometry: materials move inside unchanged window frames. */
.house-demo{aspect-ratio:16/9}.house-canvas{aspect-ratio:16/9}
.toggle-shutters{top:23.5%;bottom:auto}.toggle-screens{top:58%;bottom:auto}
@media(max-width:860px){.house-demo{aspect-ratio:4/4.5}.house-canvas{width:200%;left:-48%;aspect-ratio:16/9;height:auto}.toggle-shutters{top:3%;bottom:auto}.toggle-screens{top:auto;bottom:4%}}
/* Full-bleed house: keep all controls in the photograph's coordinate system. */
.site-home .house-hero{padding:0;position:relative;min-height:0;background:#b8cede}
.house-demo{width:100%;max-width:none;height:max(56.25vw,calc(100svh - 28px));aspect-ratio:auto;border-radius:0;background:#b8cede;overflow:hidden}
.house-canvas{width:100%;height:auto;aspect-ratio:16/9;inset:auto 0 0;left:0;bottom:0}
.house-intro{position:absolute;top:clamp(110px,16vw,250px);left:3%;z-index:3;width:21%;max-width:320px;display:block;margin:0;color:white;pointer-events:none}
.house-intro a{pointer-events:auto}.house-eyebrow{color:white;font-size:10px;letter-spacing:.1em}
.house-hero h1{color:white;font-size:clamp(26px,2.65vw,43px);text-shadow:0 2px 18px #10223180;line-height:1.08}
.house-intro-copy p{color:white;font-size:14px;line-height:1.55;margin:16px 0 20px;text-shadow:0 1px 8px #102231}
.house-intro .acties{gap:14px}.house-phone{color:white}.house-intro .knop{font-size:13px;padding:13px 17px;white-space:nowrap}
.house-demo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(15,27,45,.63),rgba(15,27,45,.12) 25%,transparent 43%);z-index:1}
.house-toggle{z-index:4}.house-canvas{z-index:2}.house-canvas::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(15,27,45,.63),rgba(15,27,45,.12) 25%,transparent 43%)}
.house-caption,.house-foot{display:none}
@media(max-width:860px){
 .site-home .house-hero{padding:0}.house-demo{height:max(720px,calc(100svh - 28px));background:linear-gradient(#bdd4e8,#e3edf3 48%,#c4d3cf)}
 .house-canvas{width:200%;height:auto;left:-48%;top:auto;bottom:0;aspect-ratio:16/9}
 .house-demo::after,.house-canvas::after{display:none}
 .house-intro{top:96px;left:20px;right:20px;width:auto;max-width:430px;color:var(--navy)}
 .house-eyebrow{color:#315972}.house-hero h1{font-size:32px;color:var(--navy);text-shadow:none;margin-top:8px}
 .house-intro-copy p{display:none}.house-intro .acties{margin-top:16px;gap:16px}.house-phone{color:var(--navy)}
 .house-intro .knop{padding:12px 16px}.house-toggle{z-index:4}
}
@media(min-width:600px) and (max-width:860px){.house-demo{height:max(1000px,calc(100svh - 28px))}}
@media(max-width:600px){
 .house-demo{height:max(680px,min(760px,calc(100svh - 28px)))}
 .house-canvas{width:230%;left:-62%}
 .house-toggle{left:calc(26.9565% + 12px);right:auto}
}
@media(min-width:601px) and (max-width:860px){.house-toggle{left:calc(24% + 12px);right:auto}}
/* Matching glass surfaces; the desktop photograph determines its own height. */
@media(min-width:861px){
 .house-demo{height:auto;aspect-ratio:16/9}
 .house-canvas{inset:0;width:100%;height:100%}
 .house-intro{top:clamp(112px,12vw,190px);left:2.5%;width:23%;max-width:350px;padding:clamp(18px,1.7vw,28px)}
 .house-hero h1{font-size:clamp(24px,2.3vw,37px)}
 .house-intro-copy p{font-size:13px}
 .house-intro .acties{gap:12px}
}
.house-intro,.house-toggle{
 background:rgba(36,52,65,.32);
 border:1px solid rgba(255,255,255,.48);
 border-radius:22px;
 -webkit-backdrop-filter:blur(18px) saturate(125%);
 backdrop-filter:blur(18px) saturate(125%);
 box-shadow:0 12px 36px rgba(15,27,45,.15),inset 0 1px 0 rgba(255,255,255,.24);
 color:#fff;
}
.house-toggle strong,.house-toggle small{color:#fff}
.house-toggle small{opacity:.9}
.house-toggle:hover{background:rgba(36,52,65,.45);box-shadow:0 12px 36px rgba(15,27,45,.22),inset 0 1px 0 rgba(255,255,255,.3)}
.house-toggle .toggle-arrow{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);color:#fff}
.house-canvas::after,.house-demo::after{display:none}
@media(max-width:860px){
 .house-intro{padding:18px 20px;top:88px;left:16px;right:16px;max-width:430px;background:rgba(36,52,65,.32)}
 .house-intro .house-eyebrow,.house-intro h1,.house-intro .house-phone{color:white}
 .house-intro h1{font-size:28px}
 .house-intro .acties{gap:12px;margin-top:13px}
 .house-intro .house-phone{font-size:11px}
 .house-intro .knop{font-size:12px;padding:11px 14px}
 .house-toggle{border-radius:16px}
}
/* Shared alignment for the three glass cards. */
@media(min-width:861px){
 .house-intro{top:23.5%;left:2.5%}
 .house-toggle{width:190px;min-width:190px;min-height:80px;padding:17px 20px}
}
@media(max-width:860px){.house-toggle{width:146px;min-height:60px;justify-content:space-between}}
/* Align the introduction with the 1200px content column below the hero. */
@media(min-width:861px){.house-intro{left:max(32px,calc((100% - 1200px)/2))}}
.house-review{position:absolute;right:max(32px,calc((100% - 1200px)/2));bottom:28px;z-index:5;display:flex;align-items:center;justify-content:center;gap:11px;background:#fff;border-radius:60px;padding:15px 23px;box-shadow:0 7px 26px #0f1b2d26;color:var(--navy);max-width:calc(100% - 32px)}
.house-review svg{flex:none}.house-review small{font-size:13px}.house-review .st{color:#ffb400;font-size:20px;letter-spacing:1px;white-space:nowrap}.house-review b{font-size:19px}
@media(max-width:860px){.house-review{right:16px;left:16px;bottom:12px;padding:11px 12px;gap:8px}.house-review small{font-size:10px}.house-review .st{font-size:15px;letter-spacing:0}.house-review b{font-size:16px}.toggle-screens{bottom:15%}}
@media(max-width:860px){.house-review{right:80px;gap:8px}.house-review small{font-size:0}.house-review small::after{content:"Google";font-size:12px}.house-review .st{font-size:15px}}
/* Restored full-width handshake section. */
.site-home .sectie.waaromfoto{padding:0!important}
@media(max-width:900px){.site-home .waaromfoto>img{height:340px;object-position:40% 35%}.site-home .waaromfoto::after{background:linear-gradient(180deg,transparent 160px,var(--navy) 340px)}.site-home .waaromfoto .in{padding:300px 16px 32px;gap:0}}

/* Glazen schakelaar Rolluiken | Screens onderaan de foto (uit schets-hero-apple, Sen 6 okt). */
.house-leaders,.house-mobile-leaders{display:none}
.house-demo .house-toggle{top:auto;bottom:28px;width:206px;min-width:0;min-height:66px;padding:10px 12px 10px 22px;background:rgba(250,248,245,.62);border:1px solid rgba(255,255,255,.75);box-shadow:0 10px 36px rgba(15,27,45,.2);-webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);color:var(--navy);z-index:6;transition:background .35s cubic-bezier(.2,.8,.2,1),transform .2s ease}
.house-demo .toggle-shutters{left:max(32px,calc((100% - 1200px)/2));right:auto;border-radius:34px 0 0 34px;border-right-color:rgba(15,27,45,.08)}
.house-demo .toggle-screens{left:calc(max(32px,calc((100% - 1200px)/2)) + 206px);right:auto;border-radius:0 34px 34px 0;border-left:0}
.house-demo .house-toggle strong{color:var(--navy);font-size:16px;font-weight:600}
.house-demo .house-toggle small{color:var(--t2);opacity:1;font-size:11.5px;margin-top:2px}
.house-demo .house-toggle .toggle-arrow{background:var(--navy);border:0;color:#fff;width:30px;height:30px;font-size:15px}
.house-demo .house-toggle:hover{background:rgba(255,255,255,.8);box-shadow:0 10px 36px rgba(15,27,45,.2)}
.house-demo .house-toggle:active{transform:scale(.97)}
.house-demo .house-toggle[aria-pressed="true"]{background:rgba(255,255,255,.92)}
.house-demo .house-toggle[aria-pressed="true"] .toggle-arrow{background:var(--blauw-h)}
@media(max-width:860px){
 .house-demo .house-toggle{bottom:76px;width:calc(50vw - 16px);min-height:58px;padding:8px 8px 8px 14px}
 .house-demo .toggle-shutters{left:calc(24% + 16px)}.house-demo .toggle-screens{left:calc(24% + 50vw)}
 .house-demo .house-toggle strong{font-size:14px}.house-demo .house-toggle small{font-size:10px}
 .house-demo .house-toggle .toggle-arrow{width:26px;height:26px;font-size:13px}
}
@media(max-width:600px){.house-demo .toggle-shutters{left:calc(26.9565% + 16px)}.house-demo .toggle-screens{left:calc(26.9565% + 50vw)}}
@media(prefers-reduced-motion:reduce){.house-demo .house-toggle{transition:none}}