/* =====================================================================
   PRO2 — premium DUSK edition (dark, serif, glowing hero)
   ===================================================================== */

/* ---- header LAYOUT (was missing in pro2) ---- */
.site-hdr{position:fixed;top:0;left:0;right:0;z-index:45;transition:.3s}
.hdr-in{max-width:1180px;margin:0 auto;padding:0 clamp(18px,4vw,44px);display:flex;align-items:center;gap:22px;height:70px}
.hdr-brand img{height:30px;display:block}
.hdr-nav{display:flex;gap:24px;margin-left:auto}
.hdr-nav a{font-family:'Fredoka',system-ui,sans-serif;font-weight:500;font-size:.94rem;opacity:.9;transition:.2s;position:relative}
.hdr-nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px}
.hdr-cta{display:flex;align-items:center;gap:12px}
.hdr-tel{font-family:'Fredoka',system-ui,sans-serif;font-weight:600;font-size:.94rem}
.btn-hdr{padding:10px 20px;border-radius:12px}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto;z-index:70}
.nav-toggle span{width:26px;height:2px;border-radius:2px;transition:.3s}
.theme-btn{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.1);backdrop-filter:blur(8px);font-size:1.1rem;line-height:1;cursor:pointer;transition:.2s}
.theme-btn:hover{transform:scale(1.08)}
.lang-pill{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:34px;padding:0 11px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#eef1f8;font-family:'Fredoka',system-ui,sans-serif;font-weight:600;font-size:.82rem;letter-spacing:.03em;line-height:1;transition:.2s}
.lang-pill:hover{border-color:#d9a441;color:#d9a441}

/* header colours — night default (light text over dusk / dark sticky bar) */
.site-hdr .hdr-nav a,.site-hdr .hdr-tel{color:#eef1f8}
.site-hdr .hdr-nav a:hover,.site-hdr .hdr-nav a.active{color:#ffd36b;opacity:1}
.site-hdr .hdr-nav a.active::after{background:#ffd36b}
.hdr-brand img{filter:brightness(0) invert(1)}
.nav-toggle span{background:#eef1f8}
.site-hdr.scrolled{background:rgba(14,18,28,.92);backdrop-filter:blur(12px);box-shadow:0 2px 22px rgba(0,0,0,.45)}

/* when toggled to DAY: dark header text over the light sky (top only) */
body[data-theme="day"] .site-hdr:not(.scrolled) .hdr-nav a,
body[data-theme="day"] .site-hdr:not(.scrolled) .hdr-tel{color:#242a33}
body[data-theme="day"] .site-hdr:not(.scrolled) .hdr-brand img{filter:none}
/* hamburger bars: dark in day (also when the bar has scrolled to light) */
body[data-theme="day"] .nav-toggle span{background:#242a33}
body[data-theme="day"] .theme-btn{border-color:rgba(20,24,30,.15);background:rgba(255,255,255,.75)}

/* =====================================================================
   DAY (light) THEME — clicking the sun also lights the content + footer
   ===================================================================== */
body[data-theme="day"] .content{
  --bg:#faf7f0; --panel:#f2ebdd; --deep:#ece2d1; --card:#ffffff;
  --gold:#a9781c; --line:rgba(38,30,18,.14);
  --ink:#221d15; --muted:#5f584a;
}
body[data-theme="day"] .site-hdr.scrolled{background:rgba(255,252,246,.92);box-shadow:0 2px 22px rgba(60,48,26,.12)}
body[data-theme="day"] .site-hdr.scrolled .hdr-nav a,
body[data-theme="day"] .site-hdr.scrolled .hdr-tel{color:#242a33}
body[data-theme="day"] .site-hdr.scrolled .hdr-brand img{filter:none}
body[data-theme="day"] .site-hdr .lang-pill{border-color:rgba(20,24,30,.2);color:#242a33}
body[data-theme="day"] .site-hdr .lang-pill:hover{border-color:#a9781c;color:#a9781c}
body[data-theme="day"] .site-ftr{background:#efe7d8;color:#5f584a;border-top-color:rgba(38,30,18,.14)}
body[data-theme="day"] .site-ftr .ftr-logo{filter:none}
body[data-theme="day"] .site-ftr .ftr-col h4{color:#221d15}
body[data-theme="day"] .site-ftr .ftr-col a,
body[data-theme="day"] .site-ftr .ftr-addr,
body[data-theme="day"] .site-ftr .ftr-brand p,
body[data-theme="day"] .site-ftr .ftr-bottom{color:#5f584a}
body[data-theme="day"] .contact-social a:hover{color:#a9781c}

/* ---- hero: dusk look only in NIGHT mode (so the toggle works) ---- */
body[data-theme="night"]{background:linear-gradient(180deg,#1a2442 0%,#2a3a60 46%,#3c5074 100%)!important}
body[data-theme="night"] .scene.mix2 .sun-moon{background:radial-gradient(circle at 38% 36%,#fdfdff,#cdd6ec 72%);box-shadow:0 0 60px 16px rgba(210,222,255,.4)}
body[data-theme="night"] .scene.mix2 .win{fill:#ffd36b;filter:drop-shadow(0 0 6px rgba(255,196,80,.75))}
body[data-theme="night"] .scene.mix2 .cl{opacity:.5}
body[data-theme="night"] .scene.mix2 .dust span{background:rgba(255,241,200,.85)}
body[data-theme="night"] .grabhint{background:rgba(24,30,48,.72);border-color:rgba(255,255,255,.14);color:#f2f4fa}

/* =========== dark premium content palette (scoped) =========== */
.content{
  --bg:#12141b; --panel:#191d26; --deep:#0c0e13; --card:#1c212c;
  --gold:#d9a441; --line:rgba(255,255,255,.09);
  --ink:#edeff4; --muted:#9aa2b0; --red:#D5000B; --red-d:#A80008;
  position:relative;z-index:3;background:var(--bg);color:var(--ink);
}
html{scroll-behavior:smooth;scroll-padding-top:calc(80px + var(--banner-h))}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,44px)}

.content h2,.content h3,.svc-txt h3,.step h3,.why h3,.contact-card h3,.ftr-col h4{font-family:'Fraunces',Georgia,serif;font-weight:500}
.btn-lg{padding:15px 30px;font-size:1.02rem;border-radius:14px}
.btn-cream{background:var(--gold);color:#241a06;border:2px solid transparent}
.btn-cream:hover{background:#e7b757;transform:translateY(-2px)}
.btn-wire{background:transparent;color:var(--ink);border:2px solid var(--line)}
.btn-wire:hover{background:var(--card);border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}

/* section scaffolding */
.sec{padding:clamp(60px,8vw,110px) 0}
.sec-tone{background:var(--panel)}
.sec-dark{background:var(--deep)}
.kicker{display:inline-block;font-family:'Fraunces',serif;font-style:italic;font-size:.95rem;letter-spacing:.02em;color:var(--gold);margin-bottom:12px}
.kicker-l{color:var(--gold)}
.sec-head{max-width:720px;margin:0 auto clamp(40px,5vw,60px);text-align:center}
.sec h2{font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.05;color:var(--ink);letter-spacing:-.01em}
.sec-head .lead{color:var(--muted);font-size:1.1rem;margin-top:16px}

/* trust bar */
.trust{background:var(--deep);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-in{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;padding:36px 0;text-align:center}
.t-item{border-right:1px solid var(--line)}
.t-item:last-child{border:0}
.t-item b{font-family:'Fraunces',serif;font-size:clamp(1.9rem,3.2vw,2.7rem);display:block;line-height:1;color:var(--gold)}
.t-item span{font-size:.82rem;color:var(--muted)}

/* service rows */
.svc-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center;margin-bottom:clamp(44px,6vw,80px);scroll-margin-top:calc(90px + var(--banner-h))}
.svc-row:last-child{margin-bottom:0}
.svc-rev .svc-img{order:2}
.svc-img img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px;box-shadow:0 24px 50px rgba(0,0,0,.5);border:1px solid var(--line)}
.svc-tag{display:inline-block;font-family:'Fraunces',serif;font-style:italic;font-size:.95rem;color:var(--gold);margin-bottom:10px}
.svc-txt h3{font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:14px;color:var(--ink)}
.svc-txt p{color:var(--muted);margin-bottom:18px}
.svc-txt strong{color:var(--ink)}
.ticks{list-style:none;display:grid;gap:11px;margin-bottom:22px}
.ticks li{position:relative;padding-left:30px;color:var(--ink)}
.ticks li::before{content:"\2713";position:absolute;left:0;top:1px;width:21px;height:21px;background:rgba(217,164,65,.16);color:var(--gold);border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:800}
.link-arrow{font-family:'Fraunces',serif;font-style:italic;color:var(--gold);font-size:1.05rem}
.link-arrow:hover{color:#e7b757}

/* steps */
.steps{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.step{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px 22px}
.step-n{width:46px;height:46px;border-radius:50%;background:transparent;border:1.5px solid var(--gold);color:var(--gold);display:grid;place-items:center;font-family:'Fraunces',serif;font-size:1.3rem;margin-bottom:14px}
.step h3{font-size:1.2rem;margin-bottom:8px;color:var(--ink)}
.step p{color:var(--muted);font-size:.92rem}

/* why grid */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.why{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:30px 28px;transition:.3s}
.why:hover{transform:translateY(-5px);border-color:rgba(217,164,65,.5);box-shadow:0 24px 50px rgba(0,0,0,.4)}
.why-i{font-size:1.7rem;display:inline-grid;place-items:center;width:54px;height:54px;background:rgba(217,164,65,.1);border:1px solid var(--line);border-radius:14px;margin-bottom:16px}
.why h3{font-size:1.3rem;margin-bottom:8px;color:var(--ink)}
.why p{color:var(--muted);font-size:.95rem}

/* about + timeline */
.sec-dark h2,.sec-dark h3{color:var(--ink)}
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,64px);align-items:center}
.about-media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:18px;box-shadow:0 24px 50px rgba(0,0,0,.55);border:1px solid var(--line)}
.about-txt p{color:var(--muted);margin-bottom:22px}
.timeline{list-style:none;display:grid;gap:15px;border-left:1px solid var(--line);padding-left:24px}
.timeline li{position:relative;color:var(--muted);font-size:1rem}
.timeline li::before{content:"";position:absolute;left:-29px;top:7px;width:11px;height:11px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px var(--deep),0 0 14px rgba(217,164,65,.6)}
.timeline b{color:var(--ink);font-family:'Fraunces',serif;margin-right:8px}

/* places */
.places{list-style:none;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:920px;margin:0 auto}
.places li{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:9px 20px;font-size:.94rem;font-weight:500;color:var(--ink);transition:.2s}
.places li:hover{border-color:var(--gold);color:var(--gold)}

/* projects */
.proj-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.proj{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.proj img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s ease;filter:brightness(.94)}
.proj:hover img{transform:scale(1.06);filter:brightness(1)}
.proj figcaption{position:absolute;inset:auto 0 0 0;padding:26px 15px 13px;color:#fff;background:linear-gradient(to top,rgba(6,8,12,.92),transparent)}
.proj figcaption b{display:block;font-family:'Fraunces',serif;font-size:1rem}
.proj figcaption span{font-size:.78rem;color:rgba(255,255,255,.75)}

/* reviews */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rev{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:32px 28px}
.stars{color:var(--gold);letter-spacing:3px;margin-bottom:12px}
.rev p{font-family:'Fraunces',serif;font-size:1.2rem;line-height:1.42;color:var(--ink);margin-bottom:14px}
.rev cite{font-style:normal;color:var(--muted);font-size:.88rem}
.ph-note{text-align:center;margin-top:28px;color:var(--muted);font-size:.9rem;font-style:italic}

/* faq */
.faq-wrap{max-width:820px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:12px;overflow:hidden}
.faq details[open]{border-color:rgba(217,164,65,.4)}
.faq summary{list-style:none;cursor:pointer;padding:20px 24px;display:flex;justify-content:space-between;gap:14px;align-items:center;font-family:'Fraunces',serif;font-size:1.15rem;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;color:var(--gold);transition:.3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 24px 22px;color:var(--muted)}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,60px);align-items:center}
.contact-l h2{color:var(--ink)}
.contact-l>p{color:var(--muted);margin:14px 0 26px;font-size:1.08rem}
.contact-cta{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.contact-cta .btn{width:100%;max-width:400px;justify-content:center}
.contact-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:34px 30px}
.contact-card h3{color:var(--ink);font-size:1.5rem;margin-bottom:18px}
.contact-list{list-style:none;display:grid;gap:15px;margin-bottom:20px}
.contact-list li{font-size:.98rem;color:var(--ink)}
.contact-list > li > span{display:block;font-family:'Fraunces',serif;font-style:italic;font-size:.82rem;color:var(--gold);margin-bottom:2px}
.contact-list a{color:var(--ink)}
.contact-list a:hover{color:var(--gold)}
.contact-social{display:flex;gap:12px;padding-top:18px;margin-top:4px;border-top:1px solid var(--line)}
.contact-social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);color:var(--gold);transition:.2s}
.contact-social a svg{width:20px;height:20px;fill:currentColor;display:block}
.contact-social a:hover{color:#fff;border-color:var(--gold);transform:translateY(-2px)}

/* footer */
.site-ftr{background:#0a0c11;color:var(--muted);padding:60px 0 26px;border-top:1px solid var(--line)}
.ftr-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:38px}
.ftr-logo{height:28px;filter:brightness(0) invert(1);margin-bottom:16px}
.ftr-brand p{font-size:.92rem;max-width:340px}
.ftr-col h4{color:var(--ink);font-size:1.1rem;margin-bottom:14px}
.ftr-col a,.ftr-addr{display:block;font-size:.92rem;margin-bottom:10px;transition:.2s;color:var(--muted)}
.ftr-col a:hover{color:var(--gold);padding-left:4px}
.ftr-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:44px;padding-top:22px;border-top:1px solid var(--line);font-size:.82rem;color:var(--muted)}

/* to-top */
.to-top{position:fixed;right:22px;bottom:22px;width:48px;height:48px;border-radius:50%;background:var(--gold);color:#241a06;display:grid;place-items:center;font-size:1.3rem;box-shadow:0 12px 30px rgba(217,164,65,.4);opacity:0;pointer-events:none;transform:translateY(12px);transition:.3s;z-index:44}
.to-top.show{opacity:1;pointer-events:auto;transform:none}
.to-top:hover{transform:translateY(-3px)}

/* reveal */
.content .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.content .reveal.in{opacity:1;transform:none}

/* responsive */
@media (max-width:980px){
  .trust-in{grid-template-columns:repeat(2,1fr);gap:24px}
  .t-item:nth-child(2){border-right:0}
  .t-item:nth-child(5){grid-column:span 2}
  .svc-row,.about-grid,.contact-grid{grid-template-columns:1fr;gap:30px}
  .svc-rev .svc-img{order:0}
  .svc-img img{max-width:520px}
  .steps{grid-template-columns:repeat(2,1fr)}
  .why-grid,.rev-grid{grid-template-columns:repeat(2,1fr)}
  .proj-grid{grid-template-columns:repeat(3,1fr)}
  .ftr-grid{grid-template-columns:1fr 1fr}
  .about-media{max-width:460px}
}
@media (max-width:760px){
  /* the off-canvas drawer sits off the right edge; clip so it never adds
     horizontal scroll (which would push the hamburger off-screen) */
  html{overflow-x:clip}
  .hdr-tel,.btn-hdr{display:none}
  .nav-toggle{display:flex}
  /* CRITICAL: the header's backdrop-filter turns .site-hdr into a containing block
     for its fixed children, so when scrolled the drawer aligns to the 70px bar
     instead of the viewport and opens wrong. Drop the blur on mobile (the bar keeps
     a solid background, so it looks the same). */
  .site-hdr,.site-hdr.scrolled{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  /* off-canvas drawer: stays rendered so the slide-in actually animates */
  .hdr-nav{display:flex;position:fixed;inset:0 0 0 auto;width:min(82vw,330px);background:#12141b;flex-direction:column;justify-content:flex-start;gap:4px;padding:calc(90px + var(--banner-h)) 34px 40px;margin:0;overflow-y:auto;-webkit-overflow-scrolling:touch;transform:translateX(105%);visibility:hidden;transition:transform .42s cubic-bezier(.22,.61,.36,1),visibility 0s linear .42s;box-shadow:-24px 0 70px rgba(0,0,0,.5);z-index:65}
  .hdr-nav.open{transform:none;visibility:visible;transition:transform .42s cubic-bezier(.22,.61,.36,1),visibility 0s linear 0s}
  .hdr-nav a{font-size:1.3rem;opacity:1;color:#eef1f8}
  /* day theme: light, readable slide-out menu */
  body[data-theme="day"] .hdr-nav{background:#fbf8f2;box-shadow:-20px 0 60px rgba(50,40,22,.22);border-left:1px solid rgba(38,30,18,.1)}
  body[data-theme="day"] .hdr-nav a{color:#242a33}
  body[data-theme="day"] .hdr-nav a:hover,body[data-theme="day"] .hdr-nav a.active{color:#a9781c}
  .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.open span:nth-child(2){opacity:0}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  body.menu-open{overflow:hidden}
  /* Diensten dropdown: no hover on touch, show sub-links inline in the drawer */
  .has-sub{flex-direction:column;align-items:stretch;width:100%}
  .has-sub .caret{display:none}
  .has-sub::after{display:none}
  .subnav{position:static;transform:none;opacity:1;visibility:visible;background:transparent;border:0;box-shadow:none;padding:4px 0 10px 18px;margin:0;min-width:0;gap:0}
  .subnav a{font-size:1.02rem;padding:7px 0;color:#eef1f8;opacity:.92}
  body[data-theme="day"] .subnav{background:transparent}
  body[data-theme="day"] .subnav a{color:#242a33}
}
@media (max-width:560px){
  .steps,.why-grid,.rev-grid,.ftr-grid,.trust-in{grid-template-columns:1fr}
  .t-item{border-right:0!important}
  .t-item:nth-child(5){grid-column:span 1}
  .proj-grid{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){.content .reveal{opacity:1;transform:none;transition:none}}

/* ---- clickable exploded-diagram labels (01-04) ---- */
.rlabel{cursor:pointer}
.scene.mix2.roof-open .rlabel{pointer-events:auto}
.rlabel:hover .rl-name,.rlabel:focus-visible .rl-name{fill:#e23a2e}
.rlabel:hover .rl-badge,.rlabel:focus-visible .rl-badge{stroke-width:3.5;filter:drop-shadow(0 0 9px rgba(255,255,255,.65))}
.rlabel:focus-visible{outline:none}

/* clickable roof layers -> scroll to service section */
.rshell{cursor:pointer}
body[data-theme="night"] .rl-name{fill:#f2f4fa}
body[data-theme="night"] .rl-lead{stroke:rgba(255,255,255,.42)}

/* =====================================================================
   NEW: Diensten dropdown, image lightbox, masked contact, CTA red ramp
   ===================================================================== */

/* ---- Diensten hover dropdown (desktop) ---- */
.has-sub{position:relative;display:flex;align-items:center}
.has-sub .sub-trigger{display:inline-flex;align-items:center;gap:5px}
.caret{transition:transform .2s;opacity:.75}
.has-sub:hover .caret,.has-sub:focus-within .caret{transform:rotate(180deg)}
.has-sub::after{content:"";position:absolute;top:100%;left:0;right:0;height:14px}
.subnav{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);min-width:210px;background:#12141b;border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:8px;display:flex;flex-direction:column;gap:2px;box-shadow:0 22px 54px rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s;z-index:60;margin-top:8px}
.has-sub:hover .subnav,.has-sub:focus-within .subnav{opacity:1;visibility:visible;transform:translateX(-50%) translateY(4px)}
.subnav a{padding:9px 14px;border-radius:9px;font-size:.9rem;white-space:nowrap;color:#eef1f8;opacity:1}
.subnav a:hover{background:rgba(255,255,255,.09);color:#ffd36b}
body[data-theme="day"] .subnav{background:#fbf8f2;border-color:rgba(38,30,18,.12);box-shadow:0 22px 54px rgba(50,40,22,.18)}
body[data-theme="day"] .subnav a{color:#242a33}
body[data-theme="day"] .subnav a:hover{background:rgba(38,30,18,.06);color:#a9781c}

/* ---- click-to-reveal blur on phone/email ---- */
.masked{display:inline-block;font:inherit;color:inherit;letter-spacing:inherit;text-transform:none;margin:0;filter:blur(4.5px);cursor:pointer;transition:filter .2s;-webkit-user-select:none;user-select:none}
.masked:hover{filter:blur(3px)}
/* belknop: nummer blijft klikbaar (bellen), wordt scherp bij hover op de knop */
.masked-btn .masked{cursor:inherit}
.masked-btn:hover .masked{filter:none}

/* ---- image lightbox ---- */
.proj img,.svc-img img,.phero-img img,.about-media img{cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(8,10,14,.92);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .25s}
.lightbox.open{opacity:1;visibility:visible}
.lightbox figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:92vw;max-height:90vh}
.lightbox img{max-width:92vw;max-height:80vh;object-fit:contain;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lightbox figcaption{color:#f2f4fa;font-family:'Fredoka',system-ui,sans-serif;font-size:.95rem;text-align:center;max-width:60ch;line-height:1.4}
.lightbox-close{position:fixed;top:16px;right:18px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;display:grid;place-items:center;z-index:201;transition:.2s}
.lightbox-close:hover{background:rgba(255,255,255,.24);transform:scale(1.06)}
body.lb-open{overflow:hidden}

/* ---- CTA / contact buttons: monochrome logo-red ramp ---- */
.contact-cta .btn-solid,.pcta-actions .btn-solid{background:#D5000B;box-shadow:0 8px 20px rgba(213,0,11,.3)}
.contact-cta .btn-solid:hover,.pcta-actions .btn-solid:hover{background:#B0000A}
.contact-cta .btn-cream,.pcta-actions .btn-cream{background:#9c0a10;color:#fff;border-color:transparent}
.contact-cta .btn-cream:hover,.pcta-actions .btn-cream:hover{background:#7f070c;color:#fff}
.contact-cta .btn-wire,.pcta-actions .btn-wire{background:#f6dcdb;color:#a80008;border-color:transparent}
.contact-cta .btn-wire:hover,.pcta-actions .btn-wire:hover{background:#efc9c7;color:#7f070c;border-color:transparent}

/* mobile dropdown: must come AFTER the desktop .subnav rules to win source order */
@media (max-width:760px){
  .hdr-nav .has-sub{flex-direction:column;align-items:stretch;width:100%}
  .hdr-nav .has-sub .caret{display:none}
  .hdr-nav .has-sub::after{display:none}
  .hdr-nav .subnav{position:static;transform:none;opacity:1;visibility:visible;background:transparent;border:0;box-shadow:none;padding:2px 0 12px 18px;margin:0;min-width:0;gap:0}
  .hdr-nav .subnav a{font-size:1.02rem;padding:7px 0;color:#eef1f8;opacity:.9}
  body[data-theme="day"] .hdr-nav .subnav{background:transparent;box-shadow:none;border:0}
  body[data-theme="day"] .hdr-nav .subnav a{color:#242a33}
}

/* =====================================================================
   PROJECT GALLERY — auto-slider carousel + per-project photo viewer
   ===================================================================== */
.proj{cursor:pointer}
.proj-count{position:absolute;top:10px;right:10px;z-index:3;display:inline-flex;align-items:center;gap:5px;background:rgba(6,8,12,.72);color:#fff;font-family:'Fredoka',system-ui,sans-serif;font-size:.74rem;font-weight:600;padding:5px 10px;border-radius:999px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}

/* carousel */
.proj-carousel{position:relative}
.proj-viewport{overflow:hidden}
.proj-carousel .proj-track{display:flex;gap:16px;padding:4px 2px 6px;will-change:transform;touch-action:pan-y}
.proj-carousel .proj{flex:0 0 clamp(240px,27vw,318px)}
.proj-arrow{position:absolute;top:calc(50% - 3px);transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);display:grid;place-items:center;cursor:pointer;z-index:6;box-shadow:0 10px 28px rgba(0,0,0,.2);transition:.2s;opacity:.95}
.proj-arrow:hover{color:var(--gold);border-color:var(--gold);transform:translateY(-50%) scale(1.06)}
.proj-prev{left:-8px}
.proj-next{right:-8px}
@media(max-width:560px){.proj-arrow{display:none}}

/* per-project viewer */
.pv{position:fixed;inset:0;z-index:210;display:flex;align-items:center;justify-content:center;gap:10px;padding:20px;background:rgba(6,8,12,.94);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);opacity:0;visibility:hidden;transition:opacity .25s}
.pv.open{opacity:1;visibility:visible}
.pv-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:92vw;max-height:90vh}
.pv-fig img{max-width:min(1200px,86vw);max-height:80vh;object-fit:contain;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.6);background:rgba(255,255,255,.03)}
.pv-fig figcaption{color:#f2f4fa;font-family:'Fredoka',system-ui,sans-serif;font-size:.98rem;text-align:center;line-height:1.4}
.pv-fig figcaption b{font-weight:600}
.pv-cnt{color:rgba(255,255,255,.7)}
.pv-nav{flex:0 0 auto;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;cursor:pointer;transition:.2s;z-index:2}
.pv-nav:hover{background:rgba(255,255,255,.22);transform:scale(1.06)}
.pv-close{position:fixed;top:16px;right:18px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;display:grid;place-items:center;z-index:3;transition:.2s}
.pv-close:hover{background:rgba(255,255,255,.24)}
@media(max-width:640px){
  .pv{padding:12px}
  .pv-nav{position:fixed;bottom:22px;width:50px;height:50px}
  .pv-prev{left:26px}
  .pv-next{right:26px}
  .pv-fig img{max-width:94vw;max-height:72vh}
}

/* =====================================================================
   TOP BANNER (tijdelijke melding, bv. bouwvak) + KIYOH WIDGET
   --banner-h is 0 zodra de banner verborgen/verwijderd is, zodat alle
   offsets hieronder automatisch terugveren.
   ===================================================================== */
html{--banner-h:0px}
html:has(.site-banner:not([hidden])){--banner-h:44px}
@media(max-width:760px){html:has(.site-banner:not([hidden])){--banner-h:58px}}
.site-banner{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;min-height:var(--banner-h);padding:9px 46px;background:#D5000B;color:#fff;text-align:center}
.site-banner[hidden]{display:none}
.site-banner p{font-family:'Fredoka',system-ui,sans-serif;font-size:1.02rem;font-weight:500;line-height:1.35;margin:0}
.site-banner strong{font-weight:700}
.site-banner-x{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:0;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;font-size:.8rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:.2s}
.site-banner-x:hover{background:rgba(255,255,255,.34)}
@media(max-width:760px){.site-banner{padding:8px 40px}.site-banner p{font-size:.92rem}}

/* Kiyoh live widget */
.kiyoh-embed{display:flex;justify-content:center;margin-bottom:clamp(30px,4vw,46px)}
.kiyoh-card{background:#fff;border-radius:18px;padding:8px;box-shadow:0 16px 44px rgba(0,0,0,.16);border:1px solid rgba(20,16,10,.08);line-height:0}
.kiyoh-card iframe{display:block;width:400px;max-width:100%;height:222px;border:0;border-radius:12px}

/* live Kiyoh-reviewslider (vervangt .rev-grid zodra de feed binnen is) */
.rev-slider{position:relative}
.rev-viewport{overflow:hidden}
.rev-track{display:flex;gap:20px;align-items:stretch;padding:4px 2px 6px;will-change:transform;touch-action:pan-y;cursor:grab}
.rev-track:active{cursor:grabbing}
.rev-slider .rev{flex:0 0 clamp(262px,25vw,330px);display:flex;flex-direction:column;padding:28px 26px}
.rev-title{display:block;font-family:'Fraunces',serif;font-size:1.06rem;color:var(--ink);margin-bottom:8px}
.rev-live p{font-size:1.02rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.rev-live cite{margin-top:auto}
/* randen laten uitvloeien zodat de slider niet hard afgekapt oogt */
.rev-slider::before,.rev-slider::after{content:"";position:absolute;top:0;bottom:0;width:56px;z-index:2;pointer-events:none}
.rev-slider::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.rev-slider::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
@media(max-width:760px){.rev-slider::before,.rev-slider::after{width:22px}}

.rev-meta{text-align:center;color:var(--muted);font-size:.95rem;margin:-14px 0 30px}
.rev-meta b{color:var(--gold);font-family:'Fraunces',serif;font-size:1.06rem}
.rev-dot{opacity:.4;margin:0 5px}
@media(max-width:560px){.rev-meta{font-size:.88rem;line-height:1.7}}

/* Bronfoto's van de oude site zijn maar 555px breed; zonder width bleven ze in de
   viewer op ware grootte staan. Opschalen tot een grens die nog scherp oogt. */
.pv-fig img.is-small,.lightbox img.is-small{width:min(900px,86vw);height:auto}
@media(max-width:760px){.pv-fig img.is-small,.lightbox img.is-small{width:94vw}}