/* Klantsmid hoofdpagina's: lichte versie van het smidse-ontwerp (okt 2026). Kleuren uit nieuw.css (zand & bosgroen). */
.ks-sub{--ks-g:#1C5D3A;--ks-g3:#2E7A50;--ks-ink:#14241C;--ks-mut:#5E6660;--ks-line:rgba(20,22,20,.11)}

/* hero: grote kop, groen smeedstuk rechts */
.ks-sub .hero{position:relative;overflow:hidden;padding:clamp(70px,12vh,130px) 0 clamp(60px,10vh,110px)}
.ks-sub #spark,.ks-sub .hero-glow,.ks-sub .hero-glow2{display:none}
.ks-sub #ks-forge{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.ks-sub .hero .wrap{position:relative;z-index:3}
.ks-sub .hero h1{font-size:clamp(40px,6.4vw,100px)!important;line-height:1!important;letter-spacing:-.045em;max-width:13ch;text-wrap:balance;color:var(--ks-ink)}
.ks-sub .hero h1 .grad{color:var(--ks-g);-webkit-text-fill-color:var(--ks-g)}
.ks-sub .hero h1 .ch{display:inline-block;will-change:transform,color}
.ks-sub .hero h1 .w{display:inline-block;white-space:nowrap}
.ks-sub .hero p.sub{font-size:clamp(17px,1.4vw,21px);max-width:44ch}
.ks-sub .hero .cta .btn{border-radius:999px;padding:16px 24px}
.ks-sub .hero .eyebrow{letter-spacing:.06em}

/* knoppen: gloed volgt de muis */
.ks-sub .btn-g{position:relative;overflow:hidden;isolation:isolate}
.ks-sub .btn-g::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),#2E7A50 0,rgba(46,122,80,.6) 35%,transparent 70%);opacity:0;transition:opacity .3s}
.ks-sub .btn-g:hover::before{opacity:1}

/* kaarten: groene glans in plaats van oranje rand */
.ks-sub .mod{position:relative;overflow:hidden}
.ks-sub .mod::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(28,93,58,.08) 50%,transparent 80%);transform:translateX(-100%);transition:transform .7s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.ks-sub .mod:hover::before{transform:translateX(100%)}
.ks-sub .mod:hover{border-color:rgba(28,93,58,.35)!important;box-shadow:0 18px 40px rgba(20,22,20,.10)!important}
.ks-sub .mod .ic,.ks-sub .mod.blue .ic{background:rgba(28,93,58,.08);border:1px solid rgba(28,93,58,.2)}
.ks-sub .ic svg{width:26px;height:26px;stroke:var(--ks-g);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ks-sub .ic svg *{stroke-dasharray:var(--len,200);stroke-dashoffset:0}
.ks-sub .mod:hover .ic svg *{animation:ks-teken 1s cubic-bezier(.2,.7,.2,1)}
@keyframes ks-teken{from{stroke-dashoffset:var(--len,200)}to{stroke-dashoffset:0}}
.ks-sub .mod .more{color:var(--ks-g)}

/* stappen: grote omlijnde cijfers in de huisstijl */
.ks-sub .step{position:relative;overflow:hidden}
.ks-sub .step .n{background:none;color:transparent;-webkit-text-stroke:1.2px var(--ks-g);font-size:64px;line-height:.9;width:auto;height:auto;display:block;border-radius:0;margin-bottom:14px}
.ks-sub .step:hover .n{color:var(--ks-g);transition:color .4s}

/* belknop rechtsonder groen */
.ks-sub .ks-fab-call{background:var(--ks-g)!important}

@media (max-width:860px){
  .ks-sub #ks-forge{opacity:.35}
}
@media (prefers-reduced-motion:reduce){
  .ks-sub *,.ks-sub *::before,.ks-sub *::after{animation:none!important;transition:none!important}
}

/* vinkjes-lijst: groene streep in plaats van het hamer-emoji */
.ks-sub .checklist li::before{content:"";flex:none;width:12px;height:2px;margin-top:.8em;background:var(--ks-g)}