/* Gedeelde stijl voor de artikelen (/artikelen/). De homepage gebruikt dit bestand niet: die heeft alles inline.
   Zelfde huisstijl: zwarte balk met logo, studio-wit leesvlak, rood uit het logo, Barlow Condensed voor koppen. */
:root{
  --wrap:#f1f0ec; --ink:#121314; --ink-2:#4b4c4f; --line:#d6d3cc; --panel:#ffffff;
  --dark:#111213; --dark-ink:#f3f1ec; --dark-2:#b9b7b2;
  --acc:#c41a32; --acc-btn:#d6203a; --acc-btn-hover:#b8152d; --acc-dark:#ff5a6e;
  --display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Martian Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;overflow-x:clip}
body{background:var(--wrap);color:var(--ink);font:400 17px/1.65 var(--body);-webkit-font-smoothing:antialiased;padding-bottom:72px}
a{color:var(--acc);text-underline-offset:2px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
[hidden]{display:none !important}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:#f3f1ec;color:#111213;padding:10px 14px;font:600 .8rem/1 var(--mono);text-decoration:none}
.skip:focus{top:12px}

/* balk */
.top{background:var(--dark);color:var(--dark-ink)}
.top-in{max-width:1080px;margin:0 auto;padding:16px 20px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.top .logo{display:block;line-height:0}
.top .logo img{display:block;height:18px;width:auto}
.top nav{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:.92rem;margin-left:auto}
.top nav a{color:var(--dark-2);text-decoration:none;padding:6px 0}
.top nav a:hover,.top nav a[aria-current]{color:var(--dark-ink)}
.top :focus-visible{outline-color:var(--dark-ink)}
/* logo: geen gele rand na tikken (iOS focust de link naar #top); met toetsenbord wordt het logo iets doorzichtig */
.top .logo:focus,.top .logo:focus-visible{outline:none}
.top .logo:focus-visible svg{opacity:.7}

/* leesvlak */
.wrap{max-width:760px;margin:0 auto;padding:0 20px}
.crumbs{font:400 .72rem/1.6 var(--mono);letter-spacing:.04em;color:var(--ink-2);margin:28px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:4px}
.crumbs li+li::before{content:"/";margin-right:4px}
.crumbs a{color:var(--ink-2)}
.eyebrow{font:600 .7rem/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin:28px 0 10px}
h1,h2,h3{font-family:var(--display);font-style:italic;text-transform:uppercase;margin:0;text-wrap:balance}
h1{font-weight:800;font-size:clamp(2.5rem,8vw,4.4rem);line-height:.95}
h2{font-weight:800;font-size:clamp(1.7rem,4.6vw,2.3rem);line-height:1;margin:48px 0 14px}
h3{font-weight:700;font-size:1.3rem;line-height:1.1;margin:28px 0 8px}
p{margin:0 0 16px}
ul,ol{margin:0 0 16px;padding-left:22px}
li{margin-bottom:6px}
.meta{font:400 .74rem/1.6 var(--mono);color:var(--ink-2);margin:14px 0 0}
.kort{background:var(--panel);border-left:4px solid var(--acc-btn);padding:18px 20px;margin:28px 0 8px}
.kort h2{font-size:1rem;margin:0 0 6px;font-family:var(--mono);font-style:normal;letter-spacing:.12em;color:var(--acc)}
.kort p{margin:0;font-size:1.06rem}
.tbl{overflow-x:auto;margin:0 0 20px;border:1px solid var(--line);background:var(--panel)}
table{border-collapse:collapse;width:100%;font-size:.94rem;line-height:1.45}
caption{text-align:left;font:600 .7rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);padding:12px 14px 4px}
th,td{text-align:left;vertical-align:top;padding:10px 14px;border-top:1px solid var(--line)}
thead th{font-weight:600;border-top:0}
tbody th{font-weight:600}
.note{font-size:.92rem;color:var(--ink-2)}
.faq{margin-top:8px}
.faq h3{font-family:var(--body);font-style:normal;text-transform:none;font-size:1.05rem;font-weight:600;line-height:1.35;margin:22px 0 6px}
.cta-box{background:var(--dark);color:var(--dark-ink);padding:26px 24px;margin:48px 0 0}
.cta-box h2{margin:0 0 10px;color:var(--dark-ink)}
.cta-box p{color:var(--dark-2)}
.cta-box :focus-visible{outline-color:var(--dark-ink)}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.btn{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border-radius:6px;font-weight:600;text-decoration:none;background:var(--acc-btn);color:#fff}
.btn:hover{background:var(--acc-btn-hover)}
.btn.wa{background:#1f7a4d}
.btn.wa:hover{background:#18643f}
.btn.line{background:transparent;color:var(--dark-ink);border:1px solid #5b5c5f}
.related{margin:40px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.related a{display:block;padding:14px 16px;background:var(--panel);border:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:600}
.related a:hover{border-color:var(--ink)}
.related span{display:block;font-weight:400;font-size:.9rem;color:var(--ink-2)}

/* overzicht */
.cards{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.cards a{display:flex;flex-direction:column;gap:8px;height:100%;padding:20px;background:var(--panel);border:1px solid var(--line);color:var(--ink);text-decoration:none}
.cards a:hover{border-color:var(--ink)}
.cards b{font:800 italic 1.5rem/1 var(--display);text-transform:uppercase}
.cards span{font-size:.95rem;color:var(--ink-2)}
.wide{max-width:1080px}

/* voet */
.foot{max-width:1080px;margin:56px auto 0;padding:24px 20px 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 32px;font-size:.9rem;color:var(--ink-2)}
.foot a{color:inherit}

/* WhatsApp-knop, gelijk aan de homepage */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:40;display:inline-flex;align-items:center;gap:8px;background:#1f7a4d;color:#fff;text-decoration:none;font-weight:700;padding:12px 16px;border-radius:99px;box-shadow:0 6px 24px rgba(0,0,0,.28);min-height:48px}
.wa-float:hover{background:#18643f}
.wa-float:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px #1f7a4d}
@media (max-width:560px){
  body{font-size:16px}
  .wa-float{right:12px;bottom:12px;padding:12px}
  .wa-float span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .top nav{margin-left:0;width:100%}
  .cta-box{padding:22px 18px}
}
@media print{.wa-float,.top nav,.cta-box{display:none}}

/* ===== Losse pagina's: zakelijk, offerte, diensten, over ons, werk (gebouwd met tools/build.py) ===== */
.top .tbtn{min-height:40px;padding:0 16px;font-size:.92rem}
.top nav{margin-left:auto}
.btn{border:0;font:inherit;font-weight:600;cursor:pointer;justify-content:center}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid #8a8b8d}
.btn.ghost:hover{background:rgba(127,127,127,.12)}
.dk .btn.ghost{color:var(--dark-ink);border-color:#77797a}
.pg main{display:block}
.pg h2{margin:0 0 10px}
.pg .eyebrow{margin:0 0 12px}
.dk{background:var(--dark);color:var(--dark-ink)}
.dk h1,.dk h2,.dk h3{color:var(--dark-ink)}
.dk .eyebrow{color:var(--acc-dark)}
.dk a:not(.btn){color:var(--dark-ink)}
.dk :focus-visible{outline-color:var(--dark-ink)}
.hex{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0l28 16v32L28 64 0 48V16zM28 64v33M0 16L-28 0M56 16l28-16' fill='none' stroke='%23000' stroke-opacity='.05' stroke-width='1.2'/%3E%3C/svg%3E") 0 0/56px 97px,linear-gradient(#f4f3ef,#e9e8e3)}
.in{max-width:1080px;margin:0 auto;padding:72px 20px}
.in.tight{padding-block:48px}
.sub{color:var(--ink-2);max-width:60ch;margin:0 0 28px;font-size:1.05rem}
.dk .sub,.dk .lede{color:var(--dark-2)}

/* kop van een pagina */
.ph-in{max-width:1080px;margin:0 auto;padding:40px 20px 64px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:44px;align-items:center}
.ph-in .crumbs{margin:0 0 28px;color:var(--dark-2)}.ph-in .crumbs a{color:var(--dark-2)}
.ph-in h1{font-size:clamp(2.8rem,7vw,5.2rem);line-height:.92}
.ph-in .lede{font-size:1.15rem;margin:18px 0 0;max-width:46ch}
.ph-in .btns{margin-top:26px}
.ph-img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:14px;display:block;background:#1b1d1f}
.ph-in.solo{grid-template-columns:minmax(0,1fr)}

/* tegels, stappen, lijsten */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;list-style:none;margin:0;padding:0}
.tile{background:var(--panel);border:1px solid var(--line);padding:22px;display:flex;flex-direction:column;gap:10px;color:var(--ink);text-decoration:none;min-width:0;margin:0}
.tile h3{margin:0}
.tile p{margin:0;color:var(--ink-2);font-size:.97rem}
.tile .go{margin-top:auto;font:600 .72rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--acc)}
a.tile:hover{border-color:var(--ink)}
.tile img{height:auto;width:calc(100% + 44px);max-width:none;margin:-22px -22px 6px;aspect-ratio:16/9;object-fit:cover;display:block}
.dk .tile{background:#1b1d1f;border-color:#2e3033;color:var(--dark-ink)}
.dk .tile p{color:var(--dark-2)}
.dk .tile .go{color:var(--acc-dark)}
.dk a.tile:hover{border-color:var(--dark-ink)}
.tile.on{outline:2px solid var(--acc-btn);outline-offset:-2px}
.tag{font:600 .66rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.dk .tag{color:var(--acc-dark)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px;counter-reset:s}
.steps li{margin:0;border-top:2px solid currentColor;padding-top:14px;counter-increment:s}
.steps li::before{content:counter(s,decimal-leading-zero);display:block;font:600 .72rem/1 var(--mono);color:var(--acc);margin-bottom:10px}
.dk .steps li::before{color:var(--acc-dark)}
.steps b{display:block;font:800 italic 1.4rem/1.05 var(--display);text-transform:uppercase;margin-bottom:6px}
.steps span{color:var(--ink-2);font-size:.96rem}
.dk .steps span{color:var(--dark-2)}
.checks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px 28px}
.checks li{margin:0;padding-left:26px;position:relative}
.checks li::before{content:"";position:absolute;left:0;top:.45em;width:12px;height:7px;border-left:2px solid var(--acc);border-bottom:2px solid var(--acc);transform:rotate(-45deg)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:48px;align-items:start}
.split.even{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.split img{width:100%;border-radius:14px;display:block}
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:1.05rem;list-style-position:outside}
.faq details p{margin:10px 0 0;color:var(--ink-2)}
.band-cta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px}
.band-cta h2{margin:0}
.band-cta p{margin:6px 0 0}

/* formulier */
.fm{background:var(--panel);border:1px solid var(--line);padding:26px;display:flex;flex-direction:column;gap:18px;color:var(--ink)}
.fm fieldset{border:0;margin:0;padding:0;min-width:0}
.fm legend,.fm .l{font:600 .78rem/1.3 var(--mono);letter-spacing:.04em;display:block;margin:0 0 8px;padding:0}
.fm .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fm .f{display:flex;flex-direction:column;min-width:0}
.fm input:not([type=checkbox]):not([type=radio]),.fm textarea,.fm select{font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1px solid #8a8b8d;padding:11px 12px;min-height:48px;border-radius:0;width:100%}
.fm textarea{min-height:110px;resize:vertical}
.fm [aria-invalid=true]{border-color:#c41a32;border-width:2px}
.fm small{font-size:.86rem;color:var(--ink-2);margin-top:6px}
.fm small.e{color:#c41a32;font-weight:600;margin-top:4px}
.fm small.e:empty{display:none}
.fm .req{font-size:.86rem;color:var(--ink-2);margin:0}
.fm .err{border-left:4px solid #c41a32;padding:10px 14px;background:#fbeaec;font-size:.95rem}
.fm .err p,.fm .err ul{margin:0}
.fm .msg{font:400 .8rem/1.5 var(--mono);color:var(--ink-2);margin:0;min-height:1.5em}
.fm .btns{margin:0}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.opts label{display:flex;gap:10px;align-items:center;border:1px solid var(--line);padding:11px 12px;min-height:46px;cursor:pointer;font-size:.95rem;background:#fff}
.opts label:has(input:checked){border-color:var(--ink);background:#f4f3ef}
.opts input{width:20px;height:20px;accent-color:var(--acc-btn);margin:0;flex:none}
.seg2{display:grid;grid-template-columns:1fr 1fr;border:1px solid #8a8b8d}
.seg2 a{min-height:48px;display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--ink);font-weight:600;text-align:center;padding:0 10px}
.seg2 a[aria-current]{background:var(--ink);color:#fff}
.filled{margin:0;padding:10px 12px;border-left:3px solid var(--acc-btn);background:#f4f3ef;font-size:.95rem}
.contact p{margin:0 0 8px}
.contact b{display:block;margin-bottom:6px}

@media (max-width:820px){
  .ph-in,.split,.split.even{grid-template-columns:minmax(0,1fr)}
  .ph-in{padding-top:28px;gap:28px}
  .in{padding-block:56px}
  .fm .row{grid-template-columns:1fr}
  .fm{padding:18px}
}
@media (max-width:560px){
  .top .tbtn{order:2;margin-left:auto}
  .top nav{order:3}
}
@media print{.top .tbtn{display:none}}

/* keuzechips en demo's op de dienstpagina's */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.chips button{font:inherit;font-size:.95rem;border:1px solid #8a8b8d;background:transparent;color:inherit;padding:9px 16px;border-radius:99px;min-height:44px;cursor:pointer}
.chips button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.dk .chips button{border-color:#5b5c5f}
.dk .chips button[aria-pressed="true"]{background:var(--dark-ink);color:var(--dark);border-color:var(--dark-ink)}
.ph-vid{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;display:block;background:#1b1d1f}
.tintwrap{position:relative;border-radius:14px;overflow:hidden}
.tintwrap video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.tintwrap i{position:absolute;inset:0;background:#000;pointer-events:none;transition:opacity .15s}
.tintctl{display:flex;flex-direction:column;gap:8px;margin:16px 0 18px}
.tintctl label{font:600 .72rem/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.tintctl input{width:100%;accent-color:var(--acc-btn);min-height:32px}
.tintctl output{font:400 .82rem/1.4 var(--mono);color:var(--ink-2)}
.dk .tintctl output{color:var(--dark-2)}
.pf-sec{max-width:1080px;margin:0 auto;padding:0 20px 64px}
.note{font-size:.92rem}
@media (prefers-reduced-motion:reduce){.tintwrap i{transition:none}}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wa-grid img{width:calc(100% + 44px);aspect-ratio:2/1}
.pg .ig-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media (max-width:700px){.pg .ig-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* balk: taalwissel als label, los van het menu */
.top .lang{font:600 .66rem/1 var(--mono);letter-spacing:.12em;color:var(--dark-2);text-decoration:none;border:1px solid #3a3c3f;border-radius:99px;padding:8px 11px;min-height:32px;display:inline-flex;align-items:center}
.top .lang:hover{color:var(--dark-ink);border-color:var(--dark-2)}
.qs{display:none}
@media (max-width:560px){.top-in{gap:10px 8px}.top .logo{margin-right:auto}.top .logo img{height:14px}.top .lang{order:2}.top .tbtn{order:2;margin-left:0;padding:0 14px}.top nav{order:3;width:100%}.top .tbtn .qx{display:none}.top .tbtn .qs{display:inline}}

/* dienstenpagina: tegels even groot, foto vult de tegel, tekst eroverheen, beweging bij hover en bij in beeld komen */
.svcg{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:svc}
.svcg li{counter-increment:svc;display:block;margin:0;min-width:0}
.svcg.txt li{display:flex}.svcg.txt li > .tile{flex:1}
.svcg .tile{outline:1px solid rgba(243,241,236,.08);outline-offset:-1px;position:relative;isolation:isolate;width:100%;height:auto;aspect-ratio:3/4;padding:0;border:0;border-radius:14px;overflow:hidden;background:#111213;color:#f3f1ec;justify-content:flex-end;gap:0;box-shadow:0 18px 40px -28px rgba(0,0,0,.7);transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.svcg .tile img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;max-width:none;margin:0;aspect-ratio:auto;object-fit:cover;transform:scale(1.02);transition:transform 1.1s cubic-bezier(.2,.7,.2,1),filter .6s}
.svcg .tile::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(17,18,19,0) 30%,rgba(17,18,19,.55) 58%,rgba(17,18,19,.94) 100%);transition:opacity .5s}
.svcg .tile::after{content:counter(svc,decimal-leading-zero);position:absolute;top:14px;left:16px;font:600 .68rem/1 var(--mono);letter-spacing:.12em;color:#f3f1ec;background:rgba(17,18,19,.55);backdrop-filter:blur(6px);padding:6px 8px;border-radius:99px}
.svcg .tx{display:flex;flex-direction:column;gap:8px;padding:18px 18px 18px}
.svcg .tx h3{position:relative;margin:0;padding-bottom:10px;color:#f3f1ec;font-size:clamp(1.15rem,1.6vw,1.45rem);line-height:1.02}
.svcg .tx h3::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:3px;background:var(--acc-btn);transition:width .5s cubic-bezier(.2,.7,.2,1)}
.svcg .tx p{margin:0;color:#d3d1cb;font-size:.9rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.svcg .tx .go{margin-top:4px;display:inline-flex;align-items:center;gap:8px;color:#ff5a6e}
.svcg .tx .go i{font-style:normal;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.svcg a.tile:hover,.svcg a.tile:focus-visible{transform:translateY(-4px);box-shadow:0 28px 50px -26px rgba(0,0,0,.8)}
.svcg a.tile:hover img,.svcg a.tile:focus-visible img{transform:scale(1.09)}
.svcg a.tile:hover h3::after,.svcg a.tile:focus-visible h3::after{width:100%}
.svcg a.tile:hover .go i,.svcg a.tile:focus-visible .go i{transform:translateX(6px)}
.svcg a.tile:focus-visible{outline:3px solid var(--acc-btn);outline-offset:3px}
/* komen een voor een in beeld (alleen met JavaScript en als beweging mag) */
.rv .svcg li{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*70ms)}
.rv .svcg li.seen{opacity:1;transform:none}
@media (max-width:980px){.svcg{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.svcg{gap:10px}.svcg .tile{aspect-ratio:4/5;border-radius:12px}.svcg .tx{padding:12px;gap:6px}.svcg .tx h3{font-size:1.02rem;padding-bottom:8px}.svcg .tx p{font-size:.8rem}.svcg .tx .go{font-size:.62rem}.svcg .tile::after{top:10px;left:10px}}
@media (prefers-reduced-motion:reduce){.svcg .tile,.svcg .tile img,.svcg .tx h3::after,.svcg .tx .go i{transition:none}.rv .svcg li{opacity:1;transform:none;transition:none}}

/* tekstvariant (geen foto): zelfde kaartstijl, nummer, rode lijn, hover en in beeld komen */
.svcg.txt{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));grid-auto-rows:1fr}
.svcg.txt .tile{aspect-ratio:auto;min-height:230px;padding:52px 22px 22px;justify-content:flex-start;gap:10px;background:linear-gradient(160deg,#1f2123 0%,#121314 100%);border:1px solid #2c2e31}
.svcg.txt .tile::before{content:none}
.svcg.txt .tile .tag{position:absolute;top:14px;right:16px;color:#ff5a6e;font:600 .62rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.svcg.txt .tile h3{position:relative;margin:0;padding-bottom:10px;color:#f3f1ec;font-size:clamp(1.2rem,1.7vw,1.5rem);line-height:1.02}
.svcg.txt .tile h3::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:3px;background:var(--acc-btn);transition:width .5s cubic-bezier(.2,.7,.2,1)}
.svcg.txt .tile p{margin:0;color:#c9c7c2;font-size:.95rem;line-height:1.5}
.svcg.txt .tile .go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;color:#ff5a6e}
.svcg.txt .tile .go i{font-style:normal;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.svcg.txt .tile:hover h3::after{width:100%}
.svcg.txt a.tile:hover .go i{transform:translateX(6px)}
.svcg.txt div.tile{transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.svcg.txt div.tile:hover{transform:translateY(-4px);box-shadow:0 28px 50px -26px rgba(0,0,0,.8)}
.svcg.txt .tile.on{border-color:var(--acc-btn);box-shadow:0 0 0 1px var(--acc-btn),0 24px 50px -26px rgba(214,32,58,.55);outline:0}
/* kleine fototegels: andere diensten onderaan een dienstpagina */
.svcg.mini .tile{aspect-ratio:4/3}
.svcg.mini .tx{padding:14px}
.svcg.mini .tx h3{font-size:1.05rem;padding-bottom:8px}
@media (max-width:520px){.svcg.txt{grid-template-columns:minmax(0,1fr)}.svcg.txt .tile{min-height:0}.svcg.mini .tile{aspect-ratio:1/1}}
@media (prefers-reduced-motion:reduce){.svcg.txt .tile,.svcg.txt .tile h3::after{transition:none}}

/* echte foto's uit de werkplaats (img/foto/, webp 640 en 1280 breed) */
.foto-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:20px}
.foto-grid figure{margin:0;position:relative;overflow:hidden;background:#111213;aspect-ratio:4/3}
.foto-grid img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.foto-grid figure:hover img{transform:scale(1.03)}
.foto-grid figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 14px 12px;color:#f3f1ec;font:500 .82rem/1.35 var(--sans,inherit);background:linear-gradient(to top,rgba(10,11,12,.82),rgba(10,11,12,0))}
.foto-duo{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1100px){.foto-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.foto-grid,.foto-duo{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.foto-grid img{transition:none}}

/* prijzen per dienst, werkwijze, kleuren en tijdlijn (eigenaar, 4 nov.) */
.prijzen{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--line);max-width:760px}
.prijzen li{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:14px 0;border-bottom:1px solid var(--line)}
.prijzen b{display:block;font-weight:600}
.prijzen span small{display:block;color:var(--ink-2);font-size:.88rem;line-height:1.45;margin-top:2px}
.prijzen .p{flex:none;text-align:right;font:600 1.05rem/1.2 var(--body);white-space:nowrap}
.prijzen .p small{display:block;font:400 .7rem/1.5 var(--mono);letter-spacing:.04em;color:var(--ink-2)}
.prijs-note{margin:12px 0 0;font-size:.86rem;color:var(--ink-2);max-width:760px}
.stap-h{margin:34px 0 12px;font:italic 800 1.4rem/1 var(--display);text-transform:uppercase}
.stappen{margin:0;padding:0;list-style:none;counter-reset:st;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px 24px;max-width:900px}
.stappen li{counter-increment:st;display:flex;gap:12px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.stappen li::before{content:counter(st,decimal-leading-zero);font:600 .72rem/1 var(--mono);color:var(--acc);flex:none}
.velg-kleuren{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px 12px;max-width:760px}
.velg-kleuren li{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.82rem;text-align:center;color:var(--ink-2)}
.velg-kleuren .sw{width:54px;height:54px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.velg-kleuren .sw.gl{background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.75),rgba(255,255,255,0) 38%),var(--c)}
.velg-kleuren .sw.mt{filter:saturate(.85) brightness(.96)}
@media (max-width:600px){.velg-kleuren{grid-template-columns:repeat(2,minmax(0,1fr))}.prijzen li{flex-direction:column;gap:6px}.prijzen .p{text-align:left}}

/* meer lucht (4 nov.): ruimere secties, kortere regels */
.in{padding-block:96px}
.sub,.lede{max-width:38em}
.stap-d{margin-top:28px;max-width:900px}
.stap-d summary{cursor:pointer;font:italic 800 1.3rem/1.2 var(--display);text-transform:uppercase;list-style:none;display:flex;align-items:center;gap:10px}
.stap-d summary::-webkit-details-marker{display:none}
.stap-d summary::before{content:"+";font:600 1rem/1 var(--mono);color:var(--acc);width:1em}
.stap-d[open] summary::before{content:"−"}
.stap-d .stappen{margin-top:14px}
@media (max-width:700px){.in{padding-block:64px}}

/* tijdlijn over ons: lijn vult rood met scrollen, jaren lichten op (assets/tijdlijn.js) */
.tl{position:relative;margin-top:44px;--p:0}
.tl-track{position:absolute;left:150px;top:6px;bottom:6px;width:2px;background:rgba(243,241,236,.14)}
.tl-fill{position:absolute;left:0;top:0;width:100%;height:calc(var(--p) * 100%);background:var(--acc-btn,#d6203a);box-shadow:0 0 14px rgba(214,32,58,.55)}
.tl-af .tl-fill{height:100%}
.tijdlijn{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:42px}
.tijdlijn li{position:relative;display:grid;grid-template-columns:150px minmax(0,1fr);column-gap:44px;align-items:start}
.tijdlijn li::before{content:"";position:absolute;left:144px;top:.55em;width:14px;height:14px;transform:skewX(-12deg);background:var(--dark,#111213);border:2px solid rgba(243,241,236,.35);box-sizing:border-box;transition:background .35s,border-color .35s,box-shadow .35s}
.tijdlijn b{justify-self:end;padding-right:34px;font:italic 800 clamp(2.4rem,5vw,3.6rem)/.9 var(--display);color:rgba(243,241,236,.22);transition:color .4s,transform .4s;transform-origin:right center}
.tijdlijn span{padding-top:.5rem;font-size:1.06rem;line-height:1.5;color:var(--dark-2,#b9b7b2);max-width:34em;transition:color .4s}
.tijdlijn em{display:block;margin-bottom:6px;font:600 .66rem/1 var(--mono);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--acc-dark,#ff5a6e)}
.tl-live .tijdlijn li{opacity:0;transform:translateY(22px);transition:opacity .6s,transform .6s cubic-bezier(.2,.7,.2,1)}
.tl-live .tijdlijn li.seen,.tl-af .tijdlijn li{opacity:1;transform:none}
.tijdlijn li.seen b{color:rgba(243,241,236,.55)}
.tijdlijn li.on b{color:#f3f1ec;transform:scale(1.08)}
.tijdlijn li.on span{color:#f3f1ec}
.tijdlijn li.seen::before{border-color:var(--acc-btn,#d6203a)}
.tijdlijn li.on::before{background:var(--acc-btn,#d6203a);box-shadow:0 0 0 6px rgba(214,32,58,.18)}
.tijdlijn li.k-2022.on b{color:var(--acc-dark,#ff5a6e)}
.tijdlijn li.k-2023 b{color:#f3f1ec}
.tl-af .tijdlijn li b{color:rgba(243,241,236,.8)}
@media (max-width:700px){
  .tl-track{left:6px}
  .tijdlijn{gap:30px}
  .tijdlijn li{grid-template-columns:1fr;padding-left:34px;row-gap:6px}
  .tijdlijn li::before{left:0;top:.5em}
  .tijdlijn span{padding-top:0}
  .tijdlijn b{justify-self:start;padding-right:0;font-size:2.4rem;transform-origin:left center}
}
.fm .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fm .msg.ok{font:500 1rem/1.5 var(--body);color:var(--ink);border-left:4px solid #1f7a4d;background:#eaf6ef;padding:10px 14px}
.fm .msg.fout{font:400 .95rem/1.5 var(--body);color:var(--ink);border-left:4px solid #c41a32;background:#fbeaec;padding:10px 14px}
.fm button[aria-busy=true]{opacity:.6;cursor:progress}
.fm input[type=file]{padding:9px 10px;cursor:pointer}
.fm .files{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px;font-size:.9rem}
.fm .files:empty{display:none}
.fm .files li{display:flex;justify-content:space-between;gap:12px;border:1px solid var(--line);background:#fff;padding:6px 10px}
.fm .files span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fm .files small{color:var(--ink-2);flex:none}