/* =========================================================
   Websitetemplate – stijl
   Kleuren van het merk pas je aan in js/config.js (accent).
   De basistinten hieronder kan je hier aanpassen.
   ========================================================= */
:root{
  --ink:#1C1B19;          /* donkere tekst en vlakken */
  --paper:#EFEBE4;        /* lichte achtergrond */
  --accent:#23402F;       /* hoofdkleur merk (wordt overschreven door config.js) */
  --accent-2:#C9A44C;     /* tweede kleur merk (wordt overschreven door config.js) */
  --on-accent:#F4F0E8;    /* tekst op de hoofdkleur */
  --bg:var(--paper); --text:var(--ink); --muted:#6B665E; --line:#D6CFC3; --card:#F7F4EF;
  --f:"Archivo","Arial Narrow","Helvetica Neue",Arial,system-ui,sans-serif;
  --r:22px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --bg:#151412; --text:#EFEBE4; --muted:#A39D93; --line:#2E2B27; --card:#1E1C19; --btn-bg:#EFEBE4; --btn-fg:#151412; }
}
:root[data-theme="dark"]{ --bg:#151412; --text:#EFEBE4; --muted:#A39D93; --line:#2E2B27; --card:#1E1C19; --btn-bg:#EFEBE4; --btn-fg:#151412; }
html{ scroll-padding-top:env(safe-area-inset-top,0px); }
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto!important; }
.lenis.lenis-stopped{ overflow:hidden; }
*,*::before,*::after{ box-sizing:inherit; }
body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--f); font-size:1.0625rem; line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; height:auto; display:block; }
button{ font:inherit; cursor:pointer; }
a{ color:inherit; }
:focus-visible{ outline:3px solid var(--accent-2); outline-offset:3px; border-radius:6px; }
.wrap{ width:min(1240px,100% - 2.5rem); margin-inline:auto; }
.visually-hidden{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:absolute; left:-9999px; } .skip:focus{ left:1rem; top:1rem; z-index:200; background:var(--bg); padding:.6rem 1rem; }

h1,h2,h3{ font-weight:800; line-height:.95; letter-spacing:-.015em; margin:0; }
.display{ font-size:clamp(3rem,10vw,9rem); font-variation-settings:"wdth" 75; text-transform:uppercase; line-height:.86; }
.h2{ font-size:clamp(2.2rem,5.6vw,4.6rem); font-variation-settings:"wdth" 80; }
.lede{ font-size:clamp(1.5rem,3.2vw,2.6rem); line-height:1.2; font-weight:600; letter-spacing:-.01em; max-width:30ch; margin:0; }
.muted{ color:var(--muted); }
section{ position:relative; }

/* buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem; border:none; border-radius:999px; padding:1rem 1.7rem; font-weight:700; font-size:1rem; text-decoration:none; background:var(--btn-bg,var(--ink)); color:var(--btn-fg,var(--paper)); will-change:transform; transition:background .3s,color .3s; }
.btn:hover{ background:var(--accent); color:var(--on-accent); }
.btn-accent{ background:var(--accent-2); color:var(--ink); }
.btn-accent:hover{ background:var(--paper); color:var(--ink); }
.btn-sm{ padding:.65rem 1.15rem; font-size:.92rem; }
.btn-line{ background:transparent; color:var(--text); box-shadow:inset 0 0 0 1.5px currentColor; }
.btn-line:hover{ background:var(--text); color:var(--bg); }

/* split words */
[data-split] .w{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; margin-bottom:-.08em; }
[data-split] .w>span{ display:inline-block; }

/* page wipe + loader */
.wipe{ position:fixed; inset:0; z-index:150; background:var(--accent); transform:translateY(100%); pointer-events:none; }
.js .wipe{ transform:translateY(0); }
.loader{ position:fixed; inset:0; z-index:160; background:var(--ink); color:var(--paper); display:none; place-items:center; }
.js .loader.on{ display:grid; }
.loader-in{ display:grid; justify-items:center; gap:1.2rem; }
.loader-name{ font-weight:800; text-transform:uppercase; font-size:clamp(2.5rem,9vw,6rem); font-variation-settings:"wdth" 62; line-height:1; }
.loader-num{ font-weight:600; font-variant-numeric:tabular-nums; color:var(--accent-2); }
.loader-bar{ width:200px; height:3px; background:#ffffff22; overflow:hidden; border-radius:2px; }
.loader-bar i{ display:block; height:100%; width:0; background:var(--accent-2); }

/* header */
.progress{ position:fixed; z-index:120; left:0; right:0; top:0; height:3px; pointer-events:none; }
.progress i{ display:block; height:100%; background:var(--accent-2); transform:scaleX(0); transform-origin:0 50%; }
.head{ position:fixed; z-index:100; left:0; right:0; top:0; padding-top:env(safe-area-inset-top,0px); transition:transform .45s cubic-bezier(.2,.8,.2,1),background .3s,box-shadow .3s; }
.head.is-solid{ background:color-mix(in srgb,var(--bg) 95%,transparent); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--line); }
.head.is-hidden{ transform:translateY(-110%); }
.head-in{ display:flex; align-items:center; gap:2rem; height:76px; }
.logo{ font-weight:800; font-size:1.25rem; text-decoration:none; font-variation-settings:"wdth" 90; letter-spacing:-.01em; margin-right:auto; }
.nav{ display:flex; gap:1.8rem; }
.nav a{ text-decoration:none; font-weight:600; position:relative; padding:.3rem 0; }
.nav a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.nav a:hover::after,.nav a[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; }
.head.on-dark:not(.is-solid){ color:var(--paper); }
.head.on-dark:not(.is-solid) .btn{ background:var(--paper); color:var(--ink); }
.menu-btn{ display:none; width:46px; height:46px; border-radius:50%; border:none; background:var(--ink); position:relative; }
.menu-btn span:not(.visually-hidden){ position:absolute; left:14px; right:14px; height:2px; background:var(--paper); transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.menu-btn span:nth-child(1){ top:19px; } .menu-btn span:nth-child(2){ top:26px; }
.menu-open .menu-btn span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.menu-open .menu-btn span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }
@media (max-width:860px){ .nav,.head-cta{ display:none; } .menu-btn{ display:block; } }









/* ===== HOME: stretch hero ===== */
.hs{ height:100vh; height:100svh; overflow:hidden; background:var(--ink); color:var(--paper); }
.hs-stage{ position:relative; height:100%; }
.hs-img{ position:absolute; inset:0; clip-path:inset(0% 0% 0% 0% round 0px); will-change:clip-path; }
.hs-img img{ width:100%; height:100%; object-fit:cover; }
.hs-img::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.55)); }
.hs-word{ position:absolute; left:0; right:0; top:50%; transform:translateY(-58%); text-align:center; z-index:2; font-size:clamp(5rem,30vw,30rem); text-transform:uppercase; line-height:.8; font-variation-settings:"wdth" 125; mix-blend-mode:difference; color:#fff; pointer-events:none; white-space:nowrap; }
.hs-top{ position:absolute; z-index:3; left:0; right:0; top:calc(96px + env(safe-area-inset-top,0px)); }
.hs-top p{ margin:0; font-weight:600; max-width:26ch; }
.hs-caption{ position:absolute; z-index:3; left:0; right:0; bottom:calc(2.4rem + env(safe-area-inset-bottom,0px)); }
.hs-caption .wrap{ display:flex; justify-content:space-between; align-items:end; gap:1.5rem; flex-wrap:wrap; }
.hs-caption p{ margin:0; font-size:clamp(1.1rem,2vw,1.45rem); max-width:30ch; font-weight:500; }
.hs-caption .btn{ background:var(--paper); color:var(--ink); }
.hs-caption .btn:hover{ background:var(--accent-2); }
.hs-scroll{ position:absolute; z-index:3; left:50%; bottom:1rem; width:1.5px; height:44px; background:#ffffff55; overflow:hidden; transform:translateX(-50%); }
.hs-scroll::after{ content:""; position:absolute; left:0; right:0; top:-50%; height:50%; background:#fff; animation:drop 1.8s cubic-bezier(.6,0,.4,1) infinite; }
@keyframes drop{ to{ top:110%; } }

/* intro highlight */
.intro{ padding:clamp(5rem,12vw,10rem) 0; }
.intro .lede{ max-width:24ch; font-size:clamp(1.9rem,4.4vw,3.6rem); }
[data-highlight] .hw{ opacity:1; }
.intro-meta{ display:flex; gap:3rem; flex-wrap:wrap; margin-top:3rem; color:var(--muted); }

/* marquee */
.marquee{ background:var(--accent); color:var(--on-accent); overflow:hidden; padding:1.3rem 0; }
.marquee-track{ display:flex; width:max-content; will-change:transform; }
.marquee-track span{ display:flex; align-items:center; gap:2.5rem; padding-right:2.5rem; font-weight:800; text-transform:uppercase; font-variation-settings:"wdth" 110; font-size:clamp(1.6rem,4vw,3.2rem); white-space:nowrap; line-height:1; }
.marquee-track span::after{ content:""; width:.55em; height:.55em; border-radius:50%; background:var(--accent-2); }

/* horizontal rail */
.hrail{ overflow:hidden; background:var(--bg); }
.hrail-track{ display:flex; gap:clamp(1rem,3vw,2.5rem); padding:clamp(5rem,9vw,7rem) clamp(1.25rem,5vw,4rem); width:max-content; align-items:stretch; }
.hrail-head{ width:min(420px,80vw); flex:none; display:flex; flex-direction:column; justify-content:space-between; gap:2rem; padding-right:2rem; }
.hrail-head p{ color:var(--muted); max-width:30ch; margin:1rem 0 0; }
.hcard{ width:clamp(280px,34vw,520px); flex:none; display:grid; gap:1.1rem; align-content:start; }
.hcard-img{ border-radius:var(--r); overflow:hidden; aspect-ratio:4/5; background:var(--card); }
.hcard-img img{ width:100%; height:115%; object-fit:cover; }
.hcard h3{ font-size:clamp(1.6rem,2.6vw,2.2rem); font-variation-settings:"wdth" 85; }
.hcard p{ margin:0; color:var(--muted); max-width:36ch; }
.hcard-n{ font-weight:700; color:var(--accent); }
@media (max-width:760px){
  .hrail-track{ flex-direction:column; width:auto; }
  .hrail-head,.hcard{ width:100%; padding-right:0; }
}

/* steps */
.steps{ padding:clamp(5rem,10vw,8rem) 0; background:var(--ink); color:var(--paper); }
.steps .h2{ margin-bottom:3.5rem; max-width:12ch; }
.steps-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,6rem); }
@media (max-width:860px){ .steps-grid{ grid-template-columns:1fr; } .steps-media{ display:none; } }
.steps-media{ position:sticky; top:14vh; align-self:start; aspect-ratio:4/5; border-radius:var(--r); overflow:hidden; }
.steps-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.08); transition:opacity .7s,transform 1.2s cubic-bezier(.2,.8,.2,1); }
.steps-media img.on{ opacity:1; transform:scale(1); }
.step{ min-height:60vh; display:flex; flex-direction:column; justify-content:center; opacity:.62; transition:opacity .5s; border-top:1px solid #ffffff22; }
.step.on{ opacity:1; }
@media (max-width:860px){ .step{ min-height:auto; padding:2rem 0; opacity:1; } }
.step-n{ font-weight:700; color:var(--accent-2); }
.step h3{ font-size:clamp(2rem,4.2vw,3.4rem); font-variation-settings:"wdth" 80; margin:.5rem 0 1rem; text-transform:uppercase; }
.step p{ margin:0; color:#C9C2B6; max-width:40ch; }

/* work strip */
.strip{ padding:clamp(5rem,10vw,8rem) 0; }
.strip-head{ display:flex; justify-content:space-between; align-items:end; gap:1.5rem; flex-wrap:wrap; margin-bottom:2.5rem; }
.strip-grid{ display:grid; grid-template-columns:1.2fr .8fr 1fr; gap:1.2rem; align-items:start; }
.strip-grid a{ display:block; border-radius:var(--r); overflow:hidden; }
.strip-grid a:nth-child(2){ margin-top:5rem; } .strip-grid a:nth-child(3){ margin-top:2rem; }
.strip-grid img{ width:100%; aspect-ratio:3/4; object-fit:cover; transition:transform 1s cubic-bezier(.2,.8,.2,1); }
.strip-grid a:hover img{ transform:scale(1.05); }
@media (max-width:700px){ .strip-grid{ grid-template-columns:1fr 1fr; } .strip-grid a:nth-child(3){ display:none; } .strip-grid a:nth-child(2){ margin-top:3rem; } }

/* page hero */
.ph{ padding:calc(150px + env(safe-area-inset-top,0px)) 0 clamp(3rem,6vw,5rem); }
.ph .display{ margin-bottom:1.5rem; }
.ph p{ font-size:clamp(1.15rem,2vw,1.4rem); max-width:40ch; margin:0; color:var(--muted); }
.ph-img{ border-radius:var(--r); overflow:hidden; aspect-ratio:16/8; margin-top:3rem; }
.ph-img img{ width:100%; height:100%; object-fit:cover; }

/* story */
.story{ padding:clamp(4rem,9vw,7rem) 0; }
.story-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,6vw,6rem); }
@media (max-width:860px){ .story-grid{ grid-template-columns:1fr; } }
.story-grid h2{ position:sticky; top:120px; align-self:start; }
.story-text{ display:grid; gap:2rem; }
.story-text p{ margin:0; font-size:clamp(1.3rem,2.4vw,1.9rem); line-height:1.35; font-weight:600; letter-spacing:-.01em; }

/* parallax */
.para{ height:clamp(360px,80vh,820px); overflow:hidden; position:relative; }
.para img{ position:absolute; left:0; top:-10%; width:100%; height:120%; object-fit:cover; }

/* values */
.values{ padding:clamp(5rem,10vw,8rem) 0; }
.values .h2{ margin-bottom:2.5rem; }
.value{ display:grid; grid-template-columns:5rem 1fr 1.2fr; gap:1.5rem; align-items:baseline; padding:2rem 0; border-top:1.5px solid var(--text); transition:padding .4s cubic-bezier(.2,.8,.2,1),background .4s; }
.value:last-child{ border-bottom:1.5px solid var(--text); }
.value:hover{ padding-left:1rem; }
.value-n{ font-weight:700; color:var(--accent); }
.value h3{ font-size:clamp(1.8rem,3.6vw,3rem); font-variation-settings:"wdth" 80; text-transform:uppercase; }
.value p{ margin:0; color:var(--muted); max-width:42ch; }
@media (max-width:760px){ .value{ grid-template-columns:1fr; gap:.5rem; } .value-n{ display:none; } }

/* team */
.team{ padding:0 0 clamp(5rem,10vw,8rem); }
.team .h2{ margin-bottom:2.5rem; }
.team-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr)); gap:1.4rem; }
.member-img{ border-radius:var(--r); overflow:hidden; aspect-ratio:4/5; background:var(--card); }
.member-img img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1); transition:filter .6s,transform 1s cubic-bezier(.2,.8,.2,1); }
.member:hover .member-img img{ filter:grayscale(0); transform:scale(1.04); }
.member h3{ font-size:1.3rem; margin-top:1rem; }
.member p{ margin:.2rem 0 0; color:var(--muted); }

/* gallery */
.filters{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:2rem; }
.filters button{ border:1.5px solid var(--line); background:transparent; color:var(--text); border-radius:999px; padding:.55rem 1.1rem; font-weight:600; transition:all .3s; }
.filters button[aria-pressed="true"]{ background:var(--text); color:var(--bg); border-color:var(--text); }
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:clamp(160px,22vw,300px); grid-auto-flow:dense; gap:1rem; padding-bottom:clamp(5rem,10vw,8rem); }
@media (max-width:760px){ .gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:42vw; } }
.g-item{ position:relative; border-radius:var(--r); overflow:hidden; border:none; padding:0; background:var(--card); cursor:zoom-in; }
.g-item.tall{ grid-row:span 2; } .g-item.wide{ grid-column:span 2; }
.g-item img{ width:100%; height:100%; object-fit:cover; transition:transform 1s cubic-bezier(.2,.8,.2,1); }
.g-item:hover img{ transform:scale(1.06); }
.g-item figcaption{ position:absolute; left:1rem; bottom:1rem; background:var(--paper); color:var(--ink); border-radius:999px; padding:.35rem .8rem; font-size:.85rem; font-weight:600; transform:translateY(160%); transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.g-item:hover figcaption,.g-item:focus-visible figcaption{ transform:none; }
.g-item[hidden]{ display:none; }
.lightbox{ position:fixed; inset:0; z-index:140; background:rgba(15,14,12,.94); display:none; grid-template-rows:auto 1fr auto; color:#fff; padding:calc(1rem + env(safe-area-inset-top,0px)) 1rem calc(1rem + env(safe-area-inset-bottom,0px)); }
.lightbox.on{ display:grid; }
.lb-top{ display:flex; justify-content:space-between; align-items:center; }
.lb-stage{ display:grid; place-items:center; min-height:0; touch-action:pan-y; }
.lb-stage img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:14px; }
.lb-bottom{ display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.lb-btn{ width:52px; height:52px; border-radius:50%; border:1.5px solid #ffffff55; background:transparent; color:#fff; font-size:1.3rem; display:grid; place-items:center; }
.lb-btn:hover{ background:#fff; color:#000; }

/* contact */
.contact{ padding-bottom:clamp(5rem,10vw,8rem); }
.contact-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(2rem,6vw,5rem); }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
.form{ display:grid; gap:1.1rem; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
@media (max-width:600px){ .form-row{ grid-template-columns:1fr; } }
.field{ position:relative; }
.field input,.field textarea,.field select{ width:100%; border:none; border-bottom:1.5px solid var(--line); background:transparent; color:var(--text); font:inherit; font-size:1.1rem; padding:1.6rem 0 .6rem; border-radius:0; transition:border-color .3s; }
.field textarea{ min-height:150px; resize:vertical; }
.field label{ position:absolute; left:0; top:1.5rem; color:var(--muted); pointer-events:none; transition:transform .3s cubic-bezier(.2,.8,.2,1),font-size .3s,color .3s; transform-origin:left top; }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--accent); }
.field input:focus+label,.field input:not(:placeholder-shown)+label,.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label{ transform:translateY(-1.25rem) scale(.8); color:var(--accent); }
.field .err{ display:none; color:#B3261E; font-size:.85rem; margin-top:.3rem; }
.field.invalid input,.field.invalid textarea{ border-color:#B3261E; }
.field.invalid .err{ display:block; }
.consent{ display:flex; gap:.6rem; align-items:flex-start; font-size:.92rem; color:var(--muted); }
.consent input{ margin-top:.25rem; width:18px; height:18px; accent-color:var(--accent); }
.submit{ justify-self:start; position:relative; min-width:220px; }
.submit[disabled]{ opacity:.7; cursor:progress; }
.form-status{ font-weight:600; min-height:1.6em; }
.form-status.ok{ color:var(--accent); } .form-status.bad{ color:#B3261E; }
.info{ display:grid; gap:2rem; align-content:start; }
.info-block h3{ font-size:.95rem; color:var(--muted); font-weight:600; margin-bottom:.5rem; letter-spacing:0; }
.info-block a,.info-block p{ font-size:clamp(1.2rem,2vw,1.5rem); font-weight:700; text-decoration:none; margin:0; display:block; line-height:1.3; }
.info-block a:hover{ color:var(--accent); }
.hours{ width:100%; border-collapse:collapse; }
.hours td{ padding:.45rem 0; border-bottom:1px solid var(--line); }
.hours td:last-child{ text-align:right; font-weight:600; }
.map{ display:block; border-radius:var(--r); overflow:hidden; aspect-ratio:16/10; background:var(--accent); color:var(--on-accent); position:relative; text-decoration:none; }
.map-grid{ position:absolute; inset:0; background-image:linear-gradient(#ffffff14 1px,transparent 1px),linear-gradient(90deg,#ffffff14 1px,transparent 1px); background-size:34px 34px; }
.map-pin{ position:absolute; left:50%; top:46%; width:22px; height:22px; margin:-11px; border-radius:50% 50% 50% 0; background:var(--accent-2); transform:rotate(-45deg); }
.map-pin::after{ content:""; position:absolute; inset:-14px; border-radius:50%; border:2px solid var(--accent-2); animation:ping 2s ease-out infinite; }
@keyframes ping{ from{ transform:scale(.4); opacity:1; } to{ transform:scale(1.6); opacity:0; } }
.map span{ position:absolute; left:1rem; bottom:1rem; background:var(--paper); color:var(--ink); border-radius:999px; padding:.5rem .9rem; font-weight:700; font-size:.9rem; }
.map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* footer */
.foot{ background:var(--ink); color:var(--paper); padding:clamp(5rem,10vw,8rem) 0 calc(1.5rem + env(safe-area-inset-bottom,0px)); overflow:hidden; }
.foot-cta{ display:flex; justify-content:space-between; align-items:end; gap:2rem; flex-wrap:wrap; }
.foot-cta .h2{ max-width:14ch; }
.foot-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; margin-top:4rem; padding-top:2rem; border-top:1px solid #ffffff22; }
@media (max-width:760px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
.foot-grid h4{ margin:0 0 .8rem; font-size:.95rem; color:#A39D93; font-weight:600; }
.foot-grid ul{ list-style:none; margin:0; padding:0; display:grid; gap:.4rem; }
.foot-grid a{ text-decoration:none; } .foot-grid a:hover{ color:var(--accent-2); }
.foot-word{ font-weight:800; text-transform:uppercase; font-size:clamp(4rem,19vw,19rem); line-height:.8; margin:4rem 0 2rem; color:var(--accent-2); font-variation-settings:"wdth" 100; white-space:nowrap; transition:font-variation-settings .3s; }
.foot-legal{ display:flex; justify-content:space-between; gap:.5rem 2rem; flex-wrap:wrap; color:#A39D93; font-size:.88rem; }
.foot-legal span+span{ margin-left:1rem; }

.reveal-done{ opacity:1!important; }
@media (prefers-reduced-motion: reduce){
  .hs-scroll::after,.map-pin::after{ animation:none; }
  .steps-media img{ transition:none; }
}

/* =========================================================
   KOLÉ – CMYK-laag bovenop het template
   ========================================================= */
:root{ --c:#00A7E1; --m:#E6007E; --y:#FFE500; --k:#111111; }
.logo{ text-transform:uppercase; font-variation-settings:"wdth" 110; letter-spacing:.02em; display:flex; align-items:center; gap:.55rem; }
.logo-dots{ display:inline-grid; grid-template-columns:repeat(2,7px); gap:2px; }
.logo-dots i{ width:7px; height:7px; border-radius:50%; }
.logo-dots i:nth-child(1){ background:var(--c); } .logo-dots i:nth-child(2){ background:var(--m); } .logo-dots i:nth-child(3){ background:var(--y); } .logo-dots i:nth-child(4){ background:var(--k); }
.head.on-dark:not(.is-solid) .logo-dots i:nth-child(4){ background:#fff; }
.loader-bar i{ background:linear-gradient(90deg,var(--c) 0 25%,var(--m) 25% 50%,var(--y) 50% 75%,#fff 75%); }

/* ---- register hero ---- */
.reg-hero{ height:100vh; height:100svh; background:#F4F2EE; color:#111; overflow:hidden; position:relative; }
.reg-stage{ position:relative; height:100%; display:grid; place-items:center; }
.reg-word{ position:relative; font-weight:900; text-transform:uppercase; font-size:clamp(5.5rem,31vw,30rem); line-height:.8; font-variation-settings:"wdth" 100; letter-spacing:-.02em; white-space:nowrap; margin:0; }
.reg-word .ghost{ visibility:hidden; }
.reg-word .lay{ position:absolute; inset:0; mix-blend-mode:multiply; will-change:transform; }
.lay-c{ color:var(--c); } .lay-m{ color:var(--m); } .lay-y{ color:var(--y); } .lay-k{ color:var(--k); opacity:0; }
.reg-word .lay-c{ transform:translate(-4.5vw,-3vw) rotate(-3deg); }
.reg-word .lay-m{ transform:translate(4vw,2.4vw) rotate(2.5deg); }
.reg-word .lay-y{ transform:translate(-1.5vw,4.5vw) rotate(1deg); }
.mark{ position:absolute; width:46px; height:46px; color:#111; opacity:.85; }
.mark::before,.mark::after{ content:""; position:absolute; background:currentColor; }
.mark::before{ left:50%; top:0; bottom:0; width:1.5px; margin-left:-.75px; }
.mark::after{ top:50%; left:0; right:0; height:1.5px; margin-top:-.75px; }
.mark i{ position:absolute; inset:11px; border:1.5px solid currentColor; border-radius:50%; }
.mark.tl{ top:calc(100px + env(safe-area-inset-top,0px)); left:clamp(1rem,4vw,3rem); } .mark.tr{ top:calc(100px + env(safe-area-inset-top,0px)); right:clamp(1rem,4vw,3rem); }
.mark.bl{ bottom:clamp(1.5rem,5vh,3rem); left:clamp(1rem,4vw,3rem); } .mark.br{ bottom:clamp(1.5rem,5vh,3rem); right:clamp(1rem,4vw,3rem); }
.colorbar{ position:absolute; left:50%; top:calc(108px + env(safe-area-inset-top,0px)); transform:translateX(-50%); display:flex; gap:3px; }
.colorbar i{ width:22px; height:12px; }
.colorbar i:nth-child(1){ background:var(--c); } .colorbar i:nth-child(2){ background:var(--m); } .colorbar i:nth-child(3){ background:var(--y); } .colorbar i:nth-child(4){ background:var(--k); }
.colorbar i:nth-child(5){ background:#9AA0A6; } .colorbar i:nth-child(6){ background:#CFD3D6; }
.reg-status{ position:absolute; left:50%; top:calc(132px + env(safe-area-inset-top,0px)); transform:translateX(-50%); font-weight:700; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; }
.reg-status b{ color:var(--m); }
.reg-cap{ position:absolute; left:0; right:0; bottom:calc(clamp(4.5rem,11vh,7rem) + env(safe-area-inset-bottom,0px)); }
.reg-cap .wrap{ display:flex; justify-content:space-between; align-items:end; gap:1.5rem; flex-wrap:wrap; }
.reg-cap p{ margin:0; font-size:clamp(1.1rem,2vw,1.5rem); font-weight:600; max-width:30ch; line-height:1.3; }
.reg-cap .addr{ font-weight:600; font-size:.95rem; color:#555; display:block; margin-top:.6rem; }
@media (max-width:700px){ .mark{ width:30px; height:30px; } .mark i{ inset:7px; } .colorbar{ display:none; } .reg-status{ top:calc(96px + env(safe-area-inset-top,0px)); font-size:.7rem; } }
.reg-hero .btn{ background:#111; color:#F4F2EE; } .reg-hero .btn:hover{ background:var(--m); color:#fff; }

/* ---- twee werelden ---- */
.duo{ display:grid; grid-template-columns:1fr 1fr; min-height:80vh; }
@media (max-width:820px){ .duo{ grid-template-columns:1fr; } }
.duo-side{ position:relative; padding:clamp(4rem,8vw,7rem) clamp(1.25rem,5vw,4rem); display:flex; flex-direction:column; justify-content:space-between; gap:3rem; overflow:hidden; }
.duo-print{ background:var(--y); color:#111; }
.duo-digi{ background:#111; color:#F4F2EE; }
.duo-side .tag{ font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:.85rem; }
.duo-side h2{ font-size:clamp(2.6rem,6.4vw,5.8rem); text-transform:uppercase; font-variation-settings:"wdth" 72; line-height:.88; }
.duo-side ul{ list-style:none; margin:0; padding:0; display:grid; gap:.2rem; }
.duo-side li a{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.85rem 0; border-top:1.5px solid currentColor; text-decoration:none; font-weight:700; font-size:clamp(1.05rem,1.7vw,1.3rem); transition:padding .35s cubic-bezier(.2,.8,.2,1); }
.duo-side li a::after{ content:"→"; transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.duo-side li a:hover{ padding-left:.8rem; } .duo-side li a:hover::after{ transform:translateX(6px); }
.duo-dots{ position:absolute; right:-6%; top:-8%; width:60%; aspect-ratio:1; background-image:radial-gradient(currentColor 22%,transparent 24%); background-size:22px 22px; opacity:.12; border-radius:50%; pointer-events:none; }
.hover-card{ position:fixed; z-index:80; left:0; top:0; width:220px; aspect-ratio:4/3; border-radius:18px; pointer-events:none; opacity:0; transform:translate(-50%,-50%) scale(.6); display:grid; place-items:center; font-weight:900; text-transform:uppercase; font-size:1.6rem; font-variation-settings:"wdth" 75; color:#111; box-shadow:0 30px 60px -25px #0007; }
@media (hover:none){ .hover-card{ display:none; } }

/* ---- grote cijfers stappen ---- */
.steps-media.nums{ aspect-ratio:1; display:grid; place-items:center; background:#1c1c1c; }
.steps-media .num{ position:absolute; inset:0; display:grid; place-items:center; font-weight:900; font-size:clamp(10rem,26vw,24rem); line-height:1; font-variation-settings:"wdth" 70; opacity:0; transform:scale(1.15) rotate(-6deg); transition:opacity .6s,transform 1s cubic-bezier(.2,.8,.2,1); mix-blend-mode:screen; }
.steps-media .num.on{ opacity:1; transform:none; }
.num-c{ color:var(--c); } .num-m{ color:var(--m); } .num-y{ color:var(--y); } .num-k{ color:#F4F2EE; }

/* ---- aanbod / catalogus ---- */
.cat-nav{ position:sticky; top:calc(env(safe-area-inset-top,0px)); z-index:60; background:color-mix(in srgb,var(--bg) 92%,transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.cat-nav .wrap{ display:flex; gap:.3rem; overflow-x:auto; padding:.8rem 0; scrollbar-width:none; position:relative; }
.cat-nav .wrap::-webkit-scrollbar{ display:none; }
.cat-nav a{ flex:none; text-decoration:none; font-weight:700; font-size:.92rem; padding:.55rem 1rem; border-radius:999px; position:relative; z-index:1; transition:color .3s; }
.cat-nav a[aria-current="true"]{ color:var(--bg); }
.cat-pill{ position:absolute; z-index:0; top:.8rem; height:calc(100% - 1.6rem); border-radius:999px; background:var(--text); transition:left .45s cubic-bezier(.2,.8,.2,1),width .45s cubic-bezier(.2,.8,.2,1); }
.cat{ padding:clamp(4rem,8vw,6rem) 0 1rem; scroll-margin-top:70px; }
.cat-head{ display:grid; grid-template-columns:auto 1fr; gap:1.2rem 2rem; align-items:end; margin-bottom:2.2rem; }
.cat-sw{ width:clamp(56px,7vw,84px); aspect-ratio:1; border-radius:18px; display:grid; place-items:center; font-weight:900; font-size:1.5rem; color:#111; }
.cat-head h2{ font-size:clamp(2.2rem,5.4vw,4.4rem); text-transform:uppercase; font-variation-settings:"wdth" 75; }
.cat-head p{ grid-column:2; margin:0; color:var(--muted); max-width:56ch; }
@media (max-width:600px){ .cat-head{ grid-template-columns:1fr; } .cat-head p{ grid-column:1; } }
.cat-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); gap:1rem; }
.pcard{ position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:1.4rem 1.4rem 1.2rem; display:flex; flex-direction:column; gap:.7rem; overflow:hidden; transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .3s; isolation:isolate; }
.pcard::before{ content:""; position:absolute; inset:auto -20% -60% -20%; height:120%; border-radius:50%; background:var(--sw,var(--c)); transform:translateY(40%) scale(.6); opacity:0; transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .4s; z-index:-1; }
.pcard:hover{ transform:translateY(-5px); border-color:transparent; }
.pcard:hover::before{ transform:translateY(0) scale(1.2); opacity:.16; }
.pcard h3{ font-size:1.25rem; letter-spacing:-.01em; line-height:1.15; }
.pcard ul{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.35rem; }
.pcard li{ font-size:.82rem; font-weight:600; background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:.22rem .6rem; }
.pcard a{ margin-top:auto; padding-top:.5rem; font-weight:700; text-decoration:none; display:inline-flex; gap:.4rem; align-items:center; }
.pcard a::after{ content:"→"; transition:transform .3s; } .pcard:hover a::after{ transform:translateX(5px); }
.cat-cta{ margin:3.5rem 0 0; display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap; padding:2rem; border-radius:var(--r); background:var(--text); color:var(--bg); }
.cat-cta p{ margin:0; font-size:clamp(1.2rem,2.2vw,1.6rem); font-weight:700; max-width:34ch; }
.cat-cta .btn{ background:var(--y); color:#111; }

/* ---- offerte-formulier ---- */
.q{ background:var(--card); border:1px solid var(--line); border-radius:28px; padding:clamp(1.4rem,4vw,2.6rem); }
.q-top{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1.4rem; font-weight:700; }
.q-bar{ height:6px; background:var(--line); border-radius:3px; overflow:hidden; margin-bottom:2rem; }
.q-bar i{ display:block; height:100%; width:25%; background:linear-gradient(90deg,var(--c),var(--m),var(--y)); border-radius:3px; transition:width .6s cubic-bezier(.2,.8,.2,1); }
.q-step[hidden]{ display:none; }
.q-step h2{ font-size:clamp(1.8rem,3.6vw,2.8rem); font-variation-settings:"wdth" 80; margin-bottom:.6rem; }
.q-step > p{ color:var(--muted); margin:0 0 1.6rem; }
.chips{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr)); gap:.7rem; }
.chip{ position:relative; }
.chip input{ position:absolute; opacity:0; pointer-events:none; }
.chip span{ display:flex; flex-direction:column; gap:.2rem; border:1.5px solid var(--line); border-radius:18px; padding:1rem 1.1rem; cursor:pointer; transition:border-color .25s,background .25s,transform .25s; font-weight:700; height:100%; }
.chip span small{ font-weight:500; color:var(--muted); }
.chip span::before{ content:""; width:14px; height:14px; border-radius:50%; background:var(--sw,var(--c)); margin-bottom:.35rem; transition:transform .3s; }
.chip input:checked + span{ border-color:var(--text); background:var(--bg); transform:translateY(-2px); }
.chip input:checked + span::before{ transform:scale(1.5); }
.chip input:focus-visible + span{ outline:3px solid var(--c); outline-offset:2px; }
.q-group{ border:none; padding:0; margin:0 0 2rem; }
.q-group[hidden]{ display:none; }
.q-group legend{ font-weight:800; font-size:1.15rem; margin-bottom:1rem; padding:0; display:flex; gap:.6rem; align-items:center; }
.q-group legend i{ width:12px; height:12px; border-radius:50%; background:var(--sw); }
.q .field select{ appearance:none; background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23888' stroke-width='2'/%3E%3C/svg%3E") right center/18px no-repeat; }
.q .field.static label{ transform:translateY(-1.25rem) scale(.8); }
.mini-chips{ display:flex; flex-wrap:wrap; gap:.45rem; margin:.4rem 0 1rem; }
.mini-chips label{ position:relative; }
.mini-chips input{ position:absolute; opacity:0; }
.mini-chips span{ display:inline-block; border:1.5px solid var(--line); border-radius:999px; padding:.45rem .9rem; font-weight:600; font-size:.92rem; cursor:pointer; transition:all .25s; }
.mini-chips input:checked + span{ background:var(--text); color:var(--bg); border-color:var(--text); }
.mini-chips input:focus-visible + span{ outline:3px solid var(--c); outline-offset:2px; }
.q-sub{ font-weight:700; font-size:.95rem; margin:.4rem 0 0; }
.q-nav{ display:flex; justify-content:space-between; gap:1rem; margin-top:2rem; flex-wrap:wrap; }
.q-err{ color:#B3261E; font-weight:600; min-height:1.5em; margin:.8rem 0 0; }
.q-sum{ display:grid; gap:1rem; }
.q-sum dl{ margin:0; display:grid; grid-template-columns:minmax(120px,.4fr) 1fr; gap:.5rem 1rem; padding:1.2rem; border-radius:16px; background:var(--bg); }
.q-sum dt{ color:var(--muted); font-weight:600; } .q-sum dd{ margin:0; font-weight:600; white-space:pre-wrap; }
.q-sum h3{ font-size:1rem; display:flex; gap:.5rem; align-items:center; }
.q-done{ text-align:center; padding:2rem 0; }
.q-done .big{ font-size:clamp(3rem,10vw,6rem); font-weight:900; font-variation-settings:"wdth" 70; text-transform:uppercase; line-height:.9; }
.file-drop{ display:block; border:1.5px dashed var(--line); border-radius:18px; padding:1.2rem; text-align:center; cursor:pointer; color:var(--muted); transition:border-color .3s,background .3s; }
.file-drop:hover,.file-drop.over{ border-color:var(--m); background:var(--bg); }
.file-drop input{ position:absolute; opacity:0; width:1px; height:1px; }
.file-drop b{ color:var(--text); }
@media (prefers-reduced-motion: reduce){
  .reg-word .lay-c,.reg-word .lay-m,.reg-word .lay-y{ transform:none!important; }
  .reg-word .lay-k{ opacity:1; }
}

/* ---- intro als nette kaart ---- */
.intro{ padding:clamp(3rem,8vw,7rem) 0; }
.intro-box{ position:relative; background:var(--card); border:1px solid var(--line); border-radius:28px; padding:clamp(1.6rem,5vw,3.6rem); overflow:hidden; }
.intro-box::before{ content:""; position:absolute; left:0; right:0; top:0; height:6px; background:linear-gradient(90deg,var(--c) 0 25%,var(--m) 25% 50%,var(--y) 50% 75%,var(--k) 75%); }
.intro-kicker{ display:inline-block; font-weight:700; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:1rem; }
.intro .lede{ font-size:clamp(1.35rem,3.2vw,2.5rem); line-height:1.25; max-width:28ch; }
.intro-meta{ display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin-top:clamp(1.8rem,4vw,2.8rem); color:var(--text); }
.intro-meta span{ display:grid; gap:.15rem; padding:1rem 1.1rem 1.05rem; border-radius:18px; background:var(--bg); border:1px solid var(--line); font-size:.92rem; color:var(--muted); }
.intro-meta span::before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--sw); margin-bottom:.45rem; }
.intro-meta b{ color:var(--text); font-size:1rem; }
@media (max-width:760px){ .intro-meta{ grid-template-columns:1fr; } }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .intro-box::before{ background:linear-gradient(90deg,var(--c) 0 25%,var(--m) 25% 50%,var(--y) 50% 75%,#F4F2EE 75%); } }

/* ---- aanbod v2: zoeken + tabbladen ---- */
.ph-compact{ padding-bottom:1.5rem; }
.ph-compact .display{ font-size:clamp(2.6rem,8vw,6.5rem); margin-bottom:1rem; }
.cat-tools{ padding-bottom:.5rem; scroll-margin-top:90px; }
.cat-search input{ width:100%; font:inherit; font-size:1.05rem; color:var(--text); background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='%23888' stroke-width='2'/%3E%3Cpath d='M20 20l-3.5-3.5' stroke='%23888' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 1.1rem center/20px no-repeat; border:1.5px solid var(--line); border-radius:999px; padding:.95rem 1.2rem .95rem 3rem; min-height:52px; }
.cat-search input:focus{ outline:none; border-color:var(--text); }



.cat-tab:focus-visible{ outline:3px solid var(--c); outline-offset:2px; }

.cat-count{ margin:.8rem 0 0; color:var(--muted); font-weight:600; min-height:1.4em; }
.js [data-cat-panels] .cat{ padding:1.2rem 0 1rem; }
.cat:focus{ outline:none; }
.cat-head{ grid-template-columns:auto 1fr; align-items:center; gap:1rem; margin-bottom:1.4rem; }
.cat-head > div{ display:grid; gap:.3rem; }
.cat-head h2{ font-size:clamp(1.6rem,4vw,2.6rem); }
.cat-head p{ grid-column:auto; font-size:.98rem; }
.cat-sw{ width:48px; border-radius:14px; font-size:1.1rem; }
@media (max-width:600px){ .cat-head{ grid-template-columns:auto 1fr; } .cat-head p{ grid-column:auto; } }
.pcard-cat{ font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); display:none; }
[data-cat-panels].searching .pcard-cat{ display:block; }
@media (max-width:600px){ .pcard{ padding:1.1rem 1.1rem 1rem; gap:.55rem; } .cat-grid{ gap:.7rem; } }
.cat-back{ display:inline-block; margin-top:1.2rem; font-weight:700; text-decoration:none; color:var(--muted); padding:.5rem 0; }
.cat-back:hover{ color:var(--text); }
.cat-empty{ padding:2rem 0; display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
.cat-empty p{ margin:0; font-weight:600; }

/* ---- socials, kledingshop ---- */
.socials{ display:flex; flex-wrap:wrap; gap:.4rem .9rem; }
.info-block .socials a{ font-size:1.05rem; }
.foot-social{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2.5rem; }
.soc{ display:inline-flex; align-items:center; gap:.55rem; min-height:44px; padding:.55rem 1rem; border-radius:999px; border:1.5px solid #ffffff2e; text-decoration:none; font-weight:700; transition:background .25s,color .25s,border-color .25s; }
.soc svg{ width:20px; height:20px; flex:none; }
.soc:hover{ background:var(--y); color:#111; border-color:var(--y); }
.slogan{ display:block; font-size:1.25em; font-weight:900; text-transform:uppercase; font-variation-settings:"wdth" 80; letter-spacing:-.01em; margin-bottom:.25rem; }
.shop-banner{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin:0 0 1.2rem; padding:1.1rem 1.3rem; border-radius:var(--r); background:var(--y); color:#111; text-decoration:none; transition:transform .3s cubic-bezier(.2,.8,.2,1); }
.shop-banner:hover{ transform:translateY(-3px); }
.shop-banner-t{ display:grid; gap:.15rem; }
.shop-banner-t b{ font-size:1.15rem; }
.shop-banner-go{ font-weight:800; background:#111; color:var(--y); border-radius:999px; padding:.6rem 1.1rem; }
.q-hint{ margin:-.4rem 0 1rem; color:var(--muted); font-size:.95rem; }
.q-hint a{ font-weight:700; color:var(--text); }
@media (max-width:860px){ .nav a[data-site-link="textile"]{ display:none; } }

/* ---- fixes: geen cijferbox op telefoon, naam onderaan wit en kleiner ---- */
@media (max-width:860px){ .steps-media.nums{ display:none; } }
.foot-word{ color:#F4F2EE; font-size:clamp(3.5rem,11vw,9rem); margin:3rem 0 1.5rem; }


/* =========================================================
   Hero v2 – rustig en professioneel
   ========================================================= */
.hero2{ background:#F4F2EE; color:#111; padding:calc(110px + env(safe-area-inset-top,0px)) 0 clamp(3rem,6vw,5rem); overflow:hidden; }
.h2-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.h2-text > *{ opacity:0; transform:translateY(18px); animation:h2in .8s cubic-bezier(.2,.8,.2,1) forwards; }
.h2-text > *:nth-child(2){ animation-delay:.08s } .h2-text > *:nth-child(3){ animation-delay:.16s } .h2-text > *:nth-child(4){ animation-delay:.24s } .h2-text > *:nth-child(5){ animation-delay:.32s } .h2-text > *:nth-child(6){ animation-delay:.4s }
@keyframes h2in{ to{ opacity:1; transform:none; } }
.h2-kicker{ display:flex; align-items:center; gap:.6rem; font-weight:700; font-size:.88rem; color:#555; margin:0 0 1.2rem; }
.h2-title{ font-size:clamp(2.6rem,5.6vw,5rem); line-height:.95; letter-spacing:-.03em; font-weight:900; text-transform:none; font-variation-settings:"wdth" 88; margin:0; }
.h2-rot{ font-size:clamp(1.5rem,3vw,2.4rem); font-weight:800; letter-spacing:-.02em; line-height:1.15; margin:.85rem 0 0; color:#111; }
.rot{ display:inline-grid; vertical-align:bottom; overflow:hidden; height:1.2em; }
.rot > span{ grid-area:1/1; justify-self:start; white-space:nowrap; transform:translateY(105%); transition:transform .6s cubic-bezier(.7,0,.2,1); padding-bottom:.08em; background:linear-gradient(var(--rc,var(--m)),var(--rc,var(--m))) 0 92%/100% .14em no-repeat; }
.rot > span.on{ transform:none; }
.rot > span.out{ transform:translateY(-105%); }
.rot > span:nth-child(3n+1){ --rc:var(--c) } .rot > span:nth-child(3n+2){ --rc:var(--m) } .rot > span:nth-child(3n){ --rc:var(--y) }
.h2-lead{ font-size:clamp(1.05rem,1.4vw,1.2rem); color:#555; max-width:44ch; margin:1.3rem 0 0; line-height:1.55; }
.h2-cta{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.8rem; }
.hero2 .btn{ background:#111; color:#F4F2EE; } .hero2 .btn:hover{ background:var(--m); color:#fff; }
.hero2 .btn-line{ background:transparent; color:#111; box-shadow:inset 0 0 0 1.5px #111; } .hero2 .btn-line:hover{ background:#111; color:#F4F2EE; }
.h2-facts{ list-style:none; padding:0; margin:2.2rem 0 0; display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; font-size:.92rem; color:#555; }
.h2-facts li{ display:flex; align-items:center; gap:.45rem; }
.h2-facts li::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--c); }
.h2-facts li:nth-child(2)::before{ background:var(--m); } .h2-facts li:nth-child(3)::before{ background:var(--y); }
.h2-facts b{ color:#111; }
.h2-visual{ display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; height:min(70vh,620px); overflow:hidden; border-radius:28px; -webkit-mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent); opacity:0; animation:h2fade 1.2s .3s ease forwards; }
@keyframes h2fade{ to{ opacity:1; } }
.h2-col{ overflow:hidden; }
.h2-track{ display:grid; gap:.8rem; animation:h2up 38s linear infinite; }
.h2-col:nth-child(2) .h2-track{ animation-direction:reverse; animation-duration:44s; }
.h2-col:nth-child(3) .h2-track{ animation-duration:50s; }
.h2-track img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:16px; display:block; }
@keyframes h2up{ to{ transform:translateY(calc(-50% - .4rem)); } }
.h2-visual:hover .h2-track{ animation-play-state:paused; }
@media (max-width:900px){
  .hero2{ padding-top:calc(96px + env(safe-area-inset-top,0px)); }
  .h2-grid{ grid-template-columns:1fr; }
  .h2-visual{ height:auto; grid-template-columns:1fr; border-radius:0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
  .h2-col:not(:first-child){ display:none; }
  .h2-track{ display:flex; width:max-content; animation:h2left 40s linear infinite; }
  .h2-track img{ width:150px; flex:none; }
  @keyframes h2left{ to{ transform:translateX(calc(-50% - .4rem)); } }
}
@media (prefers-reduced-motion: reduce){
  .h2-text > *,.h2-visual{ opacity:1; transform:none; animation:none; }
  .h2-track{ animation:none; }
  .rot > span{ transition:none; }
}

/* ---- logo linksboven groter ---- */
.head .logo{ font-size:clamp(1.45rem,2.2vw,1.8rem); gap:.7rem; }
.head .logo-dots{ grid-template-columns:repeat(2,9px); gap:3px; }
.head .logo-dots i{ width:9px; height:9px; }
/* zwevend dienstkaartje: alleen zichtbaar tijdens hover */
.hover-card{ opacity:0; visibility:hidden; transform:translate(-50%,-50%) scale(.6) rotate(0deg); transition:opacity .25s,transform .35s cubic-bezier(.3,1.5,.5,1),visibility 0s .25s; }
.hover-card.on{ opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1) rotate(var(--rot,0deg)); transition:opacity .25s,transform .35s cubic-bezier(.3,1.5,.5,1),visibility 0s; }

/* ---------- KOLÉ: scrollvideo rondleiding (Over ons) ---------- */
.tour{ position:relative; height:280vh; --p:0; --e:0; }
.tour-sticky{ position:sticky; top:0; height:100vh; height:100svh; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.tour-frame{ position:relative; width:100%; height:100%; background:#111;
  clip-path:inset(calc((1 - var(--e)) * 9%) calc((1 - var(--e)) * 6%) round calc((1 - var(--e)) * 28px));
  will-change:clip-path; }
.tour-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(calc(1.08 - var(--e) * .08)); }
.tour-shade{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 28%, transparent 55%, rgba(0,0,0,.65) 100%); }
.tour-caps{ list-style:none; margin:0; padding:0; position:absolute; left:clamp(20px,5vw,72px); bottom:clamp(56px,9vh,96px); right:20px; }
.tour-cap{ position:absolute; left:0; bottom:0; max-width:34rem; color:#fff; opacity:0; transform:translateY(24px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.tour-cap.on{ opacity:1; transform:none; }
.tour-cap b{ display:block; font-size:clamp(2rem,5.2vw,4.6rem); line-height:.95; font-stretch:80%; font-weight:850; letter-spacing:-.01em; text-transform:uppercase; }
.tour-cap span:last-child{ display:block; margin-top:.6rem; font-size:clamp(1rem,1.6vw,1.2rem); opacity:.9; }
.tour-n{ display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:.12em; padding:.3em .7em; border-radius:99px; margin-bottom:.8rem; background:var(--m); color:#fff; }
.tour-cap:nth-child(2) .tour-n{ background:var(--c); }
.tour-cap:nth-child(3) .tour-n{ background:var(--y); color:#111; }
.tour-hint{ position:absolute; top:clamp(20px,4vh,40px); left:50%; transform:translateX(-50%); color:#fff; font-size:.85rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  display:flex; align-items:center; gap:.6rem; opacity:calc(1 - var(--p) * 12); white-space:nowrap; }
.tour-hint i{ width:18px; height:28px; border:2px solid #fff; border-radius:10px; position:relative; }
.tour-hint i::after{ content:""; position:absolute; left:50%; top:5px; width:3px; height:6px; margin-left:-1.5px; border-radius:2px; background:#fff; animation:tourDot 1.6s ease-in-out infinite; }
@keyframes tourDot{ 0%{ transform:translateY(0); opacity:1 } 70%{ transform:translateY(9px); opacity:0 } 100%{ opacity:0 } }
.tour-bar{ position:absolute; left:clamp(20px,5vw,72px); right:clamp(20px,5vw,72px); bottom:clamp(24px,4vh,40px); height:3px; background:rgba(255,255,255,.25); border-radius:3px; overflow:hidden; }
.tour-bar span{ display:block; height:100%; transform-origin:left; transform:scaleX(var(--p));
  background:linear-gradient(90deg,var(--c) 0 33.3%,var(--m) 33.3% 66.6%,var(--y) 66.6%); }
@media (max-width:700px){
  .tour{ height:250vh; }
  .tour-frame{ clip-path:inset(calc((1 - var(--e)) * 14%) calc((1 - var(--e)) * 4%) round calc((1 - var(--e)) * 18px)); }
  .tour-caps{ bottom:64px; }
}
/* zonder scroll-animatie: gewone video met bediening */
.tour.static{ height:auto; padding:0 var(--gutter,20px) clamp(3rem,6vw,5rem); }
.tour.static .tour-sticky{ position:relative; height:auto; }
.tour.static .tour-frame{ aspect-ratio:16/9; height:auto; clip-path:none; border-radius:var(--r,20px); }
.tour.static .tour-video{ transform:none; }
.tour.static .tour-cap:first-child{ opacity:1; transform:none; }
.tour.static .tour-hint, .tour.static .tour-bar, .tour.static .tour-shade{ display:none; }
@media (max-width:700px){ .tour.static .tour-cap b{ font-size:1.5rem; } }
/* team: echte foto's in kleur, 2 personen */
.team-grid.team-2{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:760px; }
.team-2 .member-img img{ filter:none; object-position:50% 20%; }
@media (max-width:480px){ .team-grid.team-2{ gap:.9rem; } .team-2 .member h3{ font-size:1.1rem; } }
@media (max-width:700px){ .para img{ object-position:15% 50%; } }
@media (max-width:860px){ .story-grid h2{ position:static; } }

/* ---------- KOLÉ: waarom-blok (Over ons) ---------- */
.why{ padding:clamp(3rem,7vw,6rem) 0 clamp(1rem,3vw,2rem); }
.why-box{ position:relative; overflow:hidden; border-radius:var(--r); background:#141414; color:#F4F2EE;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); padding:clamp(2rem,5vw,4.5rem); padding-top:calc(clamp(2rem,5vw,4.5rem) + 8px); }
.why-box::before{ content:""; position:absolute; left:0; right:0; top:0; height:8px;
  background:linear-gradient(90deg,var(--c) 0 25%,var(--m) 25% 50%,var(--y) 50% 75%,#6B7078 75%); }
:root[data-theme="dark"] .why-box{ background:var(--card); border:1px solid var(--line); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .why-box{ background:var(--card); border:1px solid var(--line); } }
.why-kicker{ margin:0 0 1rem; font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--y); }
.why-title{ margin:0; font-size:clamp(2.1rem,4.6vw,3.8rem); line-height:.98; font-weight:850; font-stretch:85%; letter-spacing:-.02em; }
.why-lead{ margin:1.4rem 0 0; font-size:clamp(1.02rem,1.4vw,1.18rem); line-height:1.6; color:rgba(244,242,238,.78); max-width:46ch; }
.why-compare{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-self:center; }
.why-col{ border-radius:16px; padding:1.4rem 1.3rem; display:flex; flex-direction:column; gap:1rem; }
.why-old{ border:1px dashed rgba(244,242,238,.22); }
.why-new{ background:#F4F2EE; color:#111; box-shadow:0 18px 40px -18px rgba(230,0,126,.55); }
.why-label{ font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.7; }
.why-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; font-weight:600; font-size:.98rem; }
.why-old li{ color:rgba(244,242,238,.55); text-decoration:line-through; text-decoration-color:rgba(230,0,126,.8); text-decoration-thickness:2px; }
.why-new li{ display:flex; align-items:center; gap:.6rem; }
.why-new i{ width:10px; height:10px; border-radius:50%; flex:none; }
.why-new .dc{ background:var(--c); } .why-new .dm{ background:var(--m); } .why-new .dy{ background:var(--y); } .why-new .dk{ background:#111; }
.why-sum{ margin-top:auto; padding-top:.9rem; border-top:1px solid currentColor; border-color:rgba(127,127,127,.3); font-weight:800; font-size:1.02rem; }
.why-old .why-sum{ color:rgba(244,242,238,.6); }
@media (max-width:900px){ .why-box{ grid-template-columns:1fr; } }
@media (max-width:440px){ .why-compare{ grid-template-columns:1fr; } .why-col{ padding:1.15rem; } }
.values{ padding-top:clamp(3rem,7vw,5.5rem); }
@media (max-width:560px){ .why-col ul{ font-size:.9rem; gap:.6rem; } .why-sum{ font-size:.92rem; } }
/* realisaties: op touchscreens is er geen hover, dus bijschrift altijd tonen */
@media (hover:none){ .g-item figcaption{ transform:none; font-size:.78rem; left:.6rem; bottom:.6rem; right:.6rem; width:fit-content; max-width:calc(100% - 1.2rem); } }
/* websites: mockup volledig tonen */
.g-item.web{ background:#EFEBE4; }
.g-item.web img{ object-fit:contain; }
.g-item.web:hover img{ transform:scale(1.03); }
@media (max-width:760px){ .g-item.web{ grid-row:span 1; } }
@media (min-width:761px){ .g-item.web{ grid-column:1 / -1; } }
/* spamval: onzichtbaar voor mensen, wel zichtbaar voor bots */
.hp-field{ position:absolute !important; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
.q-captcha{ margin-top:1.2rem; }

/* verborgen is altijd verborgen (ook knoppen met display:inline-flex) */
[hidden]{ display:none !important; }
.foot-legal b{ color:#EFEBE4; font-weight:600; }
.ph .ph-legal{ margin-top:1rem; font-size:1rem; color:var(--muted); }
.ph .ph-legal b{ color:var(--text); }
.foot-owner{ display:flex; align-items:center; gap:.4rem 1rem; flex-wrap:wrap; }
.foot-owner img{ height:40px; width:auto; }
.foot-legal .foot-owner span+span{ margin-left:0; }
.owner-logo{ display:inline-flex; background:#141414; border-radius:10px; padding:.6rem .9rem; margin:.2rem 0 .7rem; }
.owner-logo img{ height:34px; width:auto; display:block; }

/* video's in de galerij */
.lb-stage video{ max-width:100%; max-height:100%; border-radius:14px; background:#000; }
.g-item.vid{ cursor:pointer; }
.g-play{ position:absolute; top:50%; left:50%; width:64px; height:64px; margin:-32px 0 0 -32px; border-radius:50%; background:rgba(255,255,255,.92); box-shadow:0 8px 30px rgba(0,0,0,.35); transition:transform .4s cubic-bezier(.2,.8,.2,1); pointer-events:none; }
.g-play::after{ content:""; position:absolute; left:26px; top:20px; border-style:solid; border-width:12px 0 12px 19px; border-color:transparent transparent transparent #111; }
.g-item.vid:hover .g-play{ transform:scale(1.12); }
.g-item.vid::after{ content:"VIDEO"; position:absolute; top:.8rem; left:.8rem; font-size:.7rem; font-weight:700; letter-spacing:.08em; background:#111; color:#fff; border-radius:999px; padding:.25rem .6rem; }
@media (max-width:760px){ .g-play{ width:52px; height:52px; margin:-26px 0 0 -26px; } .g-play::after{ left:21px; top:16px; border-width:10px 0 10px 16px; } }

/* kaartje bellen/mailen/WhatsApp (alleen als de browser de link blokkeert) */
.ct-sheet{ position:fixed; inset:0; z-index:200; background:rgba(15,14,12,.55); display:grid; place-items:end center; padding:1rem; padding-bottom:calc(1rem + env(safe-area-inset-bottom,0px)); }
@media (min-width:700px){ .ct-sheet{ place-items:center; } }
.ct-card{ position:relative; width:min(100%,420px); background:var(--paper,#fff); color:var(--ink,#111); border-radius:22px; padding:1.6rem 1.4rem 1.4rem; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.ct-k{ margin:0; font-size:.85rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.6; }
.ct-v{ margin:.3rem 0 1.2rem; font-size:1.5rem; font-weight:800; word-break:break-all; }
.ct-row{ display:flex; gap:.6rem; flex-wrap:wrap; }
.ct-row .btn{ flex:1; justify-content:center; text-align:center; }
.ct-x{ position:absolute; z-index:2; top:.8rem; right:.8rem; width:38px; height:38px; border-radius:50%; border:1.5px solid var(--line,#ddd); background:transparent; color:inherit; font-size:1rem; cursor:pointer; }

/* ---------- aanbod: categorieën links onder elkaar ---------- */
.cat-layout{ display:grid; grid-template-columns:1fr; gap:1.2rem; align-items:start; scroll-margin-top:90px; }
.cat-side{ scroll-margin-top:90px; }
.cat-main{ min-width:0; }
.cat-main .cat-count{ margin:0; min-height:0; }
.cat-main .cat-count:empty{ display:none; }
.cat-group + .cat-group{ margin-top:1.3rem; }
.cat-group-t{ margin:0 0 .45rem .85rem; font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.cat-tabs{ display:flex; flex-direction:column; gap:2px; }
.cat-tab{ position:relative; display:flex; align-items:center; gap:.75rem; width:100%; min-height:46px; border:0; background:transparent; color:var(--text); border-radius:12px; padding:.6rem .85rem; font:inherit; font-weight:650; font-size:.98rem; text-align:left; line-height:1.2; cursor:pointer; transition:background .25s,color .25s,padding .3s cubic-bezier(.2,.8,.2,1); }
.cat-tab::before{ content:""; flex:none; width:10px; height:10px; border-radius:50%; background:var(--sw); box-shadow:0 0 0 3px color-mix(in srgb,var(--sw) 22%,transparent); }
.cat-tab .ct-name{ flex:1; }
.cat-tab .ct-n{ flex:none; min-width:1.9rem; text-align:center; font-size:.75rem; font-weight:700; padding:.15rem .45rem; border-radius:999px; background:var(--card); border:1px solid var(--line); color:var(--muted); transition:inherit; }
.cat-tab:hover{ background:var(--card); padding-left:1.05rem; }
.cat-tab[aria-selected="true"]{ background:var(--text); color:var(--bg); padding-left:1.05rem; }
.cat-tab[aria-selected="true"] .ct-n{ background:transparent; border-color:currentColor; color:inherit; opacity:.75; }
.cat-tab:focus-visible{ outline:3px solid var(--c); outline-offset:2px; }
.cat-toggle{ display:none; }
@media (min-width:900px){
  .cat-layout{ grid-template-columns:290px minmax(0,1fr); gap:clamp(2rem,4vw,3.5rem); }
  .cat-side{ position:sticky; top:96px; max-height:calc(100vh - 116px); overflow:auto; padding:0 .4rem 1rem 0; scrollbar-width:thin; }
  .cat-side .cat-search{ margin-bottom:1.3rem; }
  .cat-side .cat-search input{ min-height:48px; padding-top:.8rem; padding-bottom:.8rem; font-size:.98rem; }
  .js [data-cat-panels] .cat{ padding-top:0; }
}
@media (min-width:900px) and (max-height:1020px){
  .cat-side{ top:88px; max-height:calc(100vh - 100px); }
  .cat-side .cat-search{ margin-bottom:.8rem; }
  .cat-side .cat-search input{ min-height:44px; padding-top:.65rem; padding-bottom:.65rem; }
  .cat-group + .cat-group{ margin-top:.8rem; }
  .cat-group-t{ margin-bottom:.3rem; }
  .cat-tab{ min-height:37px; padding-top:.4rem; padding-bottom:.4rem; font-size:.95rem; }
}
@media (max-width:899px){
  .cat-side .cat-search{ margin-bottom:.7rem; }
  .cat-toggle{ display:flex; width:100%; align-items:center; justify-content:space-between; gap:1rem; min-height:60px; padding:.7rem 1.1rem; border:1.5px solid var(--line); border-radius:18px; background:var(--card); color:var(--text); font:inherit; text-align:left; cursor:pointer; }
  .cat-toggle-t{ display:grid; gap:.1rem; }
  .cat-toggle-t small{ font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
  .cat-toggle-t b{ display:flex; align-items:center; gap:.6rem; font-size:1.1rem; }
  .cat-toggle-t b::before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--sw); box-shadow:0 0 0 3px color-mix(in srgb,var(--sw) 22%,transparent); }
  .cat-toggle-i{ width:38px; height:38px; flex:none; border-radius:50%; border:1.5px solid var(--line); position:relative; transition:transform .35s cubic-bezier(.2,.8,.2,1); }
  .cat-toggle-i::after{ content:""; position:absolute; left:50%; top:45%; width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translate(-50%,-50%) rotate(45deg); }
  .cat-toggle[aria-expanded="true"] .cat-toggle-i{ transform:rotate(180deg); }
  .cat-list{ display:none; margin-top:.6rem; padding:.9rem .55rem; border:1.5px solid var(--line); border-radius:18px; background:var(--card); }
  .cat-list.open{ display:block; }
  .cat-list .cat-tab:hover{ background:var(--bg); }
  .cat-list .cat-tab .ct-n{ background:var(--bg); }
}
@media (max-width:899px){ .cat-list .cat-tab[aria-selected="true"] .ct-n{ background:transparent; } }

/* ---------- zoeken op de hele site ---------- */
.search-btn{ display:inline-flex; align-items:center; gap:.55rem; height:44px; padding:0 .55rem 0 .9rem; border-radius:999px; border:1.5px solid var(--line); background:color-mix(in srgb,var(--card) 70%,transparent); color:inherit; font:inherit; font-weight:600; font-size:.92rem; cursor:pointer; transition:border-color .25s,background .25s; }
.search-btn:hover{ border-color:currentColor; }
.search-btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
.search-btn kbd{ font:inherit; font-size:.75rem; font-weight:700; min-width:24px; height:24px; display:grid; place-items:center; border-radius:7px; border:1px solid var(--line); opacity:.7; }
.search-btn:focus-visible{ outline:3px solid var(--c); outline-offset:2px; }
.head.on-dark:not(.is-solid) .search-btn{ border-color:#ffffff55; background:#ffffff14; }
@media (max-width:1100px){ .search-btn-t,.search-btn kbd{ display:none; } .search-btn{ width:46px; height:46px; padding:0; justify-content:center; } }
@media (max-width:860px){ .search-btn{ border:none; background:var(--card); } .head-in{ gap:.6rem; } }

.srch{ position:fixed; inset:0; z-index:190; background:rgba(15,14,12,.55); backdrop-filter:blur(6px); display:flex; justify-content:center; align-items:flex-start; padding:calc(10vh + env(safe-area-inset-top,0px)) 1rem 1rem; }
.srch[hidden]{ display:none!important; }
.srch-open, .srch-open body{ overflow:hidden; }
.srch-panel{ width:min(100%,680px); max-height:min(76vh,720px); display:flex; flex-direction:column; background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:24px; box-shadow:0 30px 80px rgba(0,0,0,.35); overflow:hidden; }
.srch-bar{ display:flex; align-items:center; gap:.8rem; padding:.9rem 1rem .9rem 1.3rem; border-bottom:1px solid var(--line); }
.srch-bar svg{ width:22px; height:22px; flex:none; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; opacity:.6; }
.srch-bar input{ flex:1; min-width:0; border:0; background:transparent; color:inherit; font:inherit; font-size:1.2rem; font-weight:600; padding:.5rem 0; outline:none; }
.srch-bar input::placeholder{ color:var(--muted); font-weight:500; }
.srch-bar input::-webkit-search-cancel-button{ display:none; }
.srch-x{ flex:none; height:34px; padding:0 .7rem; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--muted); font:inherit; font-size:.78rem; font-weight:700; cursor:pointer; }
.srch-x:hover{ color:var(--text); border-color:var(--text); }
.srch-body{ overflow:auto; overscroll-behavior:contain; padding:.4rem .6rem 1rem; }
.srch-h{ margin:1rem .7rem .4rem; font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.srch-pop{ display:flex; flex-wrap:wrap; gap:.45rem; padding:0 .6rem; }
.srch-pop button{ border:1.5px solid var(--line); background:var(--card); color:inherit; font:inherit; font-weight:600; font-size:.9rem; border-radius:999px; padding:.45rem .9rem; cursor:pointer; }
.srch-pop button:hover{ border-color:var(--text); }
.srch-row{ display:flex; align-items:center; gap:.4rem; }
.srch-it{ flex:1; min-width:0; display:flex; align-items:center; gap:.9rem; padding:.7rem .8rem; border-radius:14px; text-decoration:none; color:inherit; }
.srch-it.on{ background:var(--card); box-shadow:inset 0 0 0 1px var(--line); }
.srch-tx{ display:grid; gap:.12rem; min-width:0; }
.srch-tx b{ font-size:1rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.srch-tx small{ font-size:.84rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.srch-tx mark{ background:color-mix(in srgb,var(--y) 55%,transparent); color:inherit; border-radius:3px; padding:0 1px; }
.srch-dot{ flex:none; width:34px; height:34px; border-radius:10px; background:color-mix(in srgb,var(--sw) 20%,transparent); position:relative; }
.srch-dot::after{ content:""; position:absolute; inset:0; margin:auto; width:10px; height:10px; border-radius:50%; background:var(--sw); }
.srch-ico{ flex:none; width:34px; height:34px; border-radius:10px; background:var(--card); border:1px solid var(--line); position:relative; }
.srch-ico::after{ content:""; position:absolute; inset:0; margin:auto; width:14px; height:14px; border:2px solid currentColor; border-radius:3px; opacity:.7; }
.srch-ico-info::after{ border-radius:50%; }
.srch-ico-real::after{ border-radius:3px; box-shadow:inset 0 -5px 0 -2px currentColor; }
.srch-ico-video::after{ width:0; height:0; border:0; border-style:solid; border-width:7px 0 7px 11px; border-color:transparent transparent transparent currentColor; border-radius:0; margin-left:12px; }
.srch-q{ flex:none; font-size:.82rem; font-weight:700; text-decoration:none; padding:.45rem .75rem; border-radius:999px; border:1.5px solid var(--line); color:inherit; }
.srch-q:hover{ border-color:var(--text); background:var(--text); color:var(--bg); }
.srch-none{ padding:1.6rem 1rem; display:grid; gap:1rem; justify-items:start; }
.srch-none p{ margin:0; color:var(--muted); line-height:1.5; } .srch-none b{ color:var(--text); }
.srch-foot{ display:flex; gap:1.2rem; padding:.7rem 1.2rem; border-top:1px solid var(--line); font-size:.78rem; color:var(--muted); }
.srch-foot kbd{ font:inherit; font-size:.72rem; font-weight:700; padding:.05rem .4rem; border:1px solid var(--line); border-radius:6px; margin-right:.25rem; }
@media (max-width:700px){
  .srch{ padding:0; align-items:stretch; background:var(--bg); backdrop-filter:none; }
  .srch-panel{ max-height:none; height:100%; width:100%; border-radius:0; border:0; box-shadow:none; padding-top:env(safe-area-inset-top,0px); }
  .srch-bar{ padding:.7rem .8rem .7rem 1rem; }
  .srch-bar input{ font-size:1.1rem; }
  .srch-foot{ display:none; }
  .srch-q{ padding:.4rem .6rem; }
}
.pcard.flash{ animation:pcardFlash 1.8s cubic-bezier(.2,.8,.2,1); }
@keyframes pcardFlash{ 0%,40%{ box-shadow:0 0 0 3px var(--sw,var(--c)); transform:translateY(-4px); } 100%{ box-shadow:0 0 0 0 transparent; transform:none; } }
@media (prefers-reduced-motion:reduce){ .pcard.flash{ animation:none; outline:3px solid var(--sw,var(--c)); } }
.srch-x-m{ display:none; } @media (max-width:700px){ .srch-x-d{ display:none; } .srch-x-m{ display:inline; } }

/* ---------- mobiel menu ---------- */
.menu{ position:fixed; inset:0; z-index:90; background:var(--ink); color:var(--paper); display:none; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.menu-open .menu{ display:block; }
html.menu-open{ overflow:hidden; }
.menu-open .head{ color:var(--paper); background:var(--ink); box-shadow:0 1px 0 #ffffff14; backdrop-filter:none; transform:none!important; }
.menu-open .head .search-btn{ background:#ffffff14; border-color:transparent; }
.menu-open .menu-btn{ background:#ffffff1f; }
.menu-in{ min-height:100%; display:flex; flex-direction:column; gap:1.4rem; padding:calc(96px + env(safe-area-inset-top,0px)) 1.25rem calc(1.6rem + env(safe-area-inset-bottom,0px)); max-width:560px; margin:0 auto; }
.menu-search{ display:flex; align-items:center; gap:.75rem; width:100%; min-height:52px; padding:0 1.1rem; border-radius:16px; border:1px solid #ffffff22; background:#ffffff0d; color:#B9B1A4; font:inherit; font-size:1rem; text-align:left; cursor:pointer; }
.menu-search svg{ width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
.menu-search:active{ background:#ffffff1a; }
.menu-nav{ display:grid; border-top:1px solid #ffffff1a; }
.menu-nav a{ display:flex; align-items:center; gap:1rem; padding:1rem .25rem; border-bottom:1px solid #ffffff1a; text-decoration:none; color:inherit; font-weight:800; text-transform:uppercase; font-size:clamp(1.55rem,7vw,2.2rem); line-height:1; font-variation-settings:"wdth" 82; letter-spacing:-.005em; }
.menu-nav a i{ font-style:normal; flex:none; width:1.8rem; font-size:.72rem; font-weight:700; letter-spacing:.08em; color:#8F877B; font-variation-settings:normal; }
.menu-nav a::after{ content:"→"; margin-left:auto; font-size:1.15rem; font-weight:600; opacity:.45; transition:transform .3s,opacity .3s; font-variation-settings:normal; }
.menu-nav a.ext::after{ content:"↗"; }
.menu-nav a:active::after,.menu-nav a:hover::after{ opacity:1; transform:translateX(4px); }
.menu-nav a[aria-current="page"]{ color:var(--accent-2,#FFE500); }
.menu-nav a[aria-current="page"] i{ color:currentColor; }
.menu-nav a[aria-current="page"]::after{ opacity:1; }
.menu-cta{ width:100%; justify-content:center; min-height:54px; background:var(--accent-2,#FFE500); color:#111; font-size:1.02rem; }
.menu-foot{ margin-top:auto; display:grid; gap:.1rem; color:#C9C2B6; padding-top:.4rem; }
.menu-foot-t{ margin:0 0 .35rem; font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#8F877B; }
.menu-ct{ display:flex; align-items:center; gap:.75rem; margin:0; padding:.5rem 0; text-decoration:none; color:inherit; font-size:1rem; }
.menu-ct svg{ width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; opacity:.75; }
a.menu-ct:active{ color:#fff; }
.menu-soc{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.7rem; }
.menu-soc a{ text-decoration:none; color:inherit; font-size:.88rem; font-weight:600; padding:.45rem .9rem; border-radius:999px; border:1px solid #ffffff26; }
.menu-soc a[hidden]{ display:none; }
@media (min-width:1241px){ .menu{ display:none!important; } }
/* lightbox: foto of video altijd volledig in beeld */
.lightbox{ height:100vh; height:100dvh; }
.lb-stage{ overflow:hidden; }
.lb-stage img,.lb-stage video{ width:auto; height:auto; max-width:100%; max-height:calc(100vh - 10.5rem); max-height:calc(100dvh - 10.5rem - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); object-fit:contain; }
@media (max-width:600px){ .lb-stage img,.lb-stage video{ max-height:calc(100dvh - 9.5rem - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); } }

/* ---------- contactpagina: rechterkolom ---------- */
.info{ display:grid; gap:1rem; align-content:start; }
.ct-quick{ display:grid; gap:.6rem; }
.ctq{ display:flex; align-items:center; gap:.9rem; padding:.85rem 1rem; border:1px solid var(--line); border-radius:18px; background:var(--card); text-decoration:none; color:var(--text); transition:border-color .25s,transform .25s; }
.ctq:hover{ border-color:var(--text); transform:translateY(-2px); }
.ctq-i{ flex:none; width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:color-mix(in srgb,var(--sw) 16%,transparent); color:var(--text); }
.ctq-i svg{ width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ctq span{ display:grid; gap:.05rem; min-width:0; }
.ctq small{ font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.ctq b{ font-size:1.08rem; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ctq::after{ content:"→"; margin-left:auto; color:var(--muted); transition:transform .25s; }
.ctq:hover::after{ transform:translateX(4px); color:var(--text); }
.ic{ border:1px solid var(--line); border-radius:22px; background:var(--card); padding:1.3rem 1.3rem 1.2rem; }
.ic-head{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap; margin-bottom:.5rem; }
.ic h3{ font-size:.75rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0; }
.open-pill{ display:inline-flex; align-items:center; gap:.45rem; font-size:.8rem; font-weight:700; padding:.3rem .7rem; border-radius:999px; background:color-mix(in srgb,var(--text) 7%,transparent); }
.open-pill::before{ content:""; width:8px; height:8px; border-radius:50%; background:#C62828; }
.open-pill.is-open{ background:color-mix(in srgb,#0F8A4B 14%,transparent); color:#0A6A39; }
:root[data-theme="dark"] .open-pill.is-open{ color:#6BD69A; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .open-pill.is-open{ color:#6BD69A; } }
.open-pill.is-open::before{ background:#0F8A4B; box-shadow:0 0 0 4px color-mix(in srgb,#0F8A4B 22%,transparent); }
.ic-addr{ margin:0 0 .9rem; font-size:1.2rem; font-weight:700; line-height:1.35; }
.ic .hours{ margin-bottom:1rem; font-size:.95rem; }
.ic .hours tr:last-child td{ border-bottom:0; }
.ic .map{ aspect-ratio:16/7; border-radius:16px; }
.ic-company{ display:grid; gap:.6rem; background:transparent; }
.ic-company .owner-logo{ justify-self:start; margin:0; box-shadow:0 0 0 1px var(--line); }
.ic-company .owner-logo img{ height:36px; }
.ic-note{ margin:0; color:var(--muted); font-size:.92rem; line-height:1.5; }
.ic-note b{ color:var(--text); }
.ic-dl{ display:grid; grid-template-columns:auto 1fr; gap:.35rem 1rem; margin:.2rem 0 0; font-size:.9rem; }
.ic-dl dt{ color:var(--muted); }
.ic-dl dd{ margin:0; font-weight:600; font-variant-numeric:tabular-nums; }
.ic-soc{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; padding:.2rem .3rem; }
.ic-soc > span{ font-size:.75rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.ic-soc .socials a{ font-size:.9rem; font-weight:700; text-decoration:none; padding:.4rem .85rem; border:1px solid var(--line); border-radius:999px; }
.ic-soc .socials a:hover{ border-color:var(--text); }

/* ---------- offerteformulier: dienstkeuze als nette lijst ---------- */
.chips{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }
@media (max-width:560px){ .chips{ grid-template-columns:1fr; } }
.chip span{ display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto auto; column-gap:.85rem; row-gap:.1rem; align-items:center; padding:.85rem 1rem; border-radius:16px; height:100%; }
.chip span::before{ grid-row:1 / 3; width:12px; height:12px; margin:0; align-self:center; }
.chip span small{ grid-column:2; font-size:.84rem; }
.chip span::after{ content:""; grid-column:3; grid-row:1 / 3; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line); transition:background .2s,border-color .2s; background:center/12px no-repeat; }
.chip input:checked + span{ transform:none; border-color:var(--text); box-shadow:0 0 0 1px var(--text); }
.chip input:checked + span::before{ transform:scale(1.25); }
.chip input:checked + span::after{ background-color:#151412; border-color:var(--text); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.chip span:hover{ border-color:color-mix(in srgb,var(--text) 45%,var(--line)); }


@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .cat-cta .btn{ background:#151412; color:#F4F2EE; } }
:root[data-theme="dark"] .cat-cta .btn{ background:#151412; color:#F4F2EE; }

/* ---------- Over ons: video als volledig scherm-intro ---------- */
.tour-hero{ height:420vh; --in:1; --end:0; background:#0d0c0b; }
.tour-hero .tour-frame{ clip-path:none !important; border-radius:0; background:#0d0c0b; }
.tour-hero .tour-video{ transform:scale(calc(1.06 - var(--p) * .06)); }
.tour-hero .tour-shade{ background:
  linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0) 55%, rgba(0,0,0,.6) 100%),
  rgba(0,0,0,calc(var(--in) * .35 + var(--end) * .45)); }
.tour-intro{ position:absolute; left:0; right:0; top:50%; transform:translateY(calc(-50% - (1 - var(--in)) * 60px)); opacity:var(--in); text-align:center; color:#fff; padding:0 20px; pointer-events:none; }
.tour-kicker{ display:inline-block; margin:0 0 1rem; font-size:.8rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; padding:.4rem .9rem; border-radius:999px; background:rgba(255,255,255,.14); backdrop-filter:blur(6px); }
.tour-h1{ margin:0; font-size:clamp(2.8rem,9vw,8.5rem); line-height:.9; font-weight:850; font-stretch:78%; text-transform:uppercase; letter-spacing:-.01em; text-shadow:0 4px 40px rgba(0,0,0,.35); }
.tour-sub{ margin:1rem 0 0; font-size:clamp(1rem,1.6vw,1.25rem); opacity:.9; }
.tour-hero .tour-caps{ opacity:calc(1 - var(--end)); }
.tour-hero .tour-cap b{ font-size:clamp(1.8rem,4.4vw,3.8rem); }
.tour-end{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; color:#fff; pointer-events:none; opacity:var(--end); }
.tour-word{ margin:0; font-size:clamp(5rem,22vw,20rem); line-height:.82; font-weight:900; font-stretch:72%; letter-spacing:-.02em;
  transform:scale(calc(1.25 - var(--end) * .25)); filter:blur(calc((1 - var(--end)) * 12px)); text-shadow:0 10px 80px rgba(0,0,0,.45); }
.tour-tag{ margin:.6rem 0 0; font-size:clamp(1rem,2.2vw,1.6rem); font-weight:700; letter-spacing:.24em; text-transform:uppercase; transform:translateY(calc((1 - var(--end)) * 30px)); }
.tour-tag::before{ content:""; display:block; width:84px; height:5px; margin:0 auto .9rem; border-radius:3px; background:linear-gradient(90deg,var(--c) 0 25%,var(--m) 25% 50%,var(--y) 50% 75%,#fff 75%); }
.tour-hero .tour-hint{ top:auto; bottom:clamp(40px,8vh,80px); display:flex; flex-direction:column; align-items:center; gap:.7rem; transition:opacity .4s; }
.tour-hero.scrolled .tour-hint{ opacity:0; }
.tour-hero .tour-bar{ opacity:calc(1 - var(--in)); }
@media (max-aspect-ratio: 1/1){
  /* staande gsm: hele beeld tonen i.p.v. sterk bijsnijden */
  .tour-hero .tour-video{ object-fit:cover; height:62%; top:19%; }
  .tour-intro{ top:12%; transform:translateY(calc(0px - (1 - var(--in)) * 40px)); }
  .tour-h1{ font-size:clamp(2.4rem,13vw,4rem); }
  .tour-hero .tour-caps{ bottom:calc(9% + 20px); }
  .tour-hero .tour-cap b{ font-size:1.7rem; }
}
.about-intro{ padding-top:clamp(3.5rem,8vw,6rem); }
.about-lead{ font-size:clamp(1.35rem,2.6vw,2.1rem); line-height:1.3; font-weight:650; max-width:28ch; margin:0 0 1.2rem; letter-spacing:-.01em; }
.tour-hero.static{ height:auto; padding:0; }
.tour-hero.static .tour-frame{ aspect-ratio:auto; height:100svh; border-radius:0; }
.tour-hero.static .tour-video{ height:100%; top:0; }
.tour-hero.static .tour-end,.tour-hero.static .tour-caps{ display:none; }

/* ---------- prijzenpagina ---------- */
.pr-badges{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.3rem; }
.pr-badge{ font-size:.88rem; font-weight:700; padding:.45rem .9rem; border-radius:999px; border:1px solid var(--line); background:var(--card); }
.pr-student{ background:var(--m); color:#fff; border-color:transparent; }
.pr-jump{ display:flex; gap:.4rem; overflow-x:auto; scrollbar-width:none; padding:.2rem 0 1.4rem; }
.pr-jump::-webkit-scrollbar{ display:none; }
.pr-jump a{ flex:none; text-decoration:none; font-weight:700; font-size:.92rem; padding:.55rem 1rem; border-radius:999px; border:1.5px solid var(--line); }
.pr-jump a:hover{ border-color:var(--text); }
.pr-sec{ padding:1.2rem 0; scroll-margin-top:90px; }
.pr-head{ display:flex; gap:1rem; align-items:center; margin-bottom:1.2rem; }
.pr-head h2{ margin:0; font-size:clamp(1.7rem,3.6vw,2.6rem); text-transform:uppercase; font-variation-settings:"wdth" 78; line-height:1; }
.pr-head p{ margin:.35rem 0 0; color:var(--muted); }
.pr-head.sm h2{ font-size:clamp(1.5rem,2.6vw,2rem); }
.pr-sw{ flex:none; width:48px; height:48px; border-radius:14px; display:grid; place-items:center; font-weight:900; background:var(--sw); color:#111; }
.pr-card{ background:var(--card); border:1px solid var(--line); border-radius:22px; padding:clamp(1.1rem,2.5vw,1.6rem); display:flex; flex-direction:column; }
.pr-card-h{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:.6rem; }
.pr-card-h h3,.pr-card-h h2{ margin:0; font-size:1.3rem; }
.pr-card-h span{ font-size:.8rem; font-weight:700; color:var(--muted); }
.pr-copy{ display:grid; grid-template-columns:1fr 1fr minmax(260px,.9fr); gap:1rem; align-items:start; }
@media (max-width:1050px){ .pr-copy{ grid-template-columns:1fr 1fr; } .pr-calc{ grid-column:1 / -1; } }
@media (max-width:640px){ .pr-copy{ grid-template-columns:1fr; } }
.pr-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:760px){ .pr-grid2{ grid-template-columns:1fr; } }
.pr-t{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.pr-t th,.pr-t td{ padding:.62rem 0; border-bottom:1px solid var(--line); text-align:right; font-size:1rem; }
.pr-t th:first-child{ text-align:left; font-weight:500; color:var(--muted); }
.pr-t thead th{ font-size:.75rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding-top:0; }
.pr-t tbody td{ font-weight:750; }
.pr-t tbody tr:last-child th,.pr-t tbody tr:last-child td{ border-bottom:0; }
.pr-t td + td{ padding-left:1rem; }
.pr-qty td.pp{ font-weight:500; color:var(--muted); font-size:.85rem; width:7.5rem; }
.pr-list td{ white-space:nowrap; }
.pr-btn{ margin-top:1.2rem; align-self:flex-start; }
.pr-fine{ margin:.8rem 0 0; font-size:.86rem; color:var(--muted); }
.pr-dtf{ max-width:820px; }
.pr-calc{ background:var(--text); color:var(--bg); border-radius:22px; padding:clamp(1.1rem,2.5vw,1.6rem); display:grid; gap:.8rem; position:sticky; top:96px; }
.pr-calc h3{ margin:0 0 .2rem; font-size:1.3rem; }
.pr-seg{ display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; border-radius:14px; background:color-mix(in srgb,var(--bg) 14%,transparent); }
.pr-seg label{ position:relative; }
.pr-seg input{ position:absolute; opacity:0; }
.pr-seg span{ display:block; text-align:center; padding:.55rem; border-radius:10px; font-weight:700; cursor:pointer; }
.pr-seg input:checked + span{ background:var(--bg); color:var(--text); }
.pr-seg input:focus-visible + span{ outline:3px solid var(--c); outline-offset:2px; }
.pr-num{ display:grid; gap:.35rem; font-size:.85rem; font-weight:700; opacity:.95; }
.pr-num input{ font:inherit; font-size:1.3rem; font-weight:800; padding:.6rem .8rem; border-radius:12px; border:0; background:var(--bg); color:var(--text); width:100%; }
.pr-check{ display:flex; gap:.55rem; align-items:center; font-weight:600; font-size:.95rem; cursor:pointer; }
.pr-check input{ width:18px; height:18px; accent-color:var(--m); }
.pr-out{ display:grid; gap:.1rem; padding-top:.8rem; border-top:1px solid color-mix(in srgb,var(--bg) 25%,transparent); }
.pr-out span{ font-size:.9rem; opacity:.75; }
.pr-out b{ font-size:2.4rem; line-height:1.05; letter-spacing:-.01em; }
.pr-calc .pr-fine{ color:inherit; opacity:.65; margin:0; }
.pr-note{ display:flex; gap:1.5rem; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:1.4rem 1.6rem; border-radius:22px; border:1px dashed var(--line); }
.pr-note p{ margin:0; max-width:62ch; color:var(--muted); line-height:1.55; }
.pr-note b{ color:var(--text); }
.pcard-price{ align-self:flex-start; margin-top:-.2rem; font-size:.82rem; font-weight:800; text-decoration:none; padding:.25rem .6rem; border-radius:8px; background:color-mix(in srgb,var(--sw,var(--c)) 18%,transparent); }
.pcard a.pcard-price::after{ content:none; }
.pcard a.pcard-price{ margin-top:-.2rem; padding:.25rem .6rem; }
.foot-legal a{ color:inherit; }
@media (max-width:480px){ .pr-dtf .pr-t thead th{ font-size:.66rem; letter-spacing:.04em; white-space:nowrap; } .pr-dtf .pr-t th:first-child{ white-space:nowrap; } }

/* ---------- homepage: wie we zijn ---------- */
.intro-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; }
@media (max-width:900px){ .intro-grid{ grid-template-columns:1fr; } }
.intro-title{ margin:0; font-size:clamp(2.2rem,4.8vw,4rem); line-height:1.02; font-weight:850; font-variation-settings:"wdth" 82; letter-spacing:-.02em; text-wrap:balance; }
.intro-title em{ font-style:normal; color:var(--m); }
.intro-text{ margin:1.3rem 0 0; font-size:clamp(1.05rem,1.6vw,1.25rem); line-height:1.55; color:var(--muted); max-width:42ch; }
.intro-list{ list-style:none; margin:0; padding:0; display:grid; }
.intro-list li{ display:grid; grid-template-columns:auto 1fr; column-gap:1rem; align-items:center; padding:1.05rem 0; border-top:1px solid var(--line); }
.intro-list li:last-child{ border-bottom:1px solid var(--line); }
.intro-list li::before{ content:""; grid-row:1 / 3; width:12px; height:12px; border-radius:50%; background:var(--sw); box-shadow:0 0 0 4px color-mix(in srgb,var(--sw) 20%,transparent); }
.intro-list span{ font-size:.74rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.intro-list b{ font-size:clamp(1.1rem,1.8vw,1.4rem); font-weight:750; line-height:1.25; }
.intro .intro-meta{ display:flex; flex-wrap:wrap; gap:0; margin-top:clamp(2rem,4vw,3rem); border-top:0; }
.intro .intro-meta span{ flex:1 1 200px; display:grid; gap:.15rem; padding:1rem 1.4rem; border:0; border-left:1px solid var(--line); border-radius:0; background:none; }
.intro .intro-meta span:first-child{ border-left:0; padding-left:0; }
.intro .intro-meta span::before{ content:none; }
@media (max-width:760px){ .intro .intro-meta{ flex-direction:column; } .intro .intro-meta span{ flex:none; border-left:0; border-top:1px solid var(--line); padding:.9rem 0; } }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .intro-list li{ --k:#EFEBE4; } }


/* ---------- privacyverklaring ---------- */
.legal-doc{ display:grid; grid-template-columns:minmax(0,15rem) minmax(0,46rem); gap:clamp(2rem,5vw,5rem); padding-bottom:clamp(4rem,8vw,7rem); align-items:start; }
.legal-toc{ position:sticky; top:110px; font-size:.95rem; border-top:2px solid var(--text); padding-top:1rem; }
.legal-toc b{ display:block; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.6rem; }
.legal-toc ol{ margin:0; padding-left:1.7rem; display:grid; gap:.35rem; color:var(--muted); }
.legal-toc a{ color:var(--muted); text-decoration:none; }
.legal-toc a:hover{ color:var(--text); text-decoration:underline; }
.legal-body{ font-size:1.05rem; line-height:1.65; }
.legal-body h2{ font-size:clamp(1.35rem,2.4vw,1.75rem); line-height:1.2; margin:2.8rem 0 .9rem; scroll-margin-top:110px; }
.legal-body h2:first-child{ margin-top:0; }
.legal-body h3{ font-size:1.1rem; margin:1.6rem 0 .5rem; }
.legal-body p, .legal-body ul{ margin:0 0 1rem; }
.legal-body ul{ padding-left:1.25rem; }
.legal-body li{ margin-bottom:.45rem; }
.legal-body a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
.legal-dl{ display:grid; grid-template-columns:max-content 1fr; gap:.45rem 1.5rem; margin:1.2rem 0; padding:1.2rem 1.4rem; background:var(--card); border:1px solid var(--line); border-radius:14px; }
.legal-dl dt{ color:var(--muted); }
.legal-dl dd{ margin:0; font-weight:600; }
.legal-table{ overflow-x:auto; margin:0 0 1.2rem; border:1px solid var(--line); border-radius:14px; }
.legal-table table{ width:100%; border-collapse:collapse; font-size:.98rem; }
.legal-table th, .legal-table td{ text-align:left; vertical-align:top; padding:.8rem 1rem; border-bottom:1px solid var(--line); }
.legal-table th{ background:var(--card); font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; }
.legal-table tr:last-child td{ border-bottom:0; }
.legal-addr{ font-style:normal; padding:1rem 1.4rem; border-left:3px solid var(--m); background:var(--card); border-radius:0 12px 12px 0; margin-bottom:1rem; }
@media (max-width:860px){
  .legal-doc{ grid-template-columns:minmax(0,1fr); }
  .legal-toc{ position:static; }
}
@media (max-width:520px){
  .legal-dl{ grid-template-columns:1fr; gap:.1rem; }
  .legal-dl dd{ margin-bottom:.6rem; }
  .legal-table th, .legal-table td{ padding:.7rem .75rem; }
}
.consent a{ color:var(--text); text-decoration:underline; text-underline-offset:2px; }
.legal-body a{ overflow-wrap:anywhere; }
@media (max-width:420px){ .legal-addr{ padding:.9rem 1rem; } }
.legal-body code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.88em; background:var(--card); border:1px solid var(--line); border-radius:6px; padding:.05rem .35rem; white-space:nowrap; }
@media (max-width:600px){
  .legal-table{ border:0; overflow:visible; }
  .legal-table table, .legal-table tbody, .legal-table tr, .legal-table td{ display:block; width:100%; }
  .legal-table thead{ display:none; }
  .legal-table tr{ border:1px solid var(--line); border-radius:14px; background:var(--card); padding:.35rem 0; margin-bottom:.7rem; }
  .legal-table td{ border:0; padding:.45rem 1rem; }
  .legal-table td::before{ content:attr(data-l); display:block; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:.15rem; }
}
.legal-body a[href^="tel:"]{ white-space:nowrap; }

/* ---------- cookiekeuze ---------- */
.cc{ position:fixed; z-index:155; left:16px; bottom:16px; width:min(420px, calc(100vw - 32px)); background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:20px; padding:1.25rem 1.3rem 1.1rem; box-shadow:0 18px 50px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08); opacity:0; transform:translateY(16px); transition:opacity .3s, transform .3s cubic-bezier(.2,.8,.2,1); }
.cc.in{ opacity:1; transform:none; }
.cc::before{ content:""; position:absolute; left:1.3rem; right:1.3rem; top:0; height:4px; border-radius:0 0 4px 4px; background:linear-gradient(90deg,var(--c) 0 25%,var(--m) 25% 50%,var(--y) 50% 75%,var(--text) 75%); }
.cc-t{ margin:.2rem 0 .35rem; font-weight:800; font-size:1.15rem; }
.cc-d{ margin:0 0 1rem; font-size:.93rem; line-height:1.5; color:var(--muted); }
.cc-d b{ color:var(--text); font-weight:650; }
.cc-b{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.cc-b .btn{ justify-content:center; text-align:center; min-height:46px; padding:.7rem 1rem; }
.cc-more{ display:inline-block; margin-top:.8rem; font-size:.88rem; color:var(--text); text-decoration:underline; text-underline-offset:3px; }
.foot-legal button.cc-link{ background:none; border:0; padding:0; font:inherit; color:inherit; text-decoration:underline; cursor:pointer; }
@media (prefers-reduced-motion:reduce){ .cc{ transition:none; } }
@media print{ .cc{ display:none !important; } }
.cc-link-inline{ background:none; border:0; padding:0; font:inherit; color:inherit; text-decoration:underline; text-underline-offset:3px; cursor:pointer; font-weight:650; }

/* lichte hero (home) in donkere modus: header donker zolang hij transparant is */
html:not(.menu-open) .head.on-light:not(.is-solid){ color:#111; }
html:not(.menu-open) .head.on-light:not(.is-solid) .btn{ background:#111; color:#F4F2EE; }
html:not(.menu-open) .head.on-light:not(.is-solid) .search-btn{ border-color:rgba(17,17,17,.16); background:rgba(255,255,255,.55); }
html:not(.menu-open) .head.on-light:not(.is-solid) .search-btn kbd{ border-color:rgba(17,17,17,.2); }
html:not(.menu-open) .head.on-light:not(.is-solid) .menu-btn{ background:#111; }
html:not(.menu-open) .head.on-light:not(.is-solid) .menu-btn span:not(.visually-hidden){ background:#F4F2EE; }

/* ---------- offerteformulier: keuzes als dropdown ---------- */
.q .field select{ cursor:pointer; padding-right:1.8rem; }
.msel{ position:relative; }
.msel-btn{ width:100%; display:block; text-align:left; border:none; border-bottom:1.5px solid var(--line); background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23888' stroke-width='2'/%3E%3C/svg%3E") right center/18px no-repeat; color:var(--muted); font:inherit; font-size:1.1rem; padding:1.6rem 1.8rem .6rem 0; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:border-color .3s; }
.msel.has .msel-btn{ color:var(--text); }
.msel.open .msel-btn, .msel-btn:focus-visible{ outline:none; border-color:var(--accent); }
.msel.invalid .msel-btn{ border-color:#d33; }
.msel-pop{ position:absolute; z-index:30; left:0; right:0; top:calc(100% + 6px); background:var(--bg); border:1px solid var(--line); border-radius:16px; box-shadow:0 18px 40px rgba(0,0,0,.14); padding:.4rem; max-height:min(420px, 60vh); overflow:auto; }
.msel-opt{ position:relative; display:flex; align-items:center; gap:.75rem; padding:.7rem .75rem; border-radius:11px; cursor:pointer; }
.msel-opt:hover{ background:var(--card); }
.msel-opt input{ position:absolute; opacity:0; width:1px; height:1px; }
.msel-box{ flex:none; width:22px; height:22px; border-radius:7px; border:1.5px solid var(--line); display:grid; place-items:center; transition:background .2s,border-color .2s; }
.msel-opt input:checked + .msel-box{ background:var(--text); border-color:var(--text); }
.msel-opt input:checked + .msel-box::after{ content:""; width:6px; height:11px; border:solid var(--bg); border-width:0 2.5px 2.5px 0; transform:translateY(-1px) rotate(45deg); }
.msel-opt input:focus-visible + .msel-box{ outline:3px solid var(--c); outline-offset:2px; }
.msel-t{ display:flex; flex-direction:column; gap:.1rem; font-weight:600; }
.msel-t small{ font-weight:500; color:var(--muted); font-size:.85rem; }
.msel-opt[style] .msel-t::before{ content:""; display:none; }
.msel-opt[style] .msel-box{ border-color:var(--sw); }
.msel-opt[style] input:checked + .msel-box{ background:var(--sw); border-color:var(--sw); }
.msel-opt[style] input:checked + .msel-box::after{ border-color:#111; }
.msel-done{ position:sticky; bottom:0; display:block; width:100%; margin-top:.3rem; border:0; border-radius:11px; background:var(--text); color:var(--bg); font:inherit; font-weight:700; padding:.75rem; cursor:pointer; }
.msel.big .msel-btn{ font-size:1.2rem; }
.msel.big{ margin:.6rem 0 .4rem; }
.file-hint{ font-size:.85rem; color:var(--muted); }
.q .field .msel-pop label.msel-opt{ position:relative; left:auto; top:auto; transform:none; color:var(--text); pointer-events:auto; font-size:1rem; transition:background .2s; }
.q .field .msel-pop label.msel-opt{ position:relative; left:auto; top:auto; transform:none; color:var(--text); pointer-events:auto; font-size:1rem; transition:background .2s; }
.q .field .msel-pop label.msel-opt{ position:relative; left:auto; top:auto; transform:none; color:var(--text); pointer-events:auto; font-size:1rem; transition:background .2s; }

/* ---------- maten kiezen ---------- */
.sizes{ margin:.6rem 0 .4rem; }
.sz-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.5rem; }
.sz{ border:1.5px solid var(--line); border-radius:14px; padding:.55rem .5rem .5rem; text-align:center; transition:border-color .2s, background .2s; }
.sz.on{ border-color:var(--text); background:var(--bg); }
.sz-l{ display:block; font-weight:800; font-size:.95rem; margin-bottom:.35rem; }
.sz-c{ display:flex; align-items:center; justify-content:space-between; gap:.25rem; }
.sz-b{ width:34px; height:34px; flex:none; border-radius:50%; border:1.5px solid var(--line); background:transparent; color:var(--text); font:inherit; font-size:1.15rem; font-weight:700; line-height:1; cursor:pointer; display:grid; place-items:center; transition:background .2s, border-color .2s; }
.sz-b:hover{ border-color:var(--text); }
.sz-b[data-d="1"]{ background:var(--text); color:var(--bg); border-color:var(--text); }
.sz-n{ min-width:1.6em; font-weight:800; font-variant-numeric:tabular-nums; }
.sz:not(.on) .sz-n{ color:var(--muted); }
.sz-more{ margin-top:.6rem; }
.sz-more summary{ cursor:pointer; font-weight:600; font-size:.92rem; color:var(--muted); padding:.3rem 0; }
.sz-more[open] summary{ margin-bottom:.5rem; }
.sz-total{ margin:.7rem 0 0; font-size:.95rem; color:var(--muted); }
.sz-total b{ color:var(--text); font-size:1.1rem; }
@media (max-width:560px){ .sz-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .sz-c{ max-width:150px; margin:0 auto; } }
.q .sz-b{ padding:0; min-width:0; min-height:0; box-sizing:border-box; }

/* ---------- offerte: producten per dienst ---------- */
.form-row{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:600px){ .form-row{ grid-template-columns:minmax(0,1fr); } }
.q .field select, .msel-btn{ min-width:0; max-width:100%; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
.q-items{ display:grid; gap:.8rem; margin:.4rem 0 .7rem; }
.q-item{ border:1.5px solid var(--line); border-radius:18px; padding:.9rem 1.1rem 1rem; background:color-mix(in srgb,var(--bg) 60%,transparent); }
.q-item-h{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.1rem; }
.q-item-n{ font-size:.78rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.q-item-x{ border:0; background:none; color:var(--muted); font:inherit; font-size:.85rem; text-decoration:underline; cursor:pointer; padding:.2rem 0; }
.q-item-x:hover{ color:#c62828; }
.q-item-f{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 1.1rem; }
.q-item-f > .full, .q-item-f > .msel{ grid-column:1 / -1; }
@media (max-width:600px){ .q-item-f{ grid-template-columns:minmax(0,1fr); } .q-item{ padding:.8rem .9rem .9rem; } }
.q-item-p.invalid select, .qty.invalid .qty-own, .field.invalid select{ border-color:#d33; }
.q-add{ display:flex; align-items:center; justify-content:center; gap:.5rem; width:100%; border:1.5px dashed var(--line); border-radius:16px; background:transparent; color:var(--text); font:inherit; font-weight:700; padding:.85rem 1rem; cursor:pointer; transition:border-color .2s, background .2s; margin-bottom:.6rem; }
.q-add span{ display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--text); color:var(--bg); font-size:1.05rem; line-height:1; }
.q-add:hover{ border-color:var(--text); background:var(--card); }
.qty-own{ width:100%; margin-top:.4rem; border:none; border-bottom:1.5px solid var(--accent); background:transparent; color:var(--text); font:inherit; font-size:1.1rem; padding:.45rem 0; }
.qty-own:focus{ outline:none; }
.ph-hint{ font-size:.85em; opacity:.8; }
.field input:focus + label .ph-hint, .field input:not(:placeholder-shown) + label .ph-hint{ display:none; }
.sizes.full{ margin-top:.8rem; }
.ct-sub{ margin:-.4rem 0 .8rem; font-weight:600; opacity:.75; }
.ct-mails{ display:grid; grid-template-columns:1fr 1fr; gap:.55rem; }
.ct-mail{ display:flex; flex-direction:column; gap:.15rem; text-align:left; padding:.85rem .95rem; border-radius:14px; border:1.5px solid rgba(17,17,17,.14); background:transparent; color:inherit; font:inherit; text-decoration:none; cursor:pointer; transition:border-color .2s, background .2s; }
.ct-mail b{ font-size:1rem; }
.ct-mail small{ font-size:.8rem; opacity:.65; }
.ct-mail:hover, .ct-mail:focus-visible{ border-color:#111; background:rgba(17,17,17,.04); outline:none; }
@media (max-width:380px){ .ct-mails{ grid-template-columns:1fr; } }
.q .qty.own select{ width:52%; }
.q .qty.own .qty-own{ position:absolute; right:0; bottom:0; width:44%; margin:0; padding:1.6rem 0 .6rem; border-bottom:1.5px solid var(--accent); }
.q .qty.own .qty-own::placeholder{ color:var(--muted); }
.q-item-n{ display:inline-flex; align-items:center; gap:.5rem; }
.q-item.has-cat .q-item-n{ color:var(--text); letter-spacing:.06em; }
.q-item.has-cat .q-item-n::before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--isw); box-shadow:0 0 0 3px color-mix(in srgb,var(--isw) 22%,transparent); flex:none; }
.q-item.has-cat{ border-color:color-mix(in srgb,var(--isw) 45%,var(--line)); }
.file-drop{ position:relative; }
.file-drop.sm{ margin-top:.9rem; padding:.85rem 1rem; text-align:left; font-size:.9rem; display:flex; flex-wrap:wrap; align-items:center; gap:.2rem .5rem; }
.file-drop.sm::before{ content:"+"; display:grid; place-items:center; width:26px; height:26px; flex:none; border-radius:50%; border:1.5px solid var(--line); color:var(--text); font-weight:700; }
.file-drop.sm small{ flex-basis:100%; color:var(--text); font-weight:600; }
.file-drop.sm small:empty{ display:none; }
.file-drop.has{ border-style:solid; border-color:var(--text); }
.file-drop.has.sm::before{ content:"✓"; background:var(--text); color:var(--bg); border-color:var(--text); }

/* socials in de kopbalk (rechts) en in het menu */
.head-soc{ display:flex; align-items:center; gap:.15rem; }
.hsoc{ width:38px; height:38px; display:grid; place-items:center; border-radius:50%; color:inherit; text-decoration:none; transition:background .25s,color .25s,transform .25s; }
.hsoc svg{ width:19px; height:19px; }
.hsoc:hover{ background:var(--ink); color:var(--paper); transform:translateY(-1px); }
.hsoc:focus-visible{ outline:3px solid var(--c); outline-offset:2px; }
.hsoc[hidden]{ display:none; }
.head.on-dark:not(.is-solid) .hsoc:hover{ background:var(--paper); color:var(--ink); }
.menu-soc-t{ margin-top:1.1rem; }
.menu-soc{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:0; }
.menu-soc a.ms{ width:46px; height:46px; padding:0; display:grid; place-items:center; border-radius:50%; border:1px solid #ffffff26; color:#fff; }
.menu-soc a.ms svg{ width:21px; height:21px; }
.menu-soc a.ms:hover,.menu-soc a.ms:active{ background:var(--y); color:#111; border-color:var(--y); }
/* kopbalk: ruimte verdelen */
.head-in{ gap:1.4rem; } .nav{ gap:1.5rem; white-space:nowrap; } .head-cta{ white-space:nowrap; }
.search-btn-t,.search-btn kbd{ display:none; } .search-btn{ width:46px; height:46px; padding:0; justify-content:center; }
@media (max-width:1240px){ .nav,.head-soc{ display:none; } .menu-btn{ display:block; } }
.menu-soc a.ms[hidden]{ display:none; }