/* Transparent frame with a floating, readable navigation pill. */
header{position:fixed;inset:0 0 auto;background:transparent;border:0;backdrop-filter:none;transition:background .2s,box-shadow .2s}
header .nav{max-width:1440px;height:100px;gap:24px}
header .menu{background:rgba(255,255,255,.96);border-radius:999px;padding:12px 26px;gap:20px;box-shadow:0 3px 20px #0000000d}
header .menu a{font-size:13px}
header .nav-cta .btn-primary{background:var(--sand);color:var(--ink)}
header .nav-cta .btn-outline{display:none}
body.is-home:not(.has-scrolled) header .logo img{filter:brightness(0) invert(1)}
body:not(.is-home) header,body.has-scrolled header{background:rgba(248,248,247,.97);box-shadow:0 2px 18px #0000000d}
body:not(.is-home) main{padding-top:100px}
.hero-personal{min-height:100svh}
.hero-scene{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1.2s ease,visibility 1.2s;pointer-events:none}
.hero-scene.is-active{opacity:1;visibility:visible}
.hero-scene img{width:100%;height:100%;object-fit:cover;object-position:var(--focus,center)}
.hero-controls{position:absolute;z-index:3;right:max(24px,calc((100vw - 1180px)/2 + 24px));bottom:30px;display:flex;align-items:center;gap:8px}
.hero-controls button{position:relative;width:52px;height:32px;border:0;border-radius:0;background:transparent;cursor:pointer;padding:15px 0;color:inherit}


:focus-visible{outline:3px solid #9a7046;outline-offset:5px}
.hero :focus-visible,header :focus-visible{outline-color:#c99e6c}
.skip-link{position:fixed;top:8px;left:16px;z-index:200;background:#fff;padding:12px 18px;transform:translateY(-150%)}
.skip-link:focus{transform:none}
.modal-box{max-height:calc(100svh - 40px);overflow-y:auto}
@media(max-width:1120px){header .menu{gap:12px;padding:10px 18px}header .nav{gap:14px}header .nav-cta .btn-primary{font-size:12px;padding:10px 12px}}
@media(max-width:920px){
 header .nav{height:82px}header .menu{display:none}header .hamburger{background:#fff;border-radius:50%;width:46px;height:46px;font-size:24px}
 body:not(.is-home) main{padding-top:82px}.mob-menu{margin:0 16px 16px;border-radius:18px;box-shadow:0 12px 40px #0003;max-height:calc(100svh - 110px);overflow:auto}
 .hero-personal{min-height:100svh}.hero-controls{bottom:24px;right:24px;gap:6px}.hero-controls button{position:relative;width:52px;height:32px;border:0;border-radius:0;background:transparent;cursor:pointer;padding:15px 0;color:inherit}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-scene,.page,.card,.d-card,.ig-tile img{animation:none;transition:none}}

/* Fine progress tracks, with generous invisible click targets. */
.hero-controls button::before,.hero-controls button span{content:"";position:absolute;left:0;right:0;top:15px;height:2px;background:rgba(255,255,255,.26)}
.hero-controls button span{background:rgba(255,255,255,.8);transform:scaleX(0);transform-origin:left}
.hero-controls.is-running button[aria-current="true"] span{animation:sceneProgress var(--slide-duration,7s) linear forwards}
@keyframes sceneProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* Extend the room behind the right-aligned portrait instead of a solid block. */
.hero-personal::before{background:url('hero/CL0A4994-1600.jpg') center 26%/cover no-repeat;filter:blur(8px);transform:scale(1.04)}
.hero-personal .hero-portrait{mask-image:linear-gradient(90deg,transparent,black 24%);-webkit-mask-image:linear-gradient(90deg,transparent,black 24%)}
.hero-personal::after{background:linear-gradient(90deg,rgba(15,16,17,.62),rgba(15,16,17,.35) 38%,rgba(15,16,17,.06) 68%,transparent),linear-gradient(to top,rgba(15,16,17,.58),transparent 65%)}
.hero-personal .rule{top:100px;bottom:24px;background:linear-gradient(to bottom,transparent 0%,rgba(216,201,180,.25) 24%,rgba(216,201,180,.25) 70%,transparent 100%)}
@media(max-width:700px){
 .hero-personal::before{background-image:none;filter:none;transform:none}
 .hero-personal .hero-portrait{mask-image:none;-webkit-mask-image:none}
 .hero-personal::after{background:linear-gradient(to top,rgba(18,17,16,.92),rgba(18,17,16,.66) 30%,rgba(18,17,16,.12) 65%,transparent 85%)}
 .hero-personal .rule{top:82px}
}
@media(prefers-reduced-motion:reduce){.hero-controls button[aria-current="true"] span{animation:none;transform:scaleX(1)}}
/* Primary header action: warm contrast and its own clear silhouette. */
header .nav-cta .nav-advice{background:#a84129;color:#fff;min-height:54px;padding:10px 12px 10px 20px;border:1px solid rgba(255,255,255,.35);border-radius:12px;font-size:14px;font-weight:700;white-space:nowrap;gap:16px;box-shadow:0 5px 18px rgba(60,21,12,.28);transition:background .2s,box-shadow .2s}
header .nav-advice-arrow{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.18);font-size:21px;font-weight:500;line-height:1}
header .nav-cta .nav-advice:hover{background:#89331f;box-shadow:0 7px 22px rgba(60,21,12,.35);transform:none}
header .nav-cta .nav-advice:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 7px #a84129}
@media(min-width:921px) and (max-width:1120px){header .nav-cta .nav-advice{font-size:12px;padding-left:14px;gap:9px;min-height:50px}header .nav-advice-arrow{width:28px;height:28px}}

/* Personal floor advice: photo and invitation in one card. */
.magnet.advice-with-photo{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0;overflow:hidden;align-items:stretch}
.advice-with-photo .advice-photo{width:100%;height:100%;min-height:360px;object-fit:cover;object-position:48% 48%}
.advice-with-photo .advice-copy{padding:44px;align-self:center}
.advice-with-photo .advice-copy .btn{margin-top:26px}
@media(max-width:760px){.magnet.advice-with-photo{grid-template-columns:1fr}.advice-with-photo .advice-photo{height:auto;min-height:0;aspect-ratio:3/2}.advice-with-photo .advice-copy{padding:30px 26px}}

/* Mobile refinements and clear faces on the service cards. */
.showroom-trust strong{font-size:16px;color:var(--ink);font-weight:600}
.d-card[href="#dienst/raamdecoratie"] .d-img{background-position:center 28%;background-size:cover;border-top:46px solid var(--sand)}
.d-card[href="#dienst/raamdecoratie"] .d-prijs{top:-46px;height:46px;display:flex;align-items:center}
@media(max-width:700px){
 .hero-personal .hero-portrait img{object-position:28% 20%}
 .trustbar .wrap{padding-top:16px;padding-bottom:16px;gap:14px 12px}
 .trustbar .trust{gap:8px;min-width:0}
 .trustbar .num{font-size:23px;line-height:1.15;white-space:nowrap}
 .trustbar .lbl{font-size:11px;line-height:1.35}
 .trustbar .stars{font-size:11px;letter-spacing:0}
 .trustbar .gbadge{font-size:10px}
 .trustbar .showroom-trust strong{font-size:13px}
}

/* Move the actual portrait, even when object-fit leaves no room to pan. */
@media(max-width:700px){
 .hero-personal .hero-portrait{overflow:hidden}
 .hero-personal .hero-portrait::before{content:"";position:absolute;inset:-12px;background:url('hero/CL0A5004-960.jpg') center 20%/cover no-repeat;filter:blur(12px)}
 .hero-personal .hero-portrait img{position:relative;object-position:50% 20%;transform:translateX(20vw);mask-image:linear-gradient(90deg,transparent,black 22%);-webkit-mask-image:linear-gradient(90deg,transparent,black 22%)}
}
/* One compact, swipeable row; the next item peeks into view. */
@media(max-width:920px){
 .trustbar .wrap{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:0;padding:14px 20px;scroll-snap-type:x proximity;scroll-padding-inline:20px;scrollbar-width:thin;scrollbar-color:var(--sand) transparent;-webkit-overflow-scrolling:touch}
 .trustbar .trust{flex:0 0 225px;min-width:0;min-height:56px;scroll-snap-align:start;padding:0 18px;gap:12px;border-right:1px solid rgba(26,20,16,.12)}
 .trustbar .trust:first-child{padding-left:0;flex-basis:235px}
 .trustbar .trust:last-child{border-right:0}
 .trustbar .num{font-size:25px;line-height:1.15;white-space:nowrap}
 .trustbar .lbl{font-size:11px;line-height:1.4}
 .trustbar .stars{font-size:12px;letter-spacing:0}
 .trustbar .gbadge{font-size:10px;white-space:nowrap}
 .trustbar .showroom-trust strong{font-size:14px}
}

/* Keep the first mobile screen clear; reveal actions after scrolling. */
@media(max-width:920px){
 .mob-bar{padding-bottom:env(safe-area-inset-bottom,0px);transition:transform .25s ease,opacity .25s ease,visibility .25s}
 body.is-home:not(.has-scrolled) .mob-bar{transform:translateY(100%);opacity:0;visibility:hidden;pointer-events:none}
 body.is-home:not(.has-scrolled) .wa-float{opacity:0;visibility:hidden;pointer-events:none}
 body{padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))}
}
@media(prefers-reduced-motion:reduce){.mob-bar{transition:none}}