/* Klantsmid homepage: smidse-ontwerp (okt 2026). Alleen op de homepage geladen. Kleuren uit nieuw.css (zand & bosgroen). */
:root{--ks-g:#1C5D3A;--ks-g2:#17502F;--ks-g3:#2E7A50;--ks-ink:#14241C;--ks-mut:#5E6660;--ks-sand:#F4F1EA;--ks-sand2:#EEEBE2;--ks-line:rgba(20,22,20,.11);--ks-gut:clamp(16px,4vw,56px)}
html{scroll-behavior:auto;overflow-x:clip}
body.ks-home{background:transparent;overflow-x:clip}
#ks-forge{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
#ks-embers{position:fixed;inset:0;z-index:60;pointer-events:none}
.ks-home section.ks-sec{background:transparent!important}
.ks-home .ks-sec h1,.ks-home .ks-sec h2,.ks-home .ks-sec h3{font-family:'Space Grotesk',system-ui,sans-serif;color:var(--ks-ink)}

/* knoppen */
.ks-btn{display:inline-flex;align-items:center;gap:12px;font:600 15px/1 'Inter',system-ui,sans-serif;padding:16px 24px;border-radius:999px;text-decoration:none;border:0;cursor:pointer;position:relative;overflow:hidden;isolation:isolate}
.ks-btn-g{background:var(--ks-g);color:#fff;box-shadow:0 8px 22px rgba(28,93,58,.22)}
.ks-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-btn-g:hover::before{opacity:1}
.ks-btn-o{color:var(--ks-ink);box-shadow:inset 0 0 0 1px rgba(20,36,28,.3)}
.ks-btn-o:hover{background:rgba(20,22,20,.05)}
.ks-rij{display:flex;flex-wrap:wrap;gap:12px}
:focus-visible{outline:2px solid var(--ks-g);outline-offset:4px}

/* hero */
.ks-hero{min-height:calc(100svh - 70px);display:grid;align-content:end;padding:0 var(--ks-gut) clamp(40px,8vh,90px)}
.ks-home .ks-hero h1{font-weight:700;font-size:clamp(50px,8.6vw,150px)!important;line-height:.92!important;letter-spacing:-.045em;max-width:11ch;text-wrap:balance}
.ks-hero h1 .ch{display:inline-block;will-change:transform,color}
.ks-hero h1 .w{display:inline-block;white-space:nowrap}
.ks-hero h1 .groen .ch,.ks-hero h1 .groen{color:var(--ks-g)}
.ks-hero-voet{display:flex;flex-wrap:wrap;gap:28px 48px;align-items:end;justify-content:space-between;margin-top:clamp(26px,4vh,44px)}
.ks-hero-voet p{max-width:46ch;color:var(--ks-mut);font-size:clamp(16px,1.25vw,20px)}
.ks-hint{position:absolute;right:var(--ks-gut);top:50%;writing-mode:vertical-rl;font-size:13px;color:var(--ks-mut);display:flex;gap:14px;align-items:center}
.ks-hint i{display:block;width:1px;height:70px;background:linear-gradient(var(--ks-mut),transparent);animation:ks-drip 2.2s infinite}
@keyframes ks-drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.ks-hero{position:relative}

/* bewezen-band */
.ks-bewijs{padding:0 var(--ks-gut)}
.ks-bewijs-band{display:flex;gap:14px clamp(26px,4vw,64px);align-items:baseline;flex-wrap:wrap;padding:clamp(22px,3vh,32px) 0;border-top:1px solid var(--ks-line);border-bottom:1px solid var(--ks-line)}
.ks-bewijs-band p{color:var(--ks-mut);max-width:30ch;margin:0}
.ks-bewijs-band strong{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;letter-spacing:-.03em;font-size:clamp(24px,2.8vw,42px);line-height:1;color:var(--ks-g)}

/* werkwijze: horizontaal */
.ks-proces{height:100svh;overflow:hidden;position:relative}
.ks-track{display:flex;height:100%;width:max-content}
.ks-stap{width:100vw;height:100%;padding:clamp(90px,14vh,140px) var(--ks-gut) clamp(40px,8vh,80px);display:grid;grid-template-rows:auto 1fr auto;position:relative}
.ks-stap-intro{width:min(100vw,1100px)}
.ks-home .ks-stap-intro h2{font-weight:700;font-size:clamp(40px,6vw,104px)!important;line-height:.98!important;letter-spacing:-.04em;max-width:12ch}
.ks-stap-intro p{margin-top:24px;max-width:40ch;color:var(--ks-mut);font-size:clamp(17px,1.3vw,21px)}
.ks-stap-num{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;font-size:clamp(120px,22vw,380px);line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(20,36,28,.14);position:absolute;right:var(--ks-gut);bottom:clamp(30px,6vh,70px)}
.ks-home .ks-stap h3{font-weight:700;font-size:clamp(34px,4.6vw,76px)!important;line-height:1;letter-spacing:-.035em;max-width:12ch}
.ks-wat{font-size:15px;color:var(--ks-mut);margin-bottom:14px;display:flex;gap:10px;align-items:center}
.ks-wat b{font-weight:600;color:var(--ks-ink)}
.ks-bar{width:120px;height:3px;border-radius:2px;background:rgba(20,36,28,.12);overflow:hidden}
.ks-bar span{display:block;height:100%;background:var(--ks-g)}
.ks-tekst{align-self:end;max-width:38ch;font-size:clamp(17px,1.25vw,20px);color:var(--ks-mut)}
.ks-tekst ul{list-style:none;margin-top:18px;display:grid;gap:8px}
.ks-tekst li{padding-left:22px;position:relative;font-size:16px}
.ks-tekst li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;background:var(--ks-g)}
.ks-tekst a{color:var(--ks-g);text-decoration:underline;text-underline-offset:3px}

/* gloeiende zin */
.ks-gloed{padding:clamp(110px,18vh,200px) var(--ks-gut)}
.ks-gloed p{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;font-size:clamp(34px,5vw,88px);line-height:1.04;letter-spacing:-.035em;max-width:17ch;color:var(--ks-ink)}
.ks-gloed .wd{display:inline-block;color:rgba(20,36,28,.14);margin-right:.18em}

/* diensten */
.ks-diensten{padding:clamp(70px,11vh,130px) var(--ks-gut)}
.ks-kop{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap;margin-bottom:clamp(30px,5vh,60px)}
.ks-home .ks-kop h2{font-weight:700;font-size:clamp(38px,5.2vw,88px)!important;line-height:.98!important;letter-spacing:-.04em;max-width:13ch}
.ks-kop p{max-width:36ch;color:var(--ks-mut)}
.ks-dienst{display:grid;grid-template-columns:clamp(48px,5vw,76px) 1fr minmax(0,38ch) 48px;gap:clamp(16px,3vw,48px);align-items:center;padding:clamp(20px,3vh,30px) 0;border-top:1px solid var(--ks-line);text-decoration:none;position:relative;color:var(--ks-ink)}
.ks-dienst:last-child{border-bottom:1px solid var(--ks-line)}
.ks-dienst::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(28,93,58,.07) 50%,transparent);transform:translateX(-100%);transition:transform .7s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.ks-dienst:hover::before{transform:translateX(0)}
.ks-dienst svg.ico{width:100%;height:auto;stroke:var(--ks-g);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ks-dienst svg.ico *{stroke-dasharray:var(--len,300);stroke-dashoffset:0}
.ks-dienst:hover svg.ico *{animation:ks-teken 1.1s cubic-bezier(.2,.7,.2,1)}
@keyframes ks-teken{from{stroke-dashoffset:var(--len,300)}to{stroke-dashoffset:0}}
.ks-home .ks-dienst h3{font-weight:600;font-size:clamp(26px,3.2vw,52px)!important;line-height:1.02;letter-spacing:-.03em;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.ks-dienst:hover h3{transform:translateX(14px)}
.ks-dienst p{color:var(--ks-mut);font-size:16px;margin:0}
.ks-pijl{width:48px;height:48px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(20,36,28,.25);display:grid;place-items:center;transition:background .35s,transform .35s}
.ks-pijl svg{width:18px;stroke:var(--ks-ink);fill:none;stroke-width:1.8}
.ks-dienst:hover .ks-pijl{background:var(--ks-g);transform:rotate(-45deg)}
.ks-dienst:hover .ks-pijl svg{stroke:#fff}

/* demo */
.ks-demo{padding:clamp(80px,13vh,150px) var(--ks-gut);display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,100px);align-items:center}
.ks-home .ks-demo h2{font-weight:700;font-size:clamp(38px,5.2vw,88px)!important;line-height:.98!important;letter-spacing:-.04em}
.ks-demo .ks-lead{margin:22px 0 30px;max-width:40ch;color:var(--ks-mut);font-size:clamp(17px,1.25vw,20px)}
.ks-toestel{background:#fff;border:1px solid var(--ks-line);border-radius:34px;padding:26px;box-shadow:0 30px 80px rgba(20,22,20,.14);max-width:470px;justify-self:end;width:100%}
.ks-toestel-top{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--ks-line)}
.ks-av{width:44px;height:44px;border-radius:50%;background:var(--ks-g);display:grid;place-items:center}
.ks-av svg{width:22px;stroke:#fff;fill:none;stroke-width:2}
.ks-toestel-top b{display:block;font-weight:600;color:var(--ks-ink)}
.ks-toestel-top small{color:var(--ks-mut);font-size:13px}
.ks-golf{margin-left:auto;display:flex;gap:3px;align-items:center;height:26px}
.ks-golf i{width:3px;border-radius:2px;background:var(--ks-g);height:30%;animation:ks-golf 1s ease-in-out infinite}
.ks-golf i:nth-child(2){animation-delay:.12s}.ks-golf i:nth-child(3){animation-delay:.24s}.ks-golf i:nth-child(4){animation-delay:.36s}.ks-golf i:nth-child(5){animation-delay:.48s}
@keyframes ks-golf{0%,100%{height:25%}50%{height:100%}}
.ks-gesprek{display:grid;gap:12px;padding-top:20px;min-height:320px;align-content:start}
.ks-bericht{max-width:84%;padding:13px 16px;border-radius:18px;font-size:15px;line-height:1.45}
.ks-js .ks-bericht{opacity:0;transform:translateY(12px)}
.ks-bericht.ai{background:var(--ks-sand2);color:var(--ks-ink);border-bottom-left-radius:6px}
.ks-bericht.klant{justify-self:end;background:var(--ks-g);color:#fff;border-bottom-right-radius:6px}
.ks-bericht.ok{display:flex;gap:10px;align-items:center;background:rgba(28,93,58,.08);box-shadow:inset 0 0 0 1px rgba(28,93,58,.3)}
.ks-bericht.ok svg{width:18px;flex:none;stroke:var(--ks-g);fill:none;stroke-width:2}

/* slot-kop */
.ks-slot{padding:clamp(90px,14vh,160px) var(--ks-gut) clamp(30px,5vh,50px)}
.ks-home .ks-slot h2{font-weight:700;font-size:clamp(46px,8.6vw,150px)!important;line-height:.94!important;letter-spacing:-.045em;max-width:11ch}
.ks-slot-rij{display:flex;flex-wrap:wrap;gap:16px 46px;margin-top:clamp(26px,4vh,46px);align-items:center}
.ks-slot-rij a{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:500;letter-spacing:-.02em;font-size:clamp(22px,2.4vw,38px);text-decoration:none;color:var(--ks-ink);border-bottom:1px solid rgba(20,36,28,.3);padding-bottom:4px;transition:color .3s,border-color .3s}
.ks-slot-rij a:hover{color:var(--ks-g);border-color:var(--ks-g)}

@media (max-width:860px){
  .ks-demo{grid-template-columns:1fr}
  .ks-toestel{justify-self:start}
  .ks-dienst{grid-template-columns:40px 1fr 40px}
  .ks-dienst p{grid-column:2/3}
  .ks-pijl{grid-row:1;grid-column:3;width:40px;height:40px}
  .ks-hint{display:none}
  .ks-stap-num{font-size:44vw}
  .ks-hero{min-height:calc(100svh - 120px)}
}
@media (prefers-reduced-motion:reduce){
  .ks-home *,.ks-home *::before,.ks-home *::after{animation:none!important;transition:none!important}
  .ks-js .ks-bericht{opacity:1;transform:none}
  .ks-gloed .wd{color:var(--ks-ink)}
}