/* Maatwerk - thema voor Keukenrenovatie Midden Nederland */
:root{
  --ink:#100F0E;
  --ink-2:#191715;
  --ink-3:#242120;
  --bone:#F3F1EC;
  --bone-2:#E4E0D7;
  --grey:#9A948B;
  --grey-2:#6E6862;
  --amber:#EDA31B;
  --amber-d:#C9860C;
  --line:rgba(243,241,236,.13);
  --line-2:rgba(243,241,236,.07);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--bone);
  font-family:"Source Sans 3",system-ui,sans-serif;font-size:17.5px;line-height:1.6;font-weight:350;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
.col{max-width:62ch}

h1,h2,h3,h4,.disp{font-family:Archivo,Helvetica,Arial,sans-serif;margin:0;text-wrap:balance}
h1{font-size:clamp(2.9rem,7.4vw,6.4rem);font-weight:800;font-stretch:112%;line-height:.94;letter-spacing:-.035em}
h2{font-size:clamp(2rem,4.4vw,3.6rem);font-weight:800;font-stretch:108%;line-height:1.02;letter-spacing:-.03em}
h3{font-size:clamp(1.15rem,1.9vw,1.5rem);font-weight:700;line-height:1.2;letter-spacing:-.015em}
h4{font-size:1.02rem;font-weight:700;letter-spacing:-.01em}
p{margin:0}
.lbl{font-family:Archivo,sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:var(--amber)}
.lbl.dim{color:var(--grey)}
.lede{font-size:clamp(1.08rem,1.7vw,1.32rem);color:#CFC9BF;font-weight:350}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* nav */
nav{position:sticky;top:0;z-index:50;background:rgba(16,15,14,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:clamp(16px,3vw,44px);padding-block:12px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
.brand img{width:46px;height:46px}
.brand span{font-family:Archivo,sans-serif;font-weight:800;font-size:.82rem;line-height:1.08;letter-spacing:-.01em;text-transform:uppercase}
.brand span i{display:block;font-style:normal;color:var(--amber);font-size:.66rem;letter-spacing:.13em}
.menu{display:flex;gap:clamp(14px,2vw,28px);margin-left:auto;list-style:none;padding:0;margin-block:0}
.menu a{text-decoration:none;font-size:.94rem;color:#D8D2C8;padding:6px 0;border-bottom:2px solid transparent}
.menu a:hover{color:var(--bone);border-bottom-color:var(--amber)}
@media(max-width:940px){.menu{display:none}}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:Archivo,sans-serif;font-weight:700;font-size:.94rem;letter-spacing:-.005em;
  padding:13px 22px;border-radius:2px;text-decoration:none;border:1.5px solid transparent;
  transition:transform .12s ease,background .18s ease,color .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-a{background:var(--amber);color:#1A1200}
.btn-a:hover{background:#FFB733}
.btn-b{border-color:rgba(243,241,236,.32);color:var(--bone)}
.btn-b:hover{border-color:var(--amber);color:var(--amber)}
.btn-s{padding:10px 17px;font-size:.88rem}
@media(prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* hero */
.hero{position:relative;min-height:min(88vh,860px);display:flex;align-items:flex-end;overflow:hidden}
.hero-img{position:absolute;inset:0}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:58% 40%}
.hero-veil{position:absolute;inset:0;background:
  linear-gradient(100deg,rgba(16,15,14,.96) 0%,rgba(16,15,14,.9) 34%,rgba(16,15,14,.45) 62%,rgba(16,15,14,.25) 100%),
  linear-gradient(0deg,rgba(16,15,14,.92) 0%,transparent 42%)}
.hero-in{position:relative;padding-block:clamp(72px,13vw,150px) clamp(40px,6vw,64px);display:flex;flex-direction:column;gap:26px;max-width:900px}
.hero h1 em{font-style:normal;color:var(--amber)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px 26px;font-size:.9rem;color:var(--grey);align-items:center}
.hero-meta b{color:var(--bone);font-weight:600}

/* beloftestrook */
.belofte{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--ink-2)}
.belofte-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.bel{padding:26px clamp(16px,2.4vw,34px);border-right:1px solid var(--line-2);display:flex;flex-direction:column;gap:6px}
.bel:last-child{border-right:0}
.bel .v{font-family:Archivo,sans-serif;font-size:2.1rem;font-weight:800;font-stretch:108%;letter-spacing:-.03em;line-height:1;color:var(--amber)}
.bel .t{font-size:.94rem;color:#C6C0B6;line-height:1.4}

section{padding:clamp(64px,9vw,132px) 0}
.sec-h{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(30px,4vw,54px);max-width:56ch}

/* diensten */
.dienst-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(14px,1.7vw,22px)}
.dienst{position:relative;border:1px solid var(--line);background:var(--ink-2);overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s ease}
.dienst:hover{border-color:rgba(237,163,27,.5)}
.dienst-f{aspect-ratio:4/3;overflow:hidden;background:var(--ink-3)}
.dienst-f img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.dienst:hover .dienst-f img{transform:scale(1.045)}
.dienst-b{padding:24px clamp(20px,2.2vw,28px) 28px;display:flex;flex-direction:column;gap:11px;flex:1}
.dienst-b p{font-size:.98rem;color:#BAB4AA}
.dienst .meer{margin-top:auto;padding-top:14px;font-family:Archivo,sans-serif;font-weight:700;font-size:.88rem;color:var(--amber);text-decoration:none;display:inline-flex;gap:7px;align-items:center}
.dienst .meer:hover{gap:11px}
@media(prefers-reduced-motion:reduce){.dienst-f img,.dienst .meer{transition:none}}

/* routes */
.routes{background:var(--bone);color:var(--ink)}
.routes .lbl{color:var(--amber-d)}
.routes .lede{color:#4A443E}
.route-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(275px,1fr));gap:1px;background:var(--bone-2);border:1px solid var(--bone-2)}
.route{background:var(--bone);padding:clamp(26px,3vw,38px);display:flex;flex-direction:column;gap:13px;position:relative;transition:background .2s ease}
.route:hover{background:#FFFDF8}
.route .rn{font-family:Archivo,sans-serif;font-weight:800;font-size:.72rem;letter-spacing:.17em;color:var(--amber-d)}
.route h3{color:var(--ink)}
.route p{font-size:.98rem;color:#57514A}
.route .btn{margin-top:auto;align-self:flex-start}
.route .btn-a{background:var(--ink);color:var(--bone)}
.route .btn-a:hover{background:var(--amber);color:#1A1200}

/* geen gezeur */
.gezeur{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gz-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(20px,3vw,48px)}
.gz{display:flex;flex-direction:column;gap:15px}
.gz ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px}
.gz li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;font-size:1rem;color:#C6C0B6}
.gz li b{color:var(--bone);font-weight:600}
.tick{width:20px;height:20px;margin-top:2px}
.gz.no li{color:#8A847C}

/* werk */
.werk-g{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.3vw,16px)}
.w{position:relative;overflow:hidden;background:var(--ink-2);border:1px solid var(--line-2)}
.w img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.w:hover img{transform:scale(1.05)}
.w-cap{position:absolute;left:0;right:0;bottom:0;padding:20px;background:linear-gradient(0deg,rgba(16,15,14,.94),transparent);display:flex;flex-direction:column;gap:3px}
.w-cap .p{font-family:Archivo,sans-serif;font-weight:700;font-size:1.02rem}
.w-cap .s{font-size:.84rem;color:var(--grey)}
.w1{grid-column:span 7;aspect-ratio:16/11}
.w2{grid-column:span 5;aspect-ratio:16/11}
.w3{grid-column:span 5;aspect-ratio:4/3}
.w4{grid-column:span 7;aspect-ratio:16/9}
@media(max-width:800px){.w1,.w2,.w3,.w4{grid-column:span 12;aspect-ratio:4/3}}
@media(prefers-reduced-motion:reduce){.w img{transition:none}}

/* merken */
.merken{background:var(--bone);color:var(--ink);padding:clamp(40px,5vw,62px) 0}
.merken .kop{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin-bottom:26px}
.merken .kop b{font-family:Archivo,sans-serif;font-weight:800;font-size:1.05rem}
.merken .kop span{font-size:.95rem;color:#5C564F}
.merk-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:clamp(14px,2vw,30px);align-items:center}
.merk-g img{width:100%;height:34px;object-fit:contain;filter:grayscale(1);opacity:.62;transition:opacity .2s ease,filter .2s ease}
.merk-g img:hover{filter:none;opacity:1}

/* werkgebied */
.plaats-g{display:flex;flex-wrap:wrap;gap:9px}
.plaats{border:1px solid var(--line);padding:9px 15px;font-size:.93rem;color:#C6C0B6;text-decoration:none;border-radius:2px;transition:all .18s ease}
.plaats:hover{border-color:var(--amber);color:var(--amber)}
.plaats b{font-weight:600;color:var(--bone)}

/* slot */
.slot{position:relative;overflow:hidden;border-top:1px solid var(--line)}
.slot-img{position:absolute;inset:0}
.slot-img img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.slot-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,15,14,.97) 6%,rgba(16,15,14,.72) 55%,rgba(16,15,14,.5) 100%)}
.slot-in{position:relative;padding-block:clamp(60px,8vw,110px);display:flex;flex-direction:column;gap:22px;max-width:640px}

footer{background:var(--ink-2);border-top:1px solid var(--line);padding:clamp(44px,6vw,72px) 0 34px}
.ft-g{display:grid;grid-template-columns:1.5fr repeat(auto-fit,minmax(150px,1fr));gap:clamp(24px,3vw,44px);margin-bottom:38px}
.ft h4{margin-bottom:13px;font-size:.74rem;letter-spacing:.17em;text-transform:uppercase;color:var(--amber);font-weight:700}
.ft ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.ft a{text-decoration:none;font-size:.94rem;color:#B2ACA3}
.ft a:hover{color:var(--amber)}
.ft-b{border-top:1px solid var(--line-2);padding-top:22px;display:flex;flex-wrap:wrap;gap:10px 26px;font-size:.85rem;color:var(--grey-2)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:100;background:var(--amber);color:#1A1200;padding:10px 16px;border-radius:2px;font-family:Archivo,sans-serif;font-weight:700}
.inhoud p{margin-bottom:1em}
.inhoud h2,.inhoud h3{margin:1.4em 0 .5em}

/* ---------- losse pagina's ---------- */
.pagina-hero{border-bottom:1px solid var(--line);padding:clamp(48px,7vw,92px) 0 clamp(26px,3.5vw,42px);background:linear-gradient(180deg,var(--ink-2) 0%,var(--ink) 100%)}
.pagina-hero h1{font-size:clamp(2.1rem,5vw,3.6rem);margin-top:14px}
.pagina-hero .lede{margin-top:18px}
.pagina-body{padding:clamp(44px,6vw,86px) 0}
.inhoud{max-width:70ch;font-size:1.06rem;line-height:1.68;color:#D7D1C7}
.inhoud > * + *{margin-top:1.05em}
.inhoud h2{font-family:Archivo,sans-serif;font-weight:800;font-stretch:106%;letter-spacing:-.025em;color:var(--bone);font-size:clamp(1.5rem,2.8vw,2.1rem);line-height:1.12;margin-top:2.1em}
.inhoud h3{font-family:Archivo,sans-serif;font-weight:700;color:var(--bone);font-size:1.22rem;margin-top:1.9em;letter-spacing:-.015em}
.inhoud strong{color:var(--bone);font-weight:600}
.inhoud a{color:var(--amber);text-underline-offset:3px}
.inhoud ul,.inhoud ol{padding-left:1.25em}
.inhoud li{margin:.5em 0}
.inhoud li::marker{color:var(--amber)}
.inhoud hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.inhoud blockquote{margin:1.6em 0;padding:16px 22px;border-left:3px solid var(--amber);background:var(--ink-2);border-radius:0 3px 3px 0;font-size:1rem}
.inhoud blockquote p{margin:0}
.inhoud table{width:100%;border-collapse:collapse;font-size:.95rem;background:var(--ink-2);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.inhoud th,.inhoud td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line-2)}
.inhoud th{font-family:Archivo,sans-serif;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);font-weight:700;background:var(--ink-3)}
.inhoud tr:last-child td{border-bottom:0}
.inhoud .tabelwrap{overflow-x:auto}

/* feitblok: het getal dat geciteerd mag worden */
.feit{display:flex;gap:16px;align-items:flex-start;background:var(--ink-2);border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:0 3px 3px 0;padding:18px 22px;margin:1.8em 0}
.feit .g{font-family:Archivo,sans-serif;font-weight:800;font-stretch:108%;font-size:2rem;line-height:1;color:var(--amber);white-space:nowrap;font-variant-numeric:tabular-nums}
.feit .t{font-size:.98rem;color:#C6C0B6}
.feit .t b{color:var(--bone)}

/* vraag & antwoord */
.qa{border-top:1px solid var(--line);padding:22px 0}
.qa h3{margin-top:0}
.qa p:first-of-type{color:var(--bone);font-size:1.06rem}

/* wel/niet */
.welniet{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:1.8em 0}
.welniet > div{background:var(--ink-2);border:1px solid var(--line);border-radius:3px;padding:18px 20px}
.welniet h4{font-family:Archivo,sans-serif;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;margin:0 0 10px}
.welniet ul{margin:0;padding-left:1.1em;font-size:.95rem}
/* ---------- afwerking ---------- */
.leesbalk{position:fixed;top:0;left:0;right:0;height:2px;background:var(--amber);transform-origin:0 50%;transform:scaleX(0);z-index:200;pointer-events:none}

.onthul{opacity:0;transform:translateY(16px);transition:opacity .62s cubic-bezier(.2,.7,.3,1) var(--vertraag,0ms),transform .62s cubic-bezier(.2,.7,.3,1) var(--vertraag,0ms)}
.onthul.zichtbaar{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.onthul{opacity:1;transform:none;transition:none}.leesbalk{display:none}}

/* korrel voor diepte */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:150;opacity:.028;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* hero: langzaam inzoomen bij binnenkomst */
.hero-img img{transform:scale(1.06);transition:transform .9s cubic-bezier(.2,.7,.3,1)}
@keyframes heroIn{from{transform:scale(1.14);opacity:.4}to{transform:scale(1.06);opacity:1}}
@media(prefers-reduced-motion:no-preference){.hero-img img{animation:heroIn 1.5s cubic-bezier(.2,.7,.3,1) both}}
.hero-in > *{animation:opkomst .8s cubic-bezier(.2,.7,.3,1) both}
.hero-in > *:nth-child(1){animation-delay:.10s}
.hero-in > *:nth-child(2){animation-delay:.20s}
.hero-in > *:nth-child(3){animation-delay:.30s}
.hero-in > *:nth-child(4){animation-delay:.40s}
.hero-in > *:nth-child(5){animation-delay:.50s}
@keyframes opkomst{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.hero-in > *,.hero-img img{animation:none}}

/* knoppen met glans */
.btn-a{position:relative;overflow:hidden}
.btn-a::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg)}
.btn-a:hover::after{animation:glans .75s ease}
@keyframes glans{to{left:150%}}
@media(prefers-reduced-motion:reduce){.btn-a:hover::after{animation:none}}

/* beloftestrook: amberrand die oplicht */
.bel{position:relative}
.bel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--amber);transform:scaleY(0);transform-origin:50% 0;transition:transform .5s cubic-bezier(.2,.7,.3,1) var(--vertraag,0ms)}
.bel.zichtbaar::before{transform:scaleY(1)}

/* werkraster: bijschrift schuift op */
.w .w-cap{transform:translateY(8px);opacity:.92;transition:transform .4s cubic-bezier(.2,.7,.3,1),opacity .4s ease}
.w:hover .w-cap{transform:none;opacity:1}
.w::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(237,163,27,0),rgba(237,163,27,.12));opacity:0;transition:opacity .4s ease;pointer-events:none}
.w:hover::after{opacity:1}

/* diensten: amberlijn boven de kaart */
.dienst::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--amber);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s cubic-bezier(.2,.7,.3,1);z-index:2}
.dienst:hover::before{transform:scaleX(1)}

/* merkenrij die loopt */
.merk-rail{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.merk-loop{display:flex;align-items:center;gap:clamp(28px,4vw,58px);width:max-content}
.merk-loop.loopt{animation:merkloop 42s linear infinite}
.merk-loop img{height:30px;width:auto;flex:none;filter:grayscale(1);opacity:.55;transition:opacity .25s ease,filter .25s ease}
.merk-loop img:hover{filter:none;opacity:1}
.merk-rail:hover .merk-loop.loopt{animation-play-state:paused}
@keyframes merkloop{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.merk-loop.loopt{animation:none;flex-wrap:wrap}}

/* vaste actiebalk op mobiel */
.mob-cta{display:none}
@media(max-width:760px){
  .mob-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:120;gap:1px;background:var(--line);
    border-top:1px solid var(--line);backdrop-filter:blur(10px)}
  .mob-cta a{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:15px 10px;
    text-decoration:none;font-family:Archivo,sans-serif;font-weight:700;font-size:.92rem;background:rgba(16,15,14,.94);color:var(--bone)}
  .mob-cta a.prim{background:var(--amber);color:#1A1200}
  body{padding-bottom:56px}
}

/* nette focus + selectie */
::selection{background:var(--amber);color:#1A1200}
/* ---------- kop die woord voor woord verschijnt ---------- */
.woordkop span{display:inline-block}
@media(prefers-reduced-motion:no-preference){
  .woordkop span{opacity:0;transform:translateY(.5em) rotate(1.2deg);animation:woordIn .7s cubic-bezier(.2,.8,.25,1) both}
  .woordkop span:nth-child(1){animation-delay:.18s}.woordkop span:nth-child(2){animation-delay:.24s}
  .woordkop span:nth-child(3){animation-delay:.30s}.woordkop span:nth-child(4){animation-delay:.36s}
  .woordkop span:nth-child(5){animation-delay:.42s}
  .woordkop em span:nth-child(1){animation-delay:.50s}.woordkop em span:nth-child(2){animation-delay:.55s}
  .woordkop em span:nth-child(3){animation-delay:.60s}.woordkop em span:nth-child(4){animation-delay:.65s}
  .woordkop em span:nth-child(5){animation-delay:.70s}.woordkop em span:nth-child(6){animation-delay:.75s}
  .woordkop em span:nth-child(7){animation-delay:.80s}
}
@keyframes woordIn{to{opacity:1;transform:none}}

/* ---------- rekenhulp ---------- */
.rekenhulp{position:relative;background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.rekenhulp::before{content:"";position:absolute;left:50%;top:-40%;width:min(1100px,120vw);aspect-ratio:1;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(237,163,27,.13),transparent 62%);pointer-events:none}
.rk-grid{position:relative;display:grid;grid-template-columns:minmax(280px,.85fr) minmax(320px,1fr);gap:clamp(28px,5vw,72px);align-items:center}
@media(max-width:900px){.rk-grid{grid-template-columns:1fr}}
.rk-tekst{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.rk-punten{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.rk-punten li{position:relative;padding-left:22px;font-size:.97rem;color:#C6C0B6}
.rk-punten li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:2px;background:var(--amber)}

.rk-paneel{background:var(--ink);border:1px solid var(--line);border-radius:5px;padding:clamp(20px,3vw,34px);
  display:flex;flex-direction:column;gap:22px;box-shadow:0 30px 70px -40px rgba(0,0,0,.9)}
.rk-uitkomst{display:grid;grid-template-columns:1.25fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.rk-cel{background:var(--ink-2);padding:18px 20px;display:flex;flex-direction:column;gap:5px}
.rk-groot{font-family:Archivo,sans-serif;font-weight:800;font-stretch:110%;letter-spacing:-.035em;line-height:1;
  font-size:clamp(2rem,4.6vw,2.9rem);color:var(--amber);font-variant-numeric:tabular-nums;
  transition:transform .18s cubic-bezier(.3,1.4,.5,1)}
.rk-groot.tik{transform:scale(1.045)}
.rk-klein{font-size:.82rem;color:var(--grey);line-height:1.35}

.rk-schuif{display:flex;flex-direction:column;gap:11px}
.rk-maatrij{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.rk-maat{font-family:Archivo,sans-serif;font-weight:700;font-size:1.12rem;letter-spacing:-.02em}
.rk-maat span{color:var(--amber);font-variant-numeric:tabular-nums}
.rk-hint{font-size:.76rem;color:var(--grey-2);letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.rk-schaal{display:flex;justify-content:space-between;font-size:.72rem;color:var(--grey-2);font-variant-numeric:tabular-nums}
.rk-voet{font-size:.8rem;color:var(--grey-2);line-height:1.45}

/* ----------------------------------------------------------------------------
   DE SCHUIFBALK MOET OVERAL GEEL ZIJN                     9 september 2026
   Gemeld: "hier zit een sleepbalk die wil ik in het geel." De CSS hieronder
   zette het gele deel al — in Chrome. Op de Mac van de eigenaar (Safari) bleef
   hij grijs, en dat komt door één ding:

   de vulling werd getekend in ::-webkit-slider-runnable-track met
   linear-gradient(... var(--vul) ...), en --vul wordt door de JS op het INPUT-
   element gezet. Chrome erft een eigen eigenschap door tot in dat interne
   onderdeel; Safari doet dat niet. Daar viel de gradient dus terug op de
   standaardwaarde of helemaal weg.

   De oplossing is de vulling niet meer in het interne onderdeel te tekenen maar
   op het input-element zelf — dat is gewoon een element, daar geldt --vul
   zonder trucs. Het interne spoor wordt doorzichtig en laat de achtergrond van
   de input zien. Zelfde beeld, en het werkt in beide browsers.

   Firefox houdt ::-moz-range-progress: die tekent de vulling van zichzelf al
   goed en heeft de variabele niet nodig. */
#rk-range{-webkit-appearance:none;appearance:none;width:100%;height:34px;cursor:grab;margin:0;
  background:linear-gradient(90deg,var(--amber) var(--vul,42%),rgba(243,241,236,.14) var(--vul,42%))
             no-repeat center / 100% 6px;
  border-radius:4px}
#rk-range:active{cursor:grabbing}
#rk-range::-webkit-slider-runnable-track{height:6px;border-radius:4px;background:transparent}
#rk-range::-moz-range-track{height:6px;border-radius:4px;background:transparent}
#rk-range::-moz-range-progress{height:6px;border-radius:4px;background:var(--amber)}
#rk-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;
  background:var(--bone);border:3px solid var(--amber);margin-top:-10px;
  box-shadow:0 3px 12px rgba(0,0,0,.5);transition:transform .15s ease}
#rk-range::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--bone);border:3px solid var(--amber);box-shadow:0 3px 12px rgba(0,0,0,.5)}
#rk-range:hover::-webkit-slider-thumb,#rk-range:active::-webkit-slider-thumb{transform:scale(1.12)}
#rk-range:focus-visible::-webkit-slider-thumb{outline:2px solid var(--amber);outline-offset:3px}

/* ---------- extra diepte op bestaande blokken ---------- */
.dienst{transform:translateZ(0)}
.dienst:hover{box-shadow:0 26px 60px -40px rgba(0,0,0,.95)}
.route{transition:background .2s ease,transform .2s cubic-bezier(.2,.7,.3,1)}
.route:hover{transform:translateY(-2px)}
.bel .v{transition:color .3s ease}
.belofte-g:hover .bel:not(:hover) .v{color:var(--grey-2)}
.plaats{transition:border-color .18s ease,color .18s ease,transform .18s cubic-bezier(.2,.7,.3,1)}
.plaats:hover{transform:translateY(-2px)}
/* ---------- footer-oproep ---------- */
.ft-cta{position:relative;background:var(--ink-2);border-top:1px solid var(--line);overflow:hidden}
.ft-cta::before{content:"";position:absolute;right:-10%;top:-60%;width:min(760px,90vw);aspect-ratio:1;
  background:radial-gradient(circle,rgba(237,163,27,.12),transparent 62%);pointer-events:none}
.ft-cta-in{position:relative;display:grid;grid-template-columns:minmax(260px,1fr) minmax(300px,.95fr);
  gap:clamp(26px,4vw,60px);align-items:center;padding:clamp(38px,5.5vw,72px) 0}
@media(max-width:860px){.ft-cta-in{grid-template-columns:1fr}}
.ft-cta-tekst{display:flex;flex-direction:column;gap:12px}
.ft-acties{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.ft-actie{display:flex;align-items:center;gap:14px;padding:16px 18px;background:var(--ink);text-decoration:none;
  transition:background .18s ease,padding-left .18s ease}
.ft-actie:hover{background:var(--ink-3);padding-left:24px}
.ft-actie svg{width:20px;height:20px;flex:none;color:var(--amber)}
.ft-actie span{display:flex;flex-direction:column;gap:1px;min-width:0}
.ft-actie b{font-family:Archivo,sans-serif;font-weight:700;font-size:1.02rem;letter-spacing:-.015em}
.ft-actie i{font-style:normal;font-size:.83rem;color:var(--grey)}
.ft-actie.prim{background:var(--amber);color:#1A1200}
.ft-actie.prim svg{color:#1A1200}
.ft-actie.prim i{color:rgba(26,18,0,.68)}
.ft-actie.prim:hover{background:#FFB733}

/* ---------- footer ---------- */
footer{background:var(--ink);border-top:1px solid var(--line);padding:clamp(44px,6vw,72px) 0 26px;overflow:hidden}
.ft-g{display:grid;grid-template-columns:1.45fr .85fr 1.15fr .95fr;gap:clamp(24px,3.2vw,52px);align-items:start}
@media(max-width:1040px){.ft-g{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.ft-g{grid-template-columns:1fr;gap:32px}}
.ft h4{font-family:Archivo,sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--amber);margin:0 0 13px}
.ft ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.ft a{text-decoration:none;font-size:.94rem;color:#B2ACA3;transition:color .16s ease}
.ft a:hover{color:var(--amber)}

.ft-merk .brand{margin-bottom:16px}
.ft-pitch{font-size:.94rem;color:#B2ACA3;max-width:38ch;line-height:1.6}
.ft-feiten{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.ft-feiten li{font-size:.8rem;color:var(--grey);border:1px solid var(--line);border-radius:20px;padding:5px 12px}
.ft-feiten b{color:var(--amber);font-family:Archivo,sans-serif;font-weight:700;font-variant-numeric:tabular-nums}

.ft-plaatsen{display:grid;grid-template-columns:1fr 1fr;gap:7px 14px}
.ft-plaatsen a{font-size:.9rem}
.ft-klein{font-size:.82rem;color:var(--grey-2);margin-top:14px;line-height:1.5}

.ft-groot{display:inline-block;font-family:Archivo,sans-serif;font-weight:800;font-stretch:108%;letter-spacing:-.03em;
  font-size:1.6rem;color:var(--bone)!important;margin-bottom:14px;font-variant-numeric:tabular-nums}
.ft-groot:hover{color:var(--amber)!important}
.ft-tijden{margin-top:16px;display:flex;flex-direction:column;gap:6px;font-size:.86rem}
.ft-tijden div{display:flex;justify-content:space-between;gap:12px;padding-bottom:6px;border-bottom:1px solid var(--line-2)}
.ft-tijden span{color:var(--grey)}
.ft-tijden b{color:var(--bone);font-weight:600;font-variant-numeric:tabular-nums}

.ft-wordmark{margin:clamp(34px,5vw,64px) 0 8px;font-family:Archivo,sans-serif;font-weight:800;font-stretch:125%;
  letter-spacing:-.045em;line-height:.82;font-size:clamp(2.4rem,11.4vw,10rem);white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(243,241,236,.15);user-select:none;pointer-events:none}

.ft-b{border-top:1px solid var(--line-2);padding-top:20px;display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;
  font-size:.85rem;color:var(--grey-2)}
.ft-punt{position:relative;padding-left:16px}
.ft-punt::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:2px;background:var(--amber)}
.ft-rechts{margin-left:auto}
.ft-omhoog{display:inline-flex;align-items:center;gap:7px;color:var(--grey-2)!important;font-size:.85rem}
.ft-omhoog svg{width:15px;height:15px}
.ft-omhoog:hover{color:var(--amber)!important}
/* ---------- werkgebiedkaart ---------- */
.kaart{background:var(--ink-2);border:1px solid var(--line);border-radius:5px;padding:clamp(10px,1.6vw,20px);overflow:hidden}
.kaart svg{width:100%;height:auto;display:block;overflow:visible}
.kaart-naam{font-family:Archivo,sans-serif;font-size:16px;font-weight:600;fill:#C6C0B6;letter-spacing:-.01em;transition:fill .18s ease}
.kaart-sub{font-family:Archivo,sans-serif;font-size:12px;font-weight:600;fill:var(--amber);letter-spacing:.06em;text-transform:uppercase}
.kaart-km{font-family:Archivo,sans-serif;font-size:11px;font-weight:600;fill:rgba(243,241,236,.28);letter-spacing:.08em}
.kaart-stip{fill:var(--ink);stroke:var(--grey);stroke-width:2;transition:all .18s ease}
.kaart-groot .kaart-stip{stroke:var(--bone)}
.kaart-basis .kaart-stip{fill:var(--amber);stroke:var(--amber)}
.kaart-basis .kaart-naam{fill:var(--bone);font-size:19px;font-weight:800}
.kaart-plek{cursor:pointer}
.kaart-plek:hover .kaart-stip{fill:var(--amber);stroke:var(--amber);r:8}
.kaart-plek:hover .kaart-naam{fill:var(--amber)}
.kaart-puls{fill:none;stroke:var(--amber);stroke-width:1.5;opacity:.5}
@media(prefers-reduced-motion:no-preference){
  .kaart-puls{animation:kaartPuls 3s ease-out infinite;transform-box:fill-box;transform-origin:center}
}
@keyframes kaartPuls{0%{transform:scale(.45);opacity:.55}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
.kaart-legenda{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;padding:16px 8px 4px;font-size:.83rem;color:var(--grey)}
.kaart-legenda span{display:inline-flex;align-items:center;gap:8px}
.lg{width:10px;height:10px;border-radius:50%;display:inline-block}
.lg-basis{background:var(--amber)}
.lg-groot{background:transparent;border:2px solid var(--bone)}
.lg-gewoon{background:transparent;border:2px solid var(--grey)}
.kaart-legenda-tekst{color:var(--grey-2);font-size:.79rem;margin-left:auto}
@media(max-width:700px){.kaart-naam{font-size:22px}.kaart-basis .kaart-naam{font-size:26px}.kaart-legenda-tekst{margin-left:0;width:100%}}
/* ---------- megamenu ---------- */
nav{transition:background .25s ease,border-color .25s ease}
nav.vast{background:rgba(16,15,14,.97);box-shadow:0 12px 30px -22px rgba(0,0,0,.9)}
.nav-in{position:relative}
.menu{align-items:center}
.menu li{position:static}
.mega-knop{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;padding:6px 0;
  font-family:"Source Sans 3",sans-serif;font-size:.94rem;color:#D8D2C8;border-bottom:2px solid transparent}
.mega-knop svg{width:11px;height:11px;transition:transform .22s ease}
.mega-knop:hover,.mega-knop[aria-expanded="true"]{color:var(--bone);border-bottom-color:var(--amber)}
.mega-knop[aria-expanded="true"] svg{transform:rotate(180deg)}

.mega{position:absolute;left:0;right:0;top:100%;background:rgba(20,19,17,.985);backdrop-filter:blur(16px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s ease,transform .24s cubic-bezier(.2,.7,.3,1),visibility .2s;
  z-index:60;box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.heeft-mega.open .mega{opacity:1;visibility:visible;transform:none}
.mega-in{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:clamp(20px,3vw,52px);padding:clamp(24px,3vw,40px) clamp(20px,4vw,56px)}
.mega-kol{display:flex;flex-direction:column;gap:3px}
.mega-kol h4{font-family:Archivo,sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--amber);margin:0 0 12px}
.mega-kol a{display:flex;flex-direction:column;gap:2px;padding:9px 11px;margin-left:-11px;border-radius:4px;
  text-decoration:none;transition:background .16s ease,transform .16s ease}
.mega-kol a:hover{background:rgba(243,241,236,.05);transform:translateX(3px)}
.mega-kol b{font-family:Archivo,sans-serif;font-weight:700;font-size:.98rem;color:var(--bone);letter-spacing:-.012em}
.mega-kol i{font-style:normal;font-size:.85rem;color:var(--grey)}

.mega-uitgelicht{position:relative;border-radius:4px;overflow:hidden;text-decoration:none;display:block;min-height:190px;
  border:1px solid var(--line)}
.mega-uitgelicht img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.mega-uitgelicht:hover img{transform:scale(1.05)}
.mega-uit-tekst{position:relative;display:flex;flex-direction:column;gap:5px;height:100%;justify-content:flex-end;padding:20px;
  background:linear-gradient(0deg,rgba(16,15,14,.96) 12%,rgba(16,15,14,.25) 65%,transparent)}
.mega-uit-tekst i{font-style:normal;font-family:Archivo,sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--amber)}
.mega-uit-tekst b{font-family:Archivo,sans-serif;font-weight:800;font-stretch:106%;font-size:1.12rem;line-height:1.2;
  letter-spacing:-.02em;color:var(--bone)}
.mega-uit-tekst em{font-style:normal;font-size:.86rem;color:#C6C0B6}

.nav-tel{display:none;font-family:Archivo,sans-serif;font-weight:700;font-size:.92rem;text-decoration:none;
  color:var(--bone);white-space:nowrap;letter-spacing:-.01em}
.nav-tel:hover{color:var(--amber)}
@media(min-width:1180px){.nav-tel{display:inline-block;margin-left:6px}}

/* hamburger + mobiel menu */
.hamburger{display:none;background:none;border:1px solid var(--line);border-radius:4px;width:42px;height:38px;
  cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0}
.hamburger span{display:block;width:17px;height:2px;background:var(--bone);border-radius:2px;transition:transform .24s ease,opacity .18s ease}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.mobielmenu{position:fixed;inset:var(--kop-h,100px) 0 0;background:var(--ink);z-index:55;overflow-y:auto;padding:22px 0 90px;
  animation:mobIn .28s cubic-bezier(.2,.7,.3,1) both}
@keyframes mobIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.mob-in{display:flex;flex-direction:column}
.mob-link{display:flex;flex-direction:column;gap:2px;padding:16px 0;border-bottom:1px solid var(--line-2);
  text-decoration:none;font-family:Archivo,sans-serif;font-weight:700;font-size:1.16rem;letter-spacing:-.02em;color:var(--bone)}
.mob-link.groot{font-size:1.5rem}
.mob-link i{font-style:normal;font-family:"Source Sans 3",sans-serif;font-weight:400;font-size:.88rem;color:var(--grey)}
.mob-onder{display:flex;flex-direction:column;gap:10px;margin-top:26px}

@media(max-width:1060px){
  .menu{display:none}
  .hamburger{display:flex}
  .nav-cta{display:none}
}
@media(min-width:1061px){.mobielmenu{display:none!important}}
/* ---------- over ons ---------- */
.ov-hero{position:relative;min-height:min(70vh,660px);display:flex;align-items:flex-end;overflow:hidden}
.ov-hero-img{position:absolute;inset:0}
.ov-hero-img img{width:100%;height:100%;object-fit:cover;object-position:60% 35%}
.ov-hero-veil{position:absolute;inset:0;background:
  linear-gradient(95deg,rgba(16,15,14,.97) 0%,rgba(16,15,14,.86) 38%,rgba(16,15,14,.35) 72%,rgba(16,15,14,.2) 100%),
  linear-gradient(0deg,rgba(16,15,14,.92) 0%,transparent 46%)}
.ov-hero-in{position:relative;padding:clamp(80px,12vw,150px) 0 clamp(38px,5vw,60px);display:flex;flex-direction:column;gap:20px;max-width:880px}
.ov-hero h1{font-size:clamp(2.4rem,6.2vw,5.2rem)}
.ov-hero h1 em{font-style:normal;color:var(--amber)}

.ov-stelling{padding:clamp(52px,8vw,110px) 0;border-bottom:1px solid var(--line-2)}
.ov-groot{font-family:Archivo,sans-serif;font-weight:800;font-stretch:106%;letter-spacing:-.032em;line-height:1.08;
  font-size:clamp(1.7rem,4.4vw,3.4rem);max-width:20ch;text-wrap:balance}
.ov-groot em{font-style:normal;color:var(--amber)}
.ov-onder{margin-top:24px;font-size:clamp(1.02rem,1.7vw,1.2rem);color:#C6C0B6}

.ov-mensen{padding:clamp(56px,8vw,110px) 0;border-bottom:1px solid var(--line-2)}
.mensen-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:4px;overflow:hidden}
.mens{background:var(--ink-2);display:flex;flex-direction:column}
.mens-f{aspect-ratio:1/1;overflow:hidden;background:var(--ink-3);display:grid;place-items:center;position:relative}
.mens-f img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.3,1);filter:grayscale(.25)}
.mens:hover .mens-f img{transform:scale(1.05);filter:none}
.mens-init{font-family:Archivo,sans-serif;font-weight:800;font-stretch:110%;font-size:3.4rem;color:var(--line);letter-spacing:-.04em}
.mens-b{padding:18px 20px 22px;display:flex;flex-direction:column;gap:6px}
.mens-b h3{font-size:1.22rem}
.mens-rol{font-family:Archivo,sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.mens-b p{font-size:.93rem;color:#B2ACA3;line-height:1.55}

.ov-dag{padding:clamp(56px,8vw,110px) 0}
.dag-lijn{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden;counter-reset:d}
.dag-lijn li{background:var(--ink-2);padding:22px 22px 26px;display:flex;flex-direction:column;gap:7px;position:relative}
.dag-lijn li::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--amber);transform:scaleX(0);
  transform-origin:0 50%;transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.dag-lijn li:hover::before{transform:scaleX(1)}
.dag-t{font-family:Archivo,sans-serif;font-weight:800;font-size:1.5rem;color:var(--amber);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1}
.dag-lijn b{font-family:Archivo,sans-serif;font-weight:700;font-size:1.02rem;letter-spacing:-.015em}
.dag-lijn p{font-size:.91rem;color:#B2ACA3;line-height:1.55;margin:0}
/* ---------- niet standaard ---------- */
.std{padding:clamp(56px,8vw,110px) 0;border-bottom:1px solid var(--line-2);background:var(--ink-2)}
.std-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:4px;overflow:hidden}
.std-kaart{background:var(--ink);padding:22px 24px 26px;display:flex;flex-direction:column;gap:9px;position:relative;
  transition:background .2s ease}
.std-kaart:hover{background:var(--ink-3)}
.std-kaart::before{content:"";position:absolute;left:24px;top:0;width:26px;height:2px;background:var(--amber);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.std-kaart:hover::before{transform:scaleX(1)}
.std-kaart h3{font-size:1.06rem;line-height:1.28;color:var(--bone)}
.std-kaart p{font-size:.93rem;color:#B2ACA3;line-height:1.6;margin:0}
.std-slot{margin-top:26px;max-width:62ch;font-size:1.02rem;color:#C6C0B6}

/* ---------- keurmerk ---------- */
.ft-keur{display:flex;align-items:center;gap:14px;margin:18px 0 4px;padding:14px 16px;border:1px solid var(--line);
  border-radius:4px;background:var(--ink-2)}
.ft-keur svg{width:52px;height:52px;flex:none}
.keur-groot{font-family:Archivo,sans-serif;font-size:22px;font-weight:800;fill:var(--amber);letter-spacing:-.04em}
.keur-klein{font-family:Archivo,sans-serif;font-size:8px;font-weight:700;fill:var(--grey);letter-spacing:.22em}
.ft-keur span{display:flex;flex-direction:column;gap:2px}
.ft-keur b{font-family:Archivo,sans-serif;font-weight:700;font-size:.96rem;color:var(--bone);letter-spacing:-.015em}
.ft-keur i{font-style:normal;font-size:.83rem;color:var(--grey);line-height:1.4}
/* ---------- bij jou thuis ---------- */
.thuis{padding:clamp(56px,8vw,110px) 0;border-bottom:1px solid var(--line-2)}
.thuis-g{display:grid;grid-template-columns:minmax(300px,1.05fr) minmax(280px,.95fr);gap:clamp(28px,5vw,72px);align-items:center}
@media(max-width:900px){.thuis-g{grid-template-columns:1fr}}
.thuis-tekst{display:flex;flex-direction:column;gap:16px}
.thuis-tekst h2{margin-top:4px}
.thuis-tekst p{color:#C6C0B6;font-size:1.02rem;line-height:1.65}
.thuis-lijst{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-direction:column;gap:11px}
.thuis-lijst li{position:relative;padding-left:26px;font-size:1rem;color:#C6C0B6;line-height:1.5}
.thuis-lijst li::before{content:"";position:absolute;left:0;top:.58em;width:13px;height:2px;background:var(--amber)}
.thuis-lijst b{color:var(--bone);font-weight:600}
.thuis-na{border-left:3px solid var(--amber);padding-left:18px;color:var(--bone)!important;font-size:1.06rem!important;margin-top:8px}
.thuis-beeld{position:relative;border-radius:4px;overflow:hidden;border:1px solid var(--line)}
.thuis-beeld img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.thuis-bij{position:absolute;left:0;right:0;bottom:0;padding:20px;font-size:.92rem;color:#D7D1C7;
  background:linear-gradient(0deg,rgba(16,15,14,.94),transparent)}

/* ---------- fouten ---------- */
.fout{padding:clamp(56px,8vw,110px) 0;background:var(--ink-2);border-bottom:1px solid var(--line-2)}
.fout-quote{margin:0;border:0;padding:0;max-width:26ch}
.fout-quote > p:first-child{font-family:Archivo,sans-serif;font-weight:800;font-stretch:108%;letter-spacing:-.035em;
  line-height:1.04;font-size:clamp(1.9rem,5.2vw,4rem);color:var(--bone);text-wrap:balance}
.fout-onder{max-width:56ch;margin-top:22px!important;font-size:1.06rem;color:#C6C0B6;line-height:1.62}
.fout-onder em{font-style:italic;color:var(--grey)}
.fout-slot{max-width:60ch;margin-top:34px;padding-top:26px;border-top:1px solid var(--line);
  font-size:1.1rem;color:var(--bone);line-height:1.6}
/* ---------- voorbereiding ---------- */
.voorb{padding:clamp(56px,8vw,110px) 0;border-bottom:1px solid var(--line-2);background:var(--ink-2)}
.voorb-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:4px;overflow:hidden}
.voorb-kaart{background:var(--ink);padding:24px 22px 26px;display:flex;flex-direction:column;gap:9px;transition:background .2s ease}
.voorb-kaart:hover{background:var(--ink-3)}
.voorb-nr{font-family:Archivo,sans-serif;font-weight:800;font-size:.82rem;letter-spacing:.14em;color:var(--amber);
  font-variant-numeric:tabular-nums}
.voorb-kaart h3{font-size:1.04rem;line-height:1.28;color:var(--bone)}
.voorb-kaart p{font-size:.92rem;color:#B2ACA3;line-height:1.6;margin:0}

.gast{margin-top:clamp(34px,5vw,60px);padding-top:clamp(28px,4vw,44px);border-top:1px solid var(--line)}
.gast-groot{font-family:Archivo,sans-serif;font-weight:800;font-stretch:106%;letter-spacing:-.03em;line-height:1.08;
  font-size:clamp(1.5rem,3.8vw,2.8rem);color:var(--bone);max-width:22ch;text-wrap:balance}
.gast-groot em{font-style:normal;color:var(--amber)}
.gast-onder{margin-top:18px;max-width:60ch;font-size:1.06rem;color:#C6C0B6;line-height:1.62}
/* ---------- de rekensom ---------- */
.inhoud .som{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:4px;overflow:hidden;margin:1.9em 0}
.inhoud .som > div{background:var(--ink-2);padding:20px 22px;display:flex;flex-direction:column;gap:5px}
.inhoud .som .lab{font-family:Archivo,sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--grey)}
.inhoud .som .bed{font-family:Archivo,sans-serif;font-weight:800;font-stretch:108%;letter-spacing:-.035em;line-height:1;
  font-size:clamp(1.6rem,3.4vw,2.4rem);font-variant-numeric:tabular-nums}
.inhoud .som .toe{font-size:.88rem;color:#B2ACA3;line-height:1.5}
.inhoud .som .winst .bed{color:var(--bone)}
.inhoud .som .risico{background:var(--ink-3)}
.inhoud .som .risico .bed{color:var(--amber)}
.inhoud .som .risico .lab{color:var(--amber)}

.inhoud .knal{font-family:Archivo,sans-serif;font-weight:800;font-stretch:106%;letter-spacing:-.03em;line-height:1.1;
  font-size:clamp(1.4rem,3.4vw,2.3rem);color:var(--bone);max-width:24ch;margin:1.6em 0 .6em;text-wrap:balance}
.inhoud .knal em{font-style:normal;color:var(--amber)}
/* ---------- alles wat we doen ---------- */
.alles{padding:clamp(50px,7vw,96px) 0;background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.alles-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:4px;overflow:hidden}
.alles-i{background:var(--ink);padding:15px 17px;display:flex;align-items:center;gap:11px;font-size:.95rem;
  color:#C6C0B6;transition:background .18s ease,color .18s ease;text-decoration:none}
.alles-i:hover{background:var(--ink-3);color:var(--bone)}
.alles-i::before{content:"";width:7px;height:7px;border-radius:50%;border:2px solid var(--amber);flex:none}
.alles-na{margin-top:22px;max-width:64ch;font-size:.97rem;color:var(--grey);line-height:1.6}
.alles-na b{color:var(--bone);font-weight:600}
/* ---------- offertehulp ---------- */
.cfg-sectie{padding:clamp(34px,4.5vw,64px) 0 clamp(50px,7vw,90px)}
.cfg-g{display:grid;grid-template-columns:minmax(320px,1fr) minmax(330px,440px);gap:clamp(26px,3.5vw,56px);align-items:start}
@media(max-width:960px){.cfg-g{grid-template-columns:1fr}}

.cfg-vragen{display:flex;flex-direction:column;gap:clamp(28px,3.5vw,48px)}
.cfg-stap{position:relative;padding-left:clamp(0px,3vw,52px)}
.cfg-nr{position:absolute;left:0;top:4px;font-family:Archivo,sans-serif;font-weight:800;font-size:.8rem;
  letter-spacing:.14em;color:var(--amber);font-variant-numeric:tabular-nums}
@media(max-width:760px){.cfg-stap{padding-left:0}.cfg-nr{position:static;display:block;margin-bottom:6px}}
.cfg-stap h2{font-size:clamp(1.25rem,2.4vw,1.75rem);margin-bottom:14px}
.cfg-hint{font-size:.9rem;color:var(--grey);margin-top:12px;line-height:1.55;max-width:56ch}
.cfg-hint2{font-size:.74rem;color:var(--grey-2);letter-spacing:.05em;text-transform:uppercase;font-weight:600}

.cfg-keuzes{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:10px}
.cfg-keuzes.vorm{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.cfg-kaart{display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;cursor:pointer;
  background:var(--ink-2);border:1px solid var(--line);border-radius:4px;padding:14px 15px;color:inherit;
  font-family:inherit;transition:border-color .18s ease,background .18s ease,transform .18s cubic-bezier(.2,.7,.3,1)}
.cfg-kaart:hover{border-color:rgba(237,163,27,.55);transform:translateY(-2px)}
.cfg-kaart.aan{border-color:var(--amber);background:var(--ink-3);box-shadow:inset 0 0 0 1px var(--amber)}
.cfg-kaart svg{width:100%;height:38px;margin-bottom:6px}
.cfg-kaart svg rect{fill:var(--grey-2);transition:fill .2s ease}
.cfg-kaart.aan svg rect{fill:var(--amber)}
.cfg-kaart b{font-family:Archivo,sans-serif;font-weight:700;font-size:.95rem;letter-spacing:-.015em}
.cfg-kaart i{font-style:normal;font-size:.82rem;color:var(--grey)}
.cfg-kaart.smal svg{display:none}

.cfg-meterrij{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.cfg-meter{font-family:Archivo,sans-serif;font-weight:800;font-stretch:108%;font-size:1.55rem;letter-spacing:-.03em}
.cfg-meter span{color:var(--amber);font-variant-numeric:tabular-nums}
.cfg-schaal{display:flex;justify-content:space-between;font-size:.72rem;color:var(--grey-2);font-variant-numeric:tabular-nums;margin-top:6px}
/* Zelfde verhaal als bij #rk-range hierboven: de vulling op het element zelf,
   niet in het interne spoor, anders blijft hij in Safari grijs. */
#cfg-meters{-webkit-appearance:none;appearance:none;width:100%;height:34px;cursor:grab;margin:0;
  background:linear-gradient(90deg,var(--amber) var(--vul,22%),rgba(243,241,236,.14) var(--vul,22%))
             no-repeat center / 100% 6px;
  border-radius:4px}
#cfg-meters:active{cursor:grabbing}
#cfg-meters::-webkit-slider-runnable-track{height:6px;border-radius:4px;background:transparent}
#cfg-meters::-moz-range-track{height:6px;border-radius:4px;background:transparent}
#cfg-meters::-moz-range-progress{height:6px;border-radius:4px;background:var(--amber)}
#cfg-meters::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--bone);
  border:3px solid var(--amber);margin-top:-10px;box-shadow:0 3px 12px rgba(0,0,0,.5)}
#cfg-meters::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--bone);border:3px solid var(--amber)}

.cfg-teller{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--ink-2)}
.cfg-teller button{width:44px;height:44px;background:none;border:0;color:var(--bone);font-size:1.3rem;cursor:pointer;
  font-family:Archivo,sans-serif;transition:background .16s ease}
.cfg-teller button:hover{background:var(--amber);color:#1A1200}
.cfg-teller span{min-width:52px;text-align:center;font-family:Archivo,sans-serif;font-weight:800;font-size:1.25rem;
  font-variant-numeric:tabular-nums}
.cfg-teller.klein button{width:38px;height:38px}
.cfg-teller-rij{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px;padding:13px 15px;
  border:1px solid var(--line);border-radius:4px;background:var(--ink-2);flex-wrap:wrap}
.cfg-teller-rij b{display:block;font-family:Archivo,sans-serif;font-weight:700;font-size:.95rem}
.cfg-teller-rij i{font-style:normal;font-size:.82rem;color:var(--grey)}

.cfg-vinkjes{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:10px}
.cfg-vinkjes button{display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;cursor:pointer;
  background:var(--ink-2);border:1px solid var(--line);border-radius:4px;padding:13px 15px 13px 40px;color:inherit;
  font-family:inherit;position:relative;transition:border-color .18s ease,background .18s ease}
.cfg-vinkjes button::before{content:"";position:absolute;left:14px;top:15px;width:15px;height:15px;border-radius:3px;
  border:2px solid var(--grey-2);transition:all .18s ease}
.cfg-vinkjes button.aan{border-color:var(--amber);background:var(--ink-3)}
.cfg-vinkjes button.aan::before{background:var(--amber);border-color:var(--amber);
  box-shadow:inset 0 0 0 2px var(--ink-3)}
.cfg-vinkjes b{font-family:Archivo,sans-serif;font-weight:700;font-size:.94rem}
.cfg-vinkjes i{font-style:normal;font-size:.81rem;color:var(--grey);line-height:1.4}

/* paneel */
.cfg-paneel{position:relative}
.cfg-plakker{position:sticky;top:78px;background:var(--ink-2);border:1px solid var(--line);border-radius:5px;
  padding:clamp(16px,2vw,24px);display:flex;flex-direction:column;gap:16px;box-shadow:0 30px 70px -44px rgba(0,0,0,.95)}
.cfg-tekening{background:var(--ink);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.cfg-tekening svg{width:100%;height:auto;display:block}
.cfg-ruimte{fill:rgba(243,241,236,.03);stroke:rgba(243,241,236,.16);stroke-width:1.5}
.cfg-kast{fill:var(--amber);opacity:.85;rx:1}
@media(prefers-reduced-motion:no-preference){.cfg-kast{animation:kastIn .34s cubic-bezier(.2,1.5,.4,1) both;animation-delay:var(--v,0ms)}}
@keyframes kastIn{from{opacity:0;transform:scale(.6)}to{opacity:.85;transform:none}}
.cfg-kast{transform-box:fill-box;transform-origin:center}
.cfg-eiland{fill:#F3F1EC;opacity:.72}
.cfg-maat{stroke:var(--grey-2);stroke-width:1}
.cfg-maattekst{fill:var(--amber);font-family:Archivo,sans-serif;font-size:15px;font-weight:700}
.cfg-tel{fill:var(--grey-2);font-family:Archivo,sans-serif;font-size:12px;font-weight:600;letter-spacing:.06em}

.cfg-uitkomst{display:grid;grid-template-columns:1.4fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:4px;overflow:hidden}
.cfg-cel{background:var(--ink);padding:15px 16px;display:flex;flex-direction:column;gap:4px}
.cfg-lab{font-family:Archivo,sans-serif;font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-2)}
.cfg-bedrag{font-family:Archivo,sans-serif;font-weight:800;font-stretch:108%;letter-spacing:-.035em;line-height:1;
  font-size:clamp(1.6rem,3vw,2.1rem);color:var(--amber);font-variant-numeric:tabular-nums;
  transition:transform .18s cubic-bezier(.3,1.4,.5,1)}
.cfg-bedrag.tik{transform:scale(1.05)}
.cfg-bedrag.klein{font-size:1.75rem}
.cfg-sub{font-size:.79rem;color:var(--grey)}
.cfg-regels{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:4px;overflow:hidden}
.cfg-regels li{background:var(--ink);padding:9px 14px;display:flex;justify-content:space-between;gap:12px;font-size:.87rem;color:#C6C0B6}
.cfg-regels b{color:var(--bone);font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.cfg-verder{justify-content:center}
.cfg-klein{font-size:.78rem;color:var(--grey-2);line-height:1.45}

.cfg-afronden{padding:clamp(50px,7vw,96px) 0;background:var(--ink-2);border-top:1px solid var(--line)}
.cfg-binnenkort{max-width:60ch;font-size:1.02rem;color:#C6C0B6}
.cfg-binnenkort a{color:var(--amber)}
/* ---------- offertehulp, tweede versie ---------- */
.cfg-blok{display:flex;flex-direction:column;gap:clamp(24px,3vw,36px)}
.cfg-v{display:flex;flex-direction:column;gap:10px}
.cfg-v h3{font-family:Archivo,sans-serif;font-weight:700;font-size:clamp(1.05rem,1.9vw,1.3rem);letter-spacing:-.018em;line-height:1.28}
.cfg-groep{margin-top:clamp(30px,4vw,50px);padding-top:clamp(22px,3vw,34px);border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:clamp(20px,2.6vw,30px)}
.cfg-groep h2{font-family:Archivo,sans-serif;font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.cfg-eenheid{font-size:.85rem;color:var(--grey);padding:0 12px 0 4px;font-family:"Source Sans 3",sans-serif}

.cfg-meer{margin-top:clamp(26px,3.4vw,40px);padding-top:22px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:9px}
.cfg-meerknop{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;background:var(--ink-2);
  border:1px solid var(--line);border-radius:4px;padding:12px 18px;cursor:pointer;color:var(--bone);
  font-family:Archivo,sans-serif;font-weight:700;font-size:.94rem;transition:border-color .18s ease,background .18s ease}
.cfg-meerknop:hover{border-color:var(--amber);background:var(--ink-3)}
.cfg-meerknop svg{width:12px;height:12px;transition:transform .22s ease}
.cfg-meerknop[aria-expanded="true"] svg{transform:rotate(180deg)}

.cfg-regels .cfg-leeg{color:var(--grey-2);font-style:italic}
.cfg-tips{display:flex;flex-direction:column;gap:7px}
.cfg-tips h4{font-family:Archivo,sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--amber);margin:2px 0 2px}
.cfg-tip{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;cursor:pointer;width:100%;
  background:var(--ink-3);border:1px dashed var(--line);border-radius:4px;padding:10px 13px;color:#C6C0B6;
  font-family:"Source Sans 3",sans-serif;font-size:.88rem;transition:border-color .18s ease,color .18s ease}
.cfg-tip:hover{border-color:var(--amber);border-style:solid;color:var(--bone)}
.cfg-tip i{font-style:normal;font-size:.76rem;color:var(--grey-2)}
.cfg-regels li.vast{background:var(--ink-3)}
.cfg-regels li.vast i{font-style:normal;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--amber);margin-left:6px}

/* ---------- formulieren uit Maatwerk DESK ---------- */
.mw-formulier{--mwf-kleur:var(--amber);--mwf-inkt:var(--bone);--mwf-inkt-zacht:var(--grey);
  --mwf-vlak:var(--ink);--mwf-lijn:var(--line);--mwf-rond:4px}
.cfg-formulier{max-width:640px;background:var(--ink-2);border:1px solid var(--line);border-radius:5px;
  padding:clamp(20px,3vw,30px)}
.bel-sectie{padding:clamp(40px,6vw,86px) 0}
.bel-g{display:grid;grid-template-columns:minmax(300px,1.05fr) minmax(260px,.85fr);gap:clamp(26px,4vw,60px);align-items:start}
@media(max-width:880px){.bel-g{grid-template-columns:1fr}}
.bel-form{background:var(--ink-2);border:1px solid var(--line);border-radius:5px;padding:clamp(20px,3vw,32px)}
.bel-naast h3{font-size:1.25rem;margin-bottom:14px}
.bel-of{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:11px;align-items:flex-start}
.bel-of span{font-size:.9rem;color:var(--grey)}
/* ---------- vertrouwensbalk ---------- */
.vertrouwen{background:var(--ink-2);border-bottom:1px solid var(--line-2);font-size:.83rem}
.vertrouwen-in{display:flex;flex-wrap:wrap;gap:6px 26px;align-items:center;padding-block:9px;color:var(--grey)}
.vertrouwen b{color:var(--bone);font-family:Archivo,sans-serif;font-weight:700}
.vertrouwen span{display:inline-flex;align-items:center;gap:6px;position:relative;padding-left:14px}
.vertrouwen span::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;
  border:1.5px solid var(--amber)}
.vt-tel{margin-left:auto;color:var(--bone)!important;text-decoration:none;font-family:Archivo,sans-serif;font-weight:700;
  font-variant-numeric:tabular-nums}
.vt-tel:hover{color:var(--amber)!important}
@media(max-width:900px){.vertrouwen span:nth-child(n+4){display:none}.vt-tel{margin-left:auto}}
@media(max-width:620px){
  .vertrouwen span:nth-child(n+2){display:none}
  .vertrouwen-in{padding-block:7px;flex-wrap:nowrap}
  .vt-tel{font-size:.92rem}
}

/* ---------- twee routes in de hero ---------- */
.routes-hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:12px;max-width:720px}
.route-kaart{display:flex;flex-direction:column;gap:3px;padding:18px 20px;text-decoration:none;border-radius:4px;
  background:rgba(16,15,14,.62);border:1px solid var(--line);backdrop-filter:blur(6px);
  transition:border-color .2s ease,transform .2s cubic-bezier(.2,.7,.3,1),background .2s ease}
.route-kaart:hover{border-color:var(--amber);transform:translateY(-2px);background:rgba(28,26,24,.82)}
.rk-lbl{font-family:Archivo,sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--amber)}
.route-kaart b{font-family:Archivo,sans-serif;font-weight:800;font-stretch:106%;font-size:1.24rem;letter-spacing:-.02em;
  line-height:1.15;color:var(--bone)}
.route-kaart i{font-style:normal;font-size:.9rem;color:#C6C0B6;margin-top:4px;line-height:1.45}
/* ---------- mobiel: uitkomstblokken onder elkaar ---------- */
/* Deze twee bleven ook op een telefoon in twee kolommen staan, waardoor
   de tekst in een halve schermbreedte gepropt werd. */
@media(max-width:640px){
  .rk-uitkomst,
  .cfg-uitkomst{grid-template-columns:1fr}
  .inhoud table{font-size:.94rem}
  .inhoud .tabelwrap{-webkit-overflow-scrolling:touch}
}
/* ---------- mobiel: hero mag niet breder worden dan het scherm ----------
   .hero is een flexrij, dus .hero-in kreeg de max-content-breedte van de
   twee routekaarten (258+258+12=528px) en werd door overflow:hidden
   afgeknipt. Op een telefoon dus: gewoon de schermbreedte volgen. */
@media(max-width:760px){
  .hero-in{width:100%;min-width:0}
  .routes-hero{grid-template-columns:1fr;max-width:100%}
  .route-kaart b{font-size:1.14rem}
}

/* Brede tabellen in lopende tekst scrollen binnen hun eigen kader,
   ook als ze niet in een .tabelwrap staan. */
.inhoud table{display:block;width:auto;max-width:100%;overflow-x:auto}
/* Menu begint onder de kop; de exacte hoogte zet het script erin. */
.mobielmenu{top:var(--kop-h,100px)}
/* ==================== artikelpagina's ==================== */
.art-hero{position:relative;overflow:hidden;background:var(--ink-2)}
.art-hero.heeft-beeld{min-height:min(62vh,540px);display:flex;align-items:flex-end}
.art-hero-img{position:absolute;inset:0}
.art-hero-img img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.art-hero-veil{position:absolute;inset:0;background:
  linear-gradient(96deg,rgba(16,15,14,.97) 0%,rgba(16,15,14,.88) 40%,rgba(16,15,14,.42) 74%,rgba(16,15,14,.22) 100%),
  linear-gradient(0deg,rgba(16,15,14,.94) 0%,transparent 52%)}
.art-hero-in{position:relative;padding-block:clamp(64px,10vw,120px) clamp(30px,4vw,48px);width:100%;min-width:0}
.art-hero-in h1{font-family:Archivo,sans-serif;font-weight:800;font-stretch:106%;letter-spacing:-.032em;
  font-size:clamp(2.1rem,5.4vw,3.9rem);line-height:1.03;margin:12px 0 0;max-width:19ch;color:var(--bone)}
.art-hero-in .lede{margin-top:16px;max-width:56ch}
.art-hero-meta{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;margin-top:22px;font-size:.9rem;color:var(--grey)}
.art-hero-meta b{color:var(--bone);font-weight:600}
.art-hero-meta a{color:var(--amber);text-decoration:none;font-family:Archivo,sans-serif;font-weight:700;
  font-variant-numeric:tabular-nums}

.art-body{padding:clamp(40px,5vw,76px) 0 clamp(30px,4vw,50px)}
.art-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(272px,330px);gap:clamp(30px,4vw,68px);align-items:start}
@media(max-width:980px){.art-g{grid-template-columns:1fr}}
.art-g .inhoud{max-width:68ch}

/* fotoband in de tekst */
.art-band{margin:2.6em 0;position:relative}
.art-band img{width:100%;height:auto;display:block;border-radius:4px}
.art-band figcaption{display:flex;align-items:center;gap:10px;margin-top:11px;font-size:.86rem;color:var(--grey-2, #8A847B)}
.art-band .lijn{display:block;width:26px;height:1px;background:var(--amber);flex:none}

/* een woord van de monteur */
.uit-werkplaats{display:grid;grid-template-columns:118px 1fr;gap:20px;align-items:center;margin:2.8em 0;
  padding:20px;background:var(--ink-2);border:1px solid var(--line);border-left:2px solid var(--amber);border-radius:4px}
.uit-werkplaats img{width:118px;height:150px;object-fit:cover;border-radius:3px;display:block}
.uit-werkplaats .lbl{display:block;margin-bottom:6px}
.uit-werkplaats p{margin:0 0 8px;color:var(--bone);font-size:1.02rem;line-height:1.55}
.uit-werkplaats b{font-family:Archivo,sans-serif;font-size:.86rem;font-weight:700;color:var(--grey)}
@media(max-width:560px){
  .uit-werkplaats{grid-template-columns:1fr;gap:14px}
  .uit-werkplaats img{width:100%;height:190px}
}

/* zijkolom */
.art-zij{display:flex;flex-direction:column;gap:14px;position:sticky;top:96px}
@media(max-width:980px){.art-zij{position:static}}
.zij-kaart{background:var(--ink-2);border:1px solid var(--line);border-radius:4px;padding:20px}
.zij-kaart .lbl{display:block;margin-bottom:8px}
.zij-kaart p{margin:0 0 14px;font-size:.95rem;color:var(--grey);line-height:1.55}
.zij-mens{padding:0;overflow:hidden}
.zij-mens > img{width:100%;height:190px;object-fit:cover;object-position:50% 32%;display:block}
.zij-mens-in{padding:18px 20px 20px}
.zij-tel{display:block;font-family:Archivo,sans-serif;font-weight:800;font-size:1.34rem;color:var(--bone);
  text-decoration:none;letter-spacing:-.02em;margin-bottom:12px;font-variant-numeric:tabular-nums}
.zij-tel:hover{color:var(--amber)}
.zij-kaart .btn{width:100%;justify-content:center}
.zij-links ul{list-style:none;margin:0;padding:0}
.zij-links li{border-top:1px solid var(--line-2)}
.zij-links li:first-child{border-top:0}
.zij-links a{display:block;padding:11px 0;text-decoration:none;color:var(--bone);font-size:.95rem;
  font-family:Archivo,sans-serif;font-weight:600;transition:color .18s ease,padding-left .18s ease}
.zij-links a:hover{color:var(--amber);padding-left:5px}

/* fotostrip onderaan */
.fotostrip{padding:clamp(36px,5vw,72px) 0;border-top:1px solid var(--line)}
.fs-kop{margin-bottom:26px}
.fs-kop h2{font-family:Archivo,sans-serif;font-weight:800;font-stretch:106%;letter-spacing:-.028em;
  font-size:clamp(1.5rem,3vw,2.2rem);margin:10px 0 0;color:var(--bone)}
.fs-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:16px}
.fs-g figure{margin:0}
.fs-g img{width:100%;height:230px;object-fit:cover;border-radius:4px;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.fs-g figure:hover img{transform:scale(1.03)}
.fs-g figcaption{margin-top:9px;font-size:.86rem;color:var(--grey)}
/* Rasterkolommen mogen krimpen; anders duwt een brede tabel de hele
   pagina breder dan het scherm. */
.art-g > *{min-width:0}
.inhoud{min-width:0}
.inhoud table{display:block;width:auto;max-width:100%;overflow-x:auto}
/* ---------- telefoon: kop en balk moeten écht passen ----------
   "Keukenmontage" is één lang woord dat niet kan afbreken. Bij de oude
   ondergrens van 2,9rem was dat 405px breed op een scherm van 393. */
@media(max-width:560px){
  h1{font-size:clamp(2.3rem,10.4vw,3.2rem);font-stretch:102%;letter-spacing:-.03em}
  .woordkop{overflow-wrap:break-word}
  .vertrouwen-in{gap:0 12px;min-width:0}
  .vertrouwen span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .vt-tel{flex:none;font-size:.9rem}
}
/* ---------- mobiel menu: alles in beeld, niets achter de balk ---------- */
.mobielmenu{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
.mob-in{gap:0}
.mob-link.groot{padding:15px 0;font-size:1.42rem;line-height:1.15}
.mob-link.groot i{margin-top:1px}
.mob-raster{display:grid;grid-template-columns:1fr 1fr;column-gap:18px;margin-top:4px}
.mob-raster .mob-link{padding:13px 0;font-size:1.02rem;border-bottom:1px solid var(--line-2)}
.mob-onder{display:flex;flex-direction:column;gap:9px;margin-top:20px}
.mob-onder .btn{width:100%;justify-content:center}
@media(max-height:700px){
  .mob-link.groot{padding:11px 0;font-size:1.24rem}
  .mob-raster .mob-link{padding:10px 0;font-size:.96rem}
}
/* ---------- credit-regel onderin (22 sep, Marc) ----------
   Zie gedeeld/credits/CREDIT-REGEL.md op Z:. Klein en rustig, in de kleur
   van de voetbalk; op mobiel mag hij over twee regels vallen. */
.credit{font-size:.8125rem;opacity:.75;display:flex;flex-wrap:wrap;gap:.25rem .5rem;align-items:center;
  margin:14px 0 0;color:var(--grey-2)}
.credit > span{display:inline-flex;align-items:center;gap:.35rem}
.credit a{display:inline-flex;align-items:center;gap:.35rem;color:inherit;text-decoration:none}
.credit a:hover{color:var(--bone);text-decoration:underline}
.credit img{border-radius:3px;display:block;width:16px;height:16px}
/* ---------- mobiele kop ----------
   Zonder het menu is er niets meer dat naar rechts duwt, dus plakte de
   hamburger tegen het logo. Het nummer staat al in de vertrouwensbalk,
   dus dat hoeft er niet nog een keer naast. */
@media(max-width:1060px){
  .hamburger{margin-left:auto}
  .nav-tel{display:none}
  .nav-in{gap:12px}
}
/* ---------- keukencheck ---------- */
.kc-blad{padding:clamp(30px,4vw,60px) 0}
.kc-raster{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,3vw,48px);align-items:start}
@media(max-width:900px){
  .kc-raster{grid-template-columns:1fr}
  .kc-rechts{order:-1;position:static}
}
.kc-rechts{position:sticky;top:96px}
/* ---------- feitblok met een prijsBEREIK ----------
   .feit is een flexrij en .g staat op nowrap. Bij één bedrag (€ 170) past dat,
   bij een bereik (€ 900 – € 1.400) duwt het de rij breder dan het scherm.
   Items mogen nu krimpen en de rij mag afbreken. */
.feit{flex-wrap:wrap}
.feit .g{max-width:100%}
.feit .t{min-width:0;flex:1 1 14rem}
@media(max-width:620px){
  .feit{gap:6px 14px;padding:16px 18px}
  .feit .g{font-size:1.55rem;white-space:normal}
}
/* ---------------------------------------------------------------
   Kopbalk: nooit meer afbreken
   "Ons werk" en "Over ons" braken op een laptop over twee regels
   omdat er te veel items in de balk stonden. Die twee staan nu in
   de vertrouwensbalk erboven; hier de vangrail zodat het niet
   opnieuw kan gebeuren als er ooit iets bij komt.
   --------------------------------------------------------------- */
.menu > li > a,
.mega-knop { white-space: nowrap; }
.menu { flex-wrap: nowrap; }

/* Over ons en Contact rechts in de vertrouwensbalk, bij het nummer */
.vertrouwen-in { flex-wrap: wrap; }
.vt-rechts { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.vt-rechts a { color: inherit; text-decoration: none; }
.vt-rechts a:hover { color: var(--amber); }
.vt-rechts .vt-tel { margin-left: 0; }
@media (max-width: 900px) { .vt-rechts a:not(.vt-tel) { display: none; } }

/* ---------------------------------------------------------------
   Keukencheck: de afronding onder de tool
   --------------------------------------------------------------- */
.kc-slotblok { padding-block: clamp(48px, 7vw, 96px); background: var(--inkt-1, #131211); }
.kc-slotraster { display: grid; grid-template-columns: 1fr minmax(0, 480px); gap: clamp(28px, 4vw, 64px); align-items: start; }
.kc-slottekst > .lbl { display: block; margin-bottom: 10px; }
.kc-slottekst h2 { margin: 0 0 14px; max-width: 18ch; text-wrap: balance; }
.kc-slottekst p { max-width: 58ch; }
.kc-belofte { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.kc-belofte li { position: relative; padding-left: 26px; max-width: 54ch; }
.kc-belofte li::before {
  content: ''; position: absolute; left: 0; top: .55em; width: 9px; height: 9px;
  border-radius: 50%; border: 2px solid var(--amber);
}
.kc-slotnaam { margin-top: 24px; font-size: .92rem; opacity: .78; }
.kc-slotnaam a { color: inherit; }
.kc-slotform { position: sticky; top: 96px; min-width: 0; }
@media (max-width: 900px) {
  .kc-slotraster { grid-template-columns: 1fr; }
  .kc-slotform { position: static; }
}

/* De rechterkant van de vertrouwensbalk is navigatie, geen belofte:
   dus geen bolletje ervoor, wel een fijne scheiding ertussen. */
.vertrouwen .vt-rechts { padding-left: 0; gap: 0; }
.vertrouwen .vt-rechts::before { display: none; }
.vt-rechts a { padding: 0 14px; border-left: 1px solid var(--line-2); line-height: 1.1; }
.vt-rechts a:first-child { border-left: 0; padding-left: 0; }
.vt-rechts .vt-tel { padding-right: 0; font-weight: 700; color: var(--bone); }

/* Alinea's in het slotblok moeten lucht tussen zich hebben; zonder marge
   lopen twee gedachten in elkaar over en leest het als een muur tekst. */
.kc-slottekst p + p { margin-top: 1.1em; }
.kc-slottekst h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.06; max-width: 15ch; }

/* ---------------------------------------------------------------
   Footer: de gratis hulpmiddelen en de plaatsen zonder pagina
   --------------------------------------------------------------- */
.ft-hulp ul li a { display: block; }
.ft-hulp ul li a i {
  display: block; font-style: normal; font-size: .82rem;
  opacity: .62; margin-top: 1px;
}
.ft-hulp ul li + li { margin-top: 9px; }

/* Een plaats zonder eigen pagina staat er wel, maar is geen link.
   Zelfde ritme als de links ernaast, alleen rustiger. */
.ft-plaatsen span { opacity: .55; cursor: default; }

/* ---------------------------------------------------------------
   Offertehulp: de suggesties krijgen twee even grote knoppen
   Een tip met een percentage erachter en maar één knop is een duwtje.
   Met een tegenknop is het een vraag. Beide knoppen even zwaar.
   --------------------------------------------------------------- */
.cfg-tip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 10px;
}
.cfg-tip + .cfg-tip { margin-top: 8px; }
.cfg-tipvraag { flex: 1 1 14rem; min-width: 0; }
.cfg-tipvraag i {
  display: block; font-style: normal; font-size: .78rem;
  color: var(--grey); margin-top: 2px;
}
.cfg-tipknoppen { display: flex; gap: 8px; flex-shrink: 0; }
.cfg-tipja, .cfg-tipnee {
  font: inherit; font-size: .86rem; padding: 7px 13px; border-radius: 8px;
  border: 1px solid var(--line-2); background: none; color: inherit; cursor: pointer;
}
.cfg-tipja { border-color: var(--amber); color: var(--amber); }
.cfg-tipja:hover { background: var(--amber); color: #17140f; }
.cfg-tipnee:hover { border-color: var(--bone); }
@media (max-width: 460px) {
  .cfg-tipknoppen { width: 100%; }
  .cfg-tipja, .cfg-tipnee { flex: 1; }
}

/* ---------------------------------------------------------------
   Offertehulp: het antwoordscherm met de drie deuren
   Staat tussen de vragen en het belblok. Hiervoor ging je van de
   laatste vraag rechtstreeks naar een formulier, zonder dat de tool
   ooit zei: dit is het.
   --------------------------------------------------------------- */
.cfg-antwoord { padding-block: clamp(44px, 6vw, 88px); background: var(--ink-2, #131211); }
.cfg-antwoordraster {
  display: grid; grid-template-columns: 1fr minmax(0, 460px);
  gap: clamp(26px, 4vw, 60px); align-items: start;
}
.cfg-antwoordtekst > .lbl { display: block; margin-bottom: 10px; }
.cfg-antwoordtekst h2 {
  margin: 0 0 14px; max-width: 15ch; text-wrap: balance;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.06;
}
.cfg-antwoordtekst p { max-width: 58ch; }
.cfg-antwoordtekst p + p { margin-top: 1.1em; }
.cfg-antwoordtekst .kc-belofte { margin-top: 22px; }
.cfg-antwoordform { position: sticky; top: 96px; min-width: 0; }
@media (max-width: 900px) {
  .cfg-antwoordraster { grid-template-columns: 1fr; }
  .cfg-antwoordform { position: static; }
}

/* ---------------------------------------------------------------
   Buurplaatsen onder een werkgebiedpagina
   Elke plaatspagina was een eiland. Wie op Huizen stond kwam nergens
   bij Bussum of Hilversum, terwijl mensen daar vaak nét naast wonen.
   --------------------------------------------------------------- */
.buurplaatsen {
  margin-top: clamp(36px, 5vw, 64px);
  padding-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--line-2);
}
.buurplaatsen h2 { margin: 0 0 10px; }
.buurplaatsen p { max-width: 58ch; }
.buur-lijst { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 14px; }
.buur-lijst a {
  display: inline-block; padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--line-2); text-decoration: none; color: inherit;
  font-size: .94rem; white-space: nowrap;
}
.buur-lijst a:hover { border-color: var(--amber); color: var(--amber); }

/* ══════════════════════════════════════════════════════════════════
   OFFERTEHULP ALS WIZARD                       13 september 2026

   Een vraag per scherm, een balk die zegt hoe ver je bent, altijd terug
   kunnen, en op een telefoon het bedrag in een balk onderaan. Dat laatste
   was het grootste gat: het paneel met de richtprijs staat rechts, en op
   een smal scherm valt dat onder de vragen. Wie op een telefoon zat koos
   dus in het donker, en 47 procent van het verkeer is mobiel.
   ══════════════════════════════════════════════════════════════════ */

.cfg-voortgang { margin-bottom: 18px; }
.cfg-vkop {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  align-items: baseline; justify-content: space-between;
}
.cfg-vkop b {
  font-family: Archivo, sans-serif; font-size: .72rem; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase; color: var(--amber);
}
.cfg-vkop span { font-size: .92rem; color: var(--grey); font-variant-numeric: tabular-nums; }
.cfg-vbalk {
  margin-top: 9px; height: 5px; border-radius: 3px;
  background: var(--line-2); overflow: hidden;
}
.cfg-vbalk i {
  display: block; height: 100%; border-radius: 3px; background: var(--amber);
  transition: width .3s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce) { .cfg-vbalk i { transition: none; } }

.cfg-stap { min-width: 0; }
@media (prefers-reduced-motion: no-preference) {
  .cfg-in { animation: cfg-schuif .26s cubic-bezier(.22,.61,.36,1) both; }
  .cfg-tik { animation: cfg-tik .18s cubic-bezier(.22,.61,.36,1); }
}
@keyframes cfg-schuif { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
@keyframes cfg-tik { 0% { transform: scale(1); } 42% { transform: scale(.965); } 100% { transform: scale(1); } }

.cfg-geld {
  margin-top: 12px; padding: 10px 12px;
  background: var(--ink-2); border-left: 2px solid var(--amber);
  border-radius: 0 4px 4px 0;
  font-size: .92rem; color: var(--bone-2);
}

.cfg-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; align-items: center; }
.cfg-nav button {
  font: inherit; font-family: Archivo, sans-serif; font-weight: 700;
  min-height: 48px; padding: 0 18px; border-radius: 4px; cursor: pointer;
  transition: background .16s, border-color .16s, color .16s, transform .09s;
}
.cfg-nav button:active { transform: translateY(1px); }
.cfg-nav-terug { background: transparent; color: var(--bone-2); border: 1px solid var(--line); }
.cfg-nav-terug:hover:not([disabled]) { border-color: var(--bone-2); color: var(--bone); }
.cfg-nav-terug[disabled] { opacity: .35; cursor: default; }
.cfg-nav-weetniet, .cfg-nav-stop {
  background: transparent; color: var(--grey);
  border: 1px dashed var(--line); font-weight: 600;
}
.cfg-nav-weetniet:hover, .cfg-nav-stop:hover { color: var(--bone); border-color: var(--bone-2); }
.cfg-nav-verder {
  margin-left: auto; background: var(--amber); color: #17140F; border: 1px solid var(--amber);
}
.cfg-nav-verder:hover { background: var(--amber-d, #C9860C); border-color: var(--amber-d, #C9860C); }

/* ---------------- samenvatting ---------------- */
.cfg-samen { min-width: 0; }
.cfg-samenprijs {
  background: var(--ink-2); border: 1px solid var(--line);
  border-radius: 5px; padding: 16px 18px; margin-bottom: 18px;
}
.cfg-samenprijs .cfg-lab {
  font-family: Archivo, sans-serif; font-size: .68rem; font-weight: 700;
  letter-spacing: .19em; text-transform: uppercase; color: var(--amber);
}
.cfg-samenprijs b {
  display: block; margin-top: 5px;
  font-family: Archivo, sans-serif; font-weight: 800;
  font-size: clamp(1.6rem, 4.6vw, 2.2rem); letter-spacing: -.026em;
  overflow-wrap: anywhere;
}
.cfg-samenbtw { display: block; margin-top: 3px; font-size: .9rem; color: var(--bone-2); }
.cfg-samenwat { display: block; margin-top: 10px; font-size: .92rem; color: var(--grey); }

.cfg-samenlijst { list-style: none; margin: 0; padding: 0; }
.cfg-samenlijst li {
  display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline;
  padding: 9px 0; border-top: 1px solid var(--line-2);
}
.cfg-samenlijst li span { flex: 1 1 170px; color: var(--grey); font-size: .92rem; }
.cfg-samenlijst li b { font-weight: 600; }
.cfg-wijzig {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--amber); font: inherit; font-size: .88rem; text-decoration: underline;
}
.cfg-samenknoppen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.cfg-samenknoppen button {
  font: inherit; font-family: Archivo, sans-serif; font-weight: 700;
  min-height: 48px; padding: 0 18px; border-radius: 4px; cursor: pointer;
  background: transparent; color: var(--bone); border: 1px solid var(--amber);
  transition: background .16s;
}
.cfg-samenknoppen button:hover { background: rgba(237,163,27,.14); }
.cfg-watnu { margin-top: 18px; }
.cfg-watnu h4 { font-size: 1rem; font-weight: 700; margin: 0 0 6px; }
.cfg-watnu ol { margin: 0; padding-left: 20px; color: var(--bone-2); font-size: .95rem; }
.cfg-watnu li { margin: 4px 0; }
.cfg-later { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.cfg-later b { display: block; font-family: Archivo, sans-serif; font-size: .98rem; }
.cfg-later span { display: block; margin: 4px 0 8px; font-size: .9rem; color: var(--grey); }
.cfg-laterlink {
  width: 100%; font: inherit; font-size: .86rem; min-height: 44px;
  background: var(--ink); color: var(--bone-2);
  border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px;
}
.cfg-laterkopie {
  margin-top: 8px; font: inherit; font-family: Archivo, sans-serif; font-weight: 700;
  min-height: 44px; padding: 0 16px; border-radius: 4px; cursor: pointer;
  background: transparent; color: var(--bone); border: 1px solid var(--line);
}
.cfg-laterkopie:hover { border-color: var(--amber); color: var(--amber); }

/* ---------------- de meelopende balk op een telefoon ---------------- */
.cfg-mobielbalk { display: none; }
@media (max-width: 960px) {
  .cfg-mobielbalk {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 10px clamp(16px, 4vw, 26px) calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(16,15,14,.96);
    border-top: 1px solid var(--line);
    box-shadow: 0 -10px 22px -14px rgba(0,0,0,.9);
  }
  .cfg-mb-lab {
    display: block;
    font-family: Archivo, sans-serif; font-size: .62rem; font-weight: 700;
    letter-spacing: .19em; text-transform: uppercase; color: var(--amber);
  }
  .cfg-mb-bedrag {
    display: block; margin-top: 1px;
    font-family: Archivo, sans-serif; font-weight: 800;
    font-size: 1.28rem; letter-spacing: -.022em; color: var(--bone);
  }
  .cfg-mb-onder { display: block; font-size: .78rem; color: var(--grey); }
  /* ruimte onder de pagina, zodat de balk niets afdekt */
  .cfg-sectie { padding-bottom: 108px; }
  .cfg-nav-verder { margin-left: 0; flex: 1 1 100%; justify-content: center; text-align: center; }
}
@media (max-width: 460px) {
  .cfg-nav button { padding: 0 14px; }
}