/* Het kantoor van NedDev: homepage-sectie. Alles geprefixt met kt-, geen globale regels.
   Mona Sans komt van de pagina zelf (@font-face staat in de homepage). */
.kt{
  --kt-wit:#fff; --kt-inkt:#0a0a0a; --kt-grijs:#6b665f; --kt-lijn:#e8e5e1; --kt-vlak:#f3f2f0; --kt-oranje:#F5480F;
  --kt-zij:clamp(20px,2.6vw,48px); --kt-uit:cubic-bezier(.16,1,.3,1);
  position:relative; padding:clamp(56px,7vw,120px) var(--kt-zij); background:var(--kt-wit); color:var(--kt-inkt);
  font-family:'Mona Sans',system-ui,sans-serif; font-stretch:88%; font-size:16px; line-height:1.55;
}
:where(.kt) *,:where(.kt) *::before,:where(.kt) *::after{box-sizing:border-box}
:where(.kt) :where(h2,h3,h4,p,ol,ul){margin:0}
.kt :focus-visible{outline:2px solid var(--kt-oranje);outline-offset:3px}
.kt [hidden]{display:none !important}

/* Kop */
.kt-boven{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(28px,3.4vw,56px)}
.kt-kop{font-weight:620;font-stretch:78%;font-size:clamp(34px,4.4vw,76px);line-height:1.02;letter-spacing:-.022em;text-wrap:balance}
.kt-zin{margin-top:14px;max-width:46ch;color:var(--kt-grijs);font-size:clamp(17px,1.25vw,21px);line-height:1.45;text-wrap:pretty}
.kt-geluid{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;border:0;background:none;color:var(--kt-grijs);font:inherit;font-size:14px;cursor:pointer;transition:color .3s}
.kt-geluid:hover{color:var(--kt-inkt)}
.kt-geluid svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.kt-geluid .kt-gl-uit{display:none}
.kt-geluid[aria-pressed=false] .kt-gl-aan{display:none}
.kt-geluid[aria-pressed=false] .kt-gl-uit{display:inline}

/* Raster: kantoor links, bureaulijst en paneel rechts */
.kt-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(320px,1fr);gap:clamp(28px,4vw,72px);align-items:start}
.kt-links{position:sticky;top:clamp(72px,9vh,96px)}
.kt-zaal{position:relative;max-width:1040px}
.kt-onder{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;margin-top:18px;color:var(--kt-grijs);font-size:15px}
.kt-onder a,.kt-lnk{color:var(--kt-inkt);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px;font-weight:560;transition:color .3s}
.kt-onder a:hover,.kt-lnk:hover{color:var(--kt-oranje)}
.kt-stand{font-variant-numeric:tabular-nums}

/* Tekening */
.kt-tekening{display:block;width:100%;height:auto;overflow:visible}
.kt-tekening path,.kt-tekening circle,.kt-tekening ellipse,.kt-tekening rect{vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.kt-s{fill:#fff;stroke:var(--kt-inkt);stroke-width:1.25}
.kt-i{fill:none;stroke:var(--kt-inkt);stroke-width:1.25}
.kt-c{fill:none;stroke:var(--kt-grijs);stroke-width:1;opacity:.6}
.kt-g{fill:none;stroke:var(--kt-grijs);stroke-width:1}
.kt-gw{fill:#fff;stroke:var(--kt-grijs);stroke-width:1}
.kt-w{fill:none;stroke:#fff}
.kt-f{fill:none;stroke:var(--kt-lijn);stroke-width:1.25}
.kt-wand{fill:#fff;stroke:#d6d1cb;stroke-width:1}
.kt-route{fill:none;stroke:#bdb7b0;stroke-width:1.4;stroke-dasharray:.5 7}
.kt-ingang{fill:#fff;stroke:var(--kt-grijs);stroke-width:1}
.kt-oog{fill:var(--kt-inkt)}
.kt-punt{fill:var(--kt-grijs)}
.kt-zone{fill:none;stroke:var(--kt-oranje);stroke-width:1.5;opacity:0;transition:opacity .4s var(--kt-uit)}
.kt-po{fill:#fff;stroke:var(--kt-oranje);stroke-width:1.25}
.kt-denk circle{fill:var(--kt-inkt);opacity:0;transition:opacity .2s}
.kt-ring,.kt-vink{opacity:0}
.kt-stip{opacity:0;pointer-events:none}
.kt-stip-ring{fill:#fff}
.kt-stip-kern{fill:var(--kt-oranje)}
.kt-papier{opacity:0;transform:translateY(-8px);transition:opacity .35s,transform .5s var(--kt-uit)}
.kt-oog{transform-box:fill-box;transform-origin:center}
.kt-ogen,.kt-hoofd{transition:transform .5s var(--kt-uit)}

/* Opkijken: hover, focus, gekozen of net iets ontvangen */
.kt-bureau.kt-hover .kt-zone,.kt-bureau.kt-aan .kt-zone{opacity:1}
.kt-bureau.kt-hover .kt-hoofd,.kt-bureau.kt-aan .kt-hoofd,.kt-bureau.kt-kijk .kt-hoofd{transform:translateY(-2.5px) rotate(-5deg)}
.kt-bureau.kt-hover .kt-ogen,.kt-bureau.kt-aan .kt-ogen,.kt-bureau.kt-kijk .kt-ogen{transform:translate(-.6px,-1.6px)}
.kt-bureau.kt-heeft .kt-papier{opacity:1;transform:none}

/* Rust: kleine bezigheden */
.kt-oog{animation:kt-knipper 6s infinite}
#kt-b-joost .kt-oog{animation-delay:-2.1s}
#kt-b-mirjam .kt-oog{animation-delay:-3.7s;animation-duration:7s}
#kt-b-daan .kt-oog{animation-delay:-1.2s;animation-duration:5.4s}
@keyframes kt-knipper{0%,95%,100%{transform:none}97%{transform:scaleY(.12)}}

#kt-b-daan .kt-arm{animation:kt-typ-rust 5s ease-in-out infinite}
#kt-b-daan .kt-arm-r{animation-delay:.12s}
#kt-b-joost .kt-arm{animation:kt-typ-rust 6.5s ease-in-out -2s infinite}
#kt-b-joost .kt-arm-r{animation-delay:-1.88s}
@keyframes kt-typ-rust{0%,46%,100%{transform:none}5%,15%,25%,35%{transform:rotate(-3.5deg)}10%,20%,30%,40%{transform:rotate(1deg)}}

#kt-b-mirjam .kt-arm-r{animation:kt-reken 4.2s ease-in-out infinite}
@keyframes kt-reken{0%,52%,100%{transform:none}8%,24%,40%{transform:rotate(-4deg)}16%,32%,48%{transform:none}}
.kt-blz{animation:kt-blad 9s var(--kt-uit) infinite}
@keyframes kt-blad{0%,62%{transform:none;opacity:1}72%{transform:translate(-14px,-7px);opacity:0}73%{transform:translate(0,-6px);opacity:0}84%,100%{transform:none;opacity:1}}

#kt-b-fien .kt-arm-r{animation:kt-sorteer 7s ease-in-out infinite}
@keyframes kt-sorteer{0%,48%,100%{transform:none}58%,70%{transform:rotate(-9deg)}80%{transform:none}}
.kt-sorteer{animation:kt-env 7s ease-in-out infinite}
@keyframes kt-env{0%,50%,100%{transform:none;opacity:1}60%{transform:translate(-3px,-9px);opacity:1}68%{transform:translate(-5px,-14px);opacity:0}78%{transform:none;opacity:0}88%{opacity:1}}
.kt-env-in{animation:kt-inschuif 8s var(--kt-uit) -3s infinite}
@keyframes kt-inschuif{0%{transform:translate(20px,11.5px);opacity:0}10%{transform:translate(20px,11.5px);opacity:1}32%,86%{transform:none;opacity:1}96%,100%{transform:none;opacity:0}}

.kt-tel{animation:kt-tril-rust 11s linear 2s infinite}
.kt-ring{animation:kt-ring-rust 11s steps(1) 2s infinite}
@keyframes kt-tril-rust{0%,13%,100%{transform:none}1%,3%,5%,9%,11%{transform:translateX(-1px)}2%,4%,6%,10%,12%{transform:translateX(1px)}7%,8%{transform:none}}
@keyframes kt-ring-rust{0%,6%,9%,13%,100%{opacity:0}1%,3%,5%,10%,12%{opacity:1}2%,4%,11%{opacity:.35}}

.kt-st1,.kt-st2{animation:kt-stoom 3.6s ease-out infinite;opacity:0}
.kt-st2{animation-delay:1.8s}
@keyframes kt-stoom{0%{transform:translateY(3px);opacity:0}30%{opacity:.8}100%{transform:translateY(-6px);opacity:0}}
.kt-blad{animation:kt-wieg 7s ease-in-out infinite alternate}
@keyframes kt-wieg{from{transform:rotate(-1.4deg)}to{transform:rotate(1.4deg)}}
.kt-vink{animation:kt-vink 10s steps(1) infinite}
@keyframes kt-vink{0%,40%{opacity:0}45%,88%{opacity:1}92%,100%{opacity:0}}

/* Aan het werk */
.kt-bureau.kt-denkt .kt-arm{animation:none}
.kt-bureau.kt-denkt .kt-denk circle{opacity:1;animation:kt-denk 1.1s ease-in-out infinite}
.kt-bureau.kt-denkt .kt-denk circle:nth-child(2){animation-delay:.18s}
.kt-bureau.kt-denkt .kt-denk circle:nth-child(3){animation-delay:.36s}
@keyframes kt-denk{0%,100%{opacity:.15;transform:none}40%{opacity:1;transform:translateY(-2px)}}
.kt-bureau.kt-typt .kt-arm{animation:kt-typ .24s ease-in-out infinite}
.kt-bureau.kt-typt .kt-arm-r{animation-delay:-.12s}
@keyframes kt-typ{0%,100%{transform:none}50%{transform:rotate(-4deg)}}
.kt-bureau.kt-belt .kt-tel{animation:kt-tril .1s linear infinite}
.kt-bureau.kt-belt .kt-ring{animation:kt-ring .3s steps(1) infinite}
@keyframes kt-tril{0%,100%{transform:translateX(-1px)}50%{transform:translateX(1px)}}
@keyframes kt-ring{0%{opacity:1}50%{opacity:.3}}

/* Binnenkomst: eerst de kamer, dan de bureaus een voor een, dan de bordjes */
.kt-voor .kt-kamer,.kt-voor .kt-route,.kt-voor .kt-bureau,.kt-voor .kt-bordje{opacity:0}
.kt-voor .kt-bureau{transform:translateY(16px)}
.kt-binnen .kt-kamer,.kt-binnen .kt-route{transition:opacity .9s ease}
.kt-binnen .kt-route{transition-delay:.7s}
.kt-binnen .kt-bureau{transition:opacity .6s ease,transform 1s var(--kt-uit)}
.kt-binnen #kt-b-fien{transition-delay:.15s}
.kt-binnen #kt-b-daan{transition-delay:.27s}
.kt-binnen #kt-b-joost{transition-delay:.39s}
.kt-binnen #kt-b-mirjam{transition-delay:.51s}
.kt-binnen .kt-bordje{transition:opacity .6s ease .9s,color .3s,border-color .3s}

/* Buiten beeld of tab weg: alles stil */
.kt.kt-slaap .kt-tekening *{animation-play-state:paused !important}

/* Bureaus als knoppen boven de tekening */
.kt-plek{position:absolute;padding:0;margin:0;font:inherit;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;color:var(--kt-grijs)}
.kt-plek:focus-visible{outline:none}
.kt-bordje{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;font-size:13px;line-height:1;padding:5px 8px;background:rgba(255,255,255,.92);border:1px solid var(--kt-lijn);border-radius:2px;color:var(--kt-grijs);transition:color .3s,border-color .3s}
.kt-plek:hover .kt-bordje,.kt-plek.kt-aan .kt-bordje{color:var(--kt-inkt);border-color:#cfcac4}
.kt-plek:focus-visible .kt-bordje{outline:2px solid var(--kt-oranje);outline-offset:2px;color:var(--kt-inkt)}

/* Bureaulijst (accordeon) */
.kt-uitleg{color:var(--kt-grijs);max-width:40ch;margin-bottom:18px}
.kt-lijst{list-style:none;padding:0;border-top:1px solid var(--kt-lijn)}
.kt-item{border-bottom:1px solid var(--kt-lijn)}
.kt-kies{display:flex;align-items:baseline;gap:14px;width:100%;min-height:64px;padding:14px 0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.kt-kies-naam{font-weight:640;font-stretch:78%;font-size:clamp(24px,1.9vw,30px);line-height:1.1;letter-spacing:-.012em;transition:color .3s}
.kt-kies-rol{color:var(--kt-grijs);font-size:15px}
.kt-plus{position:relative;margin-left:auto;align-self:center;width:14px;height:14px;flex:none}
.kt-plus::before,.kt-plus::after{content:'';position:absolute;left:0;right:0;top:50%;height:1.25px;background:var(--kt-inkt);transition:transform .45s var(--kt-uit)}
.kt-plus::after{transform:rotate(90deg)}
.kt-kies[aria-expanded=true] .kt-plus::after{transform:rotate(0)}
.kt-kies[aria-expanded=true] .kt-kies-naam{color:var(--kt-oranje)}
@media (hover:hover){.kt-kies:hover .kt-kies-naam{color:var(--kt-oranje)}}

/* Paneel */
.kt-paneel{padding:2px 0 26px;animation:kt-open .55s var(--kt-uit) both}
@keyframes kt-open{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.kt-wie{font-size:17px;line-height:1.5;margin-bottom:20px;max-width:44ch}
.kt-label{display:block;margin-top:4px;font-weight:600;font-stretch:92%}
.kt-hint{color:var(--kt-grijs);font-size:14px;margin:2px 0 10px}
.kt-tekst{display:block;width:100%;min-height:150px;resize:vertical;padding:12px 14px;border:1px solid #d6d1cb;border-radius:2px;background:#fff;color:var(--kt-inkt);font:inherit;font-size:16px;line-height:1.5;transition:border-color .3s}
.kt-tekst:hover{border-color:#bdb7b0}
.kt-tekst:focus{outline:none;border-color:var(--kt-inkt)}
.kt-tekst:focus-visible{outline:1px solid var(--kt-oranje);outline-offset:0;border-color:var(--kt-oranje)}
.kt-tekst:disabled{background:var(--kt-vlak);color:var(--kt-grijs)}
.kt-voorbeelden{display:flex;flex-wrap:wrap;align-items:center;gap:0 18px;margin-top:8px}
.kt-vb-kop{color:var(--kt-grijs);font-size:14px;width:100%}
.kt-vb{min-height:44px;padding:0;border:0;background:none;color:var(--kt-inkt);font:inherit;font-size:15px;text-align:left;cursor:pointer;text-decoration:underline;text-decoration-color:#cfcac4;text-underline-offset:4px;transition:color .3s,text-decoration-color .3s}
.kt-vb:hover{color:var(--kt-oranje);text-decoration-color:currentColor}
.kt-vb:disabled{color:var(--kt-grijs);cursor:default}
.kt-acties{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px}
.kt-knop{position:relative;display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 24px;border:0;border-radius:2px;background:var(--kt-oranje);color:#fff;font:inherit;font-weight:620;font-stretch:96%;cursor:pointer;overflow:hidden;isolation:isolate}
.kt-knop::before{content:'';position:absolute;inset:0;background:var(--kt-inkt);transform:translateY(101%);transition:transform .55s var(--kt-uit);z-index:-1}
.kt-knop:hover::before{transform:none}
.kt-knop svg{width:18px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--kt-uit)}
.kt-knop:hover svg{transform:translateX(3px)}
.kt-knop:disabled{background:#d6d1cb;cursor:default}
.kt-knop:disabled::before{display:none}
.kt-teller{color:var(--kt-grijs);font-size:13px;font-variant-numeric:tabular-nums}
.kt-fout{margin-top:16px;padding:12px 14px;background:var(--kt-vlak);border-radius:2px}

/* Wat er op het bureau ligt */
.kt-gelegd{margin:4px 0 0;padding:12px 14px;background:var(--kt-vlak);border-radius:2px}
.kt-gelegd-kop{font-size:14px;color:var(--kt-grijs)}
.kt-gelegd-tekst{font-size:15px;color:var(--kt-grijs);white-space:pre-line;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Werk: stappen en briefje */
.kt-werk{margin-top:4px}
.kt-status{margin-top:20px;color:var(--kt-grijs);font-size:15px}
.kt-status::after{content:'';display:inline-block;width:1.2em;text-align:left;animation:kt-puntjes 1.2s steps(4) infinite}
@keyframes kt-puntjes{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
.kt-stappen{list-style:none;padding:0;margin-top:14px}
.kt-stappen:empty{display:none}
.kt-stappen li{position:relative;padding:5px 0 5px 24px;font-size:15px;color:var(--kt-grijs);animation:kt-stap .45s var(--kt-uit) both}
.kt-stappen li::before{content:'';position:absolute;left:2px;top:12px;width:9px;height:5px;border-left:1.4px solid var(--kt-inkt);border-bottom:1.4px solid var(--kt-inkt);transform:rotate(-45deg)}
.kt-stappen li:last-child{color:var(--kt-inkt)}
@keyframes kt-stap{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.kt-briefje{margin-top:22px;padding:22px 22px 18px;border:1px solid var(--kt-lijn);border-top:2px solid var(--kt-inkt);border-radius:2px;background:#fff;animation:kt-open .6s var(--kt-uit) both}
.kt-briefje:focus{outline:none}
.kt-bj-van{color:var(--kt-grijs);font-size:14px}
.kt-bj-soort{margin-top:4px;font-weight:640;font-stretch:80%;font-size:clamp(22px,1.7vw,27px);line-height:1.12;letter-spacing:-.01em;text-wrap:balance}
.kt-bj-sam{margin-top:10px}
.kt-bj-kop{margin-top:18px;font-size:14px;font-weight:600;font-stretch:92%;color:var(--kt-grijs)}
.kt-bj-actie{margin-top:4px}
.kt-bj-concept-wrap{position:relative;margin-top:8px;padding:14px 14px 14px;background:var(--kt-vlak);border-radius:2px}
.kt-bj-concept{white-space:pre-line;font-size:15px;line-height:1.55;padding-bottom:36px}
.kt-kopieer{position:absolute;right:6px;bottom:4px;min-height:44px;padding:0 10px;border:0;background:none;color:var(--kt-inkt);font:inherit;font-size:14px;font-weight:560;cursor:pointer;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#bdb7b0}
.kt-kopieer:hover{color:var(--kt-oranje)}
.kt-bj-mock{margin-top:12px;color:var(--kt-grijs);font-size:13px}
.kt-na{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px;margin-top:18px;animation:kt-open .6s var(--kt-uit) .25s both}
.kt-vervolg{color:var(--kt-grijs)}
.kt-opnieuw{min-height:44px;padding:0;border:0;background:none;color:var(--kt-grijs);font:inherit;font-size:15px;cursor:pointer;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#cfcac4}
.kt-opnieuw:hover{color:var(--kt-inkt)}

/* Smal: kantoor boven, lijst eronder */
@media (max-width:960px){
  .kt-grid{grid-template-columns:minmax(0,1fr)}
  .kt-links{position:static}
}
@media (max-width:600px){
  .kt-boven{flex-direction:column;align-items:flex-start;gap:10px}
  .kt-geluid{order:-1;align-self:flex-end;margin-bottom:-8px}
  .kt-zaal{margin:0 -6px}
  .kt-bordje{font-size:11.5px;padding:4px 6px}
  .kt-onder{flex-direction:column}
  .kt-acties{flex-wrap:wrap}
  .kt-knop{width:100%;justify-content:center}
  .kt-briefje{padding:18px 16px 14px}
}

/* Minder beweging: stilstaand kantoor, alles bruikbaar */
@media (prefers-reduced-motion:reduce){
  .kt *,.kt *::before,.kt *::after{animation:none !important;transition:none !important}
  .kt .kt-bureau.kt-denkt .kt-denk circle{opacity:1}
}