/* Inhoudspagina's (about, industries, knowledge, distributors, contact) — csp- prefix, bouwt op home.css */
.csp-hero{background:var(--csh-ink) center 40%/cover no-repeat;color:var(--csh-inv);position:relative}
.csp-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,14,12,.94),rgba(14,14,12,.82) 50%,rgba(14,14,12,.5))}
.csp-hero .csh-wrap{position:relative;padding-top:28px;padding-bottom:64px}
.csp-hero .csa-crumbs{margin-bottom:48px}
.csp-hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:48px;align-items:end}
.csp-hero .csh-h1.is-sm{font-size:clamp(44px,5.6vw,84px)!important}
.csp-hero .csh-lead{margin:18px 0 26px}
.csp-hero .csh-cta{display:flex;gap:10px;flex-wrap:wrap}

.csp-sec{padding:88px 0;background:var(--csh-warm)}
.csp-sec.is-white{background:#fff}
.csp-sec .csh-head{margin-bottom:36px}
.csp-p,.csp-story p,.csp-card p{font:400 15.5px/1.65 var(--csh-body);color:var(--csh-stone);margin:0 0 14px}
.csp-story p{font-size:16.5px;color:var(--csh-text)}
.csp-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.csp-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.csp-story{gap:56px;align-items:center}
.csp-story .csh-head{margin-bottom:20px}
.csp-story-img{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/3;background:var(--csh-steel)}
.csp-story-img img{width:100%;height:100%;object-fit:cover;display:block}
.csp-story-img .csh-mono{position:absolute;left:18px;bottom:16px;margin:0;color:#fff;background:rgba(14,14,12,.7);padding:8px 12px;border-radius:999px;backdrop-filter:blur(6px)}

.csp-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.csp-facts div{background:#fff;border:1px solid var(--csh-line);border-radius:18px;padding:22px 22px 20px}
.csp-facts b{display:block;font:800 40px/1 var(--csh-display);text-transform:uppercase;color:var(--csh-text)}
.csp-facts span{display:block;margin-top:8px;font:500 11px/1.5 var(--csh-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--csh-stone)}

.csp-card{position:relative;background:#fff;border:1px solid var(--csh-line);border-radius:20px;padding:26px 24px 20px;text-decoration:none;color:var(--csh-text);display:block;transition:.2s}
.csp-sec.is-white .csp-card{background:var(--csh-warm)}
.csp-card h3{margin:0 0 8px;font:800 22px/1.05 var(--csh-display)!important;text-transform:uppercase!important;color:var(--csh-text)!important;letter-spacing:0!important}
.csp-card > .csh-mono{margin-bottom:12px}
.csp-card p:last-child{margin-bottom:0}
.csp-card > a{font:700 14px/1 Montserrat,sans-serif;color:var(--csh-text);text-decoration:none;border-bottom:2px solid var(--csh-yellow);padding-bottom:3px;display:inline-block;margin-top:4px}
.csp-card i{display:block;width:28px;height:28px;border-radius:8px;background:var(--csh-yellow);margin-bottom:34px}
.csp-card.is-link:hover{border-color:var(--csh-black);transform:translateY(-2px)}
.csp-go{font:700 13.5px/1 Montserrat,sans-serif;color:var(--csh-text);border-bottom:2px solid var(--csh-yellow);padding-bottom:3px}
.csp-n{position:absolute;right:20px;top:14px;font:800 56px/1 var(--csh-display);color:var(--csh-line)}

.csp-timeline{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:m}
.csp-timeline li{background:#fff;border:1px solid var(--csh-line);border-radius:20px;padding:24px 24px 20px;position:relative}
.csp-timeline li::before{content:"";position:absolute;left:24px;top:0;width:44px;height:4px;background:var(--csh-yellow);border-radius:0 0 4px 4px}
.csp-timeline b{display:block;font:600 11px/1 var(--csh-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--csh-stone);margin:8px 0 14px}
.csp-timeline h3{margin:0 0 8px;font:800 22px/1.05 var(--csh-display)!important;text-transform:uppercase!important;color:var(--csh-text)!important}
.csp-timeline p{margin:0;font:400 14.5px/1.6 var(--csh-body);color:var(--csh-stone)}

.csp-memb{display:flex;gap:8px;flex-wrap:wrap;margin-top:32px}
.csp-memb span{border:1px solid var(--csh-line);border-radius:10px;padding:10px 14px;font:600 12px/1 var(--csh-mono);letter-spacing:.08em;background:#fff}

/* industries */
.csp-tabs{display:flex;gap:8px;flex-wrap:wrap}
.csp-tabs a{border:1px solid var(--csh-line);background:#fff;border-radius:999px;padding:10px 14px;font:600 13px/1 Montserrat,sans-serif;color:var(--csh-text);text-decoration:none;white-space:nowrap;transition:.2s}
.csp-tabs a:hover,.csp-tabs a.on{background:var(--csh-black);color:#fff;border-color:var(--csh-black)}
.csp-sec:has(> .csh-wrap > .csp-tabs:only-child){padding:24px 0}
.csp-sec > .csh-wrap > .csp-tabs{margin:0}
.csp-ind-list{display:grid;gap:20px;margin-top:32px}
.csp-ind{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);background:#fff;border:1px solid var(--csh-line);border-radius:24px;overflow:hidden;scroll-margin-top:110px}
.csp-ind:nth-child(even){grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.csp-ind:nth-child(even) .csp-ind-img{order:2}
.csp-ind-img{position:relative;min-height:300px;background:var(--csh-steel)}
.csp-ind-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.csp-ind-img b{position:absolute;left:18px;top:16px;font:800 13px/1 var(--csh-mono);background:var(--csh-yellow);color:var(--csh-black);border-radius:999px;padding:8px 10px}
.csp-ind-body{padding:34px 36px 30px}
.csp-ind-body h2{margin:6px 0 12px;font:800 clamp(28px,3vw,40px)/1 var(--csh-display)!important;text-transform:uppercase!important;color:var(--csh-text)!important}
.csp-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:14px 0 0}
.csp-chips .csh-mono{margin:0 8px 0 0}
.csp-chips span:not(.csh-mono){border:1px solid var(--csh-line);border-radius:999px;padding:7px 11px;font:600 11.5px/1 var(--csh-mono);color:var(--csh-text);background:var(--csh-warm)}
.csp-links{display:flex;gap:18px;flex-wrap:wrap;margin-top:20px;padding-top:18px;border-top:1px solid var(--csh-line)}
.csp-links a{font:700 13.5px/1 Montserrat,sans-serif;color:var(--csh-text);text-decoration:none;border-bottom:2px solid var(--csh-yellow);padding-bottom:3px}

/* knowledge */
.csp-ds-groups{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.csp-ds-group h3{margin:0 0 10px;font:800 20px/1 var(--csh-display)!important;text-transform:uppercase!important;color:var(--csh-text)!important}
.csp-ds-group .cs-docs__list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.csp-ds-group .cs-docs__item{display:flex;align-items:center;gap:10px;background:var(--csh-warm);border:1px solid var(--csh-line);border-radius:14px;padding:6px 12px 6px 6px}
.csp-ds-group .cs-docs__link{flex:1;display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--csh-text);padding:8px 10px;border-radius:10px;min-width:0}
.csp-ds-group .cs-docs__link:hover{background:#fff}
.csp-ds-group .cs-docs__title{display:block;font:700 14px/1.3 Montserrat,sans-serif}
.csp-ds-group .cs-docs__meta{display:block;font:400 12px/1.4 var(--csh-body);color:var(--csh-stone)}
.csp-ds-group .cs-docs__cta{margin-left:auto;font:700 11px/1 var(--csh-mono);background:var(--csh-black);color:var(--csh-yellow);border-radius:999px;padding:7px 9px;flex:0 0 auto}
.csp-ds-page{font:600 12px/1 Montserrat,sans-serif;color:var(--csh-stone);text-decoration:none;white-space:nowrap}
.csp-ds-page:hover{color:var(--csh-text)}
.csp-std .csp-chips{margin-top:10px}

/* distributors / contact */
.csp-list{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px}
.csp-list li{position:relative;padding-left:22px;font:400 15.5px/1.55 var(--csh-body);color:var(--csh-text)}
.csp-list li::before{content:"";position:absolute;left:0;top:9px;width:10px;height:10px;border-radius:3px;background:var(--csh-yellow)}
.csp-list b{font-weight:700}
.csp-find,.csp-contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:start}
.csp-form{background:#fff;border:1px solid var(--csh-line);border-radius:22px;padding:28px}
.csp-sec.is-white .csp-form{background:var(--csh-warm)}
.csp-become{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:24px;background:var(--csh-black);color:#fff;border-radius:22px;padding:28px 32px}
.csp-become h3{margin:0 0 4px;font:800 24px/1 var(--csh-display)!important;text-transform:uppercase!important;color:#fff!important}
.csp-become p{margin:0;color:var(--csh-muted);font:400 14.5px/1.5 var(--csh-body)}
.csp-become .csh-btn-k{background:var(--csh-yellow)!important;color:var(--csh-black)!important}
.csp-become .csh-btn-ghost-k{border-color:rgba(255,255,255,.4)!important;color:#fff!important}
.csp-offices .csp-card h3{font-size:24px}
.csp-hours{border-top:1px solid var(--csh-line);padding-top:18px}
.csp-hours b{display:block;font:700 18px/1.2 Montserrat,sans-serif;margin:2px 0 4px}
.csp-hours span:last-child{font:400 13.5px/1.5 var(--csh-body);color:var(--csh-stone)}
.csp-find .csh-head,.csp-contact-grid .csh-head,.csp-story .csh-head{grid-template-columns:1fr;gap:12px}
.csp-find .csh-head .csh-p,.csp-contact-grid .csh-head .csh-p{max-width:none}
.csp-card p.csh-mono,.csp-story p.csh-mono{font:600 11px/1.4 var(--csh-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--csh-stone);margin:0 0 12px}
.csp-card p.csh-mono.is-y{color:#b89e00}


/* Single blog post - featured products, category CTA, wholesale CTA (added for single-post redesign) */
.cs-blog-feat { padding: 60px 40px; }
.cs-blog-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1200px; margin: 32px auto 0; }
.cs-blog-feat-card { display: flex; flex-direction: column; background: #FFFFFF; border-radius: 10px; padding: 20px; text-decoration: none; box-shadow: 0 1px 3px rgba(0,0,0,.08); transition: transform .15s ease, box-shadow .15s ease; }
.cs-blog-feat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.cs-blog-feat-img { display: block; aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden; background: #F6F5F0; margin-bottom: 14px; }
.cs-blog-feat-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-blog-feat-name { font-weight: 700; color: #111111; font-size: 15px; line-height: 1.35; margin-bottom: 6px; }
.cs-blog-feat-price { color: #6B6B6B; font-size: 14px; margin-bottom: 10px; }
.cs-blog-feat-price ins { text-decoration: none; }
.cs-blog-feat-link { margin-top: auto; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #111111; display: inline-flex; align-items: center; gap: 6px; }

.cs-blog-catcta { max-width: 1200px; margin: 0 auto; padding: 32px 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; background: #FFFFFF; border-top: 1px solid #ECEAE3; border-bottom: 1px solid #ECEAE3; }
.cs-blog-catcta span { font-size: 15px; color: #333333; font-weight: 600; }

.cs-blog-wholesale { max-width: 1200px; margin: 0 auto; padding: 48px 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; background: #111111; border-radius: 14px; }
.cs-blog-wholesale-text { max-width: 620px; }
.cs-blog-wholesale-text h3 { color: #FFFFFF; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 26px; margin: 6px 0 10px; }
.cs-blog-wholesale-text p.csh-mono { color: #FEDC01; }
.cs-blog-wholesale-text > p:last-child { color: #CFCFCF; font-size: 15px; margin: 0; }

@media (max-width: 900px) {
	.cs-blog-feat-grid { grid-template-columns: 1fr; }
	.cs-blog-catcta, .cs-blog-wholesale { padding: 28px 20px; flex-direction: column; align-items: flex-start; }
}

/* Single-post redesign: content + sticky sidebar (featured product + TOC) */
.cs-blog-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;max-width:1200px;margin:0 auto;align-items:start}
.cs-blog-main{min-width:0}
.cs-blog-main h2,.cs-blog-main h3{scroll-margin-top:100px}
.cs-blog-side{position:sticky;top:120px;display:flex;flex-direction:column;gap:24px}
.cs-blog-side-label{font:600 11px/1 var(--csh-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--csh-stone);margin:0 0 14px}
.cs-blog-toc{background:var(--csh-warm);border:1px solid var(--csh-line);border-radius:10px;padding:22px 24px}
.cs-blog-toc ol{list-style:none;margin:0;padding:0;counter-reset:cstoc;display:flex;flex-direction:column;gap:4px}
.cs-blog-toc li{counter-increment:cstoc}
.cs-blog-toc a{display:flex;gap:10px;align-items:baseline;font:500 13.5px/1.4 var(--csh-body);color:var(--csh-ink);text-decoration:none;padding:6px 0 6px 12px;border-left:2px solid var(--csh-line);transition:border-color .15s ease,color .15s ease}
.cs-blog-toc a::before{content:counter(cstoc,decimal-leading-zero);font:500 11px/1 var(--csh-mono);color:var(--csh-stone);flex:none}
.cs-blog-toc a:hover,.cs-blog-toc a.is-active{border-left-color:var(--csh-ink)}
.cs-blog-toc a.is-active{color:var(--csh-ink);font-weight:700}
.cs-blog-side-product{border:1px solid var(--csh-line);border-radius:10px;padding:22px;background:#FFFFFF}
.cs-blog-side-card{display:flex;flex-direction:column;text-decoration:none}
.cs-blog-side-img{display:block;aspect-ratio:1/1;border-radius:6px;overflow:hidden;background:var(--csh-warm);margin-bottom:14px}
.cs-blog-side-img img{width:100%;height:100%;object-fit:cover;display:block}
.cs-blog-side-name{font-weight:700;color:var(--csh-ink);font-size:14.5px;line-height:1.35;margin-bottom:6px}
.cs-blog-side-price{color:var(--csh-stone);font-size:13.5px;margin-bottom:10px}
.cs-blog-side-price ins{text-decoration:none}
.cs-blog-side-cta{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--csh-ink);display:inline-flex;align-items:center;gap:6px}
@media (max-width: 900px){
.cs-blog-layout{grid-template-columns:1fr;gap:32px}
.cs-blog-side{position:static}
}

/* Interactive 3D scene: 'See it in action' on industry pages */
.csp-3d{padding:88px 0;background:#FFFFFF}
.csp-3d-inner{max-width:1200px;margin:0 auto;padding:0 40px}
.csp-3d h2{margin:0 0 14px}
.cs-3d-scene{position:relative;width:100%;height:460px;border-radius:14px;overflow:hidden;background:var(--csh-warm);border:1px solid var(--csh-line);margin-top:28px;touch-action:pan-y}
.cs-3d-scene canvas{display:block;cursor:grab}
.cs-3d-hint{margin:14px 0 0;font:500 12px/1 var(--csh-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--csh-stone);text-align:center}
@media (max-width: 900px){
.cs-3d-scene{height:340px}
}


/* ------------------------------------------------------------ Product finder (cs-finder) */
.cs-finder { max-width: 900px; margin: 0 auto; padding: 60px 24px 80px; }
.cs-finder-quiz { margin-top: 32px; }
.cs-finder-step { margin-bottom: 8px; }
.cs-finder-q { font-family: var(--csh-mono, ui-monospace, monospace); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--csh-stone, #6F6D65); margin: 0 0 16px; }
.cs-finder-opts { display: grid; gap: 12px; }
@media (min-width: 680px) { .cs-finder-opts { grid-template-columns: 1fr 1fr; } }
.cs-finder-opt { text-align: left; padding: 22px 24px; border: 1px solid var(--csh-line, #DEDCD3); background: var(--csh-warm, #F6F5F0); border-radius: 4px; font-family: var(--csh-body, inherit); font-size: 16px; line-height: 1.4; color: var(--csh-ink, #0E0E0C); cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.cs-finder-opt:hover { border-color: var(--csh-ink, #0E0E0C); background: #FFFFFF; transform: translateY(-2px); }
.cs-finder-results { margin-top: 8px; }
.cs-finder-result .cs-blog-feat { padding: 24px 0 0; }
.cs-finder-result .cs-blog-feat-grid { max-width: none; margin-top: 24px; }
.cs-finder-cta { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.cs-finder-btn { font-family: var(--csh-mono, ui-monospace, monospace); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; padding: 15px 24px; border: 1px solid var(--csh-ink, #0E0E0C); background: transparent; color: var(--csh-ink, #0E0E0C); cursor: pointer; border-radius: 2px; transition: background .15s ease, color .15s ease; }
.cs-finder-btn:hover { background: var(--csh-ink, #0E0E0C); color: var(--csh-inv, #F4F3EE); }
@media (max-width: 680px) { .cs-finder-result .cs-blog-feat-grid { grid-template-columns: 1fr 1fr; gap: 16px; } }


/* --- 3D scene: bigger, more prominent stage (2026-09-24 enhancement) --- */
.csp-3d { padding: 96px 0; background: var(--csh-warm, #F6F5F0); }
.csp-3d-inner { max-width: 1320px; }
.cs-3d-scene {
	height: clamp(420px, 58vw, 640px);
	border-radius: 16px;
	background: linear-gradient(180deg, #FFFFFF 0%, var(--csh-warm, #F6F5F0) 100%);
	box-shadow: 0 24px 60px -30px rgba(14,14,12,0.25);
}