/* Lettertypen staan in /fonts: geen verzoek naar Google, en niets dat het tekenen tegenhoudt. */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/anton-normal-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/anton-normal-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Forum';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/forum-normal-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Forum';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/forum-normal-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-normal-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-normal-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-normal-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-normal-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-mono-normal-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-mono-normal-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/instrument-sans-italic-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/instrument-sans-italic-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/instrument-sans-normal-400-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/instrument-sans-normal-400-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --bg:#131210;
  --bg-raise:#1b1916;
  --bg-card:#201d19;
  --line:#2e2a24;
  --line-soft:#262320;
  --text:#ede9e0;
  --muted:#a39c8e;
  --dim:#8a8479;   /* minstens 4.5:1 op elke achtergrond, ook in kleine monotekst */
  --copper:#d98e3b;
  --copper-hi:#f0b568;
  --copper-deep:#8a5518;
  --copper-tint:rgba(217,142,59,.12);
  --ok:#7fb98a;
  --warn:#d9b23b;
  --radius:12px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  font-family:'Instrument Sans',system-ui,sans-serif;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  background:var(--bg);color:var(--text);
  font-size:16.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--copper);color:var(--bg)}
.mono{font-family:'IBM Plex Mono',monospace}
.wrap{
  max-width:1160px;margin:0 auto;
  padding-left:max(26px,env(safe-area-inset-left));
  padding-right:max(26px,env(safe-area-inset-right));
}
.display{
  font-family:'Forum',Georgia,serif;
  font-weight:400;letter-spacing:-.03em;line-height:1;
}
a{color:var(--copper)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2.5px solid var(--copper);outline-offset:3px;border-radius:4px;
}
button{font-family:inherit;cursor:pointer}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;background:var(--copper);color:#181206;
  padding:14px 28px;border-radius:8px;border:1.5px solid var(--copper);
  text-decoration:none;font-weight:700;font-size:15.5px;
  transition:background .16s,transform .16s,border-color .16s,color .16s;
}
.btn:hover{background:var(--copper-hi);border-color:var(--copper-hi);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--copper);color:var(--copper);background:var(--copper-tint)}
.btn.small{padding:9px 18px;font-size:14px;white-space:nowrap}

/* ---------- view switching ---------- */
.view{display:none}
.view.active{display:block}

/* ---------- marketing nav ---------- */
.m-nav{
  position:sticky;top:0;z-index:60;
  background:rgba(19,18,16,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
  transition:background .3s,border-color .3s;
}
/* Alleen als visuals.js draait, want dat zet .gescrold weer aan zodra je scrolt. */
html.anim-klaar .m-nav:not(.gescrold){
  background:transparent;border-bottom-color:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.m-nav-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:70px;gap:20px}
.logo{
  font-family:'Anton',sans-serif;font-size:23px;letter-spacing:1px;
  color:var(--text);text-decoration:none;text-transform:uppercase;
}
.logo b{color:var(--copper);font-weight:400}
.m-links{display:flex;gap:30px;align-items:center;justify-content:center;list-style:none}
.m-acties{display:flex;align-items:center;gap:22px;justify-self:end}
.m-acties a{color:var(--muted);text-decoration:none;font-size:15px;font-weight:500}
.m-acties a:hover{color:var(--text)}
.m-acties .btn{color:#181206}
.m-links a{color:var(--muted);text-decoration:none;font-size:15px;font-weight:500}
.m-links a:hover{color:var(--text)}
.m-links .btn{color:#181206}
/* Op een telefoon vervalt het midden: alleen logo en de twee knoppen. */
@media(max-width:820px){
  .m-links{display:none}
  .m-nav-in{grid-template-columns:auto 1fr;gap:12px}
  .m-acties{gap:16px}
}

/* ---------- hero ---------- */
/* Schuift onder de menubalk door, zodat de gloed tot bovenaan reikt. */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:100vh;min-height:100svh;display:flex;align-items:center;
  margin-top:-70px;padding:150px 0 170px;border-bottom:1px solid var(--line-soft);
}
.hero-in{position:relative;z-index:2;width:100%}
.hero .eyebrow{
  font-family:'IBM Plex Mono',monospace;font-size:13.5px;color:var(--copper);
  letter-spacing:2.5px;text-transform:uppercase;margin-bottom:26px;display:block;
}
.hero h1{font-size:clamp(60px,9.2vw,146px);max-width:9.5ch}
.hero h1 .c{color:var(--copper)}
.hero .lede{margin-top:30px;font-size:19px;color:var(--muted);max-width:44ch}
.hero .lede strong{color:var(--text);font-weight:600}
.hero-cta{margin-top:40px;display:flex;align-items:center;gap:18px 30px;flex-wrap:wrap}
.app-link{
  display:inline-flex;align-items:center;gap:10px;margin-top:26px;
  color:var(--muted);text-decoration:none;font-size:15px;transition:color .16s;
}
.app-link svg{color:#25d366;flex-shrink:0}
.app-link b{color:var(--text);font-weight:600}
.app-link:hover{color:var(--text)}
.app-link:hover b{color:var(--copper)}

/* De gloed en de bol. --hs loopt van 0 naar 1 terwijl je de hero uit beeld scrolt. */
.hero-gloed{
  position:absolute;z-index:-1;pointer-events:none;
  right:calc(max(26px, (100vw - 1160px) / 2) - 16vw);top:50%;
  width:min(1200px,120vw);aspect-ratio:1;
  transform:translateY(calc(-50% + var(--hs,0) * 90px));
  background:radial-gradient(circle,rgba(217,142,59,.34) 0%,rgba(217,142,59,.13) 30%,rgba(217,142,59,.04) 50%,transparent 66%);
}
.hero-3d{
  position:absolute;z-index:0;
  right:calc(max(26px, (100vw - 1160px) / 2) - 110px);top:50%;
  width:min(760px,58vw);aspect-ratio:1;
  transform:translateY(calc(-50% + var(--hs,0) * 160px)) scale(calc(1 - var(--hs,0) * .12));
  opacity:0;transition:opacity 1.8s ease;
}
.hero-3d.klaar{opacity:1}
.hero-zij{
  position:absolute;left:30px;bottom:150px;z-index:2;
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:3px;text-transform:uppercase;color:var(--dim);
}
@media(max-width:1320px){.hero-zij{display:none}}

/* De draaiende badge onderaan de hero */
.scroll-badge{
  position:absolute;z-index:2;left:50%;bottom:40px;translate:-50% 0;
  width:124px;height:124px;display:grid;place-items:center;text-decoration:none;
}
.scroll-badge svg{position:absolute;inset:0;width:100%;height:100%;animation:draai 18s linear infinite}
.scroll-badge text{font-family:'IBM Plex Mono',monospace;font-size:10.4px;letter-spacing:2.95px;fill:var(--muted)}
.scroll-badge-pijl{
  width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  background:var(--copper);color:#181206;font-size:22px;
  animation:puls 2.6s ease-out infinite;transition:background .2s,transform .2s;
}
.scroll-badge:hover .scroll-badge-pijl{background:var(--copper-hi);transform:translateY(3px)}
@keyframes draai{to{transform:rotate(360deg)}}
@keyframes puls{from{box-shadow:0 0 0 0 rgba(217,142,59,.45)}to{box-shadow:0 0 0 22px rgba(217,142,59,0)}}

/* Op een telefoon staat de bol gedimd achter de tekst, en de tekst onderin. */
@media(max-width:820px){
  .hero{align-items:flex-end;padding:120px 0 150px}
  .hero-3d{right:-40vw;top:30%;width:120vw}
  .hero-3d.klaar{opacity:.5}
  .hero-gloed{right:-62vw;top:28%}
  .scroll-badge{left:auto;right:16px;top:92px;bottom:auto;translate:none;width:96px;height:96px}
  .scroll-badge-pijl{width:46px;height:46px;font-size:18px}
}

/* ---------- ronde pijlknop ---------- */
.btn-rond{
  display:inline-flex;align-items:center;gap:14px;color:var(--text);text-decoration:none;
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;font-weight:500;letter-spacing:1.8px;text-transform:uppercase;
}
.btn-rond i{
  flex-shrink:0;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;
  border:1px solid var(--line);color:var(--copper);
  font-family:'Instrument Sans',sans-serif;font-style:normal;font-size:18px;
  transition:background .2s,border-color .2s,color .2s,transform .2s;
}
.btn-rond:hover i,.route-card:hover .btn-rond i,.case-slide:hover .btn-rond i{
  background:var(--copper);border-color:var(--copper);color:#181206;transform:translateX(3px);
}
.btn-rond.vol i{background:var(--copper);border-color:var(--copper);color:#181206}
.btn-rond.vol:hover i{background:var(--copper-hi);border-color:var(--copper-hi)}
.btn-rond.klein i{width:42px;height:42px;font-size:15px}

/* ---------- statement bands (signature) ---------- */
.statement{
  padding:140px 0;border-bottom:1px solid var(--line-soft);
  background:var(--bg);overflow:hidden;
}
.statement p{
  font-family:'Forum',Georgia,serif;
  font-size:clamp(42px,6.6vw,96px);line-height:1.02;letter-spacing:-.03em;
  max-width:17ch;color:var(--text);
}
.statement p .c{color:var(--copper)}
.statement .who{
  margin-top:26px;font-family:'IBM Plex Mono',monospace;
  font-size:13.5px;color:var(--dim);letter-spacing:2px;text-transform:uppercase;
}

/* ---------- sections ---------- */
.sec{padding:110px 0;border-bottom:1px solid var(--line-soft);scroll-margin-top:78px}
.sec-tag{
  font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--copper);
  letter-spacing:2.5px;text-transform:uppercase;display:block;margin-bottom:20px;
}
.sec h2{font-size:clamp(42px,5.4vw,78px);max-width:14ch}

/* Een warme gloedvlek per sectie. --gx/--gy in de HTML bepalen waar; --sp zet
   visuals.js tijdens het scrollen, zodat de vlek iets trager beweegt dan de tekst. */
.sec-gloed{position:relative;overflow:hidden;overflow:clip;isolation:isolate}
.sec-gloed::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  left:var(--gx,50%);top:var(--gy,30%);width:min(820px,110vw);aspect-ratio:1;
  transform:translate(-50%,calc(-50% + var(--sp,0) * -70px));
  background:radial-gradient(circle,rgba(217,142,59,.15) 0%,rgba(217,142,59,.05) 38%,transparent 64%);
}
.sec .sub{margin-top:20px;color:var(--muted);max-width:58ch;font-size:17.5px}

/* de drie routes, bovenaan als keuze */
.routes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:124px}
@media(max-width:900px){.routes{grid-template-columns:1fr;row-gap:110px}}
.route-card{
  position:relative;display:flex;flex-direction:column;gap:14px;
  background:var(--bg-raise);border:1px solid var(--line);border-radius:var(--radius);
  padding:92px 30px 28px;text-decoration:none;color:inherit;
  transition:border-color .18s,transform .18s;
}
.route-card::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 70% at 50% 0%,rgba(217,142,59,.14),transparent 60%);
  opacity:.7;transition:opacity .3s;
}
.route-card:hover{border-color:var(--copper-deep);transform:translateY(-3px)}
.route-card:hover::before{opacity:1}
.rc-object,.case-object{filter:drop-shadow(0 0 14px rgba(217,142,59,.5))}
.rc-object{
  position:absolute;left:50%;top:-76px;width:188px;transform:translateX(-50%);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .45s;
}
.route-card:hover .rc-object{transform:translateX(-50%) translateY(-8px);filter:drop-shadow(0 0 24px rgba(217,142,59,.8))}
.rc-object svg,.case-object svg{display:block;width:100%;height:auto;overflow:visible}
.lijn *{fill:none;stroke:var(--copper);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.vlak{fill:rgba(217,142,59,.1)}
.stip{fill:var(--copper-hi)}
.rc-kop{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rc-nr{font-family:'Forum',Georgia,serif;font-size:48px;line-height:1;color:var(--copper)}
.rc-naam{
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);border-radius:100px;padding:6px 12px;
}
.route-card h3{
  margin-top:4px;font-family:'Forum',Georgia,serif;font-weight:400;
  font-size:31px;line-height:1.05;letter-spacing:-.02em;
}
.route-card p{color:var(--muted);font-size:15.5px}
.rc-feit{
  margin-top:auto;padding-top:16px;border-top:1px solid var(--line-soft);
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:1px;text-transform:uppercase;color:var(--dim);
}
.rc-feit b{font-family:'Forum',Georgia,serif;font-weight:400;font-size:25px;letter-spacing:0;text-transform:none;color:var(--text)}

/* per route: twee kolommen met een tijdlijn, de onderdelen of de deal */
.offer-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:56px;align-items:start}
@media(max-width:900px){.offer-grid{grid-template-columns:1fr;gap:44px}}
.offer-kop{
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:2px;text-transform:uppercase;
  color:var(--dim);margin-bottom:24px;
}
.offer-kop-los{margin:56px 0 0}
.offer-kop-los + .model-grid{margin-top:24px}

.tijdlijn{list-style:none}
.tijdlijn li{position:relative;padding:0 0 30px 58px}
.tijdlijn li:last-child{padding-bottom:0}
.tijdlijn li::before{
  content:'';position:absolute;left:18px;top:42px;bottom:6px;width:1px;background:var(--line);
}
.tijdlijn li:last-child::before{display:none}
.tl-nr{
  position:absolute;left:0;top:0;width:37px;height:37px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--copper-deep);background:var(--copper-tint);
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--copper);
}
.tijdlijn h3{font-size:18px;font-weight:700;padding-top:5px}
.tijdlijn p{margin-top:6px;color:var(--muted);font-size:15.5px}

.bouw{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;
}
@media(max-width:520px){.bouw{grid-template-columns:1fr}}
.bouw > div{background:var(--bg-raise);padding:24px 22px}
.bouw h3{font-size:16.5px;font-weight:700}
.bouw p{margin-top:6px;color:var(--muted);font-size:14.5px}
.bouw .stack{
  display:inline-block;margin-top:10px;font-family:'IBM Plex Mono',monospace;font-size:12px;
  color:var(--copper);letter-spacing:.5px;
}

.deal{
  background:var(--bg-raise);border:1px solid var(--line);border-radius:var(--radius);
  padding:40px 36px 34px;
}
.deal-getal{
  font-family:'Forum',Georgia,serif;font-size:clamp(120px,15vw,210px);line-height:.8;letter-spacing:-.05em;
  color:var(--copper);text-shadow:0 0 60px rgba(217,142,59,.35);
}
.deal-label{margin-top:18px;font-family:'Forum',Georgia,serif;font-size:32px;letter-spacing:-.01em}
.deal p{margin-top:12px;color:var(--muted);font-size:15.5px;max-width:38ch}
.deal-motto{
  margin-top:28px;padding-top:20px;border-top:1px solid var(--line-soft);
  font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--dim);
}

/* de slotzin van een route, met de knop naar het formulier */
.offer-slot{
  margin-top:56px;padding-top:36px;border-top:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;
}
.offer-slot p{font-size:21px;font-weight:600;line-height:1.4;max-width:34ch}
.offer-slot p .c{color:var(--copper)}
.offer-slot.groot p{
  font-family:'Forum',Georgia,serif;font-weight:400;letter-spacing:-.02em;
  font-size:clamp(34px,4.2vw,56px);line-height:1.04;max-width:18ch;
}
.offer-actie{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.offer-noot{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--dim)}

/* partner: wat je er als partner bij krijgt */
.exclusief{
  position:relative;overflow:hidden;margin-top:84px;
  display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center;
  padding:44px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-raise);
}
.exclusief::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 120% at 100% 0%,rgba(217,142,59,.16),transparent 58%);
}
.exclusief > *{position:relative}
@media(max-width:900px){.exclusief{grid-template-columns:1fr;gap:30px;padding:28px 22px;margin-top:64px}}
.exclusief-tag{
  display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:2px;text-transform:uppercase;
  color:var(--copper);border:1px solid var(--copper-deep);background:var(--copper-tint);border-radius:100px;padding:7px 14px;
}
.exclusief h3{margin-top:20px;font-size:clamp(30px,3.4vw,48px)}
.exclusief p{margin-top:16px;color:var(--muted);font-size:16.5px}
.exclusief ul{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:11px}
.exclusief li{position:relative;padding-left:26px;color:var(--muted);font-size:15.5px}
.exclusief li::before{content:"→";position:absolute;left:0;color:var(--copper);font-weight:700}
/* Een lichte draai, zodat het scherm in de ruimte staat in plaats van plat op de kaart. */
.exclusief-beeld .scherm{transform:perspective(1300px) rotateY(-7deg) rotateX(2deg)}
.exclusief:hover .exclusief-beeld .scherm{transform:perspective(1300px) rotateY(-3deg) rotateX(1deg)}
@media(max-width:900px){.exclusief-beeld .scherm,.exclusief:hover .exclusief-beeld .scherm{transform:none}}

/* partner: wie er wel en niet bij past */
.selectie{margin-top:80px}
.selectie h3{font-size:clamp(34px,4vw,54px)}
.selectie .fit-grid{margin-top:36px}
.selectie-verder{margin-top:22px;color:var(--muted);font-size:15.5px}

/* model */
.model-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
@media(max-width:860px){.model-grid{grid-template-columns:1fr}}
.model-card{
  background:var(--bg-raise);border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 30px;
}
.model-card .mc-label{
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--copper);
  letter-spacing:2px;text-transform:uppercase;
}
.model-card h3{font-size:21px;font-weight:700;margin-top:10px}
.model-card p{margin-top:12px;color:var(--muted);font-size:15.5px}

/* cases */
.case{
  background:var(--bg-raise);border:1px solid var(--line);border-radius:var(--radius);
  padding:32px 30px;display:flex;flex-direction:column;gap:14px;
  transition:border-color .18s,transform .18s;
  text-decoration:none;color:inherit;
}
.case:hover{border-color:var(--copper-deep);transform:translateY(-3px)}

/* ---------- carrousel ---------- */
/* Het spoor loopt tot de rand van het scherm, maar de eerste kaart lijnt uit met de
   tekst erboven. De ruimte bovenin is voor het scherm dat boven de kaart uitsteekt. */
.carrousel{margin-top:30px}
.carrousel-spoor{
  display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,392px);gap:22px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  /* De 10px ruimte is voor de schaduw; de negatieve marge houdt de kaarten
     precies op dezelfde lijn als de tekst erboven. */
  scroll-padding-inline:10px;padding:70px 10px 24px;margin-inline:-10px;scrollbar-width:none;
}
.carrousel-spoor::-webkit-scrollbar{display:none}
.carrousel-spoor:focus-visible{outline:2.5px solid var(--copper);outline-offset:-6px}
.case-slide{scroll-snap-align:start}
.case-slide .btn-rond{margin-top:10px}
.scherm{
  border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#0e0d0b;
  box-shadow:0 24px 48px -18px rgba(0,0,0,.85),0 0 44px -12px rgba(217,142,59,.3);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s;
}
/* In de carrousel steekt het scherm boven de kaart uit. */
.case-scherm{margin:-74px -8px 8px}
.case-slide:hover .case-scherm{transform:translateY(-6px);box-shadow:0 30px 56px -18px rgba(0,0,0,.9),0 0 60px -10px rgba(217,142,59,.45)}
.scherm-balk{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#171512;border-bottom:1px solid var(--line-soft)}
.scherm-balk i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.scherm-balk span{
  margin-left:8px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.scherm img{display:block;width:100%;height:auto}
.case-object{margin:-74px auto 8px;width:210px}
.carrousel-bediening{display:flex;align-items:center;gap:14px;margin-top:22px}
.rond-knop{
  width:50px;height:50px;border-radius:50%;border:1px solid var(--line);background:transparent;
  color:var(--copper);font-size:18px;transition:background .2s,border-color .2s,color .2s,opacity .2s;
}
.rond-knop:hover:not(:disabled){background:var(--copper);border-color:var(--copper);color:#181206}
.rond-knop:disabled{opacity:.3;cursor:default}
/* Knopjes van 24px om op te tikken, met een stip van 8px erin */
.carrousel-stippen{display:flex}
.carrousel-stippen button{position:relative;width:24px;height:24px;border:0;padding:0;background:none}
.carrousel-stippen button::after{
  content:'';position:absolute;left:50%;top:50%;width:8px;height:8px;translate:-50% -50%;
  border-radius:5px;background:var(--line);transition:width .25s,background .25s;
}
.carrousel-stippen button.on::after{width:20px;background:var(--copper)}
a.case:hover .tag{color:var(--copper)}
.case .tag{
  align-self:flex-start;font-family:'IBM Plex Mono',monospace;font-size:12px;
  letter-spacing:1.5px;text-transform:uppercase;
  border:1px solid var(--line);color:var(--muted);
  padding:6px 12px;border-radius:100px;
}
.case .tag.deal{border-color:var(--copper-deep);color:var(--copper);background:var(--copper-tint)}
.case h3{font-size:22px;font-weight:700;letter-spacing:-.3px}
.case p{color:var(--muted);font-size:15.5px}
.case .built{
  margin-top:auto;padding-top:16px;border-top:1px solid var(--line-soft);
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--dim);letter-spacing:.5px;
}
.case .case-partner{
  display:flex;align-items:center;gap:8px;margin-top:12px;
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:1px;text-transform:uppercase;
  color:var(--copper);
}
.case .case-partner .dot{
  width:7px;height:7px;border-radius:50%;background:var(--copper);
  box-shadow:0 0 0 3px var(--copper-tint);flex-shrink:0;
}


/* fit / not fit */
.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:52px}
@media(max-width:820px){.fit-grid{grid-template-columns:1fr}}
.fit-col{border:1px solid var(--line);border-radius:var(--radius);padding:34px 30px;background:var(--bg-raise)}
.fit-col.no{background:transparent;border-style:dashed}
.fit-col h4{font-family:'Forum',Georgia,serif;font-weight:400;font-size:29px;letter-spacing:-.01em}
.fit-col.yes h4{color:var(--copper)}
.fit-col.no h4{color:var(--dim)}
.fit-col ul{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:13px}
.fit-col li{padding-left:28px;position:relative;color:var(--muted);font-size:15.5px}
.fit-col.yes li::before{content:"→";position:absolute;left:0;color:var(--copper);font-weight:700}
.fit-col.no li::before{content:"✕";position:absolute;left:0;color:var(--dim)}

/* route */
.route{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line-soft);margin-top:52px;border:1px solid var(--line-soft)}
@media(max-width:960px){.route{grid-template-columns:1fr}}
.route.vier{grid-template-columns:repeat(4,1fr)}
@media(max-width:960px){.route.vier{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.route.vier{grid-template-columns:1fr}}
.r-step{background:var(--bg);padding:30px 24px}
.r-step .rn{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--copper);letter-spacing:2px;text-transform:uppercase}
.r-step h3{font-size:17px;font-weight:700;margin-top:10px}
.r-step p{margin-top:8px;color:var(--muted);font-size:14px}

/* apply */
.apply-card{
  background:var(--bg-raise);border:1px solid var(--line);border-radius:var(--radius);
  padding:44px;margin:52px auto 0;max-width:780px;text-align:left;
}
/* Het aanmeldblok sluit de pagina af en staat daarom in het midden. */
#aanmelden .sec-tag,#aanmelden h2,#aanmelden .sub{margin-inline:auto;text-align:center}
@media(max-width:640px){.apply-card{padding:28px 22px}}
/* minmax(0,…): een kolom mag smaller worden dan de langste optie in een keuzelijst,
   anders duwt zo'n optie het veld het formulier uit */
.f-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
@media(max-width:640px){.f-row{grid-template-columns:minmax(0,1fr)}}
.f-group{margin-bottom:18px;display:flex;flex-direction:column;gap:8px}
.f-group label{font-size:14px;font-weight:600}
.f-group input,.f-group textarea,.f-group select{
  font-family:inherit;font-size:16px;color:var(--text);
  padding:13px 15px;border:1.5px solid var(--line);border-radius:8px;
  background:var(--bg);transition:border-color .15s;
}
.f-group input:focus,.f-group textarea:focus,.f-group select:focus{border-color:var(--copper);outline:none}
.f-group textarea{min-height:130px;resize:vertical}
/* Spamval: een veld dat een mens nooit ziet. Vult een bot het in, dan sturen we niets op. */
.f-val{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.keuze{border:0;padding:0;min-width:0;margin-bottom:26px}
.keuze legend{font-size:14px;font-weight:600;margin-bottom:10px;padding:0}
.keuze-opties{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:720px){.keuze-opties{grid-template-columns:1fr 1fr}}
.keuze-opties label{position:relative;cursor:pointer}
.keuze-opties input{position:absolute;opacity:0;pointer-events:none}
.keuze-opties span{
  display:flex;flex-direction:column;gap:2px;height:100%;
  padding:13px 14px;border:1.5px solid var(--line);border-radius:8px;background:var(--bg);
  transition:border-color .15s,background .15s;
}
.keuze-opties b{font-size:15px;font-weight:700}
.keuze-opties small{font-size:13px;color:var(--dim)}
.keuze-opties label:hover span{border-color:var(--copper-deep)}
.keuze-opties input:checked + span{border-color:var(--copper);background:var(--copper-tint)}
.keuze-opties input:checked + span b{color:var(--copper-hi)}
.keuze-opties input:focus-visible + span{outline:2.5px solid var(--copper);outline-offset:3px}
.f-send{width:100%;font-size:16px;margin-top:4px}
.f-fine{margin-top:16px;font-size:13.5px;color:var(--dim);text-align:center}
.f-done{
  display:none;background:var(--copper-tint);border:1px solid var(--copper-deep);
  color:var(--copper-hi);border-radius:8px;padding:16px;text-align:center;font-weight:600;margin-top:16px;
}

/* footer */
.m-foot{padding:70px 0 max(40px,calc(env(safe-area-inset-bottom) + 24px))}
.m-foot-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.m-foot p{color:var(--dim);font-size:14.5px;max-width:34ch;margin-top:14px}
.m-foot ul{display:flex;gap:24px;list-style:none;flex-wrap:wrap}
.m-foot ul a{color:var(--muted);text-decoration:none;font-size:14.5px}
.m-foot ul a:hover{color:var(--text)}
.contact-pillen{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.sociaal{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 15px 8px 12px;border:1px solid var(--line);border-radius:100px;
  color:var(--muted);text-decoration:none;font-size:14px;
  transition:color .16s,border-color .16s,background .16s;
}
.sociaal:hover{color:var(--copper);border-color:var(--copper-deep);background:var(--copper-tint)}
.sociaal svg{flex-shrink:0}
.m-foot-btm{
  margin-top:48px;padding-top:22px;border-top:1px solid var(--line-soft);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--dim);
}
.m-foot-btm a{color:var(--muted)}
.m-foot-btm a:hover{color:var(--copper)}

@media(max-width:640px){
  .sec{padding:64px 0}
  .hero{padding:72px 0 60px}
  .statement{padding:80px 0}
  .kpi .v{font-size:28px}
  .main{padding:20px 16px}
}

/* =====================================================================
   Aanraakbediening — telefoon en tablet
   ===================================================================== */

/* Op een aanraakscherm moet alles wat je aantikt minstens 44px hoog zijn
   (richtlijn van Apple). Met een muis blijft de opmaak zoals hij was. */
@media(pointer:coarse){
  .m-nav .logo,
  .m-foot .logo,
  .m-links a,
  .m-foot ul a{display:inline-flex;align-items:center;min-height:44px}
  .btn.small{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .m-foot ul{gap:8px 24px}
  .f-fine a,
  .back-link{display:inline-block;padding:13px 0}
  .link-btn{min-height:44px}
  .modal-x{min-width:44px;min-height:44px}

  /* Op een telefoon schoven blokken bij binnenkomst nog 16px omhoog. Tikte je
     tijdens die beweging, dan landde je tik naast de knop en leek er niets te
     gebeuren. Ze verschijnen nu zonder te bewegen. */
  .reveal{transform:none}
}

/* Zichtbare terugkoppeling bij het aantikken, nu de grijze iOS-flits weg is. */
.btn:active{transform:translateY(0) scale(.985)}
.m-links a:active,
.m-foot ul a:active{color:var(--copper)}
.s-nav button:active{background:var(--bg-card)}

/* Op smalle telefoons levert een krappere marge merkbaar meer leesbreedte op. */
@media(max-width:480px){
  .wrap{
    padding-left:max(20px,env(safe-area-inset-left));
    padding-right:max(20px,env(safe-area-inset-right));
  }
  .hero h1{font-size:clamp(44px,12.5vw,124px)}
  .apply-card{padding:24px 18px}
  .card{padding:22px 18px}
}

/* reveal */
/* ---------- binnenkomen ---------- */
/* Alleen onder html.anim (gezet door anim.js) is iets verborgen tot het in beeld komt.
   Met `translate` in plaats van `transform`, zodat een hover-lift ernaast blijft werken. */
html.anim .reveal{opacity:0;translate:0 22px;transition:opacity .7s ease,translate .8s cubic-bezier(.2,.8,.2,1)}
html.anim .reveal.in{opacity:1;translate:none}

/* Koppen: elk woord schuift uit zijn eigen masker omhoog. visuals.js knipt ze op en
   zet dan .gesplitst; tot die tijd blijft de kop onzichtbaar, zodat hij niet flitst. */
html.anim #view-site .display,html.anim .statement p{visibility:hidden}
html.anim #view-site .gesplitst{visibility:visible}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.w > span{display:inline-block}
html.anim .gesplitst .w > span{
  translate:0 112%;transition:translate 1s cubic-bezier(.16,.84,.24,1);
  transition-delay:calc(var(--i,0) * 45ms);
}
html.anim .gesplitst.in .w > span{translate:none}

/* Vangnet: laadt visuals.js niet, dan komt na een paar tellen alles alsnog in beeld. */
html.anim:not(.anim-klaar) .reveal,
html.anim:not(.anim-klaar) #view-site .display,
html.anim:not(.anim-klaar) .statement p{animation:vangnet 0s 2.5s forwards}
@keyframes vangnet{to{opacity:1;visibility:visible;translate:none}}

/* ---------- login ---------- */
.login-wrap{min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:40px 20px}
.login-card{
  width:100%;max-width:440px;background:var(--bg-raise);
  border:1px solid var(--line);border-radius:14px;padding:44px 40px;
}
@media(max-width:480px){.login-card{padding:30px 24px}}
.login-card .logo{display:block;text-align:center;font-size:28px}
.login-card h1{font-size:20px;font-weight:700;text-align:center;margin-top:22px}
.login-card .l-sub{text-align:center;color:var(--muted);font-size:14.5px;margin-top:8px}
.login-form{margin-top:30px}
.l-err{
  display:none;background:rgba(217,80,60,.12);border:1px solid rgba(217,80,60,.4);
  color:#e79a8a;border-radius:8px;padding:12px 14px;font-size:14px;margin-bottom:16px;
}
.back-link{display:block;text-align:center;margin-top:22px;color:var(--dim);font-size:14px;text-decoration:none}
.back-link:hover{color:var(--muted)}

/* ---------- app shell (partner & admin) ---------- */
.shell{display:flex;min-height:100vh;min-height:100dvh}
.side{
  width:248px;flex-shrink:0;background:var(--bg-raise);
  border-right:1px solid var(--line-soft);
  display:flex;flex-direction:column;padding:22px 16px;
  position:sticky;top:0;height:100vh;height:100dvh;
}
/* De hamburger. Op een laptop bestaat hij niet: daar staat het menu al open in de
   zijbalk. Op een telefoon wordt de zijbalk een kopbalk met logo en knop, en het menu
   klapt eronder uit — dezelfde lijst als op de laptop, onder elkaar, in plaats van een
   rij tabbladen die je horizontaal moet vegen en waarvan je de laatste niet ziet. */
.s-burger{display:none}
.s-menu{display:contents}

@media(max-width:880px){
  .shell{flex-direction:column}
  .side{
    width:100%;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px;
    position:sticky;top:0;z-index:50;overflow:visible;
    border-right:none;border-bottom:1px solid var(--line-soft);
    padding:calc(12px + env(safe-area-inset-top))
            max(18px,env(safe-area-inset-right))
            12px max(18px,env(safe-area-inset-left));
    background:var(--bg);
  }
  .side .logo{margin-right:auto}

  .s-burger{
    display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;padding:0 10px;flex:none;
    background:none;border:1px solid var(--line);border-radius:9px;
  }
  .s-burger span{display:block;height:2px;background:var(--text);border-radius:2px;transition:transform .16s,opacity .16s}
  .s-burger[aria-expanded="true"]{border-color:var(--copper)}
  .s-burger[aria-expanded="true"] span{background:var(--copper)}
  .s-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .s-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .s-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* Dicht neemt het menu geen ruimte in; open staat het over de pagina heen, zodat het
     openen niet de hele inhoud naar beneden duwt. */
  .s-menu{
    display:block;flex-basis:100%;
    position:absolute;left:0;right:0;top:100%;
    background:var(--bg-raise);border-bottom:1px solid var(--line);
    padding:10px max(18px,env(safe-area-inset-right)) 16px max(18px,env(safe-area-inset-left));
    box-shadow:0 18px 40px rgba(0,0,0,.45);
    max-height:calc(100vh - 100%);overflow-y:auto;
  }
  .s-menu[hidden]{display:none}

  .s-nav{flex-direction:column;margin-top:0;gap:2px}
  .s-nav button{width:100%;min-height:46px;padding:12px 14px;font-size:16px}
  .s-foot{margin-top:14px;padding:14px 0 0;border-top:1px solid var(--line-soft);display:block}
  .s-user{display:block;margin-bottom:10px;padding:0 2px}
  .s-link{min-height:44px}
  .s-logout{margin-top:10px;width:100%;min-height:46px}
}
.side .logo{font-size:20px;padding:6px 10px}
.s-nav{list-style:none;margin-top:26px;display:flex;flex-direction:column;gap:4px}
.s-nav button{
  width:100%;text-align:left;background:none;border:none;color:var(--muted);
  font-size:15px;font-weight:500;padding:11px 12px;border-radius:8px;
  transition:background .14s,color .14s;white-space:nowrap;
}
.s-nav button:hover{color:var(--text);background:var(--bg-card)}
.s-nav button.on{color:var(--copper);background:var(--copper-tint)}
/* Stip zolang er een aanmelding binnenkwam die je nog niet bekeken hebt. */
.s-nav button.nieuw::after{
  content:'';display:inline-block;width:7px;height:7px;margin-left:8px;
  border-radius:50%;background:var(--copper);vertical-align:middle;
  box-shadow:0 0 0 3px var(--copper-tint);
}
.s-foot{margin-top:auto;padding:10px 12px}
.s-user{font-size:13.5px;color:var(--muted)}
.s-user b{color:var(--text);display:block;font-size:14px}
.s-logout{
  margin-top:12px;background:none;border:1px solid var(--line);color:var(--muted);
  padding:8px 14px;border-radius:8px;font-size:13.5px;width:100%;
}
.s-logout:hover{border-color:var(--copper);color:var(--copper)}
.main{flex:1;padding:38px 40px;min-width:0}
@media(max-width:880px){
  .main{padding:24px max(20px,env(safe-area-inset-right))
        calc(24px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
}
.p-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:30px}
.p-head h1{font-size:26px;font-weight:700;letter-spacing:-.4px}
.p-head .ph-sub{color:var(--dim);font-size:14px;margin-top:4px}
.pane{display:none}
.pane.on{display:block}

/* app components */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1020px){.kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.kpis{grid-template-columns:1fr}}
.kpi{background:var(--bg-raise);border:1px solid var(--line);border-radius:11px;padding:20px}
.kpi .k{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--dim);letter-spacing:1.5px;text-transform:uppercase}
.kpi .v{font-family:'Anton',sans-serif;font-size:32px;margin-top:8px}
.kpi .v.c{color:var(--copper)}
.kpi .d{font-size:12.5px;margin-top:6px;font-family:'IBM Plex Mono',monospace}
.kpi .d.up{color:var(--ok)}
.kpi .d.flat{color:var(--dim)}
.card{
  background:var(--bg-raise);border:1px solid var(--line);border-radius:11px;
  padding:26px;margin-top:18px;min-width:0;overflow-wrap:break-word;
}
.card h2{font-size:17px;font-weight:700;margin-bottom:18px}
.card h2 .hint{font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:12px;color:var(--dim);margin-left:10px}
.two-col{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;align-items:start}
.two-col>*{min-width:0}
@media(max-width:980px){.two-col{grid-template-columns:1fr}}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th{
  text-align:left;font-family:'IBM Plex Mono',monospace;font-size:11.5px;
  color:var(--dim);letter-spacing:1.5px;text-transform:uppercase;font-weight:500;
  padding:0 14px 12px 0;border-bottom:1px solid var(--line);
}
td{padding:13px 14px 13px 0;border-bottom:1px solid var(--line-soft);color:var(--muted);vertical-align:top}
td b{color:var(--text);font-weight:600}
td.num{font-family:'IBM Plex Mono',monospace;color:var(--text)}
tr:last-child td{border-bottom:none}
.pill{
  display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:1px;text-transform:uppercase;padding:4px 10px;border-radius:100px;
  border:1px solid var(--line);color:var(--muted);white-space:nowrap;
}
.pill.ok{border-color:rgba(127,185,138,.4);color:var(--ok);background:rgba(127,185,138,.08)}
.pill.cu{border-color:var(--copper-deep);color:var(--copper);background:var(--copper-tint)}
.pill.wa{border-color:rgba(217,178,59,.4);color:var(--warn);background:rgba(217,178,59,.08)}
/* progress + stappenplan */
.progress-wrap{background:var(--bg-raise);border:1px solid var(--line);border-radius:11px;padding:22px 24px}
.progress-top{display:flex;justify-content:space-between;align-items:baseline}
.progress-label{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--dim);letter-spacing:1.5px;text-transform:uppercase}
.progress-pct{font-family:'Anton',sans-serif;font-size:30px;color:var(--copper)}
.progress-bar{height:10px;background:var(--bg-card);border-radius:100px;margin-top:12px;overflow:hidden}
.progress-fill{height:100%;background:var(--copper);border-radius:100px;transition:width .6s cubic-bezier(.6,0,.2,1)}
.progress-sub{margin-top:12px;font-size:13.5px;color:var(--muted)}
.steps-list{list-style:none;display:flex;flex-direction:column;gap:2px}
.step-item{display:flex;align-items:center;gap:16px;padding:15px 14px;border-radius:9px;transition:background .15s}
.step-item+.step-item{border-top:1px solid var(--line-soft)}
.step-check{flex-shrink:0;width:28px;height:28px;border-radius:50%;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--dim);font-weight:700}
.step-item.done .step-check{background:var(--ok);border-color:var(--ok);color:#0d1a10}
.step-item.now .step-check{border-color:var(--copper);color:var(--copper);box-shadow:0 0 0 4px var(--copper-tint)}
.step-body{flex:1;min-width:0}
.step-body b{display:block;font-size:15px;color:var(--text)}
.step-item:not(.done):not(.now) .step-body b{color:var(--muted)}
.step-body span{font-size:13.5px;color:var(--dim)}
.step-item.done .step-body span,.step-item.now .step-body span{color:var(--muted)}
/* admin step control */
.admin-step{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line-soft)}
.admin-step:last-child{border-bottom:none}
.admin-step .as-check{flex-shrink:0;width:24px;height:24px;border-radius:50%;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:12px;cursor:pointer;color:var(--dim);background:none}
.admin-step.done .as-check{background:var(--ok);border-color:var(--ok);color:#0d1a10}
.admin-step.now .as-check{border-color:var(--copper);color:var(--copper)}
.admin-step .as-body{flex:1;min-width:0}
.admin-step .as-body b{font-size:14.5px;color:var(--text);display:block}
.admin-step .as-body span{font-size:12.5px;color:var(--dim)}
/* admin layout */
.admin-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:18px;align-items:start}
.admin-grid>*{min-width:0}
@media(max-width:980px){.admin-grid{grid-template-columns:1fr}}
.client-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.client-item{padding:14px 16px;border:1px solid var(--line);border-radius:9px;cursor:pointer;transition:border-color .15s,background .15s}
.client-item:hover{border-color:var(--copper-deep)}
.client-item.on{border-color:var(--copper);background:var(--copper-tint)}
.client-item b{display:block;font-size:15px;color:var(--text)}
.client-item span{font-size:12.5px;color:var(--dim);font-family:'IBM Plex Mono',monospace}
.timeline{list-style:none;display:flex;flex-direction:column}
.timeline li{position:relative;padding:0 0 26px 30px}
.timeline li::before{
  content:"";position:absolute;left:6px;top:7px;width:9px;height:9px;border-radius:50%;
  background:var(--line);border:2px solid var(--bg-raise);
}
.timeline li::after{
  content:"";position:absolute;left:9.5px;top:20px;bottom:0;width:2px;background:var(--line-soft);
}
.timeline li:last-child::after{display:none}
.timeline li.done::before{background:var(--ok)}
.timeline li.now::before{background:var(--copper);box-shadow:0 0 0 4px var(--copper-tint)}
.timeline b{color:var(--text);font-size:15px;display:block}
.timeline span{color:var(--dim);font-size:13.5px}
.timeline .tl-date{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--dim)}
.chart-box{margin-top:6px}
.chart-bars{display:flex;align-items:flex-end;gap:10px;height:180px}
.chart-bars .cb{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:8px;text-align:center}
.chart-bars .bar{background:var(--copper-deep);border-radius:4px 4px 0 0;transition:height .5s ease}
.chart-bars .cb:last-child .bar{background:var(--copper)}
.chart-bars .cl{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--dim)}
.list-plain{list-style:none;display:flex;flex-direction:column;gap:14px}
.list-plain li{display:flex;justify-content:space-between;gap:14px;align-items:baseline;border-bottom:1px solid var(--line-soft);padding-bottom:14px}
.list-plain li:last-child{border-bottom:none;padding-bottom:0}
.list-plain .lp-t b{color:var(--text);font-size:15px;font-weight:600;display:block}
.list-plain .lp-t span{color:var(--dim);font-size:13.5px}
.msg{display:flex;flex-direction:column;gap:6px;max-width:78%;margin-bottom:18px}
.msg .m-meta{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--dim);letter-spacing:.5px}
.msg .m-body{background:var(--bg-card);border:1px solid var(--line-soft);border-radius:10px;padding:13px 16px;font-size:14.5px;color:var(--muted)}
.msg.me{align-self:flex-end;text-align:right}
.msg.me .m-body{background:var(--copper-tint);border-color:var(--copper-deep);color:var(--text)}
.msg-thread{display:flex;flex-direction:column}
.msg-input{display:flex;gap:10px;margin-top:8px}
.msg-input input{
  flex:1;font-family:inherit;font-size:16px;color:var(--text);
  padding:12px 15px;border:1.5px solid var(--line);border-radius:8px;background:var(--bg);
}
.msg-input input:focus{border-color:var(--copper);outline:none}
.doc-ico{
  display:inline-flex;width:38px;height:38px;border-radius:8px;background:var(--copper-tint);
  border:1px solid var(--copper-deep);color:var(--copper);align-items:center;justify-content:center;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;flex-shrink:0;
}
.doc-row{display:flex;gap:14px;align-items:center;border-bottom:1px solid var(--line-soft);padding:14px 0}
.doc-row:last-child{border-bottom:none}
.doc-row .d-t{flex:1}
.doc-row .d-t b{color:var(--text);font-size:15px;display:block}
.doc-row .d-t span{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--dim)}
@media(max-width:700px){
  /* tabellen stapelen als kaartjes i.p.v. horizontaal scrollen */
  .card table,.card thead,.card tbody,.card tr,.card th,.card td{display:block;width:100%}
  .card thead{display:none}
  .card tr{border:1px solid var(--line-soft);border-radius:9px;padding:12px 14px;margin-bottom:12px}
  .card tr:last-child{margin-bottom:0}
  .card td{border:none;padding:5px 0;display:flex;justify-content:space-between;gap:14px;text-align:right}
  .card td b{text-align:left}
  .card td::before{content:attr(data-l);font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--dim);letter-spacing:1px;text-transform:uppercase;text-align:left}
  .admin-grid{gap:14px}
}
/* =====================================================================
   Partneromgeving — financiën, dialogen en formulierdetails
   ===================================================================== */

/* ---------- formulierdetails ---------- */
.f-group .f-hint{font-size:12.5px;color:var(--dim);line-height:1.5}
.f-group label .opt{font-weight:400;color:var(--dim);font-size:13px}
.card-note{font-size:13.5px;color:var(--muted);margin-bottom:14px}
.leeg{color:var(--dim);font-size:14px;font-style:italic}
td.leeg{text-align:center;padding:26px 0}

.link-btn{
  background:none;border:none;color:var(--copper);font-size:13.5px;
  font-weight:600;padding:2px 0;text-decoration:underline;
  text-underline-offset:3px;flex-shrink:0;
}
.link-btn:hover{color:var(--copper-hi)}
.login-form .link-btn{display:block;margin:16px auto 0;text-align:center}

.pill.no{border-color:rgba(217,80,60,.4);color:#e79a8a;background:rgba(217,80,60,.1)}
.opmerking{display:block;font-size:12.5px;color:var(--dim);margin-top:6px;max-width:34ch;line-height:1.45}
.ontbreekt{color:var(--warn)}

.chk{display:inline-flex;align-items:center;gap:6px;cursor:pointer;text-transform:none;letter-spacing:0}
.chk input{accent-color:var(--copper)}

/* ---------- kerncijfers ---------- */
.fin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:880px){.fin-stats{grid-template-columns:repeat(2,1fr)}}
.stat{
  background:var(--bg-raise);border:1px solid var(--line);
  border-radius:11px;padding:18px 20px;
}
.stat span{
  display:block;font-family:'IBM Plex Mono',monospace;font-size:11.5px;
  color:var(--dim);letter-spacing:1.2px;text-transform:uppercase;
}
.stat b{display:block;font-family:'Anton',sans-serif;font-size:25px;color:var(--text);margin-top:8px;letter-spacing:.3px}

/* ---------- tabellen ---------- */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.fin-tbl{min-width:720px}
.fin-tbl td{vertical-align:middle}
.tbl-note{font-size:12.5px;color:var(--dim);margin-top:14px}

/* ---------- uitnodigen ---------- */
.invite-row{display:grid;grid-template-columns:1.4fr 1fr auto;gap:10px;margin-top:14px}
@media(max-width:640px){.invite-row{grid-template-columns:1fr}}
.invite-row input{
  font-family:inherit;font-size:16px;color:var(--text);
  padding:11px 13px;border:1.5px solid var(--line);border-radius:8px;background:var(--bg);
}
.invite-row input:focus{border-color:var(--copper);outline:none}

/* ---------- dialogen ---------- */
.modal{
  display:none;position:fixed;inset:0;z-index:60;
  background:rgba(10,9,8,.72);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  padding:24px;overflow-y:auto;
}
.modal.on{display:flex;align-items:flex-start;justify-content:center}
.modal-card{
  background:var(--bg-raise);border:1px solid var(--line);border-radius:14px;
  padding:32px;width:100%;max-width:620px;margin:auto;
}
@media(max-width:640px){
  .modal{padding:0}
  .modal-card{
    border-radius:0;min-height:100vh;min-height:100dvh;
    padding:calc(24px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right))
            calc(24px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
  }
}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px}
.modal-head h2{font-size:19px;font-weight:700}
.modal-x{
  background:none;border:none;color:var(--dim);font-size:26px;line-height:1;
  padding:0 4px;flex-shrink:0;
}
.modal-x:hover{color:var(--text)}
.modal-foot{display:flex;gap:12px;justify-content:flex-end;margin-top:24px;flex-wrap:wrap}
@media(max-width:520px){.modal-foot{flex-direction:column-reverse}.modal-foot .btn{width:100%;text-align:center}}

/* ---------- losse juridische pagina (/voorwaarden) ---------- */
.juridisch{padding:80px 0 100px}
.juridisch .wrap{max-width:820px}
.juridisch h1{font-size:clamp(40px,5.4vw,68px)}
.juridisch .privacy{margin-top:26px}
/* De menubalk staat hier altijd op de vaste, vervaagde stand. */
.m-nav.gescrold{background:rgba(19,18,16,.86);border-bottom-color:var(--line-soft)}
@media(max-width:640px){.juridisch{padding:48px 0 70px}}

/* ---------- privacyverklaring ---------- */
.modal-card.lang{max-width:760px}
.privacy{color:var(--muted);font-size:15.5px}
.privacy .bijgewerkt{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--dim)}
.privacy section{margin-top:30px;padding-top:26px;border-top:1px solid var(--line-soft)}
.privacy h3,.privacy h2{font-size:17px;font-weight:700;color:var(--text)}
.privacy h3 .nr,.privacy h2 .nr{
  margin-right:10px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;
  font-weight:500;color:var(--copper);letter-spacing:1.5px;
}
.privacy h4{font-size:15.5px;font-weight:600;color:var(--text);margin-top:22px}
.privacy p,.privacy ul,.privacy dl{margin-top:10px}
.privacy strong{color:var(--text);font-weight:600}
.privacy ul{list-style:none}
.privacy li{position:relative;padding-left:20px}
.privacy li+li{margin-top:6px}
.privacy li::before{
  content:'';position:absolute;left:2px;top:.8em;
  width:8px;height:1.5px;background:var(--copper);
}
.privacy-feiten{border:1px solid var(--line-soft);border-radius:10px;overflow:hidden}
.privacy-feiten div{display:grid;grid-template-columns:104px 1fr;gap:16px;padding:12px 16px;background:var(--bg)}
.privacy-feiten div+div{border-top:1px solid var(--line-soft)}
.privacy-feiten dt{
  padding-top:2px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;
  color:var(--dim);text-transform:uppercase;letter-spacing:1.2px;
}
.privacy-feiten dd{color:var(--text);font-size:15px}
@media(max-width:560px){.privacy-feiten div{grid-template-columns:1fr;gap:2px}}

/* ---------- rekenvoorbeeld in de financiële dialoog ---------- */
.fin-preview{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
  background:var(--bg);border:1px solid var(--line-soft);
  border-radius:9px;padding:16px 18px;margin-bottom:18px;
}
@media(max-width:520px){.fin-preview{grid-template-columns:1fr}}
.fin-preview span{display:block;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--dim);text-transform:uppercase;letter-spacing:1px}
.fin-preview i{font-style:normal;color:var(--copper)}
.fin-preview b{display:block;font-size:19px;margin-top:5px;color:var(--text)}
.fin-preview b.negatief{color:#e79a8a}

/* ---------- bestandenlijst ---------- */
.upload-list{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.upload-list li{
  display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--text);
  background:var(--bg);border:1px solid var(--line-soft);border-radius:8px;padding:10px 13px;
}
.upload-list li.nieuw{border-color:var(--copper-deep)}
.upload-list li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upload-list li i{font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--dim);flex-shrink:0}

/* ---------- beoordeling ---------- */
.beo-cijfers{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
@media(max-width:640px){.beo-cijfers{grid-template-columns:repeat(2,1fr)}}
.beo-cijfers span{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:1px}
.beo-cijfers b{display:block;font-size:17px;margin-top:5px;color:var(--text)}
.beo-meta{font-size:13.5px;color:var(--muted);margin-bottom:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.beo-toelichting{
  font-size:14px;color:var(--muted);line-height:1.6;white-space:pre-wrap;
  background:var(--bg);border-left:2px solid var(--copper-deep);
  border-radius:0 8px 8px 0;padding:14px 16px;margin-bottom:18px;
}
#beoBody h3,#raLeadDetail h3{font-size:14px;font-weight:700;margin:18px 0 10px}

/* ---------- aanmeldingsdetail ---------- */
.lead-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
@media(max-width:780px){.lead-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.lead-grid{grid-template-columns:1fr}}
.lead-grid span{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:1px}
.lead-grid b{display:block;font-size:14.5px;color:var(--text);margin-top:4px;font-weight:600}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:max(26px,calc(env(safe-area-inset-bottom) + 14px));transform:translate(-50%,140%);
  background:var(--bg-card);border:1px solid var(--copper-deep);
  color:var(--text);border-radius:10px;padding:14px 20px;font-size:14.5px;
  max-width:min(460px,calc(100vw - 40px));z-index:80;
  box-shadow:0 12px 34px rgba(0,0,0,.45);
  transition:transform .3s cubic-bezier(.2,.8,.3,1),opacity .3s;opacity:0;
  /* De melding ligt over de pagina heen en ving daar tikken op: je tikte op een
     knop, de melding schoof eroverheen, en de volgende tik kwam niet aan. */
  pointer-events:none;
}
.toast.on{transform:translate(-50%,0);opacity:1}
.toast.fout{border-color:rgba(217,80,60,.5)}
@media(prefers-reduced-motion:reduce){.toast{transition:none}}

/* ---------- eenmalig getoonde inloggegevens ---------- */
.pw-panel{
  margin-top:16px;background:var(--bg);border:1px solid var(--copper-deep);
  border-radius:10px;padding:18px 20px;
}
.pw-panel .d-label{
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--copper);
  letter-spacing:1.4px;text-transform:uppercase;display:block;margin-bottom:14px;
}
.pw-regel{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:7px 0}
.pw-regel span{font-size:13px;color:var(--dim);flex-shrink:0}
.pw-regel b{font-size:15.5px;color:var(--text);word-break:break-all;text-align:right}
.pw-regel b.mono{font-family:'IBM Plex Mono',monospace;font-size:16px;color:var(--copper-hi);letter-spacing:.5px}
.pw-acties{display:flex;gap:14px;align-items:center;margin-top:14px;flex-wrap:wrap}

/* ---------- extra zijbalkknop ---------- */
.s-link{
  display:block;width:100%;text-align:left;background:none;border:none;
  color:var(--dim);font-size:13px;padding:8px 0;text-decoration:underline;
  text-underline-offset:3px;
}
.s-link:hover{color:var(--copper)}
@media(max-width:880px){
  .s-link{width:auto;padding:0;font-size:12.5px;white-space:nowrap;
    min-height:44px;display:inline-flex;align-items:center}
}

/* ---------- ledenlijst met resetknop ---------- */
#raLeden li{align-items:center}
#raLeden .lp-t{min-width:0}
#raLeden .lp-t span{word-break:break-all}

/* Agents & toegang: de instellingen per agent, klein genoeg om in de regel te passen
   zonder dat de lijst een formulier wordt. */
/* Het inrichtmenu boven de agentlijst: alles wat je voor een heel bedrijf in één
   handeling doet. Zonder dit zat je 45 keer hetzelfde aan te klikken, en dat is precies
   waar mensen het bij laten. */
.hq-inricht{
  margin:16px 0 4px;padding:14px;border:1px solid var(--line);border-radius:10px;
  background:var(--bg-raise);display:flex;flex-direction:column;gap:10px;
}
.hq-inricht input[type="search"]{
  width:100%;background:var(--bg);border:1px solid var(--line);border-radius:8px;
  color:var(--text);font-family:inherit;font-size:14.5px;padding:10px 12px;min-height:42px;
}
.hq-inricht input[type="search"]:focus{border-color:var(--copper);outline:none}
.hq-inricht-rij{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hq-inricht-kop{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--dim);flex:0 0 96px;
}
.hq-inricht-vink{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.hq-inricht .card-note{margin:0}
@media(max-width:640px){
  .hq-inricht-kop{flex-basis:100%}
  .hq-inricht-vink{flex-basis:100%;order:-1}
  .hq-inricht-rij .btn{flex:1 1 auto;text-align:center}
}

/* De instellingen per agent staan dicht. Open je er één, dan zie je hem helemaal;
   met alles open was de lijst elf meter lang op een telefoon. */
.hq-klap{
  background:none;border:1px solid var(--line);color:var(--muted);border-radius:8px;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:1px;text-transform:uppercase;
  padding:7px 11px;min-height:34px;margin-top:8px;
}
.hq-klap:hover{border-color:var(--copper);color:var(--copper)}
.hq-klap[aria-expanded="true"]{border-color:var(--copper);color:var(--copper)}
.hq-detail[hidden]{display:none}

/* De kop boven een team: de teller zegt hoeveel er van dat team openstaan, en de twee
   knoppen zetten het hele team in één handeling open of dicht. */
.hq-teamkop{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:18px 0 10px}
.hq-teamkop h3{margin:0}
.hq-teamknoppen{display:flex;gap:6px}
.hq-teamknoppen .hq-klap{margin-top:0}
.hq-teamkop[hidden]{display:none}

.hq-regel{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.hq-mini{
  background:var(--bg-card);border:1px solid var(--line);color:var(--text);
  border-radius:7px;padding:5px 8px;font-family:inherit;font-size:12px;max-width:100%;
}
.hq-mini:focus{outline:none;border-color:var(--copper)}
.hq-mini option{background:var(--bg-card);color:var(--text)}
.list-plain li .lp-t{flex:1 1 auto;min-width:0}
.hq-mini.hq-kleur{width:44px;height:28px;padding:2px;cursor:pointer}
/* Het gezicht van een agent: het vakje is het voorbeeld en tegelijk de knop. Het bestand
   zelf is weggewerkt, want een kale bestandskiezer naast twee nette keuzevakjes valt uit
   de toon. */
.hq-gezicht{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;flex:none;border:1px solid var(--line);border-radius:6px;
  background:var(--bg-raise) center/cover no-repeat;cursor:pointer;overflow:hidden}
.hq-gezicht:hover{border-color:var(--copper)}
.hq-gezicht input{position:absolute;inset:0;opacity:0;cursor:pointer}
.hq-gezicht span{font-family:'IBM Plex Mono',monospace;font-size:15px;line-height:1;
  color:var(--dim);pointer-events:none}
.hq-gezicht:hover span{color:var(--copper)}