/* OnyxTrace . site stylesheet . direction: The Verdict outside, No man's land inside */
:root{
  --paper:#FBFAF7; --card:#FFFFFF; --tint:#F4F1E9; --rule:#E3DED1; --rule2:#CFC9B8;
  --ink:#14171C; --ink2:#3D434D; --muted:#5F6470; --faint:#8A8272; --faint2:#A79E8B;
  --signal:#A1310F; --note:#9A6B1F;
  --dk:#07090C; --dkp:#0C1014; --dkl:#1A1F26; --dkt:#EEF1F0; --dkm:#8E98A4; --dkm2:#C6CDD4; --acc:#33D1C0;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Instrument Sans','Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',Consolas,'Courier New',monospace;
  --w:960px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.62;-webkit-font-smoothing:antialiased;font-size:17px}
/* Brand book BB/2026/01 sheet 04: signal red appears only where a finding is.
   Never in navigation, never in headings, never for emphasis. Links are ink,
   carried by a rule underline rather than by a hue. */
a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule2)}
a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.nav a,.btn,.brand,footer a,.more{border-bottom:0}
.dark a{color:var(--dkt);border-bottom-color:var(--dkl)}
.dark a:hover{color:var(--dkt);border-bottom-color:var(--acc)}
img,svg{max-width:100%}
.wrap{max-width:var(--w);margin:0 auto;padding:0 clamp(20px,5vw,44px)}
.sr{position:absolute;left:-9999px}

/* preview ribbon (class prv = removed at launch) */
.prv-ribbon{background:#14171C;color:#FBFAF7;font-family:var(--mono);font-size:11px;letter-spacing:.08em;padding:7px 0;text-align:center}
.prv-ribbon b{color:#E6C07B}
.prv-ribbon a{color:#E6C07B;border-bottom:1px solid rgba(230,192,123,.45);padding-bottom:1px}
.prv-ribbon a:hover{color:#FBFAF7;border-bottom-color:rgba(251,250,247,.6)}
.prv-tag{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--signal);border:1px dashed var(--signal);padding:3px 8px;border-radius:2px;margin-top:10px;opacity:.9}
.dark .prv-tag{color:var(--acc);border-color:var(--acc)}

/* nav */
.nav{position:sticky;top:0;z-index:30;background:rgba(251,250,247,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.nav .in{display:flex;align-items:center;gap:24px;
  padding:15px max(clamp(20px,5vw,44px),env(safe-area-inset-right)) 15px max(clamp(20px,5vw,44px),env(safe-area-inset-left))}
.brand{display:flex;align-items:center;gap:9px;color:var(--ink);font-family:var(--serif);font-weight:600;font-size:19px;letter-spacing:-.01em}
.brand svg{width:19px;height:21px;fill:var(--ink)}
.nav .links{display:flex;align-items:center;gap:13px;margin-left:4px;flex:1;min-width:0}
/* One label, one line. Without nowrap the flex items shrink below their content and
   "Wat wij doen" breaks after "wij", which reads as a broken bar rather than as a
   compact one. The sizes below are what makes nowrap fit inside the content column. */
.nav .links a{font-size:14.5px;color:var(--muted);white-space:nowrap}
.nav .links a.on{color:var(--ink);font-weight:600;border-bottom:2px solid var(--ink);padding-bottom:2px}
.nav .links a.btn{margin-left:auto;background:transparent;color:var(--ink);border:1.5px solid var(--ink);border-radius:999px;transition:background .18s ease,color .18s ease}
.nav .links a.btn:hover{background:var(--ink);color:#FBFAF7}
.nav .links a.btn.on{border-bottom:1.5px solid var(--ink);padding-bottom:8px;font-weight:600}
.lang{font-family:var(--mono);font-size:12px;color:var(--faint);border-left:1px solid var(--rule);padding-left:14px}
.lang a{color:var(--faint)} .lang b{color:var(--ink)}
.navscrim{display:none}
.burger{display:none;background:none;border:1px solid var(--rule2);border-radius:4px;width:44px;height:40px;
  cursor:pointer;position:relative;flex:none;transition:border-color .2s ease,background .2s ease;-webkit-tap-highlight-color:transparent}
.burger:active{background:rgba(20,23,28,.04)}
.burger span{display:block;position:absolute;left:12px;width:20px;height:1.5px;background:var(--ink);border-radius:2px;
  transition:transform .26s cubic-bezier(.2,.7,.2,1),opacity .18s ease}
.burger span:nth-child(1){top:14px}
.burger span:nth-child(2){top:19.5px}
.burger span:nth-child(3){top:25px}
.burger.x{border-color:var(--ink)}
.burger.x span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger.x span:nth-child(2){opacity:0}
.burger.x span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ---------- the language selector ----------
   Added 2026-08-27. A bilingual site owes every visitor one visible, one tap control, and a
   Dutch board looks for it before it looks at anything else. It sits in the bar at every width,
   never inside the burger, and it is the only segmented control on the site. */
.langsel{display:inline-flex;align-items:stretch;flex:none;border:1px solid var(--rule2);border-radius:999px;
  overflow:hidden;font-family:var(--mono);font-size:11px;letter-spacing:.1em;font-weight:600;
  background:rgba(255,255,255,.55)}
.langsel a,.langsel span{display:flex;align-items:center;justify-content:center;min-width:38px;padding:7px 11px;
  line-height:1;color:var(--faint);border-bottom:0;transition:background .18s ease,color .18s ease;
  -webkit-tap-highlight-color:transparent}
.langsel a:hover{background:rgba(20,23,28,.05);color:var(--ink)}
.langsel .on{background:var(--ink);color:#FBFAF7;cursor:default}
.langsel a+span.on,.langsel span.on+a{border-left:1px solid var(--rule2)}

/* type */
.kick{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--note);font-weight:600}
.kick.q{color:var(--faint)}
h1,h2,h3,.h{font-family:var(--serif);font-weight:600;letter-spacing:-.02em;line-height:1.08;text-wrap:balance}
h1{font-size:clamp(38px,5.6vw,60px);max-width:24ch;margin-top:18px;line-height:1.06}
h2{font-size:clamp(28px,3.8vw,37px);margin-top:10px;max-width:38ch;line-height:1.16}
h3{font-size:23.5px;line-height:1.22}
.lead{text-wrap:pretty;font-size:clamp(19px,2.2vw,22px);font-weight:500;color:var(--ink2);max-width:54ch;margin-top:18px;line-height:1.45}
.body{font-size:17.5px;color:var(--muted);max-width:64ch;margin-top:14px;line-height:1.7}
.body b,.lead b{color:var(--ink)}
.fine{font-family:var(--mono);font-size:13px;color:var(--faint);margin-top:18px;line-height:1.6}
.more{display:inline-block;font-size:15.5px;font-weight:600;color:var(--ink);margin-top:16px}
.more::after{content:" \2192"}
.quote{text-wrap:pretty;font-family:var(--serif);font-size:clamp(21px,2.5vw,26px);font-weight:500;color:var(--ink);line-height:1.4;max-width:52ch;margin-top:22px}
.quote.big{font-size:clamp(23px,2.9vw,30px);max-width:44ch}
.src{font-size:15px;color:var(--muted);margin-top:12px}

/* buttons */
.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.btn{display:inline-block;background:var(--ink);color:#FBFAF7;font-size:16px;font-weight:600;padding:13px 22px;border-radius:3px;line-height:1.2}
.btn:hover{background:#000;color:#FBFAF7}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--rule2)}
.btn.ghost:hover{background:#fff;color:var(--ink)}
.nav .btn{font-size:13.5px;padding:7px 14px}

/* sections */
section{padding:56px 0}
section.hero{padding:44px 0 40px}
section.tint{background:var(--tint);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:40px 0}
.rule{height:1px;background:var(--rule);margin:0}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.card{background:var(--card);border:1px solid var(--rule);padding:20px 22px}
.card h3{font-size:19px;font-family:var(--sans);font-weight:600;letter-spacing:0;margin:8px 0 6px}
.card p{font-size:15.5px;color:var(--muted);line-height:1.6}
.card .num{font-family:var(--mono);font-size:13px;color:var(--note);font-weight:600}

/* numbered findings */
.findings{margin-top:22px;border-top:1px solid var(--rule)}
.finding{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:20px 0;border-bottom:1px solid var(--rule)}
.finding .n{font-family:var(--mono);font-size:15px;color:var(--note);font-weight:600}
.finding h3{font-family:var(--sans);font-size:20px;font-weight:600;letter-spacing:0;line-height:1.3;margin-bottom:5px}
.finding p{font-size:17px;color:var(--muted);line-height:1.7}
.finding p b{color:var(--ink)}

/* verdict card, red lines, pricing */
.verdict{border:1px solid var(--ink);background:var(--card);padding:22px 24px;margin-top:26px}
.verdict .top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.stamp{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--signal);border:1px solid var(--signal);padding:5px 9px;white-space:nowrap}
.marg{font-family:var(--mono);font-size:13px;color:var(--faint);letter-spacing:.04em}
.redlines{background:var(--card);border:1px solid var(--rule);border-left:3px solid var(--ink);padding:20px 22px}
.redlines h3{margin-bottom:12px}
.redlines .rl{margin-top:11px}
.redlines .rl b{display:block;font-size:16px;color:var(--ink)}
.redlines .rl span{font-size:15px;color:var(--muted);line-height:1.6}
.pricebox{background:var(--card);border:1px solid var(--rule);padding:20px 22px}
.pricebox p{font-size:15.5px;color:var(--muted);line-height:1.65;margin-top:8px}

/* no man's land figure */
.gapfig{width:100%;height:auto;margin:22px 0 8px;opacity:0;transform:translateY(6px);transition:opacity .9s ease,transform .9s ease}
.gapfig.in{opacity:1;transform:none}

/* people */
.people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px}
.portrait{aspect-ratio:4/5;background:#EAE6DA;border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;color:var(--faint2);letter-spacing:.1em}
.people h3{font-family:var(--sans);font-size:17px;font-weight:600;letter-spacing:0;margin-top:12px}
.people p{font-size:14.5px;color:var(--muted);line-height:1.55;margin-top:4px}

/* cta */
.cta{background:var(--ink);color:#FBFAF7;padding:38px 34px;margin:10px 0 0}
.cta h2{color:#FBFAF7;max-width:30ch}
.cta p{font-size:15px;color:#B7BAC1;margin-top:12px;max-width:54ch;line-height:1.6}
.cta .btn{background:#FBFAF7;color:var(--ink);margin-top:20px}
.cta .btn:hover{background:#fff;color:var(--ink)}

/* divider + dark surface */
.divider{background:var(--dk);padding:20px 0}
.divider .in{display:flex;align-items:center;gap:16px}
.divider .l{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);font-weight:600;white-space:nowrap}
.divider .line{flex:1;height:1px;background:var(--dkl)}
.divider .r{font-family:var(--mono);font-size:11px;color:var(--dkm);white-space:nowrap}
.dark{background:var(--dk);color:var(--dkt);padding:44px 0 54px}
.dark h2{font-family:var(--sans);font-weight:700;letter-spacing:-.025em;font-size:clamp(26px,3.4vw,32px);max-width:36ch;line-height:1.14}
.dark .dk{font-size:15px;color:var(--dkm);line-height:1.65;max-width:70ch;margin-top:14px}
.dark .panel{background:var(--dkp);border:1px solid var(--dkl);padding:8px 24px;margin-top:24px}
.dark .step{display:grid;grid-template-columns:100px 1fr;gap:18px;padding:15px 0;border-bottom:1px solid var(--dkl)}
.dark .step:last-child{border-bottom:0}
.dark .step .t{font-family:var(--mono);font-size:11px;color:var(--acc);padding-top:3px}
.dark .step b{display:block;font-size:15px;color:var(--dkt);margin-bottom:3px}
.dark .step span{font-size:14px;color:var(--dkm);line-height:1.6}
.dark .grid2{margin-top:24px}
.dark .box{background:var(--dkp);border:1px solid var(--dkl);padding:20px 22px}
.dark .box.acc{border-color:var(--acc)}
.dark .box .k{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--acc);font-weight:600;margin-bottom:12px}
.dark .box p{font-size:14px;color:var(--dkm);line-height:1.65}
.dark .box b{color:var(--dkt)}
.dark .no{display:flex;gap:10px;font-size:14px;color:var(--dkm);line-height:1.55;margin-top:8px}
.dark .no i{font-style:normal;color:var(--acc);font-family:var(--mono)}
/* Paper-register text classes used inside a dark section resolved to paper greys on near
   black. .body came out at 3.36:1, under the 4.5:1 floor. Found 2026-08-22. The dark register
   now answers for every text class the paper one has, so a block can move between the two
   without anyone checking contrast by hand. */
.dark .body{color:var(--dkm2)}
.dark .lead{color:var(--dkt)}
.dark .fine{color:var(--dkm)}
.dark .kick{color:var(--acc)}
.dark .quote{color:var(--dkt)}
.dark .src{color:var(--dkm)}
.dark .rule{background:var(--dkl)}
.dark h3{color:var(--dkt)}
.dark .notwe{background:var(--dkp);border:1px solid var(--dkl);padding:22px 24px;margin-top:20px;font-size:15px;color:var(--dkm2);line-height:1.7;max-width:84ch}
.dark .close{border-top:1px solid var(--dkl);margin-top:30px;padding-top:24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.dark .close b{font-size:18px;font-weight:600;max-width:44ch;color:var(--dkt)}
.dark .close .btn{margin-left:auto;background:var(--acc);color:#04120F;border-radius:6px;font-weight:700}
.dark .close .btn:hover{background:#5fe0d1;color:#04120F}

/* footer */
footer{border-top:1px solid var(--rule);padding:28px 0 40px;font-size:13px;color:var(--faint)}
footer .row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
footer svg{width:16px;height:18px;fill:var(--faint)}
footer .links{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px}
footer .links a{color:var(--muted)}
footer .eth{margin-top:14px;max-width:70ch;line-height:1.6}
footer .eth a{color:var(--ink)}

/* contact */
.contactgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:26px}
.contactgrid .card h3{font-family:var(--serif);font-size:22px;letter-spacing:-.02em;margin:0 0 8px}
.contactgrid .card a.mail{font-family:var(--mono);font-size:15px;color:var(--ink);display:inline-block;margin:6px 0 8px;border-bottom:1px solid var(--rule2)}

/* responsive */
/* The bar hands over to the sheet menu here rather than at 820, because a one line
   bar needs 980 pixels and the band between 820 and 980 is exactly where the labels
   used to break. Measured on this machine; 1024 leaves headroom for others. */
@media(max-width:1024px){
  /* the menu is a sheet that slides out of the bar, not a list that appears under it */
  .nav .in{gap:12px;padding-top:11px;padding-bottom:11px}
  .nav .links{position:absolute;left:0;right:0;top:100%;background:var(--paper);
    border-bottom:1px solid var(--rule);box-shadow:0 22px 40px rgba(20,23,28,.10);
    flex-direction:column;align-items:stretch;gap:0;padding:6px 0 14px;margin-left:0;flex:none;
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .22s ease,transform .26s cubic-bezier(.2,.7,.2,1),visibility .26s}
  .nav .links.open{opacity:1;visibility:visible;transform:none}
  .nav .links a{padding:15px clamp(20px,5vw,44px);width:100%;font-size:17px;color:var(--ink);
    border-top:1px solid var(--rule);display:flex;align-items:center;min-height:52px}
  .nav .links a:first-child{border-top:0}
  .nav .links a.on{border-bottom:0;box-shadow:inset 3px 0 0 var(--ink);font-weight:600}
  .nav .links a.btn{margin:16px clamp(20px,5vw,44px) 2px;width:auto;border-top:0;border-radius:4px;
    background:var(--ink);color:#FBFAF7;justify-content:center;font-size:16px;min-height:52px}
  .navscrim{display:block;position:fixed;inset:0;z-index:20;background:rgba(20,23,28,.34);
    opacity:0;visibility:hidden;transition:opacity .24s ease,visibility .24s}
  body.menuopen .navscrim{opacity:1;visibility:visible}
  body.menuopen{overflow:hidden}
  .lang{border-left:0;padding:12px clamp(20px,5vw,44px)}
  .burger{display:block}
  .brand{font-size:18px}
}

@media(max-width:820px){
  .grid2,.grid3,.people,.contactgrid{grid-template-columns:1fr}
  .dark .step{grid-template-columns:1fr;gap:4px}
  .finding{grid-template-columns:34px 1fr;gap:12px}
  section{padding:44px 0}
  .cta{padding:30px 24px}
  .dark .close .btn{margin-left:0}
}
/* ===================== print . the board page is meant to leave the browser =====================
   Session 5 decision 2 gave the board its own page and said it had to be a forwardable artefact.
   A URL is not one. This block is the artefact: the page prints, and saves to PDF, as a short
   document a director can put in a pack.
   The load-bearing line is the .rv rule. Every section on this site starts at opacity 0 and is
   revealed on scroll, so a reader who hit print without scrolling to the bottom printed a mostly
   blank sheet. Print has no scrolling, so nothing was ever revealed. */
@media print{
  .rv,.rv.in{opacity:1 !important;transform:none !important;transition:none !important}
  h1 .w span{transform:none !important;animation:none !important}
  .gapfig path{clip-path:none !important}
  body{animation:none !important}

  @page{size:A4;margin:16mm 15mm 18mm}
  html,body{background:#fff;font-size:10.5pt}
  .nav,.prv-ribbon,.burger,.btns,.cta .btn,.dark .close .btn,.progress,.sheet,.scrim,.langsel,.fwd{display:none !important}
  .dark,.divider,.tint{background:#fff;color:#000;border-top:1px solid #000}
  .dark *,.divider *{color:#000 !important;background:transparent !important;border-color:#999 !important}
  .wrap{max-width:none;padding:0}
  section{padding:14px 0 !important}
  .hero{padding-top:0 !important}

  /* nothing splits across a page in the middle of an argument */
  h1,h2,h3{break-after:avoid-page;page-break-after:avoid}
  .finding,.box,.grid2>*,figure,.gapfig{break-inside:avoid;page-break-inside:avoid}

  /* the printed sheet says what it is and where it came from, on every page */
  .prhead{display:block !important;border-bottom:1px solid #000;padding-bottom:6px;margin-bottom:14px;
          font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:8pt;letter-spacing:.06em;text-transform:uppercase}
  .prhead b{font-weight:600}
  .prfoot{display:block !important;border-top:1px solid #999;margin-top:18px;padding-top:6px;
          font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:8pt;color:#444}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#555;word-break:break-all}
  .nav a::after,.prhead a::after,.prfoot a::after{content:""}
}
/* the print furniture is print only */
.prhead,.prfoot{display:none}

/* ===================== the forward block . board page, on screen =====================
   Screen half of the same decision: tell the reader this page is built to be sent on, and
   give them the two ways to do it. */
.fwd{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:26px 0 0;padding:16px 18px;
     border:1px solid var(--rule);border-radius:2px;background:var(--paper2, #F4F1E9)}
.fwd .fwt{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.06em;
          text-transform:uppercase;color:var(--muted);flex:1 1 190px}
.fwd button.btn{font:inherit;cursor:pointer}
.fwd .cp{background:none;border:1px solid var(--rule);border-radius:2px;padding:9px 14px;cursor:pointer;
         font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.04em;color:var(--ink)}
.fwd .cp:hover{border-color:var(--ink)}
.fwd .cp[data-done="1"]{border-color:var(--acc,#33D1C0)}
@media (max-width:620px){.fwd{flex-direction:column;align-items:stretch}.fwd .btn,.fwd .cp{width:100%;text-align:center}}

/* ===================== motion . restrained, on brand ===================== */
/* 1. page arrives */
body{animation:pagein .7s ease both}
@keyframes pagein{from{opacity:0}to{opacity:1}}

/* 2. reading progress, a hairline in ink (sheet 04: signal is for findings only) */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--ink);z-index:60;transition:width .12s linear}

/* 3. hero: text left, the mark as a drifting constellation right */
/* the mark is never recoloured circle by circle (sheet 03) */
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(var(--dx,2px),var(--dy,-2px))}}

/* 4. headline words rise */
h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom}
h1 .w span{display:inline-block;transform:translateY(110%);animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.08s * var(--i,0))}
@keyframes rise{to{transform:translateY(0)}}

/* 5. scroll reveal, staggered */
.rv{opacity:0;transform:translateY(10px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(.06s * var(--i,0))}
.rv.in{opacity:1;transform:none}

/* 6. the gap draws itself in, then the hatching keeps moving */
.gapfig path{clip-path:inset(0 50% 0 50%);transition:clip-path 1.2s cubic-bezier(.2,.7,.2,1) .2s}
.gapfig.in path{clip-path:inset(0 0 0 0)}
.gapfig text:last-of-type{opacity:0;transition:opacity .6s ease 1.1s}
.gapfig.in text:last-of-type{opacity:1}
.gapfig circle{stroke-dasharray:280;stroke-dashoffset:280;transition:stroke-dashoffset 1.4s ease}
.gapfig.in circle{stroke-dashoffset:0}
.gapfig .hatchmove{animation:hatch 14s linear infinite}
@keyframes hatch{to{transform:translate(6px,6px)}}

/* 7. quotes: a rule draws in beside them */
.quote{position:relative;padding-left:18px}
.quote::before{content:"";position:absolute;left:0;top:.15em;bottom:.15em;width:2px;background:var(--ink);transform:scaleY(0);transform-origin:top;transition:transform .9s cubic-bezier(.2,.7,.2,1) .1s}
.rv.in .quote::before,.quote.in::before{transform:scaleY(1)}

/* 8. cards and findings, a breath of hover */
.card,.redlines,.pricebox,.verdict{transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.card:hover,.pricebox:hover{border-color:var(--rule2);transform:translateY(-2px);box-shadow:0 10px 30px rgba(20,23,28,.06)}
.finding{transition:background .25s ease}
.finding:hover{background:rgba(255,255,255,.5)}
.btn{position:relative;transition:background .2s ease,transform .2s ease}
.btn:not(.ghost)::after{content:" \2192";display:inline-block;transition:transform .25s ease;margin-left:2px}
.btn:not(.ghost):hover::after{transform:translateX(4px)}
.more{transition:letter-spacing .25s ease}
.more:hover{letter-spacing:.01em}

/* 9. the divider line draws, the dark room has a faint technical grid */
.divider .line{transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.2,.7,.2,1) .1s}
.divider.in .line{transform:scaleX(1)}
.dark{background-color:var(--dk);background-image:radial-gradient(rgba(51,209,192,.07) 1px,transparent 1px);background-size:26px 26px}
.dark .step{transition:background .25s ease}
.dark .step:hover{background:rgba(51,209,192,.03)}
.dark .box{transition:border-color .25s ease}
.dark .box:hover{border-color:#2a3340}
.dark .box.acc:hover{border-color:var(--acc)}

/* 10. nav settles when the page scrolls */
.nav{transition:box-shadow .3s ease}
.nav.scrolled{box-shadow:0 1px 0 var(--rule),0 10px 30px rgba(20,23,28,.05)}
.brand svg circle{transform-box:fill-box;transform-origin:center;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.brand:hover svg circle:nth-child(3n){transform:translate(1.5px,-1.5px)}
.brand:hover svg circle:nth-child(3n+1){transform:translate(-1.5px,1px)}
.brand:hover svg circle:nth-child(3n+2){transform:translate(1px,1.5px)}

/* 11. portraits and the CTA */
.portrait{transition:background .3s ease}
.people > div:hover .portrait{background:#E2DCCB}
.cta{position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;background:radial-gradient(rgba(251,250,247,.08),transparent 70%)}

@media(max-width:820px){
        }
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .rv{opacity:1;transform:none}
  /* The figure itself, and not only its insides. Without this line every diagram on
     the site was invisible to a visitor with reduced motion on: the reveal script
     returns early when motion is off, so nothing ever gains .in, and .gapfig sits at
     the opacity 0 it is given above. Six figures across both languages. This is the
     same failure as the blank printed sheet, one media query over. */
  .gapfig,.dutyfig{opacity:1;transform:none}
  .gapfig path{clip-path:none}.gapfig text:last-of-type{opacity:1}.gapfig circle{stroke-dashoffset:0}
  .divider .line{transform:none}
  h1 .w span{transform:none}
  body{opacity:1}
}
.nav .btn::after{content:none}

/* ===================== firm-scale footer, facts strip, partner roles ===================== */
footer{padding:40px 0 34px}
.fgrid{display:grid;grid-template-columns:1.6fr repeat(var(--fcols,3),minmax(0,1fr));gap:28px;padding-bottom:26px;border-bottom:1px solid var(--rule)}
.fbrand .brand{font-size:18px}
.fbrand p{font-size:13.5px;color:var(--muted);line-height:1.6;margin-top:12px;max-width:38ch}
.fgrid h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:600;margin-bottom:10px}
.fgrid a,.fgrid span{display:block;font-size:14px;color:var(--muted);margin:6px 0;line-height:1.4}
.fgrid a:hover{color:var(--ink)}
/* The footer logo reads like the one in the bar: mark and name side by side. The link and span
   rule above made both blocks and stacked the name under the mark (Floris, 2026-09-25). */
.fgrid .fbrand .brand{display:inline-flex;align-items:center;gap:9px;margin:0}
.fgrid .fbrand .brand span{display:inline;margin:0;font-size:18px;color:inherit}
.fgrid .brand svg{width:17px;height:19px}
footer .eth{margin-top:16px;max-width:80ch;line-height:1.6;font-size:13px}
.fbot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px;font-size:12.5px;color:var(--faint)}
.fbot .lang{border-left:0;padding-left:0}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-top:8px}
.facts > div{padding:20px 18px 20px 0;border-right:1px solid var(--rule);margin-right:18px;font-size:14px;color:var(--muted);line-height:1.6}
.facts > div:last-child{border-right:0;margin-right:0}
.facts .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--note);font-weight:600;margin-bottom:8px}
.people .role{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--note);margin-top:4px}
.people .person p{margin-top:8px}
.tint .people .portrait{background:#E6E1D3}
@media(max-width:820px){
  .fgrid{grid-template-columns:1fr 1fr}
  .fbrand{grid-column:1 / -1}
  .facts{grid-template-columns:1fr}
  .facts > div{border-right:0;margin-right:0;border-bottom:1px solid var(--rule);padding:14px 0}
  .facts > div:last-child{border-bottom:0}
}

/* ---- the guide gate (lead capture) ---- */
.gate{background:var(--card);border:1px solid var(--rule);padding:28px 30px;margin-top:26px;max-width:560px}
.gate h3{font-size:21px;margin-bottom:6px}
.gate .why{font-size:14.5px;color:var(--muted);line-height:1.6;margin-bottom:20px;max-width:52ch}
.gate label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:14px 0 5px}
.gate input,.gate textarea{width:100%;font-family:var(--sans);font-size:16px;color:var(--ink);background:var(--paper);border:1px solid var(--rule2);border-radius:2px;padding:11px 13px}
.gate input:focus,.gate textarea:focus{outline:0;border-color:var(--ink)}
.gate textarea{min-height:74px;resize:vertical}
.gate .row{display:flex;gap:14px;flex-wrap:wrap}
.gate .row>div{flex:1;min-width:180px}
.gate button{margin-top:22px;background:var(--ink);color:#FBFAF7;font-family:var(--sans);font-size:15.5px;font-weight:600;border:0;border-radius:3px;padding:14px 24px;cursor:pointer}
.gate button:disabled{opacity:.5;cursor:default}
.gate .err{font-size:14px;color:var(--signal);margin-top:12px;min-height:1px}
.gate .fine{font-family:var(--mono);font-size:11.5px;color:var(--faint);margin-top:16px;line-height:1.7}
.gate .done h3{margin-bottom:10px}
.gate .done p{font-size:16px;color:var(--ink2);line-height:1.6;max-width:50ch}
.gate .dl{display:inline-block;margin-top:20px;background:var(--ink);color:#FBFAF7;font-size:15.5px;font-weight:600;padding:14px 24px;border-radius:3px;border-bottom:0}
.gate .dl:hover{color:#FBFAF7}
.guidecard{display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap;margin-top:26px}
.guidecard .cov{width:210px;flex:none;background:var(--card);border:1px solid var(--rule);padding:20px;display:flex;flex-direction:column;gap:12px}
.guidecard .cov svg{width:54px;height:auto;fill:var(--ink)}
.guidecard .cov .t{font-family:var(--serif);font-size:23px;font-weight:600;line-height:1.1}
.guidecard .cov .m{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--faint2);margin-top:auto;line-height:1.9}
.guidecard ol{flex:1;min-width:260px;list-style:none;counter-reset:g}
.guidecard ol li{counter-increment:g;font-size:15.5px;color:var(--ink2);padding:9px 0;border-top:1px solid var(--rule);display:flex;gap:12px}
.guidecard ol li::before{content:counter(g,decimal-leading-zero);font-family:var(--mono);font-size:10px;color:var(--faint2);flex:none;width:20px;padding-top:4px}

/* portraits: two ink sketches and, for the third partner, a silhouette on purpose */
.portrait{overflow:hidden;background:var(--paper)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block;filter:saturate(0)}
.portrait.sil{background:#EAE6DA}
/* The third partner has no photograph, so his tile is the firm's own mark at portrait
   scale, generated from mark.svg by src/make_ruben_tile.py. It fills the frame the way
   the two drawings do, and unlike them it keeps its colour, because the single signal
   circle is the whole point of it. */
.portrait.mk{background:var(--paper)}
.portrait.mk img{object-fit:cover;object-position:center 42%;padding:0;filter:none;opacity:1}
.people > div:hover .portrait.mk{background:var(--paper)}
.portrait.sil img{object-fit:contain;object-position:center 62%;padding:14% 14% 0;filter:none;opacity:.9}
.people > div:hover .portrait.sil{background:#E2DCCB}

/* ---------- the frontier figure ----------
   The brand book's central drawing, brought onto the site 2026-08-22. Three territories that
   do not touch, and the ground between them. It is the one image nobody else can use. */
.figure{margin-top:34px;display:grid;grid-template-columns:minmax(0,360px) 1fr;gap:34px;align-items:center}
.figure svg{width:100%;max-width:360px;height:auto;display:block}
.figure .cap{font-family:var(--mono);font-size:12px;color:var(--faint);line-height:1.7;letter-spacing:.02em}
.figure .cap b{display:block;font-family:var(--sans);font-size:17px;color:var(--ink);
  letter-spacing:-.01em;margin-bottom:9px;font-weight:600}
@media (max-width:760px){.figure{grid-template-columns:1fr;gap:20px}}

/* ---------- the frontier band ----------
   Full bleed, large, and the labels are HTML so they stay crisp and exist in two languages.
   Rebuilt 2026-08-22: the first pass sat at 360px beside a column of text and read as thin.
   The geometry is unchanged and still lifted from Brand/canvas. What is new is the route
   drawn through the gap, which is the argument rather than the decoration. */
.frontier-band{padding-top:52px;padding-bottom:56px}
.frontier-wrap{position:relative;margin:34px auto 30px;max-width:820px;aspect-ratio:3/2}
.frontier-wrap svg.frontier{width:100%;height:100%;display:block;overflow:visible}

.ft-lab{position:absolute;font-family:var(--mono);font-size:11px;letter-spacing:.19em;
  text-transform:uppercase;color:var(--ink);font-weight:600;transform:translate(-50%,-50%);
  white-space:nowrap;pointer-events:none}
.ft-1{left:24.5%;top:26%}
.ft-2{left:75.5%;top:26%}
.ft-3{left:50.3%;top:88%}
.ft-gap{left:50.3%;top:50%;color:var(--signal);font-size:10px;letter-spacing:.22em}

/* the route: drawn once as the figure scrolls in, then it stays */
.frontier-wrap .ftroute{stroke-dashoffset:520;transition:stroke-dashoffset 2.4s cubic-bezier(.3,.6,.2,1) .25s}
.reveal.in .frontier-wrap .ftroute,.frontier-band.in .ftroute{stroke-dashoffset:0}
.frontier-wrap .ftmark{opacity:0;transition:opacity .5s ease}
.frontier-band.in .ftmark{opacity:1}
.frontier-band.in .ftmark:nth-of-type(2){transition-delay:.9s}
.frontier-band.in .ftmark:nth-of-type(3){transition-delay:1.5s}
.frontier-band.in .ftmark:nth-of-type(4){transition-delay:2.1s}

@media (prefers-reduced-motion:reduce){
  .frontier-wrap .ftroute{stroke-dashoffset:0;transition:none}
  .frontier-wrap .ftmark{opacity:1;transition:none}
}
@media (max-width:720px){
  .ft-lab{font-size:9px;letter-spacing:.12em}
  .ft-gap{font-size:8.5px}
  .frontier-band{padding-top:34px;padding-bottom:36px}
}

/* ---------- the hero ----------
   Rebuilt 2026-08-22. The name showed twice at once, in the nav and in the hero, and an
   oversized mark took half the row from the words. Now: one column, the words run the full
   measure, the lockup is the only place the name appears while the hero is on screen, and
   the nav wordmark fades in only once you have scrolled past it.

   Warm comes from the paper tones and generous leading, not from a colour. Strong comes from
   scale and from one hairline that anchors the block, not from weight everywhere. */
.hero-solo{padding-top:2px;padding-bottom:12px}
.hero-solo .lead{max-width:56ch;margin-top:14px}
.hero-solo .body{max-width:66ch}
.hero-solo .fine{max-width:66ch}

/* Rebalanced 2026-08-27. The wordmark was set at 86px and the proposition at 52px, so the
   name was shouting louder than the idea, and it pushed both calls to action off the fold on
   any laptop. A board member should read "Hire an adversary." first and the company name
   second: the name is a label, the sentence is the argument. Same elements, ranked properly. */
.lockup{display:flex;align-items:center;gap:clamp(9px,1vw,13px);margin-bottom:2px}
.lockup svg{width:clamp(26px,2.6vw,34px);height:auto;fill:var(--ink);flex:none}
.lockup span{font-family:var(--serif);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(25px,2.6vw,32px);line-height:1;color:var(--ink);white-space:nowrap}

h1.slogan{font-size:clamp(40px,6.4vw,74px);max-width:22ch;margin-top:14px;color:var(--ink);
  font-weight:500;letter-spacing:-.028em;line-height:1.02}
h1.slogan::after{content:"";display:block;width:82px;height:2px;background:var(--signal);
  margin-top:20px;opacity:.85}

/* the constellation moves to the lockup, which is now big enough to carry it */
.lockup svg circle{transform-box:fill-box;transform-origin:center;
  animation:drift var(--t,11s) ease-in-out var(--dl,0s) infinite alternate}

/* the home page nav shows the mark alone until the hero is behind you */
/* Hidden means folded, not just transparent: an invisible wordmark still held its width and
   left a hole between the mark and the menu (Floris, 2026-09-25). */
.brand span{transition:opacity .35s ease,transform .35s ease,max-width .35s ease;max-width:200px;overflow:hidden;white-space:nowrap}
.brand-solo{gap:0}
.brand-solo span{opacity:0;transform:translateX(-6px);pointer-events:none;max-width:0}
.nav.deep .brand-solo{gap:9px}
.nav.deep .brand-solo span{opacity:1;transform:none;pointer-events:auto;max-width:200px}

@media (prefers-reduced-motion:reduce){
  .lockup svg circle{animation:none}
  .brand span{transition:none}
}
@media (max-width:860px){
  .hero-solo{max-width:none}
}
@media (max-width:560px){
  .lockup{gap:9px}
  h1.slogan::after{margin-top:16px;width:64px}
}

/* the no man's land figure, redrawn 2026-08-22. The gap is drawn beneath the three domains
   and they clip it, so the shape between them is an object rather than leftover paper. */
.gapfig{width:100%;max-width:640px;height:auto;display:block;margin:26px auto 4px}
.gapfig .gfgap{transition:fill-opacity .9s ease .2s,stroke-opacity .9s ease .2s}
.reveal .gapfig .gfgap{fill-opacity:0;stroke-opacity:0}
.reveal.in .gapfig .gfgap{fill-opacity:.07;stroke-opacity:.55}
@media (prefers-reduced-motion:reduce){
  .reveal .gapfig .gfgap{fill-opacity:.07;stroke-opacity:.55;transition:none}
}


/* ============================================================================
   THE PHONE PASS . 2026-08-27
   The site was drawn on a desktop and checked on a desktop. On a phone the top
   bar was bare, three portraits stacked into a column taller than the argument
   they carry, and the paper had none of the air that makes the desktop version
   feel like a firm rather than a page. Everything below is about the hand
   holding the phone: what it can reach, what it can read, and what it sees in
   the first second. Nothing here changes the desktop.
   ============================================================================ */

/* the bar sits over the notch and the home indicator without losing its rhythm */
.wrap{padding-left:max(clamp(20px,5vw,44px),env(safe-area-inset-left));
      padding-right:max(clamp(20px,5vw,44px),env(safe-area-inset-right))}

/* nothing on this site may push the page sideways */
html,body{overflow-x:clip}

@media (max-width:820px){
  /* The bar is never bare. On the home page the wordmark used to stay hidden until you had
     scrolled past the hero, which on a phone left a mark and a burger and a lot of paper.
     The hero lockup is the grand statement; the bar is the anchor, and it holds its name. */
  .brand-solo{gap:9px}
  .brand-solo span{opacity:1;transform:none;pointer-events:auto;max-width:200px}
  .langsel{margin-left:auto}

  /* ---- leadership: a row each, so the three partners read as a team and not as
     three full height posters you have to scroll past one at a time ---- */
  .people{gap:0;margin-top:18px;border-top:1px solid var(--rule)}
  .people .person{display:grid;grid-template-columns:76px 1fr;column-gap:16px;
    align-items:start;padding:18px 0;border-bottom:1px solid var(--rule)}
  .people .portrait{grid-row:1 / span 3;width:76px;aspect-ratio:1/1;border-radius:3px}
  .people .portrait img{object-position:center 18%}
  .people .portrait.sil img{padding:10% 10% 0}
  .people h3{margin-top:0;font-size:17.5px}
  .people .role{margin-top:2px}
  .people .person p{margin-top:7px;font-size:14.5px;grid-column:1 / -1}

  /* ---- rhythm. Sections were 44px apart on a 375px screen, which reads as a
     document. A little more air is what makes it read as a designed page ---- */
  section{padding:52px 0}
  section.hero{padding:34px 0 40px}
  section.tint{padding:44px 0}
  h2{max-width:22ch}
  .lead{max-width:none}
  .body,.hero-solo .body,.hero-solo .fine,.hero-solo .lead{max-width:none}
  .quote,.quote.big{max-width:none}

  /* ---- buttons are the one place a phone punishes a desktop decision. Both
     calls to action go full width and both clear the 48px reach target ---- */
  .btns{gap:10px}
  /* Not flex. The arrow on a primary button is a ::after, and inside a flex box it becomes
     its own flex item, so a label that wraps to two lines leaves the arrow stranded on the
     right of the second line looking like a rendering fault. Block plus text-align keeps the
     arrow in the text flow, attached to the last word, and the padding clears the 48px reach
     target on one line and on two. */
  .btns .btn{flex:1 1 100%;display:block;text-align:center;padding:17px 18px}
  .cta{padding:32px 22px;margin-top:4px}
  .cta .btn{display:block;width:100%;text-align:center;padding:17px 18px}
  .dark .close .btn{display:block;width:100%;text-align:center;padding:17px 18px}

  /* ---- cards and panels: the borders were doing the work of the padding ---- */
  .card{padding:20px}
  .verdict,.redlines,.pricebox,.dark .box,.dark .notwe,.gate{padding:20px}
  .gate{max-width:none}
  .dark .panel{padding:4px 18px}

  /* ---- the dark divider carried two nowrap labels and a line between them,
     which is three things competing for 335 pixels ---- */
  .divider .in{gap:12px}
  .divider .r{display:none}

  /* ---- the field guide card ---- */
  .guidecard{gap:20px}
  .guidecard .cov{width:100%;flex-direction:row;align-items:center;gap:16px}
  .guidecard .cov .m{margin-top:0;margin-left:auto;text-align:right}
  .guidecard ol{min-width:0}

  /* ---- the footer is the last thing a thumb touches, so give it room ---- */
  .fgrid{gap:22px;grid-template-columns:1fr 1fr}
  .fgrid a{padding:3px 0;min-height:30px}
  .fbot{justify-content:flex-start;gap:12px}
}

@media (max-width:560px){
  /* the hero is the whole first impression and it gets the most attention */
  .lockup span{font-size:26px}
  .lockup svg{width:26px}
  h1.slogan{font-size:clamp(36px,10.2vw,46px);max-width:none}
  .lead{font-size:19.5px}
  .hero-solo .kick{font-size:11px;letter-spacing:.16em}
  .fgrid{grid-template-columns:1fr}
  .facts > div{padding:16px 0}
  /* the frontier band is the argument. At this width it needs the room ---- */
  .frontier-wrap{aspect-ratio:1/1}
  .ft-1{left:22%;top:24%} .ft-2{left:78%;top:24%} .ft-3{left:50.3%;top:90%}
}

/* the top bar, once you have scrolled, tightens rather than following you at
   full height. Fifty five pixels of a phone screen is worth having back. */
@media (max-width:820px){
  .nav{transition:box-shadow .3s ease,background .3s ease}
  .nav.scrolled{background:rgba(251,250,247,.97)}
}

/* the no man's land drawing has two arrangements and only one is ever on screen: wide for a
   desktop column, squarer for a phone, where the wide one rendered its labels at four pixels */
.gapfig-m{display:none}
@media (max-width:720px){
  .gapfig{display:none}
  .gapfig-m{display:block;max-width:400px;margin:22px auto 4px}
}

/* ================================================================================
   THE VISUAL PASS . added 2026-09-01, for session 6
   ================================================================================
   Answers F3 (Floris: "our website is monochrome, and I would like it to be cool",
   clarified in the room to "colourful"), AG1 (not appealing enough) and AG3 (too
   text heavy), without reopening the brand rule.

   What the room actually agreed. Floris asked for tetradic colours: vermilion,
   amber, teal, violet. Three of the four were already in the palette. So this is
   not a new palette, it is permission to use the one that exists, plus violet.
   Every colour still means exactly one thing, which is the rule that keeps the
   site from looking like a brochure:

     signal  #A1310F  vermilion   a finding, and nothing else
     note    #9A6B1F  amber       the kicker above a section
     acc     #33D1C0  teal        the dark surface only
     duty    #4D768C  violet      the law, the duty, the liability. New.

   Violet has one job and it is the job the site did not have a colour for: the
   thread that runs from the Cyberbeveiligingswet to the board's personal
   liability. It never appears anywhere else.
*/
:root{ --duty:#4D768C; --duty-t:#E6EEF2; --duty-d:#8FB0C2; }

/* the duty rail: the law thread gets an edge, so the eye can follow it across pages */
.duty{border-left:3px solid var(--duty);padding-left:22px;margin-top:22px}
.duty .kick{color:var(--duty)}
.dark .duty{border-left-color:var(--duty-d)}
.dark .duty .kick{color:var(--duty-d)}
.duty-note{display:inline-block;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  color:var(--duty);background:var(--duty-t);border-radius:3px;padding:4px 9px;margin-top:14px}

/* a dark band that runs the full width of the window rather than the column. The home
   page was six pale bands in a row, which is the whole of the flatness complaint. */
.bleed{margin:0;width:100%}

/* ---------- the no man's land figure on a dark surface ----------
   The drawing is the strongest asset on the site and it had only ever appeared on paper.
   On the dark band the three domains become held panels, the labels lift, and the gap
   keeps the signal colour, because the gap is the finding. Geometry is untouched: these
   rules override presentation attributes, they do not replace the drawing. */
.dark .gapfig .gfdomc{fill:var(--dkp);stroke:var(--dkm)}
.dark .gapfig .gfdom{fill:var(--dkt)}
.dark .gapfig .gfsub{fill:var(--dkm)}
.dark .gapfig .gfgap{fill:#E4572E;fill-opacity:.14;stroke:#E4572E;stroke-opacity:.8}
.dark .gapfig .gfnm{fill:#F2795A}
.dark .gapfig .gfnm2{fill:#F2795A;fill-opacity:.75}

/* the figure earns more room when it is the point of the band */
.dark .gapfig{margin:26px 0 14px;max-width:660px}
.dark .gapfig-m{margin:26px auto 8px}

/* a pull quote on the dark band, set against a hairline rather than a box */
.dark .pull{border-top:1px solid var(--dkl);margin-top:30px;padding-top:24px;
  font-family:var(--serif);font-size:clamp(20px,2.4vw,25px);font-weight:500;
  color:var(--dkt);line-height:1.4;max-width:52ch}
.dark .pull span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--acc);margin-bottom:14px}


/* ===================== faq . condensed explanation =====================
   Session 5, A1 (Allon): "too much explanation, condense it into an FAQ." The point of the
   accordion is that the page gets shorter, not longer: shut, it is five lines. */
.faq{margin-top:22px;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;padding:16px 34px 16px 0;position:relative;
  font-family:"Newsreader",Georgia,serif;font-size:1.12rem;line-height:1.45;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s ease,border-color .25s ease}
.faq details[open] summary::after{transform:translateY(-20%) rotate(-135deg);border-color:var(--ink)}
.faq summary:hover::after{border-color:var(--ink)}
.faq summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
.faq details p{margin:0 0 18px;padding-right:34px;max-width:66ch;color:var(--body,inherit)}
@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none}}
/* printed, an accordion is just a document */
@media print{.faq details{border-bottom:1px solid #999}
  .faq details p{display:block !important}
  .faq summary::after{display:none}}


/* ===================== the duty rail figure =====================
   Second member of the no man's land family (session 5: more diagrams in that family).
   Four boxes on one rail; the fourth carries signal, because it is the finding. */
.dutyfig{max-width:720px}
.dutyfig rect{stroke-dasharray:none}
.dutyfig text{opacity:1}
@media print{
  .gapfig,.dutyfig{opacity:1 !important;transform:none !important}
  .gapfig text,.dutyfig text{opacity:1 !important}
  .gapfig circle{stroke-dashoffset:0 !important}
}

/* =====================================================================================
   THE SHIPPED DIRECTION . body.ship
   -------------------------------------------------------------------------------------
   Promoted 2026-09-03 out of the two variants, at Alon's instruction to roll the visual
   pass out rather than keep asking which one wins. The structural half of it lives in the
   page bodies (the no man's land band on dark ground, its pull quote, the violet duty rail
   across Waarom nu and Voor uw bestuur). What is left is presentation and it lives here.

   Two ideas are lifted out of the unshipped v3 because they were the best things in either
   direction:

   1. The mark as a constellation behind the opening words. At desktop widths the hero was a
      narrow column of type with the right half of the screen empty, and empty reads as
      unfinished rather than as restrained. The firm's own mark is the one thing that can
      fill it without introducing a colour or an image nobody has approved.

   2. The seam. Sections do not quite meet, and a signal tick sits in the gap. The entire
      argument of this firm is a space between things that nobody owns, and until now the
      page illustrated that once, in one drawing, and then went back to being six stacked
      bands. Now the page is built out of the shape.

   The colour rule is untouched: signal is a finding, note is a kicker, teal is the dark
   surface, violet is the law. The constellation is ink, and the tick is a finding.
   ===================================================================================== */

/* ---------- 1. the constellation ---------- */
.ship .hero{position:relative;overflow:hidden}
.ship .hero .wrap{position:relative;z-index:2}
.sky{position:absolute;top:50%;right:3%;width:min(38vw,430px);transform:translateY(-50%);
  z-index:1;pointer-events:none;opacity:.055}
.sky svg{width:100%;height:auto;display:block}
.sky svg circle{fill:var(--ink)}
/* On the phone the words need the whole width, so it retreats to a corner mark. */
@media (max-width:900px){.sky{right:-26%;width:74vw;opacity:.035}}
@media print{.sky{display:none}}

/* The headline carries the page, so it is allowed to be bigger here than the base scale.
   AG1, "the site is not appealing enough to look at", is half a typography problem. */
.ship h1.slogan{font-size:clamp(42px,7vw,88px);letter-spacing:-.03em;line-height:.99}
@media (max-width:720px){.ship h1.slogan{font-size:clamp(36px,10.4vw,48px)}}

/* ---------- 2. the seam ---------- */
.ship main section{position:relative}
.ship main section + section::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(to right,var(--rule) 0,var(--rule) calc(50% - 46px),
    transparent calc(50% - 46px),transparent calc(50% + 46px),
    var(--rule) calc(50% + 46px),var(--rule) 100%);z-index:3}
.ship main section + section::after{content:"";position:absolute;top:-4px;left:50%;width:1px;
  height:9px;background:var(--signal);opacity:.5;z-index:3}
/* The dark band brings its own hairline weight, and the tick has to survive on it. */
.ship main section + section.dark::before{background:linear-gradient(to right,var(--dkl) 0,var(--dkl) calc(50% - 46px),
    transparent calc(50% - 46px),transparent calc(50% + 46px),
    var(--dkl) calc(50% + 46px),var(--dkl) 100%)}
.ship main section.dark + section::before{background:linear-gradient(to right,var(--rule) 0,var(--rule) calc(50% - 46px),
    transparent calc(50% - 46px),transparent calc(50% + 46px),
    var(--rule) calc(50% + 46px),var(--rule) 100%)}
/* A section that already draws its own top rule does not need a second one. */
.ship main section.tint + section.tint::before{opacity:.6}
@media print{.ship main section + section::after{display:none}}

/* =====================================================================================
   V3 . "the survey"
   -------------------------------------------------------------------------------------
   A third direction, scoped entirely under body.v3 so it can be deleted in one block and
   cannot touch the live pages. Not one word of copy differs; everything below is presentation.

   The idea: the site reads as the adversary's survey drawing of your organisation. That is
   the firm's actual product, and it is the one visual language a security site can wear
   without looking like every other security site. Technical drawing furniture, hairlines,
   registration ticks, hatch, sheet numbers in the margin, and mono annotations. The firm
   speaks on paper; the adversary's half is on dark ground.

   Answers the two complaints together. Floris: the site is monochrome and flat. Alon: it is
   not appealing enough to look at and it is too text heavy. Nothing here is a new hue: the
   palette is the one the brand book already licensed, used with far more contrast.
   ===================================================================================== */

/* ---------- 1. the hero moves to the adversary's ground ---------- */
.v3 .hero{background:var(--dk);color:var(--dkt);position:relative;overflow:hidden;
  padding:clamp(56px,8vw,116px) 0 clamp(48px,6vw,88px);margin-bottom:0}
.v3 .hero .wrap{position:relative;z-index:2}
.v3 .hero .lockup{color:var(--dkt)}
.v3 .hero .lockup svg circle{fill:var(--dkt)}
.v3 .hero h1,.v3 .hero .slogan{color:var(--dkt);
  font-size:clamp(42px,7.2vw,100px);line-height:.95;letter-spacing:-.022em;max-width:15ch}
.v3 .hero .kick{color:var(--acc)}
.v3 .hero .lead{color:var(--dkm2);max-width:44ch}
.v3 .hero .body{color:var(--dkm)}
.v3 .hero .body b{color:var(--dkt)}
.v3 .hero .fine{color:var(--dkm)}
.v3 .hero .btn{background:var(--dkt);color:var(--dk);border-color:var(--dkt)}
.v3 .hero .btn:hover{background:var(--acc);border-color:var(--acc);color:var(--dk)}
.v3 .hero .btn.ghost{background:transparent;color:var(--dkt);border:1px solid var(--dkl)}
.v3 .hero .btn.ghost:hover{border-color:var(--acc);color:var(--acc);background:transparent}

/* the mark as a constellation behind the words, not as a logo beside them */
.v3sky{position:absolute;top:50%;right:-6%;width:min(52vw,620px);transform:translateY(-50%);
  z-index:1;pointer-events:none;opacity:.16}
.v3sky svg{width:100%;height:auto;display:block}
.v3sky svg circle{fill:var(--acc)}
@media (max-width:900px){.v3sky{right:-24%;width:78vw;opacity:.10}}

/* registration ticks, the corners of a drawing sheet */
.v3 .hero::before,.v3 .hero::after{content:"";position:absolute;width:26px;height:26px;
  border:1px solid var(--dkl);z-index:2}
.v3 .hero::before{top:22px;left:22px;border-right:0;border-bottom:0}
.v3 .hero::after{bottom:22px;right:22px;border-left:0;border-top:0}

/* ---------- 2. sheet numbers in the margin ---------- */
.v3 .sheet-n{position:absolute;left:calc(50% - var(--w)/2 - 54px);top:.4em;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--faint2);
  border-top:1px solid var(--rule);padding-top:6px;width:34px}
.v3 .dark .sheet-n{color:var(--dkm);border-top-color:var(--dkl)}
.v3 section{position:relative}
@media (max-width:1180px){.v3 .sheet-n{display:none}}

/* ---------- 3. the seam. sections do not quite meet ----------
   The whole argument of this firm is a space between things that nobody owns. The page
   is built out of that shape rather than only illustrating it once. */
.v3 .seam{position:relative}
.v3 .seam::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(to right,var(--rule) 0,var(--rule) calc(50% - 46px),
    transparent calc(50% - 46px),transparent calc(50% + 46px),
    var(--rule) calc(50% + 46px),var(--rule) 100%)}
.v3 .seam::after{content:"";position:absolute;top:-4px;left:50%;width:1px;height:9px;
  background:var(--signal);opacity:.55}
.v3 .dark.seam::before{background:linear-gradient(to right,var(--dkl) 0,var(--dkl) calc(50% - 46px),
    transparent calc(50% - 46px),transparent calc(50% + 46px),
    var(--dkl) calc(50% + 46px),var(--dkl) 100%)}

/* ---------- 4. paper gets grain, so it reads as stock rather than as a screen ---------- */
.v3 .tint{position:relative}
.v3 .tint::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:repeating-linear-gradient(45deg,transparent 0 6px,rgba(94,86,66,.035) 6px 7px)}
.v3 .tint>*{position:relative;z-index:1}

/* ---------- 5. the figure opens as you reach it ----------
   The domains start close and drift apart, and the gap appears between them. It is the
   one piece of motion on this site that carries the argument instead of decorating it. */
.v3 .gapfig .gfdomc,.v3 .gapfig .gfdom,.v3 .gapfig .gfsub{
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1),opacity .8s ease}
.v3 .gapfig:not(.in) .gfdomc:nth-of-type(1),.v3 .gapfig:not(.in) .gfdom:nth-of-type(1){transform:translate(0,46px)}
.v3 .gapfig:not(.in) .gfdomc:nth-of-type(2){transform:translate(58px,-34px)}
.v3 .gapfig:not(.in) .gfdomc:nth-of-type(3){transform:translate(-58px,-34px)}
.v3 .gapfig:not(.in) .gfsub{opacity:0}
.v3 .gapfig .gfgap{transition:opacity .9s ease .5s,transform .9s cubic-bezier(.2,.7,.2,1) .5s;
  transform-origin:310px 150px}
.v3 .gapfig:not(.in) .gfgap{opacity:0;transform:scale(.55)}
.v3 .gapfig{max-width:700px;margin-left:auto;margin-right:auto}
@media (prefers-reduced-motion:reduce){
  .v3 .gapfig .gfdomc,.v3 .gapfig .gfdom,.v3 .gapfig .gfsub,.v3 .gapfig .gfgap{
    transition:none!important;transform:none!important;opacity:1!important}
}

/* ---------- 6. type, one step braver ---------- */
.v3 h2{font-size:clamp(27px,3.5vw,44px);line-height:1.08;letter-spacing:-.015em}
.v3 .kick{font-size:11.5px;letter-spacing:.2em}
.v3 .quote,.v3 .pull{font-size:clamp(21px,2.7vw,30px);line-height:1.32}

/* print: the survey furniture is screen only */
@media print{.v3sky,.v3 .sheet-n,.v3 .seam::before,.v3 .seam::after,.v3 .tint::after{display:none!important}
  .v3 .hero{background:#fff!important;color:#000!important}
  .v3 .hero *{color:#000!important}}

/* the bar rides on the hero's ground until the hero has gone under it */
.v3 .nav{transition:background .35s ease,border-color .35s ease}
.v3 .nav.overhero{background:rgba(7,9,12,.86);border-bottom-color:transparent}
.v3 .nav.overhero .brand,.v3 .nav.overhero .links a{color:var(--dkt)}
.v3 .nav.overhero .brand svg circle{fill:var(--dkt)}
.v3 .nav.overhero .links a:hover{color:var(--acc)}
.v3 .nav.overhero .links a.btn{background:var(--dkt);color:var(--dk);border-color:var(--dkt)}
.v3 .nav.overhero .langsel{border-color:var(--dkl)}
.v3 .nav.overhero .langsel a{color:var(--dkm2)}
.v3 .nav.overhero .langsel .on{background:var(--dkt);color:var(--dk)}
.v3 .nav.overhero .burger span{background:var(--dkt)}

/* the wordmark sits under a hundred point headline, so it steps back rather than competing */
.v3 .hero .lockup{opacity:.62;font-size:.92em}
.v3 .hero .lockup span{color:var(--dkm2)}

/* the constellation carries the ground, so it is allowed to be seen */
.v3sky{opacity:.24}
@media (max-width:900px){.v3sky{opacity:.13}}

/* ================================================================================
   P4 . CHARTREUSE FORWARD . chosen by Floris and Alon, 18 September 2026
   ================================================================================
   Every rule below is scoped to body.p4 and nothing outside this block was touched,
   which is the whole of the revert: set THEME = "" in build_site.py, rebuild, deploy.
   The previous stylesheet is also kept whole at src/site.css.bak-pre-p4.

   The brief it answers. Floris picked the D4 duotone hero and sent a tetradic palette,
   chartreuse, teal, magenta, vermilion. Alon's note was that the hero is very nice and
   then the page goes monochromatic and boring as you scroll, and that there is a balance
   to hold between reading as corporate and reading as punchy. P4 was the unexpected one:
   below the hero the page stays near black and chartreuse does the work a blue or a teal
   does everywhere else in this category. Sixteen competitors were mapped in July and all
   of them are blue, grey or black.

   Every colour still means exactly one thing, which is the rule from the brand book that
   keeps a site from looking like a brochure:

     chartreuse  #B77318   the signal, and the kicker above a section
     teal        #0FBFB2   the method, and a person's role
     magenta     #4D768C   the law, the duty, the liability
     vermilion   #EBAB2F   a finding, and the gap in the no man's land

   Paper is not gone. It comes back whole for print, at the bottom of this block, because
   the board page exists to be printed and handed across a table.
   ================================================================================ */

body.p4{
  --paper:#1A1816; --card:#221F1C; --tint:#1E1C19; --rule:#373431; --rule2:#4A4641;
  --ink:#F5F2EC; --ink2:#D3CDC3; --muted:#ABA398; --faint:#878075; --faint2:#6C665E;
  --signal:#EBAB2F; --note:#B77318;
  --dk:#121110; --dkp:#1A1816; --dkl:#373431; --dkt:#F5F2EC; --dkm:#ABA398; --dkm2:#D3CDC3;
  --acc:#0FBFB2;
  --duty:#9FBBCB; --duty-t:#1C262D; --duty-d:#9FBBCB;
  --mag:#4D768C;
}

/* the hero, and it is the one thing that is not the page ground: D4 as approved, its
   lower end moved onto the magenta of the palette */
body.p4 .hero{background:linear-gradient(168deg,#14171C 0%,#22343F 50%,#4D768C 100%);
  color:#EAF1F5;padding-top:62px;padding-bottom:62px}
body.p4 .hero .lockup,body.p4 .hero .brand{color:#EAF1F5}
body.p4 .hero .lockup svg,body.p4 .hero .brand svg{fill:#EAF1F5}
body.p4 .hero h1,body.p4 .hero h2,body.p4 .hero .slogan{color:#FFFFFF}
body.p4 .hero .kick{color:#9FBBCB;border-top:2px solid rgba(234,241,245,.32);padding-top:13px;display:inline-block}
body.p4 .hero .lead{color:#F2D7E1}
body.p4 .hero .body{color:#C9D8E1}
body.p4 .hero .body b,body.p4 .hero .lead b{color:#FFFFFF}
body.p4 .hero .fine{color:#A3B8C4}
body.p4 .hero .sky{opacity:.08}
body.p4 .hero .sky svg{fill:#FFFFFF}
body.p4 .hero a{color:#EAF1F5;border-bottom-color:rgba(234,241,245,.3)}
body.p4 .hero .btns .btn{background:#F2F6F8;color:#2C4655;border-color:#F2F6F8;font-weight:600}
body.p4 .hero .btns .btn:hover{background:#B77318;color:#1D1B18;border-color:#B77318}
body.p4 .hero .btns .btn.ghost{background:transparent;color:#EAF1F5;border-color:rgba(234,241,245,.40)}
body.p4 .hero .btns .btn.ghost:hover{background:rgba(234,241,245,.10);color:#FFFFFF}

/* the bar. Hardcoded paper in the base sheet, so it has to be said again here. */
body.p4 .nav{background:rgba(10,13,10,.92);border-bottom-color:#373431}
body.p4 .nav .links a.btn{border-color:#B77318;color:#B77318;background:transparent}
body.p4 .nav .links a.btn:hover{background:#B77318;color:#1D1B18}
body.p4 .nav .links a.on{border-bottom-color:#B77318}
body.p4 .langsel{background:rgba(255,255,255,.05);border-color:#4A4641}
body.p4 .langsel .on{background:#B77318;color:#1D1B18}
body.p4 .burger{border-color:#4A4641}
body.p4 .burger span{background:#F5F2EC}
body.p4 .burger.x{border-color:#B77318}

/* buttons. The base sheet fills them with var(--ink) and writes on them in paper, which
   on a dark page would be near white on near white. */
body.p4 .btn{background:#B77318;color:#1D1B18;font-weight:700}
body.p4 .btn:hover{background:#F5F2EC;color:#1A1816}
body.p4 .btn.ghost{background:transparent;color:#F5F2EC;border-color:#4A4641}
body.p4 .btn.ghost:hover{border-color:#B77318;color:#B77318}
body.p4 .cta{background:#1A1816;border:1px solid #373431;color:#F5F2EC}
body.p4 .cta .btn{background:#B77318;color:#1D1B18}

/* the sections that were already dark go deeper than the ground, so the rhythm survives */
body.p4 .dark{background-color:#121110}
body.p4 section.tint{background:#1E1C19;border-top-color:#373431;border-bottom-color:#373431}

/* colour keeps its meaning */
body.p4 .kick{color:#B77318}
body.p4 .kick.q{color:#878075}
body.p4 .role{color:#0FBFB2}
body.p4 .num,body.p4 .card .num{color:#EBAB2F}
body.p4 .duty{border-left-color:#9FBBCB}
body.p4 .duty .kick{color:#9FBBCB}
body.p4 .duty-note{color:#9FBBCB;background:#1C262D}
body.p4 .redlines{border-left-color:#9FBBCB}
body.p4 .more{color:#B77318;border-bottom:1px solid rgba(165,206,88,.4)}
body.p4 .more:hover{border-bottom-color:#B77318}
body.p4 a{color:#F5F2EC;border-bottom-color:#373431}
body.p4 a:hover{color:#F5F2EC;border-bottom-color:#B77318}
body.p4 .quote::before{background:#B77318}

/* the portraits carried a paper coloured plate */
body.p4 .portrait,body.p4 .tint .people .portrait{background:#1A1816;border-color:#373431}

/* the drawings. The base sheet only ever dressed these for a .dark band; on this page
   every band is dark, so the same treatment applies everywhere. The gap keeps vermilion,
   because the gap is the finding. */
body.p4 .gapfig .gfdomc{fill:#1A1816;stroke:#67735E}
body.p4 .gapfig .gfdom{fill:#F5F2EC}
body.p4 .gapfig .gfsub{fill:#ABA398}
body.p4 .gapfig .gfgap{fill:#EBAB2F;fill-opacity:.16;stroke:#EBAB2F;stroke-opacity:.85}
body.p4 .gapfig .gfnm{fill:#EBAB2F}
body.p4 .gapfig .gfnm2{fill:#EBAB2F;fill-opacity:.8}
/* the four duties. Fills are painted into the SVG markup, so each one is repainted by the
   value it carries rather than all at once, which is what keeps 04 the odd one out. */
body.p4 .dutyfig rect[fill="#F4F1E9"]{fill:#1A1816;stroke:#6E7A64}
body.p4 .dutyfig rect[fill="#A1310F"]{fill:#EBAB2F;stroke:#EBAB2F}
body.p4 .dutyfig text[fill="#14171C"]{fill:#F5F2EC}
body.p4 .dutyfig text[fill="#8A8272"]{fill:#ABA398}
body.p4 .dutyfig text[fill="#A1310F"]{fill:#EBAB2F}

/* the send to your board bar. Its ground is a hardcoded paper, and the copy link button
   writes in var(--ink), so on this page it was a white box with white words in it. */
body.p4 .fwd{background:#1A1816;border-color:#373431}
body.p4 .fwd .fwt{color:#ABA398}
body.p4 .fwd .cp{color:#F5F2EC;border-color:#4A4641}
body.p4 .fwd .cp:hover{border-color:#B77318;color:#B77318}

/* forms, so a lead form is not white on white */
body.p4 .gate{background:#1A1816;border-color:#373431}
body.p4 .gate input,body.p4 .gate textarea{background:#1A1816;color:#F5F2EC;border-color:#4A4641}
body.p4 .gate input:focus,body.p4 .gate textarea:focus{border-color:#B77318}
body.p4 .gate label{color:#878075}
body.p4 .gate .err{color:#EBAB2F}
body.p4 .gate .done{color:#B77318}

/* the accordion */
body.p4 .faq{border-top-color:#373431}
body.p4 .faq details{border-bottom-color:#373431}
body.p4 .faq summary{color:#F5F2EC}
body.p4 .faq summary::after{border-color:#878075}
body.p4 .faq details[open] summary::after{border-color:#B77318}
body.p4 .faq summary:hover::after{border-color:#B77318}

body.p4 footer{background:#070906;border-top-color:#373431}
body.p4 .prv-tag{color:#B77318;border-color:#B77318}

/* Paper comes back whole for print. The board page is made to be printed and handed
   across a table, and a near black page is not that. */
@media print{
  body.p4{--paper:#FFFFFF;--card:#FFFFFF;--tint:#FFFFFF;--rule:#999;--rule2:#999;
    --ink:#000;--ink2:#000;--muted:#000;--faint:#444;--faint2:#555;--note:#000;--duty:#000;
    --dk:#FFFFFF;--dkp:#FFFFFF;--dkl:#999;--dkt:#000;--dkm:#000;--acc:#000}
  body.p4 .hero{background:#FFFFFF;color:#000}
  body.p4 .hero h1,body.p4 .hero .slogan,body.p4 .hero .lead,body.p4 .hero .body,
  body.p4 .hero .fine,body.p4 .hero .kick,body.p4 .hero .lockup{color:#000}
  body.p4 .hero .lockup svg{fill:#000}
  body.p4 .dark,body.p4 section.tint,body.p4 .cta,body.p4 footer,body.p4 .portrait,
  body.p4 .gate{background:#FFFFFF;color:#000;border-color:#999}
  body.p4 .btn{background:#FFFFFF;color:#000;border:1px solid #000}
  body.p4 .gapfig .gfdomc{fill:#FFFFFF;stroke:#000}
  body.p4 .gapfig .gfdom,body.p4 .gapfig .gfsub{fill:#000}
  body.p4 .gapfig .gfgap{fill:#000;fill-opacity:.08;stroke:#000}
  body.p4 .gapfig .gfnm,body.p4 .gapfig .gfnm2{fill:#000}
  body.p4 .kick,body.p4 .role,body.p4 .num,body.p4 .more,body.p4 a{color:#000}
}

/* the frontier band. Its colours are painted into the SVG markup itself, paper fill and ink
   outlines, so on this ground the two territories arrived as two cream slabs. The geometry is
   untouched: these rules repaint, they do not redraw. The route through the gap keeps
   vermilion, because the route is the finding. */
body.p4 .frontier pattern rect{fill:#1A1816}
body.p4 .frontier pattern path{stroke:#373431}
body.p4 .frontier polygon[stroke]{stroke:#6E7A64}
body.p4 .frontier .ftroute{stroke:#EBAB2F}
body.p4 .frontier .ftmark{fill:#1A1816;stroke:#EBAB2F}
@media print{
  body.p4 .frontier pattern rect{fill:#FFFFFF}
  body.p4 .frontier pattern path{stroke:#CCC}
  body.p4 .frontier polygon[stroke]{stroke:#000}
  body.p4 .frontier .ftroute{stroke:#000}
  body.p4 .frontier .ftmark{fill:#FFFFFF;stroke:#000}
}

/* the board pointer. Floris rewrote this sentence on 15 September and appended, in the field
   itself, that it needs to be much larger. It was set in the small print style, under a link,
   which is exactly the complaint. It is now body size with the law's own magenta on the rule
   above it, and the shouted note is out of the copy. */
.boardline{font-size:17.5px;color:var(--muted);max-width:64ch}
body.p4 .boardline{border-left:3px solid #9FBBCB;padding-left:16px;color:#D3CDC3}

/* the form's own send button. The base sheet fills it with var(--ink) and writes on it in
   paper, so on this ground it came out as a white block with white words in it. */
body.p4 .gate button{background:#B77318;color:#1D1B18;font-weight:700}
body.p4 .gate button:hover{background:#F5F2EC;color:#1A1816}
body.p4 .gate button:disabled{opacity:.45}
@media print{ body.p4 .gate button{background:#FFFFFF;color:#000;border:1px solid #000} }

@media print{
  body.p4 .dutyfig rect[fill="#F4F1E9"]{fill:#FFFFFF;stroke:#000}
  body.p4 .dutyfig rect[fill="#A1310F"]{fill:#FFFFFF;stroke:#000}
  body.p4 .dutyfig text[fill="#14171C"],body.p4 .dutyfig text[fill="#8A8272"],
  body.p4 .dutyfig text[fill="#A1310F"]{fill:#000}
}

/* The contact button stays in the bar on narrow screens. Allon, 24 September: below the
   burger breakpoint "Praat met ons" lived only inside the closed menu, so it looked gone. */
.navcta{display:none}
@media(max-width:1024px){
  .navcta{display:inline-block;font-size:13px;font-weight:600;line-height:1.2;padding:6px 12px;
    border:1.5px solid var(--ink);border-radius:999px;color:var(--ink);white-space:nowrap}
  body.p4 .navcta{border-color:#B77318;color:#B77318}
  .nav .links a.btn{display:none}
}
@media(max-width:360px){.navcta{display:none}.nav .links a.btn{display:flex}}
@media print{.navcta{display:none!important}}

/* The logo from Floris's kit (2026-09-25): mark and wordmark as one drawing, sized by height.
   It takes the colour of the text around it through the fill the .brand rules already set. */
.brand.logo{gap:0}
.brand.logo svg,.fgrid .brand.logo svg{width:auto;height:40px}
.fgrid .fbrand .brand.logo svg{height:46px}
@media (max-width:820px){.brand.logo svg{height:34px}}

/* A new paragraph typed inside one field (2026-09-25). The editor stores a blank line as this
   marker; it draws the same gap a paragraph break would. */
span.pb{display:block;height:.85em}

/* ===================== Floris's kit: Poppins for headings (version C) =====================
   Chosen by Alon on 2026-09-25 from three home page mockups (design/2026-09-25_kit-mockup/):
   Poppins 500, the typeface of the kit's logo, for every heading and the FAQ questions; Instrument
   Sans stays for running text and IBM Plex Mono for the small labels. The P4 colours are untouched.
   To take it off: delete this block and put Newsreader back in FONTS in build_site.py.
   The stylesheet as it was is src/site.css.bak-pre-poppins. */
:root{--serif:'Poppins',system-ui,'Segoe UI',Helvetica,Arial,sans-serif}
h1,h2,h3,.lockup span{font-weight:500 !important;letter-spacing:-.025em !important}
h1{line-height:1.08 !important}
h2{line-height:1.15 !important}
.faq summary{font-family:var(--serif);font-weight:500;letter-spacing:-.01em}


/* Staarten van g, j en p vielen buiten de woordkaders van de kop-animatie (h1 .w heeft overflow:hidden).
   Extra ruimte onder elk woord, met een negatieve marge zodat de regelafstand gelijk blijft. 30-9-2026 */
h1 .w { padding-bottom:.16em; margin-bottom:-.16em }

/* GreyTeam: opsommingen in secties volgen de alinea-opmaak (bolletjes binnen de kolom). 30-9-2026 */
section .wrap > ul { font-size:17.5px;line-height:1.7;color:var(--muted);margin:14px 0 0;padding-left:1.25em;max-width:64ch }
section .wrap > ul li { margin-top:6px }
section .wrap > ul li::marker { color:var(--signal) }
section .wrap > ul em { color:var(--ink);font-style:normal;font-weight:600 }
.dark .wrap > ul { color:var(--dkm2) }

/* GreyTeam: Venn-figuren (The teams). Kleuren van de teams staan in de figuur, de rest volgt het thema. 30-9-2026 */
.gtv { width:100%;max-width:660px;height:auto;display:block;margin:26px auto 6px }
.gtv text { font-family:var(--mono);font-size:11px;letter-spacing:.6px;fill:var(--muted) }
.gtv .nm { font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:0;fill:var(--ink) }
.gtv .ov { font-size:12px;font-weight:600;letter-spacing:1.2px }
.gtv .wh { font-size:12px;font-weight:600;letter-spacing:1.2px;fill:var(--ink) }
.gtv .c { fill-opacity:.13;stroke-width:1.6 }
.gtv .blk { fill:#000;fill-opacity:.55;stroke:#8C8680 }
.gtv .gap { fill:var(--signal);fill-opacity:.2;stroke:var(--signal);stroke-width:1.4;stroke-dasharray:5 4 }
.gtv .gapt { fill:var(--signal);font-weight:600;font-size:12px;letter-spacing:2.4px }
.gtv .gaps { fill:var(--signal);opacity:.85;font-size:10px }
.gtv-cap { text-align:center;margin-top:2px }
.gtv .pc { fill-opacity:.62;stroke:var(--paper);stroke-width:4 }
.gtv .pl { font-size:11px;font-weight:600;letter-spacing:1.4px;fill:#15130F }
.gtv .pw { fill-opacity:.9 }
.gtv .hole { fill:var(--paper);stroke:var(--signal);stroke-width:1.4;stroke-dasharray:5 4 }
.gtv .holetab circle { fill:var(--paper) }
.gtv .rim { fill:none;stroke:var(--ink2);stroke-width:1.6 }
.gtv .miss { fill:#9A9A9A;fill-opacity:.35;stroke:var(--signal);stroke-width:1.6 }
/* de Venn van de specialisten groot, zodat de teksten ruim in de cirkels vallen */
.gtv-big { max-width:820px }
.gtv-big text { font-size:15px }
.gtv-big .nm { font-size:22px }
.gtv-big .gapt { font-size:16px;letter-spacing:3px }
.gtv-big .gaps { font-size:13px }

/* Kleinere H2 voor een gewone sectie, zelfde maat als de kop in een donkere sectie. Zet klasse kop-m in het blok (Geavanceerd). 30-9-2026 */
.kop-m h2{font-size:clamp(26px,3.4vw,32px);max-width:36ch;line-height:1.14}
/* kleurenwiel met grijze overlay (The teams). 30-9-2026 */
.gtv-wheel { max-width:720px }
.gtv .pll { fill:#F5F2EC }
.gtv .blkarc { fill:#0B0A09;stroke:#8C8680;stroke-width:1.2 }
.gtv .greyov { fill:#9A9A9A;fill-opacity:.42;stroke:var(--signal);stroke-width:1.6;stroke-dasharray:6 4 }