/* Brandberries, digitaal & web. Alle klassen met prefix dw-. Waarden exact overnemen. */
:root{--dw-red:#ea272a;--dw-red-dark:#c91b1e;--dw-red-deep:#6e0f11;--dw-tint:#fff1f1;--dw-tint-line:#f2c4c5;--dw-ink:#14100f;--dw-ink-soft:#2e2825;--dw-n700:#514840;--dw-n600:#6f645b;--dw-n500:#948a81;--dw-n300:#d8d2cc;--dw-n200:#e8e3de;--dw-n100:#f2efec;--dw-paper:#faf8f6;--dw-wa:#25d366;--dw-wa-dark:#1ebe5b;--dw-font:"Archivo","Poppins",sans-serif;--dw-mono:"JetBrains Mono",ui-monospace,monospace;--dw-gutter:clamp(16px,4vw,48px);--dw-ease:cubic-bezier(.2,.7,.2,1)}
.dw{margin:0;background:var(--dw-paper);color:var(--dw-ink);font-family:var(--dw-font);-webkit-font-smoothing:antialiased}
.dw *,.dw *::before,.dw *::after{box-sizing:border-box}
.dw img{display:block;max-width:100%}
.dw a{color:var(--dw-red-dark)}.dw a:hover{color:var(--dw-red-deep)}
.dw h1,.dw h2,.dw h3{text-transform:none}
html{scroll-behavior:smooth}

/* layout */
.dw-wrap{max-width:1360px;margin:0 auto;padding-left:var(--dw-gutter);padding-right:var(--dw-gutter)}
.dw-sec{padding-top:clamp(56px,8vw,120px);padding-bottom:clamp(56px,8vw,120px)}
.dw-band{background:#fff;border-top:1px solid var(--dw-n200);border-bottom:1px solid var(--dw-n200)}
.dw-tint{background:var(--dw-tint)}
.dw-stack{display:grid;gap:clamp(28px,4vw,56px)}
.dw-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:20px 48px;align-items:end}
.dw-split--top{gap:clamp(28px,5vw,72px);align-items:start}
.dw-mb{margin-bottom:clamp(28px,4vw,56px)}
.dw-row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.dw-row a{font:600 15px/1 var(--dw-font)}
.dw-center{display:flex;justify-content:center;margin-top:clamp(32px,4vw,56px)}
.dw-sticky{position:sticky;top:100px}

/* type */
.dw-head{display:grid;gap:14px;align-content:start}
.dw-head--narrow{max-width:820px}
.dw-eyebrow{font:400 14px/1 var(--dw-font);letter-spacing:.2em;text-transform:uppercase;color:var(--dw-red)}
.dw-h1{margin:0;font:800 clamp(44px,6.8vw,108px)/.88 var(--dw-font);letter-spacing:-.045em;text-wrap:balance}
.dw-h1--sub{font-size:clamp(42px,6vw,96px);line-height:.9}
.dw-h2{margin:0;font:800 clamp(38px,5.4vw,84px)/.9 var(--dw-font);letter-spacing:-.04em;text-wrap:balance}
.dw-h2--md{font-size:clamp(38px,5vw,76px)}
.dw-h2--sub{font-size:clamp(34px,4.6vw,68px);line-height:.92}
.dw-h2--sm{font-size:clamp(30px,3.6vw,52px);line-height:.95}
.dw-h3{margin:0;font:800 clamp(26px,2.4vw,36px)/.95 var(--dw-font);letter-spacing:-.03em}
.dw-red{color:var(--dw-red)}
.dw-lead{margin:0;font:400 clamp(16px,1.3vw,19px)/1.6 var(--dw-font);color:var(--dw-n700);max-width:48ch;text-wrap:pretty}
.dw-body{margin:0;font:400 17px/1.6 var(--dw-font);color:var(--dw-n700);max-width:54ch;text-wrap:pretty}
.dw-body--sm{font-size:16px;max-width:52ch}
.dw-num{font:600 13px/1.5 var(--dw-mono);color:var(--dw-red-dark)}
.dw-prose{display:grid;gap:18px}.dw-prose p{margin:0;font:400 17px/1.65 var(--dw-font);color:var(--dw-ink-soft);text-wrap:pretty}
.dw-ico{width:1em;height:1em;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* buttons */
.dw-actions{display:flex;gap:10px;flex-wrap:wrap}
.dw .dw-btn{display:inline-flex;align-items:center;gap:10px;padding:17px 26px;border-radius:999px;background:var(--dw-red);color:#fff;text-decoration:none;font:600 16px/1 var(--dw-font);border:0;transition:background .2s,color .2s}
.dw .dw-btn:hover{background:var(--dw-red-dark);color:#fff}
.dw .dw-btn--sm{padding:12px 18px;font-size:14px}
.dw .dw-btn--ghost{padding:15.5px 24.5px;background:transparent;border:1.5px solid var(--dw-ink);color:var(--dw-ink)}
.dw .dw-btn--ghost:hover{background:var(--dw-ink);color:var(--dw-paper)}
.dw .dw-btn--paper{padding:18px 26px;background:var(--dw-paper);color:var(--dw-ink)}
.dw .dw-btn--paper:hover{background:#fff;color:var(--dw-ink)}
.dw .dw-btn--wa{padding:18px 26px;background:var(--dw-wa);color:#fff}
.dw .dw-btn--wa:hover{background:var(--dw-wa-dark);color:#fff}

/* context header/footer (bestaande layout gebruiken) */
.dw-header{position:sticky;top:0;z-index:30;background:rgba(250,248,246,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--dw-n200)}
.dw-header__in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:14px;padding-bottom:14px}
.dw-nav{display:flex;align-items:center;gap:clamp(14px,2vw,28px);font:600 14px/1 var(--dw-font)}
.dw-nav>a:not(.dw-btn){color:var(--dw-n700);text-decoration:none}.dw-nav>a[aria-current]{color:var(--dw-red)}
@media (max-width:1000px){.dw-nav>a:not(.dw-btn){display:none}}
.dw-footer{padding-top:36px;padding-bottom:48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px;font:400 14px/1.6 var(--dw-font);color:var(--dw-n700)}
.dw-footer>div{display:grid;align-content:start}.dw-footer>div:first-child{gap:12px}.dw-footer img{height:22px;width:auto}
.dw-footer a{text-decoration:none}.dw-footer a:hover{text-decoration:underline}

/* hero */
.dw-hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:clamp(32px,5vw,72px);align-items:center;padding-top:clamp(36px,6vw,88px);padding-bottom:clamp(40px,5vw,72px)}
.dw-hero--sub{padding:0}
.dw-hero__text{display:grid;gap:22px;justify-items:start}
.dw-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:var(--dw-tint);color:var(--dw-red-dark);font:600 12px/1 var(--dw-font)}
.dw-dot{width:8px;height:8px;border-radius:50%;background:var(--dw-red)}
.dw-media{margin:0;border-radius:22px;overflow:hidden;background:var(--dw-n200)}
.dw-media img{width:100%;height:100%;object-fit:cover}
.dw-media--hero{aspect-ratio:5/4}.dw-media--sub{aspect-ratio:4/3}
.dw-subhero{display:grid;gap:clamp(24px,3vw,40px);padding-top:clamp(28px,4vw,48px);padding-bottom:clamp(40px,5vw,72px)}
.dw-crumbs{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font:500 13px/1 var(--dw-font);color:var(--dw-n600)}
.dw .dw-crumbs a{color:var(--dw-n600);text-decoration:none}.dw .dw-crumbs a:hover{color:var(--dw-red)}.dw-crumbs [aria-current]{color:var(--dw-ink)}

/* pijlers */
.dw-cards{display:grid;gap:clamp(12px,1.4vw,20px)}
.dw-cards--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.dw-cards--tiles{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.dw-cards--others{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.dw-card{background:var(--dw-paper);border:1px solid var(--dw-n200);border-radius:22px;padding:clamp(22px,2.6vw,32px);display:grid;gap:14px;align-content:start}
.dw-card p{margin:0;font:400 15px/1.6 var(--dw-font);color:var(--dw-n700);text-wrap:pretty}

/* tijdlijn */
.dw-timeline{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));border-top:2px solid var(--dw-ink)}
.dw-timeline li{padding:22px 24px 0 0;display:grid;gap:10px;align-content:start}
.dw-timeline__time{font:800 clamp(40px,4.4vw,64px)/1 var(--dw-font);letter-spacing:-.04em;color:var(--dw-red)}
.dw-timeline strong{font:700 19px/1.2 var(--dw-font)}
.dw-timeline li>span:last-child{font:400 15px/1.55 var(--dw-font);color:var(--dw-n700);text-wrap:pretty}

/* dienst-tegels (klikbare blokken naar subpagina's) */
.dw .dw-tile{background:var(--dw-paper);border:1px solid var(--dw-tint-line);border-radius:22px;padding:clamp(22px,2.6vw,32px);display:grid;gap:14px;align-content:space-between;min-height:280px;color:var(--dw-ink);text-decoration:none;transition:border-color .2s,transform .3s var(--dw-ease),background .2s}
.dw .dw-tile:hover,.dw .dw-tile:focus-visible{border-color:var(--dw-red);transform:translateY(-4px);color:var(--dw-ink)}
.dw-tile__top{display:flex;justify-content:space-between;font:600 13px/1 var(--dw-mono);color:var(--dw-n500)}
.dw-tile__top .dw-ico{font-size:20px}
.dw-tile__body{display:grid;gap:10px}
.dw-tile p{margin:0;font:400 15px/1.55 var(--dw-font);color:var(--dw-n700)}
.dw .dw-tile--featured{background:var(--dw-red);border-color:var(--dw-red);color:#fff}
.dw .dw-tile--featured:hover{background:var(--dw-red-dark);border-color:var(--dw-red-dark);color:#fff}
.dw-tile--featured .dw-tile__top,.dw-tile--featured p{color:#fff}.dw-tile--featured .dw-tile__top{opacity:.9}
.dw .dw-tile--sm{background:#fff;border-color:var(--dw-n200);min-height:0;padding:24px;gap:12px;align-content:start}
.dw-tile--sm .dw-h3{font-size:26px}.dw-tile--sm p{font-size:14px}.dw-tile--sm .dw-ico{font-size:18px}

/* werkwijze */
.dw-steps{margin:0;padding:0;list-style:none;display:grid;border-top:2px solid var(--dw-ink)}
.dw-steps li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;padding:22px 0;border-bottom:1px solid var(--dw-n200)}
.dw-steps li>div{display:grid;gap:6px}
.dw-steps strong{font:700 clamp(20px,1.8vw,24px)/1.15 var(--dw-font);letter-spacing:-.01em}
.dw-steps li span:not(.dw-num){font:400 15px/1.6 var(--dw-font);color:var(--dw-n700);text-wrap:pretty}

/* cases in browserframe */
.dw-cases{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:clamp(16px,2vw,28px)}
.dw .dw-case{display:grid;gap:14px;color:var(--dw-ink);text-decoration:none}
.dw-browser{aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:var(--dw-ink);display:grid;grid-template-rows:auto minmax(0,1fr);box-shadow:0 18px 40px rgba(20,16,15,.14)}
.dw-browser__bar{display:flex;align-items:center;gap:6px;padding:10px 12px;background:var(--dw-ink-soft)}
.dw-browser__bar i{width:9px;height:9px;border-radius:50%;background:var(--dw-n600)}.dw-browser__bar i:first-child{background:var(--dw-red)}
.dw-browser__bar span{margin-left:8px;flex:1;min-width:0;padding:6px 10px;border-radius:999px;background:var(--dw-ink);color:var(--dw-n300);font:500 11px/1 var(--dw-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dw-browser__shot{position:relative;overflow:hidden}
.dw-browser__shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .7s var(--dw-ease)}
.dw-case:hover .dw-browser__shot img{transform:scale(1.04)}
.dw-chip{position:absolute;top:12px;left:12px;padding:6px 9px;border-radius:999px;background:var(--dw-paper);color:var(--dw-ink);font:600 11px/1 var(--dw-font)}
.dw-case__client{margin:0;font:700 clamp(20px,1.8vw,26px)/1.1 var(--dw-font);letter-spacing:-.02em}
.dw-case:hover .dw-case__client{color:var(--dw-red)}
.dw-case__text{margin:-10px 0 0;font:400 14px/1.5 var(--dw-font);color:var(--dw-n600);text-wrap:pretty}

/* features */
.dw-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));border-top:2px solid var(--dw-ink)}
.dw-feature{padding:24px 28px 28px 0;border-bottom:1px solid var(--dw-n200);display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-content:start}
.dw-feature>.dw-ico{color:var(--dw-red);font-size:18px;margin-top:3px}
.dw-feature>div{display:grid;gap:6px}
.dw-feature h3{margin:0;font:700 20px/1.2 var(--dw-font);letter-spacing:-.01em}
.dw-feature p{margin:0;font:400 15px/1.6 var(--dw-font);color:var(--dw-n700);text-wrap:pretty}

/* faq (native details/summary: werkt zonder JS, inhoud indexeerbaar) */
.dw-faq{display:grid;border-top:2px solid var(--dw-ink)}
.dw-faq__item{border-bottom:1px solid var(--dw-n200)}
.dw-faq--tint .dw-faq__item{border-color:var(--dw-tint-line)}
.dw-faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;cursor:pointer;font:700 clamp(18px,1.6vw,22px)/1.25 var(--dw-font);letter-spacing:-.01em}
.dw-faq summary::-webkit-details-marker{display:none}
.dw-faq summary:hover{color:var(--dw-red)}
.dw-faq__ico{box-sizing:content-box;font-size:16px;padding:9px;border-radius:50%;background:var(--dw-n100);color:var(--dw-ink);transition:transform .25s var(--dw-ease)}
.dw-faq--tint .dw-faq__ico{background:var(--dw-paper)}
.dw-faq__item[open] .dw-faq__ico{transform:rotate(45deg)}
.dw-faq p{margin:0;padding:0 48px 24px 0;font:400 16px/1.6 var(--dw-font);color:var(--dw-n700)}

/* cta */
.dw-cta-wrap{padding:0 var(--dw-gutter) var(--dw-gutter)}
.dw-cta{max-width:1360px;margin:0 auto;background:var(--dw-red);color:#fff;border-radius:28px;padding:clamp(36px,6vw,88px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:32px;align-items:end}
.dw-cta__title{margin:0;font:800 clamp(44px,7vw,112px)/.86 var(--dw-font);letter-spacing:-.045em;color:var(--dw-ink)}
.dw-cta__title span{color:#fff}
.dw-cta__body{display:grid;gap:20px;justify-items:start}
.dw-cta__body p{margin:0;font:400 17px/1.6 var(--dw-font);max-width:40ch}

@media (prefers-reduced-motion:reduce){.dw *{transition:none!important;scroll-behavior:auto}}

/* ---- Fork-integratie: theme-stijlen neutraliseren binnen .dw (geen nieuwe waarden, enkel resets) ---- */
:where(.dw) h1,:where(.dw) h2,:where(.dw) h3,:where(.dw) h4{color:inherit;font-family:var(--dw-font)}
:where(.dw) p{margin:0}
:where(.dw) ol,:where(.dw) ul{margin:0;padding:0;list-style:none}
:where(.dw) figure{margin:0}
.dw-page #main{background:var(--dw-paper)}

/* herobeeld zonder kader (bv. transparante mockup): geen grijs vlak, geen afgeronde hoeken, eigen verhouding */
.dw-media.dw-media--plain{background:none;border-radius:0;overflow:visible;aspect-ratio:auto}
.dw-media.dw-media--plain img{height:auto}

/* streepjespatroon uit de huisstijl achter elk herobeeld (ook zonder beeld), zacht vervagend naar de randen */
.dw-media--hero,.dw-media--sub{position:relative;isolation:isolate;background:none;overflow:visible}
.dw-media--hero::before,.dw-media--sub::before{content:"";position:absolute;inset:-6% -4%;z-index:-1;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2256%22%20height%3D%2254%22%3E%3Crect%20x%3D%2212%22%20y%3D%225%22%20width%3D%222.4%22%20height%3D%2212%22%20rx%3D%22.6%22%20fill%3D%22%23ed1c24%22%20fill-opacity%3D%22.55%22/%3E%3Crect%20x%3D%2240%22%20y%3D%2232%22%20width%3D%222.4%22%20height%3D%2212%22%20rx%3D%22.6%22%20fill%3D%22%23ed1c24%22%20fill-opacity%3D%22.55%22/%3E%3C/svg%3E") 0 0/56px 54px repeat;
  -webkit-mask-image:radial-gradient(ellipse 70% 65% at 50% 50%,#000 45%,transparent 100%);
          mask-image:radial-gradient(ellipse 70% 65% at 50% 50%,#000 45%,transparent 100%)}
.dw-media.dw-media--plain img{position:relative}