/* ============================================================
   TEN BRINKE — Projectportfolio · Huisstijl Visual Identity v1.5
   Grijs #4E4F52 · Oranje #F6A02A · Khand (koppen) · Inter (body)
   ============================================================ */
:root{
  --tb-grey:#5A5B5E; --tb-grey-deep:#3E3F42; --tb-grey-ink:#4E4F52;
  --tb-orange:#F6A02A;
  --paper:#F4F3F1; --paper-2:#EBEBE8; --white:#FFFFFF;
  --line:#DEDEDA; --line-dark:rgba(255,255,255,.14);
  --txt:#4E4F52; --txt-soft:#6B6C6F; --txt-invert:#F4F3F1; --txt-invert-soft:#B7B8BA;
  --shadow-sm:0 1px 3px rgba(43,44,46,.08);
  --shadow-md:0 8px 30px rgba(43,44,46,.12);
  --shadow-lg:0 24px 70px rgba(43,44,46,.28);
  --nav-w:264px; --ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--paper);color:var(--txt);-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.5;overflow-x:hidden}
h1,h2,h3,h4,.khand{font-family:'Khand',sans-serif;font-weight:600;letter-spacing:.01em;line-height:1.02;text-transform:uppercase}
::selection{background:var(--tb-orange);color:var(--tb-grey-ink)}
img{max-width:100%;display:block}

/* ---------- SHELL + NAV ---------- */
.shell{display:flex;min-height:100vh}
.nav{width:var(--nav-w);background:var(--tb-grey-ink);color:var(--txt-invert);position:fixed;top:0;left:0;bottom:0;display:flex;flex-direction:column;z-index:200;border-right:1px solid rgba(0,0,0,.2)}
.nav-brand{padding:30px 28px 26px;border-bottom:1px solid var(--line-dark);position:relative}
.fs-btn{position:absolute;right:20px;top:26px;width:32px;height:32px;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s,transform .2s;padding:0}
.fs-btn:hover{background:var(--tb-orange);border-color:var(--tb-orange);transform:scale(1.06)}
.fs-btn svg{width:16px;height:16px;stroke:var(--txt-invert-soft);stroke-width:2}
.fs-btn:hover svg{stroke:var(--tb-grey-ink)}
.fs-btn.on{background:rgba(246,160,42,.18);border-color:rgba(246,160,42,.45)}
.fs-btn.on svg{stroke:var(--tb-orange)}
/* Hint bij de knop voor volledig scherm — verschijnt bij het openen, verdwijnt na 5 s */
.fs-hint{position:fixed;z-index:9000;max-width:236px;padding:12px 15px 13px;border-radius:10px;
  background:var(--paper,#F4F3F1);color:var(--txt,#4E4F52);
  border-left:3px solid var(--tb-orange,#F6A02A);
  box-shadow:0 14px 38px rgba(20,20,22,.42);pointer-events:auto;cursor:pointer;
  opacity:0;transform:translateX(-6px);transition:opacity .32s ease,transform .32s ease}
.fs-hint.show{opacity:1;transform:translateX(0)}
.fs-hint::before{content:"";position:absolute;left:-7px;top:50%;margin-top:-6px;width:12px;height:12px;
  background:var(--tb-orange,#F6A02A);transform:rotate(45deg);border-radius:2px}
.fs-hint .fh-t{font-family:'Khand',sans-serif;font-weight:600;font-size:16px;line-height:1.05;
  letter-spacing:.02em;text-transform:uppercase}
.fs-hint .fh-t .dot{color:var(--tb-orange)}
.fs-hint .fh-s{margin-top:3px;font-size:11.5px;line-height:1.4;color:var(--txt-soft,#6B6C6F)}
/* Hint bij de projectnavigatie — verschijnt bij het openen van de eerste
   projectpagina, verdwijnt na 10 s. Zelfde vormtaal als de schermhint. */
.nav-hint{position:fixed;z-index:9200;max-width:242px;padding:12px 15px 13px;border-radius:10px;
  background:var(--paper,#F4F3F1);color:var(--txt,#4E4F52);
  border-left:3px solid var(--tb-orange,#F6A02A);
  box-shadow:0 14px 38px rgba(20,20,22,.42);cursor:pointer;
  opacity:0;transform:translateY(6px);transition:opacity .32s ease,transform .32s ease}
.nav-hint.show{opacity:1;transform:translateY(0)}
.nav-hint::before{content:"";position:absolute;left:26px;bottom:-7px;width:12px;height:12px;
  background:var(--tb-orange,#F6A02A);transform:rotate(45deg);border-radius:2px}
.nav-hint.pijl-boven::before{bottom:auto;top:-7px;left:50%;margin-left:-6px}
.nav-hint.beeld-hint{max-width:262px;transform:translateY(-6px)}
.nav-hint.beeld-hint.show{transform:translateY(0)}
.nav-hint .nh-t{font-family:'Khand',sans-serif;font-weight:600;font-size:16px;line-height:1.05;
  letter-spacing:.02em;text-transform:uppercase}
.nav-hint .nh-t .dot{color:var(--tb-orange)}
.nav-hint .nh-s{margin-top:3px;font-size:11.5px;line-height:1.4;color:var(--txt-soft,#6B6C6F)}
@media (prefers-reduced-motion:reduce){.nav-hint{transition:none}}
@media (prefers-reduced-motion:reduce){.fs-hint{transition:none}}
/* --------------------------------------------------------------
   WOORDMERK
   Het woordmerk is geen gezette tekst maar het originele beeld.
   Reden: in het officiele woordmerk beginnen TEN en BRINKE op exact
   dezelfde linkerrand. Khand doet dat niet — het linker zijwit van de
   T is 0,010 em en dat van de B 0,0675 em, op 52 px dus 3 px verschil.
   Daarbij is het getekende woordmerk duidelijk smaller dan Khand Bold
   (TEN is 2,00x de kapitaalhoogte breed, in Khand 2,80x), wat met
   spatieren niet te herstellen is. Identity Guide 1.6 vraagt ook om
   het originele woordmerk te gebruiken waar het kan.
   De varianten worden gemaakt door maak_woordmerk.py.

   Het is bewust een gewone afbeelding met alleen een hoogte: geen
   background-position, geen rekenwerk met variabelen. Die constructie
   kan op de ene browser werken en op de andere een leeg vlak geven;
   een afbeelding met een hoogte doet het overal, en valt bij een
   laadfout terug op de alt-tekst in plaats van op niets.
   -------------------------------------------------------------- */
.wordmark,.mob-bar .wm,.detail-foot .wm{display:block;width:auto}
.wordmark{height:46px}
.nav-tag{margin-top:12px;margin-left:-0.0675em;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--txt-invert-soft);font-weight:400}
.nav-menu{padding:18px 14px;flex:1;display:flex;flex-direction:column;gap:2px}
.nav-item{display:flex;align-items:center;gap:13px;padding:12px 14px;border-radius:8px;cursor:pointer;color:var(--txt-invert-soft);transition:background .2s var(--ease),color .2s var(--ease);border:none;background:none;width:100%;text-align:left;font-family:'Khand',sans-serif;font-weight:500;font-size:17px;letter-spacing:.03em;text-transform:uppercase}
.nav-item svg{width:18px;height:18px;flex-shrink:0;stroke-width:1.7}
.nav-item:hover{color:var(--txt-invert);background:rgba(255,255,255,.05)}
.nav-item.active{color:var(--tb-grey-ink);background:var(--tb-orange)}
.nav-item.active svg{stroke:var(--tb-grey-ink)}
.nav-foot{padding:20px 28px;border-top:1px solid var(--line-dark);font-size:10.5px;color:var(--txt-invert-soft);letter-spacing:.04em;line-height:1.6}
.nav-foot a{color:var(--txt-invert-soft);text-decoration:none}
.nav-foot .disc{margin-top:9px;font-size:9px;line-height:1.5;letter-spacing:.02em;opacity:.62}
.main{margin-left:var(--nav-w);flex:1;min-width:0}
.view{display:none;animation:fade .5s var(--ease)}
.view.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- HERO ---------- */
.hero{position:relative;background:var(--tb-grey-ink);color:var(--txt-invert);padding:74px 60px 0;overflow:hidden}
.hero-grid-accent{position:absolute;top:0;right:0;bottom:0;width:38%;background:var(--tb-grey);clip-path:polygon(22% 0,100% 0,100% 100%,0 100%);opacity:.5}
.hero-inner{position:relative;max-width:900px}
.hero-eyebrow{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--tb-orange);font-weight:500;margin-bottom:22px}
.hero h1{font-size:clamp(46px,6.2vw,88px);font-weight:700;line-height:.9}
.hero h1 .l2{color:var(--tb-orange);display:block}
.hero-lead{margin-top:24px;font-size:17px;font-weight:300;line-height:1.6;max-width:600px;color:var(--txt-invert)}
.hero-lead strong{font-weight:500;color:var(--white)}
.kpi-strip{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin:56px -60px 0;background:var(--tb-grey);border-top:1px solid var(--line-dark)}
.kpi{padding:26px 34px 30px;border-right:1px solid var(--line-dark);transition:background .28s var(--ease);cursor:default}
.kpi:hover{background:rgba(255,255,255,.055)}
.kpi-val,.kpi-label{transition:color .28s var(--ease)}
.kpi:hover .kpi-val{color:var(--tb-orange)}
.kpi:last-child{border-right:none}
.kpi-val{font-family:'Khand',sans-serif;font-weight:600;font-size:40px;line-height:1;color:var(--white)}
.kpi-val .u{color:var(--tb-orange)}
.kpi-label{margin-top:7px;font-family:'Khand',sans-serif;font-weight:500;font-size:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--txt-invert)}
.kpi-sub{margin-top:3px;font-size:11.5px;color:var(--txt-invert-soft);font-weight:300}
/* Het eerste scherm blijft precies zoals het was: hero + cijfers vullen
   altijd minstens de volledige hoogte, zodat de blokken eronder pas in
   beeld komen als je bewust scrolt. */
.home-top{min-height:100vh;display:flex;flex-direction:column;background:var(--paper)}
.hero-summary{padding:52px 60px 64px;background:var(--paper);flex:1}
.summary-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:30px}
.summary-head h2{font-size:34px;color:var(--txt)}
.summary-head p{font-size:13.5px;color:var(--txt-soft);max-width:440px}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat-card{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:22px 24px;position:relative;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.stat-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--tb-orange);transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease)}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.stat-card:hover::before{transform:scaleY(1)}
.stat-card .n{font-family:'Khand',sans-serif;font-weight:600;font-size:44px;line-height:.95;color:var(--tb-grey-ink)}
.stat-card .t{margin-top:6px;font-family:'Khand',sans-serif;font-size:16px;text-transform:uppercase;letter-spacing:.04em;color:var(--txt-soft)}
.cta-inline{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap}
.btn{font-family:'Khand',sans-serif;font-weight:600;font-size:17px;letter-spacing:.05em;text-transform:uppercase;padding:13px 26px;border-radius:9px;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;transition:transform .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease);text-decoration:none}
.btn svg{width:17px;height:17px;stroke-width:2}
.btn-primary{background:var(--tb-orange);color:var(--tb-grey-ink)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(246,160,42,.34)}
.btn-ghost{background:var(--tb-grey-ink);color:var(--txt-invert)}
.btn-ghost:hover{transform:translateY(-2px);background:var(--tb-grey)}

/* ---------- SECTION HEAD ---------- */
.section-head{padding:44px 60px 0;display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:20px}
.section-head .lead-block{max-width:640px}
.section-head .eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--tb-orange);font-weight:500;margin-bottom:12px}
.section-head h2{font-size:clamp(34px,4vw,52px);color:var(--txt);line-height:.95}
.section-head .desc{margin-top:14px;font-size:14px;color:var(--txt-soft);font-weight:300;line-height:1.6}

/* ---------- MAP ---------- */
.map-wrap{padding:34px 60px 60px}
.map-shell{display:grid;grid-template-columns:1fr 340px;gap:0;border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-md);background:var(--white);height:min(72vh,720px);min-height:520px;position:relative}
/* EXPERTISES & PROFESSIONALS */
.ex-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.ex-card{background:var(--white);border:1px solid var(--line);border-radius:13px;padding:20px 21px 18px;opacity:0;animation:tlIn .5s var(--ease) forwards;transition:border-color .2s,box-shadow .2s}
.ex-card:hover{border-color:var(--tb-orange);box-shadow:0 5px 20px rgba(43,44,46,.07)}
.ex-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.ex-ic{width:40px;height:40px;border-radius:10px;background:rgba(246,160,42,.12);display:flex;align-items:center;justify-content:center}
.ex-ic svg{width:21px;height:21px;stroke:var(--tb-orange);stroke-width:1.9}
.ex-nr{font-family:'Khand',sans-serif;font-weight:700;font-size:26px;line-height:1;color:var(--line)}
.ex-titel{font-family:'Khand',sans-serif;font-weight:600;font-size:20px;text-transform:uppercase;letter-spacing:.02em;color:var(--tb-grey-ink);line-height:1.1;margin-bottom:7px}
.ex-tekst{font-size:12.5px;line-height:1.55;color:var(--txt-soft);font-weight:300;margin-bottom:13px}
.ex-pro{display:flex;flex-wrap:wrap;gap:6px}
.ex-pro span{font-size:11px;padding:4px 10px;border-radius:14px;background:var(--paper-2);color:var(--txt);font-weight:500;letter-spacing:.01em}

/* ---------- KERNWAARDEN & EXPERTISES op het overzicht ---------- */
.blok{padding:56px 60px 60px}
.blok-paper{background:var(--paper)}
.blok-white{background:var(--white);border-top:1px solid var(--line)}
.blok-head{max-width:760px;margin-bottom:30px}
.blok-head .eyebrow{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--tb-orange);font-weight:500;margin-bottom:9px}
.blok-head h2{font-size:40px;line-height:.96;color:var(--tb-grey-ink)}
.blok-head h2 .dot{color:var(--tb-orange)}
.blok-head p{margin-top:12px;font-size:14px;line-height:1.65;color:var(--txt-soft);font-weight:300}

.kw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.kw-card{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:28px 26px 26px;
  transition:border-color .22s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease)}
.kw-card:hover{border-color:var(--tb-orange);box-shadow:0 8px 28px rgba(43,44,46,.08);transform:translateY(-2px)}
.kw-ic{width:64px;height:64px;border-radius:50%;display:block;margin-bottom:16px}
.kw-titel{font-family:'Khand',sans-serif;font-weight:700;font-size:30px;line-height:1;text-transform:uppercase;
  letter-spacing:.01em;color:var(--tb-grey-ink)}
.kw-titel .dot{color:var(--tb-orange)}
.kw-kop{margin-top:9px;font-size:14.5px;line-height:1.45;color:var(--txt);font-weight:500}
.kw-tekst{margin-top:11px;font-size:13px;line-height:1.68;color:var(--txt-soft);font-weight:300}
@media(max-width:820px){
  .blok{padding:38px 22px 42px}
  .blok-head h2{font-size:32px}
  .kw-card{padding:22px 20px 20px}
}

/* OMZETVERDELING PER LAND */
.oz-totaal{text-align:center;padding:6px 0 26px;border-bottom:1px solid var(--line);margin-bottom:26px}
.oz-t-num{display:block;font-family:'Khand',sans-serif;font-weight:700;font-size:46px;line-height:1;color:var(--tb-orange)}
.oz-t-lbl{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--txt-soft);margin-top:6px;font-weight:500}
.oz-rij{margin-bottom:24px;opacity:0;animation:tlIn .5s var(--ease) forwards}
.oz-rij:last-child{margin-bottom:0}
.oz-kop{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.oz-land{font-family:'Khand',sans-serif;font-weight:600;font-size:23px;text-transform:uppercase;letter-spacing:.02em;color:var(--tb-grey-ink)}
.oz-pct{font-family:'Khand',sans-serif;font-weight:700;font-size:27px;color:var(--tb-orange);line-height:1}
.oz-balk{height:11px;background:var(--paper-2);border-radius:6px;overflow:hidden}
.oz-vul{height:100%;background:linear-gradient(90deg,var(--tb-orange),#F8B450);border-radius:6px;width:0;animation:ozGroei .9s var(--ease) forwards}
@keyframes ozGroei{from{width:0}}
.oz-onder{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-top:8px;flex-wrap:wrap}
.oz-bedrag{font-family:'Khand',sans-serif;font-weight:600;font-size:16px;color:var(--txt);letter-spacing:.01em}
.oz-vest{font-size:11.5px;color:var(--txt-soft);font-weight:300}
@media(max-width:700px){.ex-grid{grid-template-columns:1fr}.oz-t-num{font-size:36px}}

/* TIJDLIJN — geschiedenis van Ten Brinke */
.kpi-klik{cursor:pointer}
.tijdlijn-overlay{position:fixed;inset:0;z-index:920;background:rgba(43,44,46,.72);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:32px 20px;animation:fade .3s}
.tijdlijn-overlay.open{display:flex}
.tl-panel{position:relative;width:min(880px,96vw);max-height:92vh;background:var(--paper);border-radius:18px;overflow:hidden;box-shadow:0 30px 90px rgba(43,44,46,.4);display:flex;flex-direction:column;animation:lbZoom .35s var(--ease)}
.tl-close{position:absolute;right:20px;top:20px;z-index:3;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s}
.tl-close:hover{background:var(--tb-orange);transform:rotate(90deg)}
.tl-close svg{width:18px;height:18px;stroke:var(--tb-grey-ink);stroke-width:2.2}
.tl-head{padding:38px 44px 26px;background:var(--tb-grey-ink);color:#fff;flex-shrink:0}
.tl-eyebrow{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--tb-orange);font-weight:600;margin-bottom:8px}
.tl-head h2{font-family:'Khand',sans-serif;font-weight:600;font-size:38px;line-height:1.05;text-transform:uppercase;color:#fff;margin-bottom:10px}
.tl-head h2 .dot{color:var(--tb-orange)}
.tl-head p{font-size:14px;color:#C9CACB;font-weight:300;line-height:1.6;max-width:520px}
.tl-scroll{overflow-y:auto;padding:34px 44px 40px;flex:1}
.tl-lijn{position:relative;padding-left:34px}
.tl-lijn:before{content:'';position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:linear-gradient(to bottom,var(--tb-orange),rgba(246,160,42,.25))}
.tl-item{position:relative;padding-bottom:26px;opacity:0;animation:tlIn .5s var(--ease) forwards}
.tl-item:last-child{padding-bottom:0}
@keyframes tlIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.tl-dot{position:absolute;left:-34px;top:5px;width:16px;height:16px;border-radius:50%;background:var(--paper);border:3px solid var(--tb-orange);box-shadow:0 0 0 4px var(--paper)}
.tl-jaar{font-family:'Khand',sans-serif;font-weight:700;font-size:26px;line-height:1;color:var(--tb-grey-ink);margin-bottom:5px;letter-spacing:.02em}
.tl-tekst{font-size:14px;line-height:1.65;color:var(--txt-soft);font-weight:300;max-width:640px}
@media(max-width:700px){
  .tl-head{padding:28px 24px 20px}.tl-head h2{font-size:29px}
  .tl-scroll{padding:26px 24px 30px}
}
.land-stats{max-height:0;overflow:hidden;opacity:0;transition:max-height .45s var(--ease),opacity .3s var(--ease),padding .3s var(--ease);padding:0 24px;border-bottom:1px solid var(--line-dark)}
.land-stats.open{max-height:520px;opacity:1;padding:16px 24px 18px}
.ls-eyebrow{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--tb-orange);font-weight:600;margin-bottom:3px}
.ls-head h4{font-family:'Khand',sans-serif;font-weight:600;font-size:24px;line-height:1;text-transform:uppercase;color:#fff;margin-bottom:12px}
.ls-head h4 .dot{color:var(--tb-orange)}
.ls-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:9px}
.ls-item{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);border-radius:9px;padding:9px 11px}
.ls-num{display:block;font-family:'Khand',sans-serif;font-weight:700;font-size:25px;line-height:1;color:var(--tb-orange)}
.ls-lbl{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:#B7B8BA;margin-top:3px;font-weight:500}
.ls-omzet{font-family:'Khand',sans-serif;font-weight:600;font-size:17px;color:#fff;margin-bottom:9px;letter-spacing:.01em}
.ls-omzet span{font-family:'Inter',sans-serif;font-weight:400;font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:#B7B8BA;margin-left:5px}
.ls-hk{font-size:12px;color:#fff;margin-bottom:10px;padding:7px 11px;background:rgba(246,160,42,.12);border-radius:7px;border:1px solid rgba(246,160,42,.25)}
.ls-hk span{font-family:'Khand',sans-serif;font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--tb-orange);margin-right:5px}
.ls-feiten{list-style:none}
.ls-feiten li{position:relative;padding-left:14px;font-size:11.5px;line-height:1.5;color:#C9CACB;font-weight:300;margin-bottom:6px}
.ls-feiten li:before{content:'';position:absolute;left:0;top:6px;width:4px;height:4px;background:var(--tb-orange);border-radius:50%}
#map{width:100%;height:100%;background:var(--paper-2);z-index:1}
/* Rustige, monochrome kaartondergrond passend bij de huisstijl */
/* PDOK 'grijs' is al grijs — grijsfilter niet meer nodig */
.map-side{background:var(--tb-grey-ink);color:var(--txt-invert);display:flex;flex-direction:column;min-height:0}
.map-side-head{padding:22px 24px 14px;border-bottom:1px solid var(--line-dark)}
.map-side-head h3{font-size:22px;color:var(--white)}
.map-side-head p{font-size:11.5px;color:var(--txt-invert-soft);margin-top:4px}
.map-cat-toggle{display:flex;flex-wrap:wrap;gap:6px;padding:14px 24px 0}
.map-filters{padding:12px 24px 14px;border-bottom:1px solid var(--line-dark);display:flex;flex-wrap:wrap;gap:7px}
.map-side-scroll{overflow-y:auto;flex:1;min-height:0}
.map-side-list{padding:8px 12px 16px}
.map-side-list::-webkit-scrollbar{width:8px}
.map-side-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:4px}
.mini{display:flex;gap:12px;align-items:center;padding:11px 12px;border-radius:9px;cursor:pointer;transition:background .18s var(--ease)}
.mini:hover,.mini.hot{background:rgba(255,255,255,.06)}
.mini-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.mini-body{min-width:0;flex:1}
.mini-name{font-family:'Khand',sans-serif;font-weight:600;font-size:16px;color:var(--white);line-height:1;text-transform:uppercase;letter-spacing:.02em}
.mini-meta{font-size:11px;color:var(--txt-invert-soft);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-arrow{color:var(--txt-invert-soft);opacity:0;transform:translateX(-4px);transition:.18s var(--ease)}
.mini:hover .mini-arrow{opacity:1;transform:none;color:var(--tb-orange)}
.tb-marker{position:relative;width:26px;height:26px;transition:transform .2s var(--ease)}
.tb-marker .pin{width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:2.5px solid var(--white);box-shadow:0 4px 10px rgba(0,0,0,.35)}
.tb-marker .core{position:absolute;top:7px;left:7px;width:12px;height:12px;border-radius:50%;background:var(--white)}
.tb-marker:hover{transform:scale(1.18) translateY(-2px)}
.leaflet-marker-icon.sel .tb-marker{transform:scale(1.28) translateY(-3px)}
/* Vestiging-markers: genummerd */
.vst-marker{width:28px;height:28px;border-radius:50%;background:var(--tb-orange);border:2.5px solid #fff;box-shadow:0 3px 9px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;font-family:'Khand',sans-serif;font-weight:700;font-size:14px;color:var(--tb-grey-ink);transition:transform .2s var(--ease)}
.vst-marker.hoofd{background:var(--tb-grey-ink);color:#fff;width:32px;height:32px;font-size:15px;box-shadow:0 4px 12px rgba(0,0,0,.45)}
.vst-marker:hover{transform:scale(1.2)}
.leaflet-marker-icon.sel .vst-marker{transform:scale(1.3);box-shadow:0 6px 16px rgba(246,160,42,.6)}
/* Vestiging-lijst mini */
.vmini{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:9px;cursor:pointer;transition:background .18s var(--ease)}
.vmini:hover,.vmini.hot{background:rgba(255,255,255,.06)}
.vmini-nr{width:26px;height:26px;border-radius:50%;background:var(--tb-orange);color:var(--tb-grey-ink);display:flex;align-items:center;justify-content:center;font-family:'Khand',sans-serif;font-weight:700;font-size:13px;flex-shrink:0}
.vmini-nr.hoofd{background:#fff;color:var(--tb-grey-ink)}
.vmini-body{min-width:0;flex:1}
.vmini-stad{font-family:'Khand',sans-serif;font-weight:600;font-size:16px;color:var(--white);line-height:1;text-transform:uppercase;letter-spacing:.02em}
.vmini-sub{font-size:11px;color:var(--txt-invert-soft);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vmini-badge{font-family:'Khand',sans-serif;font-weight:600;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--tb-orange);border:1px solid rgba(246,160,42,.4);border-radius:20px;padding:2px 7px;flex-shrink:0}
/* Vestiging-popup */
.vpop{padding:14px 16px 15px;min-width:180px}
.vpop .vnr{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--tb-orange);color:var(--tb-grey-ink);font-family:'Khand',sans-serif;font-weight:700;font-size:13px;margin-bottom:8px}
.vpop h4{font-size:20px;color:var(--txt);line-height:1}
.vpop .vland{font-size:12px;color:var(--txt-soft);margin-top:3px}
.vpop .vadr{font-size:12px;color:var(--txt);margin-top:8px;line-height:1.4;font-weight:300}
.vpop .vextra{font-size:11px;color:var(--txt-soft);margin-top:6px;line-height:1.4;font-weight:300;font-style:italic}
.vpop .vh{font-family:'Khand',sans-serif;font-weight:600;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--tb-orange);margin-top:8px}
.vpop .vcontact{margin-top:11px;padding-top:11px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.vpop .vc-row{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--txt);text-decoration:none;transition:color .18s;word-break:break-all}
.vpop .vc-row:hover{color:var(--tb-orange)}
.vpop .vc-row svg{flex-shrink:0}
.leaflet-popup-content-wrapper{border-radius:12px;padding:0;overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--line)}
.leaflet-popup-content{margin:0;width:260px!important}
.leaflet-popup-tip{background:var(--white)}
/* Sluitkruisje in de hoek van een popup. Stond uit; een popup ging dan
   alleen weg door naast de kaart te klikken, en op een telefoon zoek je
   naar het kruisje. Het vlak is 34 px zodat een vinger het raakt, het
   kruisje zelf blijft klein en rustig. */
.leaflet-container a.leaflet-popup-close-button{
  width:34px;height:34px;top:4px;right:4px;padding:0;border-radius:50%;
  font:400 0/0 'Inter',sans-serif;color:transparent;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  box-shadow:0 1px 3px rgba(0,0,0,.14);transition:background .18s var(--ease)}
.leaflet-container a.leaflet-popup-close-button:before{
  content:"";width:13px;height:13px;
  background:no-repeat center/13px 13px
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234E4F52' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E")}
.leaflet-container a.leaflet-popup-close-button:hover{background:#fff}
/* De popup van een project is helemaal klikbaar; het kruisje niet. */
.leaflet-popup-close-button{z-index:2}
.pop{cursor:pointer}
.pop-img{height:130px;background-size:cover;background-position:center;position:relative}
.pop-status{position:absolute;left:10px;top:10px;font-family:'Khand',sans-serif;font-weight:600;font-size:11px;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:20px;color:#fff}
.pop-body{padding:13px 15px 15px}
.pop-body h4{font-size:20px;color:var(--txt);line-height:1}
.pop-body .loc{font-size:11.5px;color:var(--txt-soft);margin-top:3px;display:flex;align-items:center;gap:5px}
.pop-body .prog{font-size:12px;color:var(--txt);margin-top:9px;line-height:1.45;font-weight:300}
.pop-link{margin-top:11px;font-family:'Khand',sans-serif;font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--tb-orange);display:flex;align-items:center;gap:6px}

/* ---------- PORTFOLIO CONTROLS ---------- */
.cat-toggle{padding:26px 60px 0;display:flex;gap:0;border-radius:0}
.cat-btn{font-family:'Khand',sans-serif;font-weight:600;font-size:19px;letter-spacing:.03em;text-transform:uppercase;padding:13px 28px;border:1px solid var(--line);background:var(--white);color:var(--txt-soft);cursor:pointer;transition:all .2s var(--ease)}
.cat-btn:first-child{border-radius:10px 0 0 10px}
.cat-btn:last-child{border-radius:0 10px 10px 0;border-left:none}
.cat-btn.active{background:var(--tb-grey-ink);border-color:var(--tb-grey-ink);color:var(--white)}
.cat-btn .cnt{font-size:13px;opacity:.6;margin-left:7px}
.controls{padding:22px 60px 6px;display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.search-box{position:relative;flex:1;min-width:260px;max-width:420px}
.search-box svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:17px;height:17px;stroke:var(--txt-soft);stroke-width:2}
.search-box input{width:100%;padding:13px 16px 13px 44px;border:1px solid var(--line);border-radius:10px;background:var(--white);font-family:'Inter',sans-serif;font-size:14px;color:var(--txt);transition:border .2s var(--ease),box-shadow .2s var(--ease)}
.search-box input:focus{outline:none;border-color:var(--tb-orange);box-shadow:0 0 0 3px rgba(246,160,42,.16)}
.result-count{font-family:'Khand',sans-serif;font-weight:500;font-size:15px;letter-spacing:.03em;text-transform:uppercase;color:var(--txt-soft)}
.filter-bar{padding:14px 60px 4px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.filter-label{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-soft);margin-right:6px;font-weight:500}
.chip{font-family:'Khand',sans-serif;font-weight:500;font-size:14.5px;letter-spacing:.03em;text-transform:uppercase;padding:7px 15px;border-radius:20px;border:1px solid var(--line);background:var(--white);color:var(--txt-soft);cursor:pointer;transition:all .18s var(--ease);white-space:nowrap}
.chip:hover{border-color:var(--tb-grey);color:var(--txt)}
/* Een geselecteerde filterknop is altijd oranje — nooit half grijs, half oranje */
.chip.active,.chip.active.orange{background:var(--tb-orange);border-color:var(--tb-orange);color:var(--tb-grey-ink)}

/* ---------- GRID ---------- */
.grid{padding:26px 60px 70px;display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:24px}
.card{background:var(--white);border:1px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer;transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s var(--ease);display:flex;flex-direction:column}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--paper-2)}
.card-img{height:176px;background-size:cover;background-position:center;position:relative;background-color:var(--paper-2)}
.card-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(43,44,46,.55),transparent 45%)}
.card-badge{position:absolute;left:13px;top:13px;z-index:2;font-family:'Khand',sans-serif;font-weight:600;font-size:12px;letter-spacing:.03em;text-transform:uppercase;padding:4px 11px;border-radius:20px;color:#fff}
.card-count{position:absolute;right:13px;top:13px;z-index:2;font-family:'Khand',sans-serif;font-weight:500;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;padding:4px 9px;border-radius:6px;background:rgba(43,44,46,.62);color:#fff;backdrop-filter:blur(4px);display:flex;align-items:center;gap:5px}
.card-count svg{width:12px;height:12px;stroke:#fff;stroke-width:2}
.card-type{position:absolute;left:13px;bottom:12px;z-index:2;font-family:'Khand',sans-serif;font-weight:500;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:#fff}
.card-body{padding:17px 19px 19px;flex:1;display:flex;flex-direction:column}
.card-body h3{font-size:24px;color:var(--txt);line-height:.98}
.card-loc{font-size:12px;color:var(--txt-soft);margin-top:4px;display:flex;align-items:center;gap:5px}
.card-loc svg{width:13px;height:13px;stroke:var(--tb-orange);stroke-width:2}
.card-facts{margin-top:14px;display:flex;gap:18px;padding-top:14px;border-top:1px solid var(--line)}
.fact .fv{font-family:'Khand',sans-serif;font-weight:600;font-size:21px;color:var(--tb-grey-ink);line-height:1}
.fact .fl{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-soft);margin-top:2px}
.card-cta{margin-top:auto;padding-top:15px;font-family:'Khand',sans-serif;font-weight:600;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--tb-orange);display:flex;align-items:center;gap:6px;opacity:0;transform:translateX(-4px);transition:.25s var(--ease)}
.card-cta svg{width:15px;height:15px;flex:none}
.card:hover .card-cta{opacity:1;transform:none}
.empty{padding:70px 60px;text-align:center;color:var(--txt-soft)}
.empty h3{font-size:26px;color:var(--txt);margin-bottom:8px}

/* ============================================================
   PROJECTDETAIL — volledig herontworpen, rijk & beeldgedreven
   ============================================================ */
.detail{position:fixed;inset:0;z-index:500;display:none}
.detail.open{display:block}
.detail-scrim{position:absolute;inset:0;background:rgba(30,31,33,.66);backdrop-filter:blur(4px);animation:fade .3s}
.detail-panel{position:absolute;top:0;right:0;bottom:0;width:min(1240px,98vw);background:var(--paper);box-shadow:var(--shadow-lg);overflow-y:auto;animation:slideIn .44s var(--ease);display:flex;flex-direction:column}
.detail-panel.from-map{width:min(1320px,98vw)}
@keyframes slideIn{from{transform:translateX(50px);opacity:.4}to{transform:none;opacity:1}}
.detail-panel::-webkit-scrollbar{width:10px}
.detail-panel::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px}

/* GALERIJ — grote hero + thumbnails */
.gallery{position:relative;background:var(--tb-grey-ink)}
/* LIGHTBOX — render op volledig formaat */
.lightbox{position:fixed;inset:0;z-index:900;background:rgba(20,21,23,.94);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;animation:fade .25s}
.lightbox.open{display:flex}
.lb-img{max-width:94vw;max-height:90vh;object-fit:contain;border-radius:4px;box-shadow:0 20px 80px rgba(0,0,0,.6);animation:lbZoom .3s var(--ease)}
@keyframes lbZoom{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.lb-close{position:absolute;top:24px;right:28px;z-index:5;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.12);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s}
.lb-close:hover{background:var(--tb-orange);transform:rotate(90deg)}
.lb-close svg{width:24px;height:24px;stroke:#fff;stroke-width:2.2}
.lb-close:hover svg{stroke:var(--tb-grey-ink)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:60px;height:60px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.12);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s}
.lb-nav:hover{background:var(--tb-orange);transform:translateY(-50%) scale(1.08)}
.lb-nav svg{width:28px;height:28px;stroke:#fff;stroke-width:2.4}
.lb-nav:hover svg{stroke:var(--tb-grey-ink)}
.lb-prev{left:32px}
.lb-next{right:32px}
.lb-counter{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:5;font-family:'Khand',sans-serif;font-weight:500;font-size:15px;letter-spacing:.08em;color:rgba(255,255,255,.85);background:rgba(0,0,0,.4);padding:6px 16px;border-radius:20px}
.gallery-main{cursor:zoom-in}
@media(max-width:900px){
  .lb-nav{width:44px;height:44px}.lb-nav svg{width:22px;height:22px}
  .lb-prev{left:12px}.lb-next{right:12px}
  .lb-close{top:14px;right:14px;width:44px;height:44px}
}
.gallery-main{position:relative;width:100%;height:calc(100vh - 228px);max-height:calc(100vh - 228px);min-height:280px;background-size:cover;background-position:center;background-color:var(--tb-grey);transition:background-image .3s var(--ease)}
.gallery-main::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(30,31,33,.9),rgba(30,31,33,.05) 50%)}
.detail-close{position:absolute;top:20px;right:20px;z-index:6;width:44px;height:44px;border-radius:50%;border:none;background:rgba(255,255,255,.92);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s var(--ease),background .2s}
.detail-close:hover{transform:rotate(90deg);background:#fff}
.detail-close svg{width:20px;height:20px;stroke:var(--tb-grey-ink);stroke-width:2.2}
/* Project-navigatie (tussen projecten) */
.proj-nav{position:absolute;bottom:36px;z-index:6;width:56px;height:56px;border-radius:50%;border:none;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s var(--ease),transform .2s var(--ease);border:1px solid rgba(255,255,255,.25)}
.proj-nav:hover{background:var(--tb-orange);transform:scale(1.08)}
.proj-nav svg{width:26px;height:26px;stroke:#fff;stroke-width:2.4}
.proj-nav:hover svg{stroke:var(--tb-grey-ink)}
/* Beide pijlen naast elkaar, gegroepeerd linksonder in de donkere zone */
.proj-nav-prev{left:36px}
.proj-nav-next{left:104px}
@media(max-width:900px){
  .proj-nav{width:44px;height:44px;bottom:20px}
  .proj-nav svg{width:20px;height:20px}
  .proj-nav-prev{left:16px}
  .proj-nav-next{left:70px}
}
.gallery-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:46px;height:46px;border-radius:50%;border:none;background:rgba(255,255,255,.85);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s}
.gallery-nav:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.gallery-nav svg{width:22px;height:22px;stroke:var(--tb-grey-ink);stroke-width:2.4}
.gallery-nav.prev{left:18px}
.gallery-nav.next{right:18px}
.gallery-nav.hidden{display:none}
.gallery-caption{position:absolute;left:30px;bottom:26px;right:30px;z-index:3}
.detail-status{display:inline-block;font-family:'Khand',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;padding:5px 13px;border-radius:20px;color:#fff;margin-bottom:12px}
.gallery-caption h2{font-size:clamp(38px,5vw,60px);color:#fff;line-height:.92}
.gallery-caption .dloc{margin-top:8px;font-size:15px;color:rgba(255,255,255,.92);display:flex;align-items:center;gap:7px;font-weight:300}
.gallery-caption .dloc svg{width:16px;height:16px;stroke:var(--tb-orange);stroke-width:2}
.gallery-dots{position:absolute;bottom:20px;right:30px;z-index:4;display:flex;gap:7px}
.gallery-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer;transition:all .2s}
.gallery-dot.on{background:var(--tb-orange);width:22px;border-radius:4px}
.thumbs{display:flex;gap:8px;padding:12px 20px;background:var(--tb-grey-ink);overflow-x:auto}
.thumbs::-webkit-scrollbar{height:6px}
.thumbs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:3px}
.thumb{width:104px;height:64px;flex-shrink:0;border-radius:7px;background-size:cover;background-position:center;cursor:pointer;opacity:.5;border:2px solid transparent;transition:opacity .2s,border-color .2s}
.thumb:hover{opacity:.85}
.thumb.on{opacity:1;border-color:var(--tb-orange)}

/* DETAIL BODY */
.detail-body{padding:20px 40px 40px}
/* KERNGEGEVENS — belangrijkste kenmerken in één oogopslag */
.core-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:9px;margin-bottom:18px}
.core-tile{display:flex;align-items:center;gap:10px;padding:11px 13px;background:var(--white);border:1px solid var(--line);border-radius:10px;transition:border-color .2s,box-shadow .2s}
.core-tile:hover{border-color:var(--tb-orange);box-shadow:0 3px 14px rgba(43,44,46,.06)}
.core-ic{flex-shrink:0;width:32px;height:32px;border-radius:8px;background:rgba(246,160,42,.12);display:flex;align-items:center;justify-content:center}
.core-ic svg{width:17px;height:17px;stroke:var(--tb-orange);stroke-width:1.9}
.core-txt{min-width:0}
.core-v{font-family:'Khand',sans-serif;font-weight:600;font-size:18px;line-height:1;color:var(--tb-grey-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.core-l{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--txt-soft);margin-top:2px;font-weight:500}
/* Scroll-hint naar uitgebreide info */
.scroll-hint{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin:0;padding:11px 18px;background:transparent;border:1px solid var(--line);border-radius:24px;cursor:pointer;transition:border-color .2s,background .2s,color .2s;font-family:'Khand',sans-serif;font-weight:500;font-size:14px;letter-spacing:.05em;text-transform:uppercase;color:var(--txt-soft)}
/* Duw de beschrijvende tekst onder de vouw: de hint is het laatste wat je ziet */
.detail-more{margin-top:22px}
.scroll-hint:hover{border-color:var(--tb-orange);background:rgba(246,160,42,.07);color:var(--tb-grey-ink)}
.scroll-hint svg{width:17px;height:17px;stroke:var(--tb-orange);stroke-width:2.2;animation:bobDown 1.8s ease-in-out infinite}
@keyframes bobDown{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@media(max-width:600px){.core-strip{grid-template-columns:repeat(2,1fr)}}
.detail-lead{font-size:16.5px;line-height:1.7;color:var(--txt);font-weight:300;margin-bottom:30px}
/* Feiten & cijfers strip */
.detail-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:28px}
.metric{background:var(--white);padding:18px 20px}
.metric .mv{font-family:'Khand',sans-serif;font-weight:600;font-size:30px;color:var(--tb-grey-ink);line-height:1}
.metric .ml{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-soft);margin-top:5px}
/* Twee kolommen: kenmerken + feitenlijst */
.detail-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:28px}
@media(max-width:720px){.detail-cols{grid-template-columns:1fr}}
.detail-block h4{font-size:19px;color:var(--txt);margin-bottom:14px;display:flex;align-items:center;gap:9px}
.detail-block h4::before{content:"";width:3px;height:17px;background:var(--tb-orange);border-radius:2px}
/* Kenmerken-tabel (adres, objectnr, etc.) */
.spec-list{display:flex;flex-direction:column;gap:0}
.spec-row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.spec-row:last-child{border-bottom:none}
.spec-row .k{color:var(--txt-soft);font-weight:400;white-space:nowrap}
.spec-row .v{color:var(--txt);font-weight:500;text-align:right}
/* Feitenlijst met bolletjes */
.fact-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.fact-list li{position:relative;padding-left:22px;font-size:13.5px;line-height:1.5;color:var(--txt);font-weight:300}
.fact-list li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;background:var(--tb-orange)}
/* Programma-blok */
.prog-block{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:20px 24px;margin-bottom:28px}
.prog-block h4{font-size:17px;margin-bottom:9px}
.prog-block p{font-size:14px;line-height:1.65;color:var(--txt);font-weight:300}
/* Vestiging-kaart */
.vestiging-card{display:flex;align-items:center;gap:14px;background:var(--tb-grey-ink);border-radius:12px;padding:18px 22px;margin-bottom:28px;color:var(--txt-invert)}
.vestiging-icn{width:44px;height:44px;border-radius:10px;background:var(--tb-orange);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.vestiging-icn svg{width:22px;height:22px;stroke:var(--tb-grey-ink);stroke-width:1.9}
.vestiging-card .vn{font-family:'Khand',sans-serif;font-weight:600;font-size:19px;color:#fff;line-height:1;text-transform:uppercase}
.vestiging-card .va{font-size:12.5px;color:var(--txt-invert-soft);margin-top:4px}
/* Acties */
.detail-actions{display:flex;gap:12px;flex-wrap:wrap}
.detail-foot{margin-top:auto;padding:20px 40px;border-top:1px solid var(--line);background:var(--white);font-size:11px;color:var(--txt-soft);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
/* Op de lichte voettekst de grijs/oranje variant (Identity Guide 1.6);
   stond hier tot v76 horizontaal gezet, wat 1.6 uitdrukkelijk verbiedt. */
.detail-foot .wm{height:30px;flex:none}

/* ---------- TEAM ---------- */
.team-wrap{padding:34px 60px 70px}
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:24px;max-width:1180px}
.member{background:var(--white);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.member:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.member-top{background:var(--tb-grey-ink);padding:26px 26px 22px;position:relative;overflow:hidden;min-height:96px}
.member-top::after{content:"";position:absolute;right:-30px;bottom:-30px;width:110px;height:110px;border-radius:50%;background:rgba(246,160,42,.14)}
.member-photo{width:72px;height:72px;border-radius:14px;object-fit:cover;position:relative;z-index:2;box-shadow:0 6px 18px rgba(0,0,0,.35);border:2px solid rgba(255,255,255,.12)}
.member-initials{width:60px;height:60px;border-radius:12px;background:var(--tb-orange);color:var(--tb-grey-ink);display:flex;align-items:center;justify-content:center;font-family:'Khand',sans-serif;font-weight:700;font-size:26px;letter-spacing:.02em;position:relative;z-index:2}
.member-body{padding:22px 26px 26px}
.member-body h3{font-size:26px;color:var(--txt);line-height:1}
.member-role{font-family:'Khand',sans-serif;font-weight:500;font-size:16px;letter-spacing:.02em;text-transform:uppercase;color:var(--tb-orange);margin-top:5px}
.member-regio{font-size:13px;color:var(--txt-soft);margin-top:8px;display:flex;align-items:center;gap:7px}
.member-regio svg{width:14px;height:14px;stroke:var(--txt-soft);stroke-width:1.8}
.member-mail{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);display:flex;align-items:center;gap:8px;font-size:13px;color:var(--txt);text-decoration:none;font-weight:400;transition:color .2s;word-break:break-all}
.member-mail:hover{color:var(--tb-orange)}
.member-mail svg{width:15px;height:15px;stroke:var(--tb-orange);stroke-width:1.8;flex-shrink:0}
.team-note{margin-top:40px;max-width:660px;padding:26px 30px;background:var(--tb-grey-ink);border-radius:14px;color:var(--txt-invert)}
.team-note h4{font-size:22px;color:var(--white);margin-bottom:10px}
.team-note p{font-size:13.5px;line-height:1.65;color:var(--txt-invert-soft);font-weight:300}
.team-note strong{color:var(--tb-orange);font-weight:500}

/* ---------- VIDEO ---------- */
.videoknop{display:flex;align-items:center;gap:14px;width:100%;background:var(--white);border:1px solid var(--line);
  border-radius:14px;padding:14px 20px 14px 14px;cursor:pointer;text-align:left;
  transition:border-color .22s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease)}
.videoknop:hover{border-color:var(--tb-orange);box-shadow:0 10px 26px rgba(246,160,42,.2);transform:translateY(-2px)}
.vk-rond{width:40px;height:40px;border-radius:50%;background:var(--tb-orange);color:var(--tb-grey-ink);
  display:flex;align-items:center;justify-content:center;flex:none;transition:transform .22s var(--ease)}
.vk-rond svg{width:19px;height:19px;margin-left:2px}
.videoknop:hover .vk-rond{transform:scale(1.08)}
.vk-tekst{font-size:12px;color:var(--txt-soft);font-weight:300;line-height:1.4}
.vk-tekst b{display:block;font-family:'Khand',sans-serif;font-weight:600;font-size:16px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--txt)}
.videobox{position:fixed;inset:0;z-index:960;background:rgba(20,21,23,.95);backdrop-filter:blur(8px);
  display:none;align-items:center;justify-content:center;padding:30px;animation:fade .25s}
.videobox.open{display:flex}
/* breedte ook begrensd door de schermhoogte, zodat de speler op een laptop
   van 768 px hoog nog compleet in beeld past */
.vb-frame{width:min(1120px,92vw,calc((100vh - 210px) * 16 / 9));animation:lbZoom .3s var(--ease)}
.vb-kop{margin-bottom:16px}
.vb-kop .eyebrow{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--tb-orange);
  font-weight:500;margin-bottom:6px}
.vb-kop h3{font-family:'Khand',sans-serif;font-weight:600;font-size:32px;line-height:1;
  text-transform:uppercase;letter-spacing:.01em;color:#fff}
.vb-speler{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:6px;overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.6)}
.vb-speler iframe,.vb-speler video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.vb-voet{margin-top:13px;display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;font-size:11.5px;color:rgba(255,255,255,.5);font-weight:300}
.vb-voet a{display:inline-flex;align-items:center;gap:7px;color:rgba(255,255,255,.8);text-decoration:none;border:1px solid rgba(255,255,255,.28);border-radius:8px;padding:7px 14px;font-size:11.5px;transition:all .2s var(--ease)}
.vb-voet a:hover{color:var(--tb-grey-ink);background:var(--tb-orange);border-color:var(--tb-orange)}
@media(max-width:820px){.vb-kop h3{font-size:24px}.videobox{padding:16px}}

/* ---------- SAMENWERKEN ---------- */
.sw-wrap{padding:34px 60px 0}
.sw-layout{display:grid;grid-template-columns:minmax(0,1fr) 348px;gap:34px;max-width:1420px;align-items:start}
.sw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:22px}
.sw-card{background:var(--white);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .25s var(--ease)}
.sw-card.dim{opacity:.42}
.sw-card.hot{border-color:var(--tb-orange);box-shadow:0 10px 30px rgba(246,160,42,.22)}

/* werkgebiedkaart */
.sw-zij{position:sticky;top:22px;display:flex;flex-direction:column;gap:18px}
.sw-kaart{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:24px 24px 20px}
.sw-kaart-kop .eyebrow{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--tb-orange);font-weight:500;margin-bottom:7px}
.sw-kaart-kop h3{font-size:27px;line-height:1;color:var(--txt)}
.sw-kaart-kop h3 .dot{color:var(--tb-orange)}
.sw-kaart-kop p{margin-top:9px;font-size:12px;line-height:1.55;color:var(--txt-soft);font-weight:300}
.sw-kaart-vlak{margin-top:16px}
.sw-kaart-vlak svg{width:100%;height:auto;display:block;overflow:visible}
.sw-prov{fill:#E2E1DD;stroke:var(--white);stroke-width:3.4;stroke-linejoin:round;cursor:pointer;
  transition:fill .22s var(--ease)}
.sw-prov.aan{fill:var(--tb-orange)}
.sw-prov.wijs{fill:#C9C8C3}
.sw-prov.aan.wijs{fill:#E08F1F}
.sw-kaart-uitleg{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);min-height:52px;
  font-size:12.5px;line-height:1.5;color:var(--txt-soft);font-weight:300}
.sw-kaart-uitleg b{display:block;font-family:'Khand',sans-serif;font-weight:600;font-size:17px;
  letter-spacing:.02em;text-transform:uppercase;color:var(--txt);margin-bottom:3px}
.sw-kaart-uitleg .leeg{color:var(--txt-soft);opacity:.75;font-style:normal}
.sw-kaart-uitleg .reg{display:block;margin-top:5px;font-size:11.5px;color:var(--txt-soft);opacity:.8}
@media(max-width:1180px){
  .sw-layout{grid-template-columns:1fr}
  .sw-zij{position:static;max-width:420px}
}
.sw-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.sw-top{background:var(--tb-grey-ink);padding:20px 24px;position:relative;overflow:hidden;display:flex;align-items:center;gap:15px;height:116px}
.sw-top::after{content:"";position:absolute;right:-34px;bottom:-34px;width:118px;height:118px;border-radius:50%;background:rgba(246,160,42,.13)}
.sw-foto{width:66px;height:66px;border-radius:13px;object-fit:cover;position:relative;z-index:2;flex:none;box-shadow:0 6px 18px rgba(0,0,0,.35);border:2px solid rgba(255,255,255,.12)}
.sw-init{width:66px;height:66px;border-radius:13px;background:var(--tb-orange);color:var(--tb-grey-ink);display:flex;align-items:center;justify-content:center;font-family:'Khand',sans-serif;font-weight:700;font-size:27px;position:relative;z-index:2;flex:none}
.sw-naam{position:relative;z-index:2;min-width:0}
.sw-naam h3{font-size:23px;line-height:1.04;color:var(--white);letter-spacing:.01em}
.sw-naam .rol{font-family:'Khand',sans-serif;font-weight:500;font-size:15px;letter-spacing:.05em;text-transform:uppercase;color:var(--tb-orange);margin-top:4px}
.sw-body{padding:18px 24px 22px;display:flex;flex-direction:column;gap:0;flex:1}
.sw-regio{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--txt-soft);padding-bottom:14px;border-bottom:1px solid var(--line)}
.sw-regio svg{width:14px;height:14px;stroke:var(--tb-orange);stroke-width:1.8;flex:none}
.sw-rij{display:flex;align-items:center;gap:9px;padding:11px 0;border-bottom:1px solid var(--line)}
.sw-rij:last-child{border-bottom:none;padding-bottom:0}
.sw-rij > svg{width:15px;height:15px;stroke:var(--tb-orange);stroke-width:1.7;flex:none}
.sw-rij a{font-size:13px;color:var(--txt);text-decoration:none;word-break:break-all;transition:color .2s}
.sw-rij a:hover{color:var(--tb-orange)}
.sw-rij .noot{font-size:11.5px;color:var(--txt-soft)}
.sw-kopie{margin-left:auto;flex:none;width:27px;height:27px;border-radius:7px;border:1px solid var(--line);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--txt-soft);transition:all .2s var(--ease)}
.sw-kopie svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.8;fill:none}
.sw-kopie:hover{border-color:var(--tb-orange);color:var(--tb-orange);background:rgba(246,160,42,.08)}
.sw-kopie.ok{border-color:var(--tb-orange);background:var(--tb-orange);color:var(--tb-grey-ink)}
.sw-props{padding:52px 60px 64px;margin-top:52px;background:var(--tb-grey-ink)}
.sw-props-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:44px;max-width:1240px}
.sw-prop h3{font-size:29px;color:var(--white);line-height:1}
.sw-prop h3 .dot{color:var(--tb-orange)}
.sw-prop .eyebrow{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--tb-orange);font-weight:500;margin-bottom:9px}
.sw-prop ul{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:13px}
.sw-prop li{display:flex;gap:12px;font-size:13.5px;line-height:1.6;color:var(--txt-invert-soft);font-weight:300}
.sw-prop li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--tb-orange);margin-top:8px}
.sw-slot{max-width:1240px;margin-top:44px;padding-top:26px;border-top:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px}
.sw-slot p{font-size:13.5px;line-height:1.6;color:var(--txt-invert-soft);font-weight:300;max-width:620px}
.sw-slot strong{color:var(--white);font-weight:500}

/* ---------- MOBILE ---------- */
.mob-bar{display:none}
@media(max-width:1080px){
  .map-shell{grid-template-columns:1fr;height:auto}
  #map{height:52vh;min-height:380px}
  /* Onder de kaart loopt de lijst gewoon mee met de pagina. Een venster
     van 360 px met een eigen scrollgebied erin werkt op een aanraakscherm
     niet: je veegt of de pagina, of dat kleine venster, en je raakt het
     bijna nooit. Een scrollgebied in een scrollende pagina is op een
     telefoon altijd een val. */
  .map-side{max-height:none}
  .map-side-scroll{overflow:visible;max-height:none;flex:none}
  .kpi-strip{grid-template-columns:repeat(2,1fr)}
  .kpi:nth-child(2){border-right:none}.kpi:nth-child(1),.kpi:nth-child(2){border-bottom:1px solid var(--line-dark)}
  .stat-row{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  :root{--nav-w:0px}
  .nav{transform:translateX(-100%);transition:transform .3s var(--ease);width:264px}
  .nav.show{transform:none;box-shadow:var(--shadow-lg)}
  .main{margin-left:0}
  /* Woordmerk gestapeld en links uitgelijnd (Identity Guide 1.2 en 1.7:
     de woorden staan boven elkaar, het woordmerk is links uitgelijnd;
     1.6 verbiedt de horizontale plaatsing uitdrukkelijk). De marges
     volgen 1.5: minimaal de hoogte van de letter E, links en verticaal. */
  /* De balk lijnt links uit op dezelfde 22 px als alle inhoud eronder. */
  .mob-bar{display:flex;align-items:center;justify-content:space-between;height:64px;
    padding:0 20px 0 22px;background:var(--tb-grey-ink);color:#fff;position:sticky;top:0;z-index:150}
  .mob-bar .wm{height:34px;flex:none}
  .mob-burger{background:none;border:none;cursor:pointer;padding:6px}
  .mob-burger svg{width:26px;height:26px;stroke:#fff;stroke-width:2}
  .scrim-nav{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:140}
  .scrim-nav.show{display:block}
  .hero,.hero-summary,.section-head,.map-wrap,.controls,.filter-bar,.grid,.team-wrap,.cat-toggle{padding-left:22px;padding-right:22px}
  .kpi-strip{margin-left:-22px;margin-right:-22px}
  .grid{grid-template-columns:1fr}
  .detail-body{padding:26px 22px 34px}
  .detail-cols{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Kaart zonder tegels: het 'water' is onze papierkleur */
.leaflet-container{background:#F4F3F1}
.leaflet-control-attribution{background:rgba(255,255,255,.78);color:var(--txt-soft);font-family:'Inter',sans-serif;font-size:10px;padding:1px 6px}
.leaflet-control-attribution a{color:var(--txt-soft)}
.leaflet-tooltip.tb-landtip{background:var(--tb-grey-ink);color:var(--txt-invert);border:none;box-shadow:var(--shadow-sm);font-family:'Khand',sans-serif;text-transform:uppercase;letter-spacing:.04em;font-size:13px;padding:3px 9px}
.leaflet-tooltip.tb-landtip:before{display:none}
.leaflet-interactive{cursor:pointer}

/* ---------- TAALKNOP ----------
   Rechtsboven, klein en rustig: hij hoort er te zijn zonder aandacht te
   vragen. Bij het openen staat hij op NL. */
.taalknop{position:fixed;right:20px;top:18px;z-index:400;display:flex;align-items:center;gap:5px;
  background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:20px;
  padding:5px 12px;box-shadow:var(--shadow-sm);font-family:'Khand',sans-serif;
  font-size:13px;letter-spacing:.09em;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.taalknop b{font-weight:600;color:var(--txt-soft);cursor:pointer;transition:color .2s var(--ease)}
.taalknop b:hover{color:var(--tb-grey-ink)}
.taalknop b.aan{color:var(--tb-orange)}
.taalknop span{color:var(--line);font-weight:300}
/* Op telefoon hoort hij in de grijze balk bovenin, links van het menu —
   daar is hij waar hij hoort en dekt hij geen inhoud af. Geen wit pilletje
   op de huiskleur, maar tekst in het woordmerkgrijs met oranje accent. */
@media(max-width:900px){
  .taalknop{right:62px;top:0;bottom:auto;height:64px;padding:0;
    background:none;border:none;box-shadow:none;backdrop-filter:none;
    -webkit-backdrop-filter:none;font-size:14px}
  .taalknop b{color:var(--txt-invert-soft)}
  .taalknop b.aan{color:var(--tb-orange)}
  .taalknop span{color:rgba(255,255,255,.3)}
}


/* ============================================================
   TELEFOON EN TABLET — gemeten correcties (5 oktober)
   ============================================================ */

/* 1. Kaartvenster liep buiten zijn kader.
   .map-shell is een grid met 1fr-kolommen. Een 1fr-kolom heeft
   min-width:auto, dus de brede binnenwereld van Leaflet (een SVG van
   546 px) duwde de kolom open: het zijpaneel liep tot 497 px op een
   scherm van 390 en werd afgeknipt — landknoppen en adressen vielen weg.
   minmax(0,1fr) plus min-width:0 laat de kolom wél krimpen. */
.map-shell{overflow:hidden}
.map-shell > *{min-width:0;max-width:100%}
/* Leaflet geeft zijn eigen lagen hoge z-indexen: de popuplaag staat op 700.
   Zolang het kaartvenster zelf geen eigen stapelcontext heeft, tellen die
   700 mee op paginaniveau en schuift een open popup dus over het zijmenu
   (z-index 200) heen. #map had daarvoor al z-index:1, #euromap niet — en
   daar viel het zijmenu onder een geopende vestigingspopup. Beide krijgen
   nu dezelfde context, zodat alles van de kaart binnen de kaart blijft. */
#map, #euromap{max-width:100%;position:relative;z-index:1;isolation:isolate}
.leaflet-container{max-width:100%}

@media(max-width:1080px){
  .map-shell{grid-template-columns:minmax(0,1fr)}
}

/* 2. De projectenpagina zoomde uit.
   De drie tabs waren samen 513 px breed en konden niet krimpen, dus het
   lay-outvenster rekte mee naar 513 px: alle tekst werd kleiner dan
   bedoeld. Laten afbreken lost dat op. */
@media(max-width:820px){
  .cat-toggle{flex-wrap:wrap;gap:8px}
  .cat-toggle .cat-btn{flex:1 1 auto;min-width:0;white-space:nowrap}
  .map-cat-toggle, .filter-row, .chip-row{flex-wrap:wrap}
}

/* 3. De hint over volledig scherm sloeg nergens op.
   Hij noemt F11 en de knop zelf zit op een telefoon achter het menu.
   Op aanraakschermen dus allebei weg. */
@media(hover:none) and (pointer:coarse){
  .fs-hint, .fs-btn{display:none!important}
}

/* 4. Lange adressen en e-mailadressen mogen afbreken in plaats van
   het paneel open te duwen. */
.vmini-sub, .ls-feiten li, .sw-rij a, .mini-meta{overflow-wrap:anywhere}

/* 5. De Europakaart kreeg op een telefoon geen eigen hoogte en werd tot
   een streepje geknepen; #map had die regel wel. */
@media(max-width:1080px){
  #euromap{height:48vh;min-height:320px}
}

/* 6. Het propositieblok op Samenwerken stond op minmax(320px,1fr) met
   60 px zijruimte: samen 440 px op een scherm van 360. */
@media(max-width:820px){
  .sw-props{padding:36px 22px 42px}
  .sw-props-grid{grid-template-columns:1fr;gap:30px}
  .sw-slot{flex-direction:column;align-items:flex-start}
}


/* ============================================================
   OPENINGSANIMATIE (telefoon en tablet)

   Opzet volgt de Identity Guide:
   1.2  de woorden TEN en BRINKE staan boven elkaar
   1.6  het woordmerk wordt nooit horizontaal geplaatst
   1.7  het woordmerk is links uitgelijnd en staat waar mogelijk
        linksonder; vandaar het blok in de onderhoek, niet gecentreerd
   1.5  minimale marge is de hoogte van de letter E uit Ten Brinke,
        met name boven, onder en links -> --sp-e, afgeleid van de
        korpsgrootte, en altijd ruimer dan de 4% uit 1.13
   1.6  wit woordmerk met oranje punt op de grijze huiskleur

   Alles in dit blok lijnt op dezelfde linkerrand uit: het woordmerk,
   de oranje lijn en de ondertitel. Op een laptop tonen we het niet:
   daar is de presentatie meteen in beeld en zou dit alleen vertragen.
   ============================================================ */
.splash{display:none}

@media(max-width:820px){
  .splash{
    display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
    position:fixed;inset:0;z-index:9999;background:var(--tb-grey-ink);
    padding:34px;
    transition:transform .55s cubic-bezier(.65,0,.35,1),opacity .45s ease;
  }
  .splash.weg{transform:translateY(-14px);opacity:0;pointer-events:none}
  .splash-blok{text-align:left}

  /* Twee losse afbeeldingen, allebei links uitgelijnd. Omdat TEN en
     BRINKE in het origineel op dezelfde x beginnen en beide bestanden
     strak om hun eigen inkt zijn gesneden, komen ze zo vanzelf weer
     precies onder elkaar. De regelafstand is 0,2211 x de kapitaalhoogte,
     gemeten in het bronbestand (251 px op 1135 px). */
  .splash-merk{display:block}
  .splash-merk .sp-regel{display:block;overflow:hidden}
  .splash-merk .sp-regel + .sp-regel{margin-top:12px}  /* 0,221 x de kapitaalhoogte */
  .splash-merk img{display:block;height:auto;width:62vw;max-width:270px;
    transform:translateY(100%);
    animation:sp-rijs .62s cubic-bezier(.22,.61,.36,1) forwards}
  .splash-merk .sp-regel:first-child img{width:28.4vw;max-width:124px}
  .splash-merk .sp-regel + .sp-regel img{animation-delay:.1s}
  /* De lijn loopt door tot precies de rechterrand van het woordmerk:
     dezelfde breedte als de regel BRINKE, dus 62vw met hetzelfde
     maximum. Zo sluit het blok links en rechts op dezelfde randen af. */
  .splash-lijn{width:0;max-width:270px;height:2px;background:var(--tb-orange);
    margin-top:22px;animation:sp-lijn .7s cubic-bezier(.22,.61,.36,1) .62s forwards}
  /* -0.0675em is het linker zijwit van de B in Khand; zonder die
     correctie staat de ondertitel een haar rechts van het woordmerk. */
  .splash-sub{font-family:'Khand',sans-serif;text-transform:uppercase;
    letter-spacing:.3em;font-size:10.5px;color:var(--txt-invert-soft);
    margin-top:15px;margin-left:-0.0675em;
    opacity:0;animation:sp-sub .5s ease .95s forwards}
}

@keyframes sp-rijs{to{transform:translateY(0)}}
@keyframes sp-lijn{to{width:62vw}}
@keyframes sp-sub{to{opacity:1}}

/* Wie beweging heeft uitgezet krijgt het merk stil in beeld, kort. */
@media(prefers-reduced-motion:reduce){
  .splash-merk img,.splash-lijn,.splash-sub{animation:none;opacity:1;transform:none}
  .splash-lijn{width:62vw}
  .splash{transition:opacity .2s ease}
}

/* ============================================================
   PROVINCIEVENSTER
   Een tik op een provincie opent wie daar acquireert. Op de telefoon
   komt het als blad van onderen omhoog — daar is de duim; op een groter
   scherm staat het gewoon in het midden. Sluiten kan op drie manieren:
   het kruisje, Escape, of naast het venster tikken.
   ============================================================ */
.provblad{position:fixed;inset:0;z-index:910;display:none;
  background:rgba(20,21,23,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  align-items:center;justify-content:center;padding:24px;animation:fade .2s}
.provblad.open{display:flex}
.pb-kaart{position:relative;background:var(--white);border-radius:16px;box-shadow:var(--shadow-lg);
  width:min(460px,100%);max-height:84vh;overflow-y:auto;padding:26px 26px 22px;
  animation:pb-op .28s cubic-bezier(.22,.61,.36,1)}
@keyframes pb-op{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.pb-sluit{position:absolute;top:12px;right:12px;width:38px;height:38px;border:none;cursor:pointer;
  border-radius:50%;background:var(--paper);display:flex;align-items:center;justify-content:center;
  transition:background .2s var(--ease)}
.pb-sluit:hover{background:#E6E4E0}
.pb-sluit svg{width:18px;height:18px;stroke:var(--txt);stroke-width:2}
.pb-kop{padding-right:44px;margin-bottom:18px}
.pb-kop h3{font-size:26px;letter-spacing:.01em}
.pb-groep + .pb-groep{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.pb-label{font-family:'Khand',sans-serif;text-transform:uppercase;letter-spacing:.16em;
  font-size:10.5px;color:var(--txt-soft);margin-bottom:10px}
.pb-lid + .pb-lid{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.pb-top{display:flex;align-items:center;gap:13px}
.pb-foto,.pb-init{width:50px;height:50px;border-radius:50%;flex:none;object-fit:cover}
.pb-init{background:var(--tb-grey-ink);color:var(--txt-invert);display:flex;align-items:center;
  justify-content:center;font-family:'Khand',sans-serif;font-weight:600;font-size:17px}
.pb-naam h4{font-family:'Khand',sans-serif;font-weight:700;font-size:19px;letter-spacing:.015em;
  text-transform:uppercase;color:var(--txt)}
.pb-naam .rol{font-size:12px;color:var(--txt-soft);font-weight:300;margin-top:1px}
.pb-contact{margin-top:10px}
.pb-leeg{font-size:12.5px;line-height:1.55;color:var(--txt-soft);font-weight:300}

/* Op de telefoon van onderen omhoog, over de volle breedte. */
@media(max-width:620px){
  .provblad{align-items:flex-end;padding:0}
  .pb-kaart{width:100%;max-height:88vh;border-radius:16px 16px 0 0;padding:22px 20px calc(22px + env(safe-area-inset-bottom))}
  @keyframes pb-op{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}
}

/* Het woordmerk is een knop naar het overzicht, maar mag er niet als knop
   uitzien: geen rand, geen vlak, alleen de aanwijzer die dat verraadt. */
.wm-knop{background:none;border:none;padding:0;margin:0;cursor:pointer;display:block;
  line-height:0;-webkit-tap-highlight-color:transparent}
.wm-knop:focus-visible{outline:2px solid var(--tb-orange);outline-offset:4px;border-radius:2px}

/* ============================================================
   TERUG NAAR BOVEN
   Vanaf de kerncijfers spring je naar een blok verderop de pagina; op een
   telefoon weet je dan niet meer waar je zat. Dit pijltje brengt je terug.
   Het verschijnt pas na een scherm scrollen, zodat het niet in de weg zit
   wanneer er niets te verlaten valt, en het staat linksonder: rechtsonder
   zit de duim van wie leest, en daar wil je geen knop raken.
   Alleen op aanraakschermen; op een laptop is Home of de scrollbalk sneller.
   ============================================================ */
.omhoog{display:none}
@media(max-width:820px){
  .omhoog{position:fixed;left:18px;bottom:calc(18px + env(safe-area-inset-bottom));
    z-index:400;width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;
    background:var(--tb-grey-ink);color:var(--txt-invert);
    align-items:center;justify-content:center;
    box-shadow:0 4px 14px rgba(0,0,0,.26);
    opacity:0;transform:translateY(10px) scale(.9);pointer-events:none;
    transition:opacity .25s var(--ease),transform .25s var(--ease);
    -webkit-tap-highlight-color:transparent}
  .omhoog{display:flex}
  .omhoog.zicht{opacity:1;transform:none;pointer-events:auto}
  .omhoog svg{width:21px;height:21px;stroke-width:2.1}
  .omhoog:active{background:var(--tb-orange);color:var(--tb-grey-ink)}
}
@media(prefers-reduced-motion:reduce){.omhoog{transition:opacity .15s linear}}