/* ==========================================================================
   Tendro Design System · tendro-ds.css · v1.0 (2026-10-05)
   Afgeleid van tendro-website-deploy-v12 (tendro.css). Whitelabel via tokens.
   Fonts (in <head>):
   <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Archivo+Narrow:wght@500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Archivo:wght@400;500;600;700&display=swap" rel="stylesheet">
   ========================================================================== */

:root{
  /* kleur */
  --ink:#0e0e0e;          /* tekst, lijnen, primaire knop */
  --ivory:#f4f1ea;        /* pagina-achtergrond */
  --cream:#ebe6db;        /* vlakken, hover, figuren */
  --surface:#ffffff;      /* mock-UI, copy-blok, invoer */
  --paper:#fbf8f1;        /* "eigen"/gemarkeerde kolom */
  --sienna:#c45a3d;       /* enige accent: signaal, nummers, pijlen */
  --sienna-soft:#e9b9aa;  /* hover op donker, glow */
  --ash:#7a756c;          /* muted tekst, labels, meta */
  --rule:#dad5cc;         /* borders, scheidingen */
  --grid:#e6e1d6;         /* tekenraster 40px */
  /* status (alleen functioneel) */
  --ok:#4a8463; --ok-strong:#1b6a4d; --ok-bg:#eef2ee;
  --warn:#d9a04a; --err:#c4503d;
  /* type */
  --f-display:'Bricolage Grotesque',sans-serif;
  --f-label:'Archivo Narrow',sans-serif;
  --f-mono:'JetBrains Mono',monospace;
  --f-body:'Archivo',system-ui,sans-serif;
  /* maat */
  --radius:2px;
  --wrap:1400px; --gutter:56px;
  --ease:cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--f-body);font-size:14px;line-height:1.5;color:var(--ink);
  background:var(--ivory);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:40px 40px;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.no-grid{background-image:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0}
a{color:inherit;text-decoration:none}

/* ---------- type helpers ---------- */
.display{font-family:var(--f-display);letter-spacing:-.025em}
.narrow{font-family:var(--f-label)}
.mono{font-family:var(--f-mono);letter-spacing:-.02em}
.sienna{color:var(--sienna)}
.ash{color:var(--ash)}
.label{font-family:var(--f-label);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.meta{font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--ash)}
.meta b{color:var(--ink);font-weight:500}
.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--sienna);font-weight:700;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:'';width:24px;height:1px;background:var(--sienna)}

.t-hero{font-family:var(--f-display);font-weight:800;font-size:clamp(44px,7.4vw,108px);line-height:.92;letter-spacing:-.045em;text-wrap:balance}
.t-hero em,.t-h1 em,.t-h2 em{font-style:normal;color:var(--sienna)}
.t-hero .stroke{-webkit-text-stroke:1.5px var(--ink);color:transparent}
.t-h1{font-family:var(--f-display);font-weight:800;font-size:clamp(40px,6vw,88px);line-height:.92;letter-spacing:-.045em;text-wrap:balance}
.t-h2{font-family:var(--f-display);font-weight:700;font-size:clamp(28px,3.4vw,46px);line-height:1;letter-spacing:-.03em;text-wrap:balance}
.t-h3{font-family:var(--f-display);font-weight:700;font-size:22px;line-height:1.1;letter-spacing:-.02em}
.t-lede{font-size:17px;line-height:1.55;max-width:56ch;text-wrap:pretty}
.t-lede b{font-weight:600}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.sec{padding:96px 0;border-bottom:1px solid var(--rule)}
.sec:last-child{border-bottom:none}
.sec-head{display:grid;grid-template-columns:120px 1fr auto;gap:32px;align-items:end;margin-bottom:56px}
.sec-num{font-family:var(--f-display);font-weight:600;font-size:72px;line-height:.9;letter-spacing:-.04em;color:var(--sienna)}
.sec-num::before{content:'/'}
.sec-meta{font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--ash);text-align:right;line-height:1.7}
.sec-meta b{color:var(--ink);font-weight:500}

/* ---------- topbar ---------- */
.topbar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:48px;align-items:center;padding:22px var(--gutter);border-bottom:1px solid var(--rule);background:rgba(244,241,234,.92);backdrop-filter:saturate(140%) blur(8px);position:sticky;top:0;z-index:50}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:700;font-size:22px;letter-spacing:-.02em}
.brand-mark{width:24px;height:24px;border-radius:3px;background:var(--ink);color:var(--ivory);display:grid;place-items:center;font-family:var(--f-label);font-weight:800;font-size:13px;transform:rotate(-6deg);transition:transform .25s ease}
.brand:hover .brand-mark{transform:rotate(0)}
.nav{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.nav a{color:var(--ash);display:flex;gap:6px;align-items:baseline;transition:color .2s}
.nav a:hover,.nav a.on{color:var(--ink)}
.nav a .num{color:var(--sienna);font-weight:700}
.nav a.on::after{content:'';display:block;width:14px;height:1px;background:var(--sienna);margin:6px auto 0}
.top-right{display:flex;gap:18px;align-items:center;justify-content:flex-end}

/* ---------- knoppen ---------- */
.btn{font-family:var(--f-label);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:13px;padding:14px 22px;display:inline-flex;align-items:center;gap:14px;border:1px solid var(--ink);border-radius:0;transition:transform .2s ease,background .2s,color .2s}
.btn .arr{color:var(--sienna);font-family:var(--f-display);font-weight:700;font-size:18px;line-height:1;transition:transform .2s}
.btn:hover .arr{transform:translateX(3px)}
.btn-primary{background:var(--ink);color:var(--ivory)}
.btn-primary:hover{transform:translateY(-1px);background:#1d1d1d}
.btn-outline{background:transparent;color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--ivory)}
.btn-outline:hover .arr{color:var(--sienna-soft)}
.btn-quiet{background:transparent;border-color:var(--rule);padding:10px 14px;font-size:12px}
.btn-quiet:hover{border-color:var(--ink)}
.btn-sm{padding:10px 16px;font-size:12px}
.btn-ghost{font-family:var(--f-label);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:13px;padding:14px 0;display:inline-flex;gap:10px;border-bottom:1px solid var(--ink)}
.btn-ghost:hover{color:var(--sienna);border-color:var(--sienna)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}

/* ---------- tags & pins ---------- */
.tag{font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;padding:7px 12px;border:1px solid var(--rule);background:var(--surface);display:inline-block}
.tag.plus::before{content:'+ ';color:var(--sienna);font-weight:700}
.tag.hot{background:var(--sienna);border-color:var(--sienna);color:var(--ivory)}
.tag.ink{background:var(--ink);border-color:var(--ink);color:var(--ivory)}
.tag.ok{color:var(--ok-strong);border-color:var(--ok)}
.pin{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle}
.pin.on{background:var(--sienna)}                         /* lopend / hot */
.pin.half{background:linear-gradient(90deg,var(--ash) 50%,transparent 50%);border:1px solid var(--ash)} /* in selectie */
.pin.out{border:1px dashed var(--ash)}                     /* op radar */

/* ---------- vlakken ---------- */
.panel{background:var(--ivory);border:1px solid var(--rule);padding:32px}
.panel.cream{background:var(--cream)}
.frame{background:var(--surface);border:1px solid var(--ink);border-radius:var(--radius);overflow:hidden}
.frame-chrome{height:36px;border-bottom:1px solid var(--rule);display:flex;align-items:center;gap:12px;padding:0 16px;font-family:var(--f-mono);font-size:10px;color:var(--ash);text-transform:uppercase;letter-spacing:.1em}
.frame-body{padding:24px}
.copyblock{background:var(--surface);border:1px solid var(--ink);padding:28px 24px 24px;position:relative}
.copyblock>.tag{position:absolute;top:-1px;left:-1px;background:var(--sienna);border-color:var(--sienna);color:var(--ivory)}
.inkblock{background:var(--ink);color:var(--ivory);padding:36px 32px}
.inkblock .meta{color:var(--sienna-soft)}
.inkblock em{font-style:normal;color:var(--sienna)}
.mark{background:var(--paper);border-left:3px solid var(--sienna);padding-left:14px} /* "eigen" / gemarkeerd */

/* ---------- pijler-grid (3 kolommen met lijnvoering) ---------- */
.cols{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.cols.c2{grid-template-columns:repeat(2,1fr)} .cols.c4{grid-template-columns:repeat(4,1fr)}
.col{border-right:1px solid var(--rule);padding:36px 32px 40px;background:var(--ivory);display:flex;flex-direction:column;transition:background .25s}
.col:last-child{border-right:none}
.col:hover{background:var(--cream)}
.col-num{font-family:var(--f-display);font-weight:700;font-size:28px;letter-spacing:-.03em;color:var(--sienna);margin-bottom:8px}
.col-num::before{content:'/'}
.col-name{font-family:var(--f-display);font-weight:800;font-size:48px;letter-spacing:-.04em;line-height:1;margin-bottom:18px}
.col-text{font-size:16px;line-height:1.5;max-width:32ch;margin-bottom:28px;text-wrap:pretty}
.col-list{font-family:var(--f-mono);font-size:11px;color:var(--ash);text-transform:uppercase;letter-spacing:.08em;line-height:2;margin-top:auto;list-style:none}
.col-list b{color:var(--ink);font-weight:500}

/* ---------- KPI / getal-callout ---------- */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));border:1px solid var(--rule)}
.stat{padding:14px 16px;border-right:1px solid var(--rule);background:var(--ivory);display:flex;flex-direction:column;gap:4px}
.stat:last-child{border-right:none}
.stat-n{font-family:var(--f-display);font-weight:800;font-size:32px;letter-spacing:-.04em;line-height:1}
.stat-l{font-family:var(--f-mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--ash)}
.stat.hot{background:var(--paper);border-left:3px solid var(--sienna)}
.stat.hot .stat-n{color:var(--sienna)}
.bignum{font-family:var(--f-display);font-weight:800;font-size:clamp(96px,14vw,200px);letter-spacing:-.06em;line-height:.9;color:var(--sienna)}
.bignum small{font-size:.3em;letter-spacing:-.02em;color:var(--ink)}

/* ---------- pipeline (9 fases) ---------- */
.pipeline{display:grid;grid-template-columns:repeat(var(--n,9),1fr);border:1px solid var(--ink);height:54px}
.pipeline .ph{border-right:1px solid var(--rule);padding:6px;display:flex;flex-direction:column;justify-content:space-between;font-family:var(--f-mono);font-size:9px;color:var(--ash);text-transform:uppercase;letter-spacing:.05em}
.pipeline .ph:last-child{border-right:none}
.pipeline .ph .n{font-family:var(--f-display);font-weight:700;font-size:16px;color:var(--ink);letter-spacing:-.02em}
.pipeline .ph.done{background:var(--cream)}
.pipeline .ph.hot{background:var(--sienna);color:var(--ivory)}
.pipeline .ph.hot .n{color:var(--ivory)}

/* ---------- voortgangsbalk ---------- */
.bar{height:6px;background:var(--rule);position:relative}
.bar>i{position:absolute;inset:0 auto 0 0;background:var(--ink)}
.bar>i.s{background:var(--sienna)}

/* ---------- data-rijen / tabel ---------- */
.rows{border-top:1px solid var(--ink)}
.row{display:grid;grid-template-columns:var(--cols,48px 1fr auto);gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--rule);transition:background .15s}
.row:hover{background:rgba(235,230,219,.5)}
.row .k{font-family:var(--f-mono);font-size:11px;color:var(--sienna);font-weight:700;letter-spacing:.05em}
.row .nm{font-family:var(--f-display);font-weight:600;font-size:17px;letter-spacing:-.02em}
.row .nm small{display:block;font-family:var(--f-mono);font-size:10px;color:var(--ash);text-transform:uppercase;letter-spacing:.08em;font-weight:400;margin-top:2px}
.row .v{font-family:var(--f-mono);font-size:12px;text-align:right}
.row.won{border-left:3px solid var(--ok-strong);padding-left:12px}
.row.lost{border-left:3px solid var(--sienna);padding-left:12px}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{font-family:var(--f-mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--ash);font-weight:500;text-align:left;padding:10px 12px;border-bottom:1px solid var(--ink)}
.tbl td{padding:12px;border-bottom:1px solid var(--rule)}
.tbl td.num{font-family:var(--f-mono);text-align:right}
.tbl tr:hover td{background:rgba(235,230,219,.5)}

/* ---------- tabs ---------- */
.tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid var(--rule);background:var(--cream)}
.tab{border-right:1px solid var(--rule);padding:20px 24px;text-align:left;display:flex;flex-direction:column;gap:6px;position:relative;transition:background .2s}
.tab:last-child{border-right:none}
.tab:hover{background:rgba(244,241,234,.6)}
.tab.on{background:var(--ivory)}
.tab.on::after{content:'';position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--sienna)}
.tab .tab-k{font-family:var(--f-mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--ash)}
.tab.on .tab-k{color:var(--sienna)}
.tab .tab-n{font-family:var(--f-display);font-weight:700;font-size:20px;letter-spacing:-.02em}

/* ---------- stappen / tijdlijn ---------- */
.steps{list-style:none;border-left:1px solid var(--rule);margin-left:6px}
.step{position:relative;padding:0 0 28px 28px}
.step::before{content:'';position:absolute;left:-6px;top:4px;width:11px;height:11px;border:1px solid var(--ink);background:var(--ivory);border-radius:50%}
.step.on::before{background:var(--sienna);border-color:var(--sienna)}
.step .step-k{font-family:var(--f-mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--sienna)}
.step .step-t{font-family:var(--f-display);font-weight:700;font-size:20px;letter-spacing:-.02em;margin:4px 0}
.step .step-d{color:var(--ash);max-width:52ch}

/* ---------- citaat ---------- */
.quote{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:48px 0;position:relative}
.quote::before{content:'"';position:absolute;left:0;top:36px;font-family:var(--f-display);font-weight:800;font-size:72px;line-height:1;color:var(--sienna)}
.quote-text{font-family:var(--f-display);font-weight:600;font-size:clamp(24px,2.6vw,38px);line-height:1.15;letter-spacing:-.03em;text-wrap:balance;padding-left:60px}
.quote-text em{font-style:normal;color:var(--sienna)}
.quote-by{padding-left:60px;margin-top:20px;font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--ash)}
.quote-by b{color:var(--ink);font-weight:500}

/* ---------- formulier ---------- */
.field+.field{margin-top:22px}
.field label,.field .lab{font-family:var(--f-mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--ash);display:block;margin-bottom:6px}
.field label b{color:var(--sienna)}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:15px;padding:10px 0;background:transparent;border:none;border-bottom:1px solid var(--rule);color:var(--ink);outline:none;border-radius:0}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--ink)}
.field .err{color:var(--err);font-family:var(--f-mono);font-size:10px;margin-top:4px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.btn-submit{margin-top:28px;width:100%;justify-content:space-between}

/* ---------- status ---------- */
.dot{width:10px;height:10px;border-radius:50%;background:var(--ok);display:inline-block;box-shadow:0 0 0 3px rgba(74,132,99,.2)}
.dot.warn{background:var(--warn);box-shadow:0 0 0 3px rgba(217,160,74,.25)}
.dot.err{background:var(--err);box-shadow:0 0 0 3px rgba(196,80,61,.25)}

/* ---------- modal ---------- */
.overlay{position:fixed;inset:0;background:rgba(14,14,14,.45);display:grid;place-items:center;z-index:90;padding:16px}
.modal{background:var(--ivory);border:1px solid var(--ink);width:100%;max-width:480px;padding:32px;animation:modalIn .35s var(--ease)}
@keyframes modalIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- footer ---------- */
.foot{padding:60px var(--gutter);border-top:1px solid var(--rule);display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;max-width:var(--wrap);margin:0 auto}
.foot h5{font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--ash);font-weight:400;margin-bottom:14px}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.foot li a:hover{color:var(--sienna)}
.foot-bottom{max-width:var(--wrap);margin:0 auto;padding:20px var(--gutter) 40px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--f-mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--ash);border-top:1px solid var(--rule)}

/* ---------- motion ---------- */
.fade-in{animation:fadeIn .6s ease-out both}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  :root{--gutter:32px}
  .topbar{grid-template-columns:auto 1fr auto}
  .nav{display:none}
  .sec{padding:64px 0}
  .sec-head{grid-template-columns:80px 1fr;gap:20px;margin-bottom:36px}
  .sec-num{font-size:56px}
  .sec-meta{display:none}
  .cols,.cols.c4{grid-template-columns:1fr 1fr}
  .foot{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  :root{--gutter:16px}
  .sec-head{grid-template-columns:1fr;gap:8px}
  .sec-num{font-size:44px}
  .cols,.cols.c2,.cols.c4{grid-template-columns:1fr}
  .col{border-right:none;border-bottom:1px solid var(--rule)}
  .col-name{font-size:36px}
  .field-row{grid-template-columns:1fr}
  .tabs{grid-auto-flow:row}
  .pipeline{height:auto;grid-template-columns:repeat(3,1fr)}
  .pipeline .ph{border-bottom:1px solid var(--rule);min-height:48px}
  .foot{grid-template-columns:1fr}
  .quote-text,.quote-by{padding-left:44px}
}