/* Real app DOM, with camera movement constrained to the existing artwork slot. */
.ks-original{display:contents}.ks-original>*{visibility:hidden!important}.ks-replacement{display:contents}
.ks-motion{position:absolute;inset:0;overflow:hidden;isolation:isolate;background:#f4f5d6;cursor:pointer}
.ks-motion:focus-visible{outline:2px solid #60651b;outline-offset:-3px}
.ks-viewport{position:absolute;inset:8px 8px 42px;overflow:hidden;border-radius:8px}
.ks-camera{position:absolute;width:1280px;height:720px;transform-origin:0 0;background:#f8f8f6;transition:transform 800ms cubic-bezier(.22,.61,.36,1);border-radius:12px;overflow:hidden}
.ks-camera iframe{width:1280px;height:720px;border:0;pointer-events:none;display:block}
.ks-caption{position:absolute;bottom:8px;left:8px;right:8px;text-align:center;font:500 14px/20px Jost,sans-serif;color:#30273a;letter-spacing:0}
@media(prefers-reduced-motion:reduce){.ks-camera{transition:none}}
.pricing-list:has(>.ks-motion){position:relative;width:100%;max-width:none}
/* Neighbouring cards remain still; only the director's selected film moves. */
.ks-motion[data-motion-active="false"] .ks-camera{transition:none;will-change:auto}
.ks-motion[data-motion-active="true"]{box-shadow:none}
/* Approved hero revision: retain the template's broad bento tile, one product story. */
#product-preview>.ks-original{display:none}
#product-preview>.kh-hero{position:relative;grid-column:1/-1;width:100%;aspect-ratio:16/10;border-radius:16px;overflow:hidden}
.kh-hero .ks-motion{background:#eeeee7}
.kh-hero .ks-viewport{inset:48px 24px 52px;border-radius:12px}
.kh-hero .ks-camera{transition:opacity .25s ease;box-shadow:0 8px 24px #20201e0a}
.kh-hero .ks-caption{font-size:16px;line-height:24px;bottom:14px;color:#302b35}
@media(max-width:600px){#product-preview>.kh-hero{aspect-ratio:1/1}.kh-hero .ks-viewport{inset:8px 8px 44px}.kh-hero .ks-caption{font-size:13px;line-height:18px;bottom:12px}}

.kh-summary{max-width:660px;margin:16px auto 0;font:400 18px/1.5 Jost,sans-serif;text-align:center;color:var(--text-default,currentColor)}
.kh-summary small{display:block;margin-top:12px;font-size:14px}
.kh-hero .ks-camera{transition:transform 700ms cubic-bezier(.22,.61,.36,1)}
@media(prefers-reduced-motion:reduce){.kh-hero .ks-camera{transition:none}}

/* A stable product frame anchors the changing workflow, like a desktop window. */
.kh-hero .ks-motion:before{content:"Klarvico — Woningrenovatie · Fam. Brouwer";position:absolute;top:14px;left:24px;right:24px;color:#514e48;font:500 13px/20px Jost,sans-serif;text-align:center}
.kh-hero .ks-motion[data-lang="en"]:before{content:"Klarvico — Home renovation · Brouwer family"}
.kh-hero .ks-camera{box-shadow:0 12px 40px #20201e12;border:1px solid #deded7}
@media(max-width:600px){.kh-hero .ks-motion:before{top:8px;font-size:11px}.kh-hero .ks-viewport{inset:32px 8px 44px}}
@media(max-width:600px){.kh-hero .ks-viewport{inset:24px 8px 32px}.kh-hero .ks-caption{bottom:6px;font-size:12px;line-height:18px}.kh-hero .ks-motion:before{top:4px;font-size:10px}}
/* The complete, unchanged workflow is a deliberate second level of the hero. */
.kh-tour{position:absolute;top:10px;right:16px;z-index:5;display:flex;align-items:center;gap:12px;font:500 12px/18px Jost,sans-serif}
.kh-tour button{border:0;background:transparent;text-decoration:underline;text-underline-offset:3px;color:var(--text-default,#20201e);font:inherit;cursor:pointer;padding:8px;min-height:44px}
.kh-tour label:not([hidden]){display:flex;gap:6px;align-items:center}.kh-tour select{font:inherit;max-width:180px;border:1px solid #858579;border-radius:5px;background:#fff;color:#20201e;padding:3px}
.kh-tour button:focus-visible,.kh-tour select:focus-visible{outline:2px solid #60651b;outline-offset:2px}
.kh-hero .ks-motion:before{text-align:left;font-size:11px;right:50%;top:13px}
body.dark-mode .ks-motion{background:#363820}body.dark-mode .ks-caption{color:#f8f8f2}body.dark-mode .kh-hero .ks-motion{background:#1b1c19}body.dark-mode .kh-hero .ks-motion:before{color:#c4c5b8}
@media(max-width:600px){.kh-hero .ks-motion:before{display:none}}
/* Keep the template columns and order; reserve room for readable product details. */
.feature-box-square:has(>.ks-motion){min-height:400px}
.pricing-list:has(>.ks-motion){min-height:250px}
/* These three phase stories need room for the photo and its caption, or the complete action. */
.pricing-list:has(>.ks-motion:is([data-story="portal"],[data-story="files"],[data-story="purchase"])){min-height:480px}
.metric-box:has(>.ks-motion){min-height:350px}

/* Keep the reserved frame still until the current scene and local fonts are ready. */
.ks-motion:not([data-ready=true]) .ks-viewport{visibility:hidden}

/* Keep page copy readable while scrolling; motion belongs to product demonstrations. */
#product-preview,[data-gsap-onscroll="scroll-reveal"]{opacity:1!important;visibility:visible!important;transform:none!important}

#product-preview,.feature-box-wrap [id]{scroll-margin-top:100px}
/* Approved pilot composition: explanatory copy 40%, native dashboard 60%. */
@media(min-width:768px){.feature-box-horizontal:has(.ks-motion){grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:24px}.feature-box-horizontal:has(.ks-motion)>.feature-box-square{width:100%;min-width:0;min-height:440px}}
@media(max-width:767px){.feature-box-horizontal:has(.ks-motion){display:flex;flex-direction:column;gap:16px}.feature-box-horizontal:has(.ks-motion)>.feature-box-square{width:100%;min-width:0}.feature-box-horizontal:has(.ks-motion)>:first-child{width:100%}}

/* Product stories must remain available when template artwork would be hidden. */
@media(max-width:991px){.bento-layout>.feature-box-square.hide-on-tablet:has(.ks-motion){display:block;position:relative;width:100%;min-height:400px;flex:none}}

/* Explain the search interaction before its demonstration on narrow screens. */
@media(max-width:991px){.customer-story-wide:has(.ks-motion){display:flex;flex-direction:column}.customer-story-wide:has(.ks-motion)>.customer-wide-body{order:-1;width:100%;padding:24px 16px}.customer-story-wide:has(.ks-motion)>.customer-story-square-image{width:100%;min-height:400px}.customer-story-wide:has(.ks-motion) .customer-wide-body{gap:24px}}
/* Text remains available independently of the inert presentation iframe. */
.ks-explanation{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ks-fallback{position:absolute;inset:24px 20px auto;font:500 16px/1.5 Jost,sans-serif;color:var(--text-default,#30273a)}
.ks-motion[data-ready=true] .ks-fallback{display:none}
.ks-motion:not([data-ready=true]) .ks-explanation{inset:100px 20px 52px;width:auto;height:auto;margin:0;overflow:auto;clip-path:none;white-space:normal;font:400 14px/1.5 Jost,sans-serif;color:var(--text-default,#30273a)}
.ks-motion[role=img]{cursor:default}
body.dark-mode .ks-fallback,body.dark-mode .ks-motion:not([data-ready=true]) .ks-explanation{color:#f8f8f2}
body.dark-mode .kh-tour button{color:#f8f8f2}
body.dark-mode :is(.ks-motion,.kh-tour button,.kh-tour select):focus-visible{outline-color:#e4f222}
.ks-hint{opacity:0;transition:opacity 150ms ease;position:absolute;bottom:2px;left:8px;right:8px;text-align:center;font:400 10px/14px Jost,sans-serif;color:#30273a}
.ks-motion .ks-caption{bottom:22px;left:16px;right:16px;text-wrap:balance}
.ks-motion .ks-viewport{bottom:72px;box-shadow:0 4px 20px #20201e0a;border:1px solid #20201e12}
.ks-motion:is(:hover,:focus-visible) .ks-hint{opacity:1}
body.dark-mode .ks-hint{color:#f8f8f2}
body.dark-mode .ks-motion .ks-viewport{border-color:#ffffff12;box-shadow:none}
/* The measured toolbar gets its own space inside the original hero frame. */
.kh-tour select{min-height:44px;font-size:16px;box-sizing:border-box}
@media(max-width:600px){
 .kh-tour{left:8px;right:8px;top:3px;max-width:calc(100% - 16px);display:flex;flex-direction:row;align-items:center;gap:8px;font-size:13px;line-height:18px}
 .kh-tour button{flex:1;min-width:0;width:auto;min-height:44px;max-width:none;font-size:12px;white-space:normal;padding:8px 4px}
 .kh-tour label:not([hidden]){flex:0 0 70%;width:70%;min-width:0;gap:0;font-size:0;line-height:18px}
 .kh-tour select{flex:1;min-width:0;width:100%;max-width:100%;min-height:44px;font-size:16px;padding:6px}
 .kh-hero .ks-viewport{top:55px}
}

/* All detail-film hosts reserve mobile reading space, including native
   replacements nested inside the original product and AI artwork wrappers. */
@media(max-width:600px){:is(.feature-box-square,.pricing-list,.metric-box,.tile-box-square,.bento-item-square,.customer-story-square-image,.kf-picture-host):has(.ks-motion){min-height:400px}}

/* Opening the long workflow is an explicit expansion. Its detailed forms need
   a portrait reading area; the compact hero keeps its original square slot. */
@media(max-width:600px){#product-preview>.kh-hero:has(>.ks-motion[data-story="overview"]){aspect-ratio:auto;min-height:600px}}

/* Controls become available only after their controller has initialized. */
.kh-tour[hidden]{display:none}

.ks-explanation[tabindex="0"]:focus-visible{outline:2px solid #686d20;outline-offset:3px}
body.dark-mode .ks-explanation[tabindex="0"]:focus-visible{outline-color:#e4f222}

/* Failure recovery is separate from playback and leaves the explanation scrollable. */
.ks-retry{position:absolute;left:20px;right:20px;bottom:52px;z-index:3;min-height:44px;padding:8px 12px;border:0;border-radius:6px;background:#e4f222;color:#0c0a08;font:500 15px/1.4 Jost,sans-serif;cursor:pointer}
.ks-retry[hidden]{display:none}
.ks-retry:hover{background:#f5ff78}.ks-retry[aria-disabled="true"]{cursor:wait}
.ks-retry:focus-visible{outline:2px solid #686d20;outline-offset:3px}
body.dark-mode .ks-retry:focus-visible{outline-color:#e4f222}
.ks-motion:has(>.ks-retry:not([hidden])) .ks-explanation{bottom:112px}

/* Native mobile screens need room for a complete object and its action. */
@media(max-width:600px){:is(.feature-box-square,.pricing-list,.metric-box,.tile-box-square,.bento-item-square,.customer-story-square-image,.kf-picture-host):has(.ks-motion){min-height:540px!important}}

@media(max-width:600px){:is(.feature-box-square,.pricing-list,.metric-box,.tile-box-square,.bento-item-square,.customer-story-square-image,.kf-picture-host):has(.ks-motion:is([data-story="result"],[data-story="hours"],[data-story="activity"],[data-story="closure"])){min-height:420px!important}}

/* Product footage carries the explanation; no repeated caption bands. */
.ks-motion .ks-caption,.ks-motion .ks-hint{display:none}
.kh-hero .ks-motion:before{display:none}