/* Gedeelde blokken voor 26–30. Tokens komen uit elk concept: --bg --fg --sig --mut --line --card --type --mono --display */
.kc-mono{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.kc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kc-kick{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:28px;color:var(--mut)}
.kc-h{margin:0;font-family:var(--display,var(--type));font-weight:var(--dw,600);font-size:clamp(46px,8.4vw,150px);line-height:.9;letter-spacing:-.035em}
.kc-big{font-size:clamp(56px,11vw,200px)}
.kc-lead{margin:26px 0 0;font-size:clamp(18px,1.6vw,23px);line-height:1.4;max-width:46ch}
.kc-svc{list-style:none;margin:56px 0 0;padding:0;border-top:1px solid var(--line)}
.kc-svc li{display:grid;grid-template-columns:110px minmax(0,.9fr) minmax(0,1.1fr);gap:16px;align-items:baseline;padding:20px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 35%,transparent)}
.kc-svc b{font-family:var(--display,var(--type));font-weight:var(--dw,600);font-size:clamp(30px,3.6vw,56px);letter-spacing:-.03em;line-height:1}
.kc-svc p{margin:0;font-size:17px;line-height:1.45;max-width:44ch;color:var(--mut)}
.kc-svc .kc-mono{color:var(--mut)}
.kc-stack{margin-top:44px;display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center}
.kc-stack .kc-mono{color:var(--mut)}
.kc-stack ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.kc-stack li{font-family:var(--mono);font-size:13px;letter-spacing:.02em;padding:10px 14px;border:1px solid var(--line);border-radius:999px;display:inline-flex;gap:8px;align-items:center}
.kc-stack li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sig);animation:kc-pulse 2.4s ease-in-out infinite}
.kc-stack li:nth-child(2)::before{animation-delay:-.6s}.kc-stack li:nth-child(3)::before{animation-delay:-1.2s}.kc-stack li:nth-child(4)::before{animation-delay:-1.8s}
@keyframes kc-pulse{50%{opacity:.25;transform:scale(.7)}}
.kc-nums{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;border-top:1px solid var(--line);padding-top:16px}
.kc-nums b{display:block;font-family:var(--display,var(--type));font-weight:var(--dw,600);font-size:clamp(44px,6vw,104px);letter-spacing:-.04em;line-height:1}
.kc-nums .kc-mono{display:block;margin-top:10px;color:var(--mut);max-width:24ch;line-height:1.4}
.kc-proj{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:8px 16px;align-items:end;padding:26px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 35%,transparent)}
.kc-proj h3{margin:0;grid-column:2;font-family:var(--display,var(--type));font-weight:var(--dw,600);font-size:clamp(44px,7.5vw,130px);letter-spacing:-.04em;line-height:.9}
.kc-proj p{grid-column:2;margin:8px 0 0;font-size:clamp(17px,1.5vw,21px);line-height:1.4;max-width:42ch}
.kc-proj .kc-tag{align-self:start;color:var(--mut)}
.kc-facts{grid-column:3;grid-row:1 / span 2;display:flex;gap:26px;color:var(--mut)}
.kc-facts b{display:block;font-family:var(--display,var(--type));font-size:clamp(26px,2.6vw,40px);font-weight:var(--dw,600);letter-spacing:-.02em;color:var(--fg)}
.kc-about{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:6vw;align-items:start}
.kc-name{font-size:clamp(64px,12vw,210px)}
.kc-who{margin:14px 0 0;color:var(--mut)}
.kc-geo{margin-top:30px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 16px;align-items:end;border-top:1px solid color-mix(in srgb,var(--line) 35%,transparent);padding-top:14px}
.kc-geo b{font-family:var(--display,var(--type));font-weight:var(--dw,600);font-size:clamp(24px,2.4vw,36px);letter-spacing:-.02em;line-height:1;white-space:nowrap}
.kc-geo p{margin:0;font-size:16px;line-height:1.45;max-width:46ch}
.kc-geo .kc-mono{grid-column:1 / -1;color:var(--mut)}
.kc-geo p{grid-column:1 / -1;grid-row:2;max-width:52ch}
.kc-stjan{grid-column:2;grid-row:1;justify-self:end;width:clamp(120px,11vw,200px);height:auto;margin:0;--m:linear-gradient(to bottom,#000 74%,transparent),linear-gradient(to right,transparent,#000 22%);-webkit-mask-image:var(--m);mask-image:var(--m);-webkit-mask-composite:source-in;mask-composite:intersect;filter:grayscale(1) contrast(1.08) drop-shadow(0 10px 14px rgba(0,0,0,.3));transition:filter .5s}
.kc-stjan:hover{filter:grayscale(0) drop-shadow(0 10px 14px rgba(0,0,0,.3))}
/* hover over de stad: de kathedraal maakt plaats voor de schilder van de chaos, die eerst trilt en dan tot rust komt */
.kc-geo{position:relative;outline:none}
.kc-stjan{transition:filter .5s,opacity .45s,transform .6s cubic-bezier(.2,.8,.2,1)}
.kc-bosch{grid-column:2;grid-row:1;justify-self:end;align-self:end;position:relative;width:clamp(140px,13vw,230px);aspect-ratio:560/631;pointer-events:none;opacity:0;transform:translateY(12px) scale(.94) rotate(2deg);filter:blur(8px);transition:opacity .45s,transform .8s cubic-bezier(.2,.8,.2,1),filter .8s}
.kc-bosch i{position:absolute;inset:0;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.kc-bosch .l{--m:url(/assets/bosch-line.webp);background:var(--fg)}
.kc-bosch .r{--m:url(/assets/bosch-red.webp);background:var(--sig)}
.kc-geo .kc-mono em{font-style:normal;color:var(--sig);opacity:0;transition:opacity .4s}
.kc-geo:hover .kc-stjan,.kc-geo:focus-visible .kc-stjan{opacity:0;transform:scale(.9) translateY(8px)}
.kc-geo:hover .kc-bosch,.kc-geo:focus-visible .kc-bosch{opacity:1;transform:none;filter:none;transition:opacity .5s .1s,transform .9s .1s cubic-bezier(.2,.8,.2,1),filter .9s .1s}
.kc-geo:hover .kc-bosch .r,.kc-geo:focus-visible .kc-bosch .r{animation:kbChaos .9s .1s steps(9) backwards}
.kc-geo:hover .kc-bosch .l,.kc-geo:focus-visible .kc-bosch .l{animation:kbChaos .9s .1s steps(9) reverse backwards}
.kc-geo:hover .kc-mono em,.kc-geo:focus-visible .kc-mono em{opacity:1}
@keyframes kbChaos{0%{transform:translate(9px,-6px) skewX(8deg)}15%{transform:translate(-7px,4px)}30%{transform:translate(6px,5px) skewX(-6deg)}45%{transform:translate(-4px,-3px)}60%{transform:translate(3px,2px) skewX(3deg)}75%{transform:translate(-1px,1px)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.kc-bosch i{animation:none!important}.kc-bosch{filter:none;transform:none}}
.kc-arr{display:inline-block;transition:transform .3s}.kc-cal:hover .kc-arr{transform:translateX(4px)}
.kc-tg{margin-top:30px}
.kc-tg h3{margin:0 0 12px;font-weight:400;color:var(--mut)}
.kc-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.kc-tags li{font-size:clamp(15px,1.3vw,18px);padding:9px 15px 10px;border:1px solid color-mix(in srgb,var(--fg) 40%,transparent);border-radius:999px;transition:background .25s,color .25s}
.kc-tags li:hover{background:var(--fg);color:var(--bg)}
/* over mij: hover-icoontjes per label. Erin en eruit via transitions, de beweging zelf alleen zolang je erop staat */
.kc-tags li{position:relative;cursor:default}
.kc-tags .ic{position:absolute;left:-9px;top:-17px;z-index:2;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--fg);color:var(--bg);box-shadow:0 0 0 2.5px var(--bg);pointer-events:none;opacity:0;transform:scale(.3) rotate(-40deg) translateY(8px);transition:opacity .18s,transform .35s cubic-bezier(.5,0,.6,.4)}
.kc-sk .ic{background:var(--sig);color:#fff}
.kc-tags .ic svg{width:18px;height:18px;overflow:visible}
.kc-tags .ic svg *{transform-box:fill-box;transform-origin:center}
.kc-tags li:hover .ic{opacity:1;transform:none;transition:opacity .2s,transform .55s cubic-bezier(.3,1.7,.4,1)}
.kc-sk li:hover{background:var(--sig);border-color:var(--sig);color:#fff}
.kc-tags li:hover [pathLength]{stroke-dasharray:1;animation:ktDraw .7s .1s cubic-bezier(.5,0,.2,1) backwards}
@keyframes ktDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
/* hands-on: de vinger tikt, met een kringetje */
.kt-hands:hover .a{animation:ktTap .7s .3s ease-in-out infinite}
.kt-hands .b{opacity:0}.kt-hands:hover .b{animation:ktRing .7s .3s ease-out infinite}
@keyframes ktTap{0%,100%{transform:none}40%{transform:translateY(2.5px) rotate(-6deg)}}
@keyframes ktRing{0%,35%{opacity:0;transform:scale(.2)}45%{opacity:1}100%{opacity:0;transform:scale(1.8)}}
/* nieuwsgierig: het vergrootglas speurt */
.kt-curious:hover .a{animation:ktPeek 1.8s .3s ease-in-out infinite}
@keyframes ktPeek{0%,100%{transform:none}25%{transform:translate(-2.5px,1px) rotate(-12deg)}60%{transform:translate(2.5px,-1.5px) rotate(10deg)}}
/* rustig onder druk: de pijlen duwen, de stip blijft kalm ademen */
.kt-calm:hover .a{animation:ktPushL 1s .3s cubic-bezier(.5,0,.3,1) infinite}.kt-calm:hover .b{animation:ktPushR 1s .3s cubic-bezier(.5,0,.3,1) infinite}
.kt-calm:hover .c{animation:ktBreath 3s ease-in-out infinite}
@keyframes ktPushL{50%{transform:translateX(2.5px)}}@keyframes ktPushR{50%{transform:translateX(-2.5px)}}
@keyframes ktBreath{50%{transform:scale(.72)}}
/* analytisch: de staafjes groeien op */
.kt-analytic rect{transform-origin:bottom}
.kt-analytic:hover rect{animation:ktBar .55s cubic-bezier(.3,1.6,.4,1) backwards}.kt-analytic:hover .b{animation-delay:.1s}.kt-analytic:hover .c{animation-delay:.2s}
@keyframes ktBar{from{transform:scaleY(0)}}
/* ziet kansen: twee fonkelingen */
.kt-chance:hover .a{animation:ktTwinkle 1.4s .3s ease-in-out infinite}.kt-chance:hover .b{animation:ktTwinkle 1.4s 1s ease-in-out infinite}
@keyframes ktTwinkle{0%,100%{transform:none}50%{transform:scale(.55) rotate(45deg)}}
/* bouwer: blokken worden een voor een gestapeld */
.kt-build:hover rect{animation:ktBrick .45s cubic-bezier(.3,1.5,.5,1) backwards}.kt-build:hover .b{animation-delay:.12s}.kt-build:hover .c{animation-delay:.24s}.kt-build:hover .d{animation-delay:.36s}
@keyframes ktBrick{from{transform:translateY(-9px);opacity:0}}
/* AI-implementatie: de bot kijkt rond en knippert */
.kt-ai:hover .a{animation:ktLook 2.4s .3s ease-in-out infinite}
@keyframes ktLook{0%,100%{transform:none}20%{transform:translateX(-2px)}45%{transform:translateX(2px)}62%{transform:translateX(2px) scaleY(.12)}68%{transform:translateX(2px)}}
/* procesautomatisering: het tandwiel draait */
.kt-auto:hover .a{animation:ktSpin 2.4s linear infinite}
@keyframes ktSpin{to{transform:rotate(360deg)}}
/* coding agents: de haakjes openen, de streep tikt */
.kt-code:hover .a{animation:ktBrL .9s .3s ease-in-out infinite}.kt-code:hover .b{animation:ktBrR .9s .3s ease-in-out infinite}.kt-code:hover .c{animation:ktSlash .9s .3s ease-in-out infinite}
@keyframes ktBrL{50%{transform:translateX(-1.5px)}}@keyframes ktBrR{50%{transform:translateX(1.5px)}}@keyframes ktSlash{50%{transform:rotate(14deg)}}
.kt-code .tx{position:relative}.kt-code:hover .tx::after{content:'';position:absolute;right:-.75em;bottom:.2em;width:.5em;height:2px;margin-left:3px;background:currentColor;vertical-align:-1px;animation:ktCaret 1s steps(1) infinite}
@keyframes ktCaret{50%{opacity:0}}
/* marketplaces: een stip pendelt tussen de twee kanten */
.kt-market:hover .b{animation:ktShuttle 1.4s .5s ease-in-out infinite}
@keyframes ktShuttle{0%,100%{transform:translateX(-5px)}50%{transform:translateX(5px)}}
/* growth loops: de lus draait door */
.kt-loop:hover .a{animation:ktSpin 1.6s cubic-bezier(.5,.1,.4,.9) infinite}
/* product-led growth: de lijn tekent omhoog, de pijl schiet mee */
.kt-plg:hover .b{animation:ktUp .6s .45s cubic-bezier(.3,1.7,.4,1) backwards}
@keyframes ktUp{from{transform:translate(-5px,5px);opacity:0}}
/* netwerkeffecten: knooppunten springen aan, dan de lijnen */
.kt-network:hover .n{animation:ktNode .4s cubic-bezier(.3,1.8,.4,1) backwards}
.kt-network:hover .n:nth-of-type(2){animation-delay:.08s}.kt-network:hover .n:nth-of-type(3){animation-delay:.16s}.kt-network:hover .n:nth-of-type(4){animation-delay:.24s}.kt-network:hover .n:nth-of-type(5){animation-delay:.32s}
.kt-network:hover [pathLength]{animation-delay:.35s;animation-duration:.9s}
@keyframes ktNode{from{transform:scale(0)}}
/* cold start: het sneeuwvlokje draait, ontdooit en wordt warm */
.kt-cold:hover .a{animation:ktThaw 1.6s .3s ease-in-out infinite}
@keyframes ktThaw{0%{transform:none}50%{transform:rotate(60deg) scale(.85)}100%{transform:rotate(120deg)}}
@media (prefers-reduced-motion:reduce){.kc-tags li *{animation:none!important}.kc-tags .ic{transform:none;transition:opacity .2s}}
.kc-sk li{border-color:color-mix(in srgb,var(--sig) 75%,transparent)}
.kc-yrh{display:flex;align-items:flex-end;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:22px;color:var(--mut)}
.kc-y{display:inline-flex;gap:.02em;color:var(--sig);font-family:var(--display,var(--type));font-weight:800;font-size:clamp(46px,5vw,72px);line-height:.78;letter-spacing:-.05em;margin-bottom:-2px}
.kc-y i{font-style:normal;display:inline-block;position:relative;transform:rotate(var(--r)) translateY(var(--y));transition:transform .6s cubic-bezier(.3,1.6,.4,1)}
.kc-y i::after{content:attr(data-d);position:absolute;left:.06em;top:.06em;z-index:-1;color:transparent;-webkit-text-stroke:1.5px var(--sig);opacity:.55}
.kc-y i:nth-child(1){--r:-7deg;--y:2px}.kc-y i:nth-child(2){--r:5deg;--y:-5px}.kc-y i:nth-child(3){--r:-3deg;--y:3px}.kc-y i:nth-child(4){--r:8deg;--y:-2px}
.kc-yr.in .kc-y i{animation:kcHop 1s cubic-bezier(.3,1.6,.4,1) backwards}.kc-yr.in .kc-y i:nth-child(2){animation-delay:.08s}.kc-yr.in .kc-y i:nth-child(3){animation-delay:.16s}.kc-yr.in .kc-y i:nth-child(4){animation-delay:.24s}
.kc-yrh:hover .kc-y i{transform:rotate(calc(var(--r) * -1)) translateY(calc(var(--y) * -1))}
@keyframes kcHop{from{transform:rotate(0) translateY(.5em);opacity:0}to{transform:rotate(var(--r)) translateY(var(--y));opacity:1}}
@media (prefers-reduced-motion:reduce){.kc-yr.in .kc-y i{animation:none}.kc-y i{transition:none}}
.kc-rec{position:relative;width:min(100%,400px);aspect-ratio:1}
.kc-disc{position:absolute;inset:3%;border-radius:50%;background:repeating-radial-gradient(circle at 50% 50%,#111 0 1.2px,#1c1c1c 1.6px 2.6px);box-shadow:0 0 0 1px #000;transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.kc-disc::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 30deg,transparent 0 10%,rgba(255,255,255,.09) 14%,transparent 20% 60%,rgba(255,255,255,.07) 64%,transparent 70%)}
.kc-disc i{position:absolute;inset:34%;border-radius:50%;background:var(--sig);display:grid;place-items:center;font:600 13px/1 var(--mono);color:#fff;font-style:normal;animation:kc-spin 1.8s linear infinite;animation-play-state:paused}
.kc-yr.in .kc-disc{transform:translateX(42%)}
.kc-yr.in .kc-disc i{animation-play-state:running}
@keyframes kc-spin{to{transform:rotate(360deg)}}
.kc-sleeve{position:absolute;inset:0;background:#161616;color:#f2f2ee;box-shadow:0 30px 60px rgba(0,0,0,.35);display:flex;flex-direction:column;justify-content:space-between;padding:18px}
.kc-sleeve b{font-family:var(--type);font-weight:800;font-stretch:75%;font-size:clamp(34px,4vw,58px);line-height:.9;text-transform:uppercase;letter-spacing:-.02em}
.kc-dog{position:relative;width:min(55%,230px);margin:48px 0 0 auto;transform:rotate(-6deg);transform-origin:50% 80%;transition:transform .6s cubic-bezier(.2,.8,.2,1);z-index:2}
.kc-dog img{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 18px rgba(0,0,0,.35))}
.kc-dog figcaption{position:absolute;left:8%;bottom:-6px;transform:rotate(4deg);background:var(--sig);color:#fff;padding:6px 10px 7px;line-height:1.25}
.kc-dog figcaption small{display:block;opacity:.8;text-transform:none;letter-spacing:0;font-size:11px}
.kc-dog:hover{transform:rotate(-2deg) scale(1.04)}
.kc-dog .z{position:absolute;right:16%;top:6%;font:600 18px/1 var(--mono);color:#fff;opacity:0;pointer-events:none}
.kc-dog:hover .z{animation:kc-zz 2.4s ease-out infinite}
.kc-dog:hover .z:nth-of-type(2){animation-delay:.8s}.kc-dog:hover .z:nth-of-type(3){animation-delay:1.6s}
@keyframes kc-zz{0%{opacity:0;transform:translate(0,0) scale(.7)}30%{opacity:.9}100%{opacity:0;transform:translate(26px,-46px) scale(1.2)}}
.kc-nm{position:relative;display:inline-block}
.kc-me{position:absolute;left:calc(100% - 1vw);top:-6%;width:clamp(96px,10vw,170px);margin:0;transform:rotate(7deg);transform-origin:50% 20%;transition:transform .6s cubic-bezier(.2,.8,.2,1);z-index:3}
.kc-me img{display:block;width:100%;height:auto;filter:drop-shadow(0 12px 16px rgba(0,0,0,.35))}
.kc-me figcaption{position:absolute;right:-10%;bottom:-14%;transform:rotate(-5deg);background:var(--fg);color:var(--bg);padding:6px 10px 7px;line-height:1.25;white-space:nowrap}
.kc-me figcaption small{display:block;opacity:.75;text-transform:none;letter-spacing:0;font-size:11px}
.kc-me:hover{transform:rotate(2deg) scale(1.05)}
.kc-cap{margin-top:30px;display:grid;gap:6px}
.kc-cap strong{font-size:clamp(22px,2vw,28px);font-weight:600}
.kc-cap .kc-mono{color:var(--mut)}
.kc-v{border:0;text-align:left;font:inherit;cursor:pointer;overflow:hidden}
.kc-vid{position:absolute;inset:0;background:#0a0a0a;display:grid;place-items:center}
.kc-v iframe{position:absolute;top:-15%;left:50%;height:130%;aspect-ratio:16/9;transform:translateX(-50%);border:0;pointer-events:none}
.kc-yr .kc-disc i{animation-play-state:paused!important}.kc-yr.kc-play .kc-disc i{animation-play-state:running!important}
.kc-pl{display:inline-flex;gap:10px;align-items:center;padding:10px 0 0}
.kc-vid .kc-pl{padding:10px;text-align:center}
.kc-pl i{width:38px;height:38px;border-radius:50%;background:var(--sig);color:#fff;display:grid;place-items:center;font-style:normal;font-size:13px;transition:transform .3s}
.kc-v:hover .kc-pl i{transform:scale(1.1)}
.kc-cgrid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5vw;align-items:end;margin-top:7vh}
.kc-acts{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}
.kc-talk{font:inherit;font-family:var(--type);font-weight:600;font-size:clamp(19px,1.9vw,25px);color:var(--bg);background:var(--fg);border:0;border-radius:999px;padding:22px 34px 22px 28px;cursor:pointer;display:inline-flex;gap:14px;align-items:center;transition:transform .5s cubic-bezier(.2,.8,.2,1),background .3s,color .3s}
.kc-talk:hover{background:var(--sig);color:#fff}
.kc-talk:active{transform:scale(.97)}
.kc-dot{width:10px;height:10px;border-radius:50%;background:var(--sig);animation:kc-pulse 2s ease-in-out infinite}
.kc-talk:hover .kc-dot{background:#fff}
.kc-xl{text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}
.kc-qrf{margin:0}
.kc-qrf figcaption{margin-top:8px;color:var(--mut)}
.kc-qr{background:#f2f2ee;padding:10px;width:150px;height:150px}
.kc-qr img,.kc-qr canvas{width:130px!important;height:130px!important;display:block}
.kc-foot{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;margin-top:14vh;border-top:1px solid var(--line);padding-top:12px;padding-bottom:22px;color:var(--mut)}
.kc-foot a{color:inherit}
/* intake */
body.kc-lock{overflow:hidden}
.kc-ct{position:fixed;inset:0;z-index:80;background:var(--ct-bg,#0a0a0a);color:var(--ct-fg,#f2f2ee);clip-path:circle(0 at var(--cx,50%) var(--cy,50%));visibility:hidden;transition:clip-path .9s cubic-bezier(.7,0,.2,1),visibility 0s .9s}
.kc-ct.open{clip-path:circle(150% at var(--cx,50%) var(--cy,50%));visibility:visible;transition:clip-path 1s cubic-bezier(.7,0,.2,1),visibility 0s}
.kc-ct-in{height:100%;max-width:760px;margin:0 auto;display:grid;grid-template-rows:auto 1fr auto auto;padding:16px max(16px,env(safe-area-inset-right,0px)) 18px max(16px,env(safe-area-inset-left,0px))}
.kc-ct-top{display:flex;justify-content:space-between;align-items:center;color:color-mix(in srgb,var(--ct-fg,#f2f2ee) 60%,transparent)}
.kc-ct-top>span{display:inline-flex;gap:10px;align-items:center}
.kc-live{width:8px;height:8px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 0 #3ddc84;animation:kc-pulse 1.6s infinite}
.kc-x{font:inherit;color:inherit;background:none;border:1px solid currentColor;border-radius:999px;padding:10px 16px;cursor:pointer;text-transform:inherit;letter-spacing:inherit}
.kc-chat{overflow:auto;display:flex;flex-direction:column;gap:12px;padding:8vh 0 20px;scroll-behavior:smooth}
.kc-msg{max-width:min(78%,520px);font-size:clamp(19px,2vw,26px);line-height:1.32;animation:kc-in .5s cubic-bezier(.2,.8,.2,1)}
.kc-msg.bot{align-self:flex-start}
.kc-msg.me{align-self:flex-end;background:var(--ct-fg,#f2f2ee);color:var(--ct-bg,#0a0a0a);padding:12px 18px;border-radius:22px 22px 6px 22px;font-size:clamp(17px,1.7vw,21px)}
.kc-msg.card{align-self:flex-start;border:1px solid color-mix(in srgb,var(--ct-fg,#f2f2ee) 30%,transparent);border-radius:14px;padding:16px 18px;display:grid;gap:8px;width:min(100%,460px);background:color-mix(in srgb,var(--ct-fg,#f2f2ee) 5%,transparent)}
.kc-msg.card b{font-weight:500;font-size:20px;line-height:1.3}
.kc-msg.card .kc-mono{font-size:11px;color:color-mix(in srgb,var(--ct-fg,#f2f2ee) 60%,transparent)}
.kc-st{display:inline-flex;gap:8px;align-items:center}
.kc-st i{width:7px;height:7px;border-radius:50%;background:#ffb020;animation:kc-pulse 1.4s infinite}
@keyframes kc-in{from{opacity:0;transform:translateY(12px)}}
.kc-typing{display:inline-flex;gap:5px;padding:8px 0}
.kc-typing i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.5;animation:kc-dots 1s infinite}
.kc-typing i:nth-child(2){animation-delay:.15s}.kc-typing i:nth-child(3){animation-delay:.3s}
@keyframes kc-dots{30%{opacity:1;transform:translateY(-4px)}}
.kc-ask{display:flex;gap:10px;align-items:flex-end;border:1px solid color-mix(in srgb,var(--ct-fg,#f2f2ee) 30%,transparent);border-radius:20px;padding:10px 10px 10px 18px}
.kc-ask textarea{flex:1;font:inherit;font-family:var(--type);font-size:19px;line-height:1.35;color:inherit;background:transparent;border:0;outline:none;resize:none;padding:8px 0}
.kc-ask textarea::placeholder{color:color-mix(in srgb,var(--ct-fg,#f2f2ee) 40%,transparent)}
.kc-send{width:44px;height:44px;border-radius:50%;border:0;background:var(--sig);color:#fff;font-size:20px;cursor:pointer}
.kc-note{margin:12px 0 0;color:color-mix(in srgb,var(--ct-fg,#f2f2ee) 45%,transparent);font-size:10px}
.kc-how{margin-bottom:16vh}
.kc-hw{font-size:clamp(40px,6.4vw,112px);max-width:14ch}
.kc-steps{list-style:none;margin:56px 0 0;padding:0;border-top:1px solid var(--line)}
.kc-steps li{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:16px 24px;align-items:baseline;padding:24px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 35%,transparent);transition:background .3s}
.kc-steps li:hover{background:color-mix(in srgb,var(--fg) 4%,transparent)}
.kc-sn{color:var(--mut);transition:color .3s}
.kc-steps li:hover .kc-sn{color:var(--sig)}
.kc-steps b{font-family:var(--display,var(--type));font-weight:var(--dw,600);font-size:clamp(28px,3.2vw,48px);letter-spacing:-.03em;line-height:1}
.kc-steps b small{font-size:11px;letter-spacing:.02em;color:var(--mut);vertical-align:middle;margin-left:8px}
.kc-steps p{margin:10px 0 0;font-size:17px;line-height:1.45;max-width:52ch;color:var(--mut);transition:color .3s}
.kc-steps li:hover p{color:var(--fg)}
.kc-pr{font-family:var(--display,var(--type));font-weight:var(--dw,600);font-size:clamp(30px,3.6vw,56px);letter-spacing:-.03em;line-height:1;text-align:right;white-space:nowrap}
.kc-pr small{display:block;font-size:11px;font-weight:400;letter-spacing:.02em;color:var(--mut);margin-bottom:6px}
.kc-free{color:var(--sig)}
.kc-vat{margin:18px 0 32px;color:var(--mut)}
@media (min-width:821px){.kc-steps li{padding-right:56px}} /* ruimte voor het vaste lipje "Over mij" rechts */
@media (max-width:820px){.kc-steps li{grid-template-columns:minmax(0,1fr);gap:10px}.kc-pr{text-align:left;white-space:normal}}
@media (max-width:820px){.kc-svc li,.kc-proj{grid-template-columns:minmax(0,1fr)}.kc-svc li>*,.kc-proj>*{grid-column:1!important;grid-row:auto!important}.kc-nums{grid-template-columns:1fr 1fr}.kc-about,.kc-cgrid{grid-template-columns:minmax(0,1fr)}.kc-geo{grid-template-columns:minmax(0,1fr)}.kc-geo{grid-template-columns:auto minmax(0,1fr)}.kc-geo b{white-space:normal}.kc-yr.in .kc-disc{transform:translateX(26%)}.kc-rec{width:74%}.kc-dog{margin-right:4%}.kc-me{left:calc(100% - 4vw);width:22vw;top:-8%}.kc-me figcaption small{display:none}.kc-msg{max-width:90%}}
@media (prefers-reduced-motion:reduce){.kc-ct,.kc-ct.open{transition:none}.kc-disc i,.kc-stack li::before,.kc-dot,.kc-live,.kc-st i{animation:none}}
.kc-noclip .kc-sleeve .kc-pl{display:none}.kc-noclip .kc-v{pointer-events:none}
.kc-cal{font-family:var(--type);font-weight:600;font-size:clamp(17px,1.5vw,21px);color:var(--fg);text-decoration:none;border:1.5px solid var(--fg);border-radius:999px;padding:20px 28px;display:inline-flex;gap:12px;align-items:center;transition:background .3s,color .3s,transform .5s cubic-bezier(.2,.8,.2,1)}
.kc-cal .kc-mono{font-size:11px;opacity:.7;border:1px solid currentColor;border-radius:99px;padding:3px 7px}
.kc-cal:hover{background:var(--fg);color:var(--bg)}
.kc-cal:active{transform:scale(.97)}
.kc-cal-in{font-size:15px;padding:12px 18px;margin-top:6px;color:var(--ct-fg,inherit);border-color:currentColor}
.kc-cal-in:hover{background:var(--sig);color:#fff;border-color:var(--sig)}
/* Cal.com-agenda in een eigen venster op de site */
.kc-calbox{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.72);backdrop-filter:blur(6px);display:grid;place-items:center;padding:16px}
.kc-calin{width:min(1000px,100%);height:min(720px,100%);background:#111;border:1px solid var(--line,#2a2a2a);display:flex;flex-direction:column;overflow:hidden}
.kc-calhd{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line,#2a2a2a);color:var(--mut,#999)}
.kc-calx{background:none;border:0;color:var(--fg,#f2f2ee);font-size:26px;line-height:1;cursor:pointer;padding:0 4px}
#kc-calembed{flex:1;overflow:auto;position:relative}
.kc-calwait{margin:0;position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:var(--mut,#999);padding:20px}
.kc-calwait a{color:var(--sig,#ff4f00)}
.kc-calbox.ready .kc-calwait{display:none}
#kc-calembed:has(iframe) .kc-calwait{display:none}