/* ══════════════════════════════════════════════════════════════
   BIJGEBOUW · bijvoorbeeldzo.nl
   ──────────────────────────────────────────────────────────────
   Eén visuele wereld: een set bouwtekeningen. De pagina wisselt
   tussen TEKENING (donkere tekenondergrond, blauwdruk) en BLAD
   (licht tekenpapier, de tekst ernaast). Bewuste keuze voor één
   thema — een tekeningenset heeft geen dark mode.

   Kleur   ink #0B1B2B · draw #BBD6EE · draw-2 #7FA8CB
           paper #EEF2F5 · paper-ink #0E1F2B · oker #E8B24C
           ok #3E9A74 · bad #C0533F
   Type    Futura/Century Gothic (belettering) · Avenir Next (tekst)
           SF Mono (maten, labels, data)
   ═══════════════════════════════════════════════════════════════ */

:root{
  --ink:#0B1B2B; --ink-2:#0F2537; --ink-3:#14324A;
  --draw:#BBD6EE; --draw-2:#7FA8CB; --draw-3:#517A9C;
  --paper:#EEF2F5; --paper-2:#E2E8ED; --paper-3:#D3DBE2;
  --pink-ink:#0E1F2B; --pink-ink-2:#4A5D6B; --pink-ink-3:#7E8E9A;
  --oker:#E8B24C; --oker-deep:#B8801E;
  --ok:#3E9A74; --bad:#C0533F;
  --geo:"Futura","Century Gothic","Avenir Next","Trebuchet MS",system-ui,sans-serif;
  --body:"Avenir Next","Avenir","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"SF Mono",Menlo,Consolas,"Roboto Mono",monospace;
  --pad:clamp(20px,5vw,64px);
  --maxw:1180px;
}

*{box-sizing:border-box;}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--body);
  line-height:1.6;-webkit-font-smoothing:antialiased;}
img{max-width:100%;}
a{color:inherit;}
*:focus-visible{outline:2px solid var(--oker);outline-offset:3px;}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}

/* ── gedeelde typografie ─────────────────────────────────────── */
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;}
h1,h2,h3,h4,h5{font-family:var(--geo);font-weight:500;letter-spacing:-.01em;
  text-wrap:balance;margin:0;}
h2{font-size:clamp(27px,3.6vw,42px);line-height:1.1;}
h3{font-size:clamp(20px,2.3vw,26px);line-height:1.2;}
p{margin:0;}
.lede{font-size:clamp(16px,1.35vw,18px);line-height:1.62;max-width:60ch;}

/* ── secties: TEKENING (donker) en BLAD (licht) ──────────────── */
.sheet{background:var(--paper);color:var(--pink-ink);}
.draw{background:var(--ink);color:var(--draw);position:relative;overflow:hidden;}
.draw::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(187,214,238,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(187,214,238,.06) 1px,transparent 1px);
  background-size:30px 30px;}
.draw > *{position:relative;}
.sec{padding:clamp(58px,7vw,104px) 0;}
.sec-head{display:flex;flex-direction:column;gap:14px;max-width:64ch;}
.sheet .eyebrow{color:var(--oker-deep);}
.draw .eyebrow{color:var(--draw-2);}
.sheet .lede{color:var(--pink-ink-2);}
.draw .lede{color:var(--draw);}

/* ── knoppen ─────────────────────────────────────────────────── */
.btn{display:inline-block;border:none;cursor:pointer;font-family:var(--geo);
  font-size:13.5px;letter-spacing:.09em;text-transform:uppercase;padding:14px 24px;
  background:var(--oker);color:#20180A;text-decoration:none;transition:transform .15s,filter .15s;}
.btn:hover{filter:brightness(1.07);transform:translateY(-1px);}
.btn.ghost{background:transparent;border:1px solid currentColor;}
.draw .btn.ghost{color:var(--draw);}
.sheet .btn.ghost{color:var(--pink-ink);}
.cta-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
.stamp-6{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;}
.draw .stamp-6{color:var(--draw-2);} .sheet .stamp-6{color:var(--pink-ink-3);}

/* ══ NAV ═══════════════════════════════════════════════════════ */
.nav{position:sticky;top:0;z-index:60;background:rgba(11,27,43,.93);
  backdrop-filter:blur(9px);border-bottom:1px solid rgba(187,214,238,.2);}
.nav .in{display:flex;align-items:center;justify-content:space-between;gap:22px;
  padding-top:13px;padding-bottom:13px;}
.lockup{display:flex;align-items:center;text-decoration:none;}
.lockup-compact{display:block;width:180px;height:auto;flex:none;}
.lockup-smal{display:none;align-items:center;gap:11px;}
.lockup-mark{width:30px;height:30px;display:block;flex:none;}
.lockup-txt{display:flex;flex-direction:column;line-height:1.15;}
.lockup .prod{font-family:var(--geo);font-size:19px;letter-spacing:.03em;color:var(--paper);}
.lockup .firm{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--draw-2);}
.nav nav{display:flex;gap:26px;}
.nav nav a{font-family:var(--geo);font-size:13px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--draw-2);text-decoration:none;transition:color .15s;}
.nav nav a:hover{color:var(--oker);}
.menu-knop{display:none;background:none;border:1px solid rgba(187,214,238,.35);
  color:var(--draw);font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;padding:10px 12px;cursor:pointer;}

/* ══ HERO ══════════════════════════════════════════════════════ */
.hero{padding:clamp(46px,6vw,84px) 0 clamp(50px,6vw,86px);}
.hero .in{display:grid;grid-template-columns:1.02fr 1.05fr;gap:clamp(32px,5vw,64px);align-items:center;}
.hero h1{font-size:clamp(34px,5.1vw,62px);line-height:1.03;color:var(--paper);
  margin-bottom:22px;letter-spacing:-.02em;}
.hero h1 em{font-style:normal;color:var(--oker);}
.hero .payoff{font-size:clamp(16px,1.5vw,19px);color:var(--draw);max-width:42ch;
  margin-bottom:14px;line-height:1.55;}
.hero .fine{font-size:15px;color:var(--draw);opacity:.82;max-width:46ch;margin-bottom:30px;
  line-height:1.62;}
.tekening{border:1px solid rgba(187,214,238,.28);padding:16px 18px 14px;
  background:rgba(14,37,55,.62);}
.tekening svg{width:100%;height:auto;display:block;}
.tekening .tk-hoog{display:none;}
.lbl{font-family:var(--mono);font-size:10px;letter-spacing:.04em;fill:var(--draw-2);
  text-transform:uppercase;}
.lbl-sm{font-size:9px;}
.lbl-hi{fill:var(--oker);}
.ttl{font-family:var(--geo);font-size:14px;letter-spacing:.14em;fill:var(--paper);}
.legenda{display:flex;gap:24px;flex-wrap:wrap;margin-top:14px;padding-top:13px;
  border-top:1px solid rgba(187,214,238,.2);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--draw);}
.legenda span{display:flex;align-items:center;gap:7px;}
.legenda i{width:20px;height:0;display:block;border-top:2px solid var(--draw);}
.legenda i.hi{border-top-color:var(--oker);}
.legenda i.plan{border-top:2px dashed var(--draw-2);}

/* ══ DIAGNOSE ══════════════════════════════════════════════════ */
.diag .in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,60px);align-items:start;}
.diag h2{color:var(--pink-ink);min-height:2.2em;}
.diag h2 u{text-decoration:none;box-shadow:inset 0 -.36em 0 rgba(232,178,76,.45);}
.diag .intro{margin-top:16px;}
.panel{border:1px solid var(--pink-ink);background:#F6F8FA;padding:24px 24px 26px;}
.panel legend{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;padding:0 8px;margin-left:-8px;}
.panel fieldset{border:none;margin:0;padding:0;}
.opt{display:flex;gap:13px;align-items:flex-start;padding:11px 0;cursor:pointer;
  border-top:1px solid var(--paper-3);}
.opt:last-of-type{border-bottom:1px solid var(--paper-3);}
.opt input{appearance:none;width:17px;height:17px;border:1.5px solid var(--pink-ink);
  margin:3px 0 0;flex:none;background:transparent;cursor:pointer;position:relative;}
.opt input:checked{background:var(--oker-deep);border-color:var(--oker-deep);}
.opt input:checked::after{content:"";position:absolute;left:4.5px;top:1px;width:5px;height:10px;
  border:solid #F6F8FA;border-width:0 2px 2px 0;transform:rotate(42deg);}
.opt span{font-size:15px;line-height:1.45;}
.bevinding{margin-top:22px;border-top:2px solid var(--pink-ink);padding-top:15px;}
.bevinding .hd{display:flex;justify-content:space-between;align-items:center;
  gap:12px;margin-bottom:12px;}
.bevinding .hd b{font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;
  text-transform:uppercase;font-weight:500;}
.zegel{border:1.5px solid var(--oker-deep);color:var(--oker-deep);font-family:var(--mono);
  font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;padding:4px 9px;
  transform:rotate(-2.5deg);opacity:0;transition:opacity .35s;white-space:nowrap;}
.zegel.on{opacity:1;}
.bevinding dl{margin:0;}
.rij{display:grid;grid-template-columns:112px 1fr;gap:14px;padding:9px 0;
  border-bottom:1px dotted var(--paper-3);}
.rij dt{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--pink-ink-3);padding-top:4px;}
.rij dd{margin:0;font-size:15px;line-height:1.45;}
.rij dd.leeg{color:var(--pink-ink-3);font-style:italic;}
.naar-afspraak{margin-top:18px;width:100%;text-align:center;}
.naar-afspraak[disabled]{background:var(--paper-3);color:#8E9BA5;cursor:default;
  transform:none;filter:none;}

/* ══ VIER BEWEGINGEN ═══════════════════════════════════════════ */
.bew{display:grid;grid-template-columns:repeat(4,1fr);margin-top:44px;}
.bew .st{padding-right:24px;}
.bew .st + .st{padding-left:24px;border-left:1px dashed rgba(187,214,238,.28);}
.bew .no{font-family:var(--mono);font-size:10px;letter-spacing:.15em;color:var(--oker);}
.bew h4{font-size:17px;margin:8px 0 7px;color:var(--paper);}
.bew p{font-size:14px;color:var(--draw-2);line-height:1.55;}
.altijd{margin-top:52px;padding-top:30px;border-top:1px solid rgba(187,214,238,.22);
  display:grid;grid-template-columns:minmax(200px,1fr) 2.1fr;gap:clamp(24px,4vw,52px);}
.altijd h4{font-size:15px;color:var(--draw-2);font-family:var(--mono);font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;}
.altijd ul{margin:0;padding:0;list-style:none;columns:2;column-gap:38px;}
.altijd li{padding:9px 0 9px 22px;position:relative;font-size:14.5px;color:var(--draw);
  break-inside:avoid;border-bottom:1px solid rgba(187,214,238,.13);}
.altijd li::before{content:"";position:absolute;left:0;top:17px;width:9px;height:9px;
  border:1.5px solid var(--oker);}
@media(max-width:760px){.altijd ul{columns:1;}}

/* ══ DOSSIERS ══════════════════════════════════════════════════ */
/* De overkoepelende zin moet groter zijn dan de dossierkoppen (.dos-btn .sym,
   clamp 16–19px), anders leest de lijst als zeven losse projecten. */
.overkoepel{font-family:var(--geo);font-size:clamp(21px,2.4vw,28px);line-height:1.32;
  max-width:54ch;margin-top:22px;color:var(--pink-ink);}
.overkoepel-onder{font-size:14.5px;line-height:1.6;max-width:60ch;margin-top:14px;
  color:var(--pink-ink-3);}
.dossiers{margin-top:38px;border-top:1px solid var(--paper-3);}
.dossier{border-bottom:1px solid var(--paper-3);transition:opacity .3s;}
.dossier.dim{opacity:.32;}
.dos-btn{width:100%;background:none;border:none;cursor:pointer;text-align:left;
  display:grid;grid-template-columns:1fr 168px 122px 24px;gap:20px;align-items:baseline;
  padding:17px 0;font-family:inherit;color:inherit;}
.dos-btn:hover .sym{color:var(--oker-deep);}
.dos-btn .sym{font-family:var(--geo);font-size:clamp(16px,1.6vw,19px);line-height:1.3;
  transition:color .15s;}
.dossier.hit .dos-btn .sym{box-shadow:inset 0 -.34em 0 rgba(232,178,76,.4);}
.dos-btn .sys{font-family:var(--mono);font-size:11px;color:var(--pink-ink-3);letter-spacing:.05em;}
.dos-btn .who{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--pink-ink-3);text-align:right;}
.dos-btn .plus{font-family:var(--mono);font-size:16px;color:var(--pink-ink-3);text-align:right;
  transition:transform .2s;}
.dossier.open .dos-btn .plus{transform:rotate(45deg);}
.dos-body{display:none;padding:0 0 26px;}
.dossier.open .dos-body{display:block;}
.blokken{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--paper-3);
  border:1px solid var(--paper-3);}
.blok{background:var(--paper);padding:16px 18px;}
.blok h5{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--oker-deep);font-weight:500;margin-bottom:8px;}
.blok p{font-size:14px;line-height:1.55;color:var(--pink-ink-2);}
/* Optioneel per dossier, aan te zetten zodra de klant toestemming geeft. */
.klant{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.klant-logo{height:30px;width:auto;max-width:150px;object-fit:contain;}
.klant-naam{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--pink-ink-2);}
.tbd{display:inline-block;border:1px dashed var(--oker-deep);color:var(--oker-deep);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;padding:2px 7px;
  text-transform:none;}
.citaat{margin-top:16px;padding-left:18px;border-left:2px solid var(--oker);
  font-family:var(--geo);font-size:17px;line-height:1.4;color:var(--pink-ink);}
.citaat cite{display:block;font-family:var(--mono);font-size:10.5px;font-style:normal;
  letter-spacing:.12em;text-transform:uppercase;color:var(--pink-ink-3);margin-top:8px;}
@media(max-width:900px){
  .dos-btn{grid-template-columns:1fr 24px;}
  .dos-btn .sys,.dos-btn .who{display:none;}
  /* drie blokken passen niet in twee kolommen zonder een wees over te houden */
  .blokken{grid-template-columns:1fr;}
}

/* ══ BEWAKING ══════════════════════════════════════════════════ */
.bewaking .in{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,5vw,60px);align-items:start;}
.belofte{border:1px solid var(--oker);padding:26px 28px;background:rgba(232,178,76,.06);
  margin-top:26px;}
.belofte .datum{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--oker);margin-bottom:12px;}
.belofte p{font-family:var(--geo);font-size:clamp(18px,1.9vw,23px);line-height:1.32;
  color:var(--paper);}
.belofte small{display:block;margin-top:14px;font-size:13.5px;color:var(--draw-2);
  line-height:1.55;font-family:var(--body);}
.bord{border:1px solid rgba(187,214,238,.25);background:rgba(14,37,55,.55);}
.bord-hd{display:flex;justify-content:space-between;gap:12px;padding:11px 16px;
  border-bottom:1px solid rgba(187,214,238,.2);font-family:var(--mono);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--draw-2);}
.pols{display:inline-flex;align-items:center;gap:7px;}
.pols i{width:7px;height:7px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 0 rgba(62,154,116,.6);animation:pols 2.6s infinite;}
@keyframes pols{0%{box-shadow:0 0 0 0 rgba(62,154,116,.5)}70%{box-shadow:0 0 0 8px rgba(62,154,116,0)}100%{box-shadow:0 0 0 0 rgba(62,154,116,0)}}
.kpis{display:grid;grid-template-columns:1fr 1fr;}
.kpi{padding:17px;border-right:1px solid rgba(187,214,238,.2);
  border-bottom:1px solid rgba(187,214,238,.2);}
.kpi:nth-child(2n){border-right:none;}
.kpi:nth-child(n+3){border-bottom:none;}
.kpi .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--draw-2);display:block;margin-bottom:8px;}
.kpi .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:28px;
  line-height:1;display:block;color:var(--paper);letter-spacing:-.02em;}
.kpi .v.ok{color:var(--ok);} .kpi .v.hi{color:var(--oker);}
.kpi .u{font-size:12px;color:var(--draw-2);margin-left:6px;letter-spacing:0;}
.kpi .n{display:block;margin-top:8px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--draw-3);}
.norm{margin-top:26px;padding-top:22px;border-top:1px solid rgba(187,214,238,.22);}
.norm blockquote{margin:0;font-family:var(--geo);font-size:clamp(19px,2.1vw,25px);
  line-height:1.32;color:var(--paper);max-width:24ch;}
.norm blockquote span{color:var(--oker);}
.norm p{margin-top:12px;font-size:14px;color:var(--draw-2);max-width:56ch;line-height:1.6;}

/* ══ WERKWIJZE ═════════════════════════════════════════════════ */
.voor{border:1px solid var(--paper-3);background:#F6F8FA;padding:22px 24px;margin-top:34px;
  display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;}
.voor .tag{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--oker-deep);border:1px solid var(--oker-deep);padding:6px 10px;white-space:nowrap;}
.voor p{font-size:14.5px;color:var(--pink-ink-2);line-height:1.55;}
.weken{display:grid;grid-template-columns:repeat(6,1fr);margin-top:30px;
  border-top:2px solid var(--pink-ink);}
.week{padding:16px 16px 20px 0;border-right:1px solid var(--paper-3);position:relative;}
.week:last-child{border-right:none;}
.week:not(:first-child){padding-left:16px;}
.week::before{content:"";position:absolute;top:-2px;left:0;height:2px;width:0;
  background:var(--oker);transition:width .5s ease-out;}
.week.aan::before{width:100%;}
.week .w{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--pink-ink-3);}
.week h5{font-size:15px;margin:7px 0 6px;}
.week p{font-size:13px;color:var(--pink-ink-2);line-height:1.5;}
.week.live h5{color:var(--oker-deep);}
.mits{margin-top:22px;font-size:13.5px;color:var(--pink-ink-3);max-width:70ch;
  padding-left:16px;border-left:2px solid var(--paper-3);}
@media(max-width:860px){.weken{grid-template-columns:1fr 1fr 1fr;}
  .week{border-bottom:1px solid var(--paper-3);}}

/* ══ GRENS + PRIJS ═════════════════════════════════════════════ */
.tweeluik{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:start;}
.grens{list-style:none;margin:22px 0 0;padding:0;}
.grens li{padding:13px 0 13px 34px;border-bottom:1px solid rgba(187,214,238,.16);
  position:relative;font-size:15px;color:var(--draw);}
.grens li::before{content:"×";position:absolute;left:6px;top:11px;color:var(--bad);
  font-family:var(--mono);font-size:16px;}
.prijs{list-style:none;margin:22px 0 0;padding:0;}
.prijs li{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid rgba(187,214,238,.16);}
.prijs .wat{font-size:15px;color:var(--draw);}
.prijs .wat small{display:block;font-size:12.5px;color:var(--draw-3);margin-top:3px;}
.prijs .hoe{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--oker);white-space:nowrap;text-align:right;}
/* Regel 5 is het onderdeel dat onderscheidt en mag niet wegvallen. Zelfde
   accentrand en tint als het belofteblok in de sectie Bewaking, want het
   gaat over hetzelfde. */
.prijs li.nadruk{background:rgba(232,178,76,.06);border-left:2px solid var(--oker);
  border-bottom:none;padding:15px 16px;margin-top:4px;}
.prijs li.nadruk .wat{color:var(--paper);}
.prijs li.nadruk .wat small{color:var(--draw-2);}
.prijs-reken{margin-top:16px;font-size:13.5px;color:var(--draw-2);}
.prijs-reken b{font-family:var(--mono);font-weight:400;color:var(--oker);letter-spacing:.02em;}
.prijs-fijn{margin-top:10px;font-size:12.5px;color:var(--draw-3);}
@media(max-width:820px){.tweeluik{grid-template-columns:1fr;}}

/* ══ AFSPRAAK ══════════════════════════════════════════════════ */
.afspraak{background:var(--paper);color:var(--pink-ink);}
.afspraak .in{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(30px,5vw,60px);align-items:start;}
.afspraak h2{max-width:15ch;}
.wat-gebeurt{list-style:none;margin:26px 0 0;padding:0;counter-reset:s;}
.wat-gebeurt li{padding:11px 0 11px 40px;position:relative;font-size:15px;
  color:var(--pink-ink-2);border-bottom:1px solid var(--paper-3);counter-increment:s;}
.wat-gebeurt li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:12px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--oker-deep);}
form.aanvraag{border:1px solid var(--pink-ink);background:#F6F8FA;padding:26px;}
.veld{display:flex;flex-direction:column;gap:6px;margin-bottom:15px;}
.veld label{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pink-ink-2);}
.veld input,.veld textarea,.veld select{font-family:var(--body);font-size:15px;padding:11px 12px;
  border:1px solid var(--paper-3);background:#fff;color:var(--pink-ink);border-radius:0;}
.veld textarea{min-height:82px;resize:vertical;}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:15px;}
.meegestuurd{border:1px dashed var(--oker-deep);padding:12px 14px;margin-bottom:16px;
  font-size:13.5px;color:var(--pink-ink-2);line-height:1.5;}
.meegestuurd b{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--oker-deep);display:block;margin-bottom:5px;font-weight:500;}
.form-fout{border-left:2px solid var(--bad);background:rgba(192,83,63,.07);
  padding:13px 15px;margin-bottom:14px;font-size:14px;line-height:1.5;color:var(--pink-ink);}
.form-fout a{color:var(--pink-ink);}
.verstuur{width:100%;text-align:center;}
.verstuur[disabled]{background:var(--paper-3);color:#8E9BA5;cursor:default;
  transform:none;filter:none;}
.privacy{font-size:12.5px;color:var(--pink-ink-3);margin-top:12px;line-height:1.5;}
.bedankt{display:none;border:1px solid var(--ok);background:rgba(62,154,116,.08);
  padding:20px;font-size:15px;line-height:1.55;}
form.verzonden{display:none;}
form.verzonden + .bedankt{display:block;}

/* ══ FOOTER ════════════════════════════════════════════════════ */
.voet{background:var(--ink-2);border-top:1px solid rgba(187,214,238,.2);
  padding:44px 0 40px;font-size:14px;color:var(--draw-2);}
.voet .in{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;align-items:flex-start;}
.voet a{color:var(--draw);text-decoration:none;}
.voet a:hover{color:var(--oker);}
.voet .kolom{display:flex;flex-direction:column;gap:8px;}
.voet .titel{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--draw-3);margin-bottom:3px;}
.voet-logo{width:100%;max-width:232px;height:auto;display:block;}

/* Navigatie klapt eerder om dan de rest van de pagina: het logo van 180px,
   vijf menu-items en de afspraakknop passen samen pas vanaf circa 1100px. */
@media(max-width:1100px){
  .menu-knop{display:block;order:2;}
  .nav .in{flex-wrap:wrap;}
  .nav .lockup{order:1;margin-right:auto;}
  .nav > .in > .btn{order:3;}
  .nav nav{order:4;flex-basis:100%;display:none;flex-direction:column;gap:0;
    border-top:1px solid rgba(187,214,238,.2);margin-top:13px;}
  .nav.open nav{display:flex;}
  .nav nav a{padding:14px 0;border-bottom:1px solid rgba(187,214,238,.12);font-size:14px;}
}

@media(max-width:900px){
  .hero .in,.diag .in,.bewaking .in,.afspraak .in{grid-template-columns:1fr;}
  .bew{grid-template-columns:1fr 1fr;gap:20px;}
  .bew .st + .st{border-left:none;padding-left:0;}
  .altijd{grid-template-columns:1fr;}
  .duo{grid-template-columns:1fr;}
}

/* ── telefoon en kleine tablet ─────────────────────────────── */
@media(max-width:700px){
  .nav > .in > .btn{padding:11px 13px;font-size:11px;letter-spacing:.06em;}
  .menu-knop{padding:10px 11px;}

  /* smalle header: beeldmerk met echte HTML-tekst, zoals de gebruiksregels
     voorschrijven. De compacte lockup vraagt minimaal 160px breed en dat
     past hier niet meer naast de menuknop en de afspraakknop. */
  .lockup-compact{display:none;}
  .lockup-smal{display:flex;}

  /* blad 01-A: de gestapelde tekening neemt het over */
  .tekening{padding:14px;}
  .tekening .tk-breed{display:none;}
  .tekening .tk-hoog{display:block;}
  .lbl{font-size:11px;} .lbl-sm{font-size:10px;} .ttl{font-size:15px;}

  .bew{grid-template-columns:1fr;gap:0;}
  .bew .st{padding:16px 0;border-top:1px dashed rgba(187,214,238,.28);}
  .bew .st:first-child{border-top:none;padding-top:0;}
  .weken{grid-template-columns:1fr 1fr;}
  .week{padding:14px 14px 16px 0;}
  .week:nth-child(2n){padding-right:0;padding-left:14px;}
  .week:nth-child(2n+1){border-right:1px solid var(--paper-3);}
  .voor{grid-template-columns:1fr;gap:14px;}
  .voor .tag{justify-self:start;}
  .kpis{grid-template-columns:1fr;}
  .kpi{border-right:none!important;border-bottom:1px solid rgba(187,214,238,.2)!important;}
  .kpi:last-child{border-bottom:none!important;}
  .rij{grid-template-columns:1fr;gap:2px;}
  .rij dt{padding-top:0;}
  .voet .in{flex-direction:column;gap:26px;}
}

@media(max-width:420px){
  .panel{padding:18px 16px 20px;}
  form.aanvraag{padding:18px 16px;}
  .weken{grid-template-columns:1fr;}
  .week,.week:nth-child(2n){padding:14px 0;border-right:none!important;
    border-bottom:1px solid var(--paper-3);}
  .rij{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
  .week::before{width:100%;}
}

/* ══ HOMEPAGE — DE VIER OPLOSSINGSROUTES ═══════════════════════
   Toegevoegd bij de herpositionering van augustus 2026. De drie
   hoofdroutes staan als kaarten op tekenpapier, met dezelfde
   haarlijn-raster als .blokken. Maatwerk is bewust géén vierde
   kaart maar een band eronder: het is de uitzondering, niet een
   gelijkwaardige keuze.
   ═══════════════════════════════════════════════════════════════ */
.routes{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--paper-3);border:1px solid var(--paper-3);margin-top:40px;}
.route{background:var(--paper);padding:28px 26px 30px;display:flex;flex-direction:column;
  transition:background .18s;}
.route:hover{background:#F6F8FA;}
.route .nr{font-family:var(--mono);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--oker-deep);}
.route h3{font-family:var(--geo);font-size:clamp(19px,1.9vw,23px);line-height:1.25;
  margin:10px 0 8px;color:var(--pink-ink);font-weight:500;}
.route .wat{font-size:14.5px;color:var(--pink-ink-2);line-height:1.58;}
.route .wanneer{margin-top:16px;padding-top:14px;border-top:1px solid var(--paper-3);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--pink-ink-3);}
.route ul{margin:10px 0 0;padding:0;list-style:none;}
.route li{font-size:13.5px;line-height:1.5;color:var(--pink-ink-2);
  padding:6px 0 6px 16px;position:relative;}
.route li::before{content:"";position:absolute;left:0;top:13px;width:7px;height:1px;
  background:var(--oker-deep);}
.route .naar{margin-top:auto;padding-top:22px;font-family:var(--geo);font-size:12.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--oker-deep);text-decoration:none;}
.route .naar::after{content:" →";}
.route .naar:hover{text-decoration:underline;}

/* Maatwerk: de vierde route, bewust kleiner gezet. */
.maatwerk{margin-top:30px;border:1px solid rgba(187,214,238,.3);padding:26px 28px;
  display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;}
.maatwerk .tag{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--oker);border:1px solid var(--oker);
  padding:6px 10px;white-space:nowrap;}
.maatwerk h3{font-family:var(--geo);font-size:clamp(18px,1.9vw,23px);line-height:1.3;
  color:var(--paper);font-weight:500;margin-bottom:8px;}
.maatwerk p{font-size:14.5px;color:var(--draw-2);line-height:1.6;max-width:62ch;}

/* Cases op bedrijfsprobleem, met de gebruikte combinatie ernaast. */
.cases{margin-top:36px;border-top:1px solid var(--paper-3);}
.case{display:grid;grid-template-columns:1.15fr 1.85fr auto;gap:26px;align-items:baseline;
  padding:18px 0;border-bottom:1px solid var(--paper-3);}
.case .tak{font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--pink-ink-3);}
.case .prob{font-size:15px;line-height:1.5;color:var(--pink-ink);}
.mix{display:flex;gap:5px;flex-wrap:wrap;}
.mix span{font-family:var(--mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;
  border:1px solid var(--paper-3);padding:4px 6px;color:#A9B5BE;white-space:nowrap;}
.mix span.aan{border-color:var(--oker-deep);color:var(--oker-deep);}

/* Werkwijze in vijf stappen, zelfde raster als de zes weken. */
.weken.vijf{grid-template-columns:repeat(5,1fr);}

@media (max-width:900px){
  .routes{grid-template-columns:1fr;}
  .maatwerk{grid-template-columns:1fr;gap:16px;}
  .maatwerk .tag{justify-self:start;}
  .case{grid-template-columns:1fr;gap:8px;}
  .weken.vijf{grid-template-columns:1fr 1fr;}
}
@media (max-width:520px){
  .weken.vijf{grid-template-columns:1fr;}
}
/* Het bedrijfsbeeldmerk is breder dan hoog (160:112), anders dan het
   vierkante Bijgebouw-merk. Vandaar een eigen maat in de smalle header. */
.lockup-mark.bz{width:43px;height:30px;}

/* ══ UITKLAPMENU ═══════════════════════════════════════════════
   Toegevoegd bij fase B (augustus 2026). Vier oplossingspagina's
   passen niet plat naast het logo van 180 px; ze hangen daarom
   onder één item. Onder 1100 px valt het menu al samen tot een
   paneel, en dan staat de lijst gewoon ingesprongen open — een
   accordeon in een accordeon is nergens goed voor.
   ═══════════════════════════════════════════════════════════════ */
.menu-groep{position:relative;}
.menu-top{background:none;border:none;cursor:pointer;padding:0;
  font-family:var(--geo);font-size:13px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--draw-2);display:flex;align-items:center;gap:6px;transition:color .15s;}
.menu-top:hover,.menu-groep.open .menu-top{color:var(--oker);}
.menu-top::after{content:"";width:5px;height:5px;border-right:1.2px solid currentColor;
  border-bottom:1.2px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform .18s;}
.menu-groep.open .menu-top::after{transform:rotate(-135deg) translateY(-2px);}
.submenu{position:absolute;top:calc(100% + 13px);left:-16px;min-width:232px;z-index:70;
  background:var(--ink-2);border:1px solid rgba(187,214,238,.28);
  padding:6px 0;flex-direction:column;display:none;}
/* Het paneel hangt 13px onder de knop. Zonder deze brug verlaat de muis de
   groep zodra hij dat gat in gaat, en klapt het menu dicht vóórdat je een
   item kunt raken. De brug is onzichtbaar en hoort bij het paneel, dus de
   groep blijft hover houden. */
.submenu::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px;}
.menu-groep.open .submenu{display:flex;}
.nav nav .submenu a{padding:11px 16px;font-size:12px;letter-spacing:.07em;color:var(--draw);}
.nav nav .submenu a:hover{color:var(--oker);background:rgba(187,214,238,.06);}
.nav nav .submenu a.hier{color:var(--oker);}
.submenu .scheid{border-top:1px solid rgba(187,214,238,.18);margin:6px 0;}

@media(max-width:1100px){
  .menu-groep{position:static;}
  .menu-top{padding:14px 0;width:100%;justify-content:space-between;font-size:14px;
    border-bottom:1px solid rgba(187,214,238,.12);}
  .submenu{position:static;display:flex;border:none;background:none;padding:0 0 0 16px;
    min-width:0;}
  /* Geen zwevend paneel meer, dus ook geen brug. Zou hij blijven staan, dan
     hangt hij zich aan de sticky navbalk op in plaats van aan het submenu. */
  .submenu::before{display:none;}
  .nav nav .submenu a{padding:12px 0;font-size:13px;}
}

/* ══ LIJSTEN OP DE OPLOSSINGSPAGINA'S ══════════════════════════ */
/* Tweekolomslijst op tekenpapier; de donkere tegenhanger is .altijd. */
.lijst{margin:22px 0 0;padding:0;list-style:none;columns:2;column-gap:38px;}
.lijst li{padding:9px 0 9px 22px;position:relative;font-size:14.5px;color:var(--pink-ink-2);
  line-height:1.5;break-inside:avoid;}
.lijst li::before{content:"";position:absolute;left:0;top:16px;width:9px;height:1px;
  background:var(--oker-deep);}
@media(max-width:760px){.lijst{columns:1;}}

/* Wanneer iets wél past. Spiegelbeeld van .grens, die het kruis zet. */
.wel{list-style:none;margin:22px 0 0;padding:0;}
.wel li{padding:13px 0 13px 34px;border-bottom:1px solid rgba(187,214,238,.16);
  position:relative;font-size:15px;color:var(--draw);}
.wel li::before{content:"✓";position:absolute;left:6px;top:11px;color:var(--ok);
  font-size:16px;}
.sheet .wel li{color:var(--pink-ink);border-bottom-color:var(--paper-3);}

/* Compacte routekaarten onderaan een oplossingspagina. */
.routes.kort{margin-top:28px;}
.routes.kort .route{padding:20px 20px 22px;}
.routes.kort .route h3{font-size:17px;margin:8px 0 6px;}
.routes.kort .route .wat{font-size:13.5px;}
/* Vier kaarten naast elkaar. Nodig op sectorpagina's waar ook maatwerk
   meedoet; met drie kolommen blijft er anders een lege cel over. */
.routes.vier{grid-template-columns:repeat(4,1fr);}
@media(max-width:1040px){.routes.vier{grid-template-columns:1fr 1fr;}}
@media(max-width:640px){.routes.vier{grid-template-columns:1fr;}}