/* ── Data Department — locked design system (variant A "Helder", refined) ──
   Refinements vs variant A: wider container (1360px), announcement banner,
   two-tier Tableau-style header with dropdowns, article + dataviz components. */

:root {
  --bg: #ffffff;
  --bg-soft: #f4f7fb;
  --ink: #13233a;
  --ink-60: #51617a;
  --ink-40: #8494ab;
  --line: #dde5ef;
  --blue: #1565e8;
  --blue-deep: #0d4cb8;
  --blue-tint: #e8f0fd;
  --navy: #0e1b2f;
  --green: #0e7d52;
  --green-tint: #e6f4ee;
  --red: #c5363b;
  --red-deep: #9c272c;
  --red-tint: #fbeaea;
  --amber: #b97324;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(19,35,58,.05), 0 8px 24px rgba(19,35,58,.07);
  --shadow-lg: 0 2px 4px rgba(19,35,58,.06), 0 18px 48px rgba(19,35,58,.12);
  --wrap: 1360px;
}

body { background: var(--bg); color: var(--ink); font-size: 1.0625rem; line-height: 1.6; }
::selection { background: var(--blue); color: #fff; }
h1,h2,h3,h4 { font-weight: 600; letter-spacing: -.02em; line-height: 1.12; }
.mono { font-family: var(--jbmono); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }

/* ── brand mark (old hexagonal d-mark, recolored; symbol #ddmark inlined per page) ── */
.brandmark { display: block; fill: currentColor; color: var(--blue); flex: none; }

/* ── hexagon design language ── */
.hex { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.hex-icon { width: 2.8rem; height: 3.05rem; background: var(--blue-tint); color: var(--blue); display: grid; place-items: center; font-family: var(--jbmono); font-size: 1rem; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.hex-bullet { width: .8rem; height: .9rem; background: var(--blue); display: inline-block; flex: none; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.has-decor { position: relative; overflow: hidden; }
.hex-decor { position: absolute; color: var(--blue); opacity: .07; pointer-events: none; }
.has-decor > .wrap { position: relative; }

/* ── the three layers of "the market" (partials/layer_strip.html) ──
   Register · actief op het web · gekoppeld aan een inschrijving. The third tile
   is ours, so it carries the brand colour; the first two are context. */
.layer-strip { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }
.layer { flex: 1 1 13rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; padding: .85rem 1rem; display: flex; flex-direction: column; gap: .15rem; }
.layer b { font-size: 1.55rem; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.layer span { font-size: .86rem; color: var(--ink-60); }
.layer i { font-style: normal; font-family: var(--jbmono); font-size: .66rem; color: var(--ink-40);
  line-height: 1.4; }
.layer--ours { border-color: var(--blue); background: var(--blue-tint); }
.layer--ours b { color: var(--blue-deep); }
.layer--ours span { color: var(--ink); }
.layer--ours i { color: var(--blue-deep); }
.layer-foot { margin-top: .6rem; font-size: .8rem; color: var(--ink-40); line-height: 1.55;
  max-width: 52rem; }
.layer-foot b { font-weight: 600; color: var(--ink-60); }

/* ── phone & tablet: burger + full-screen menu ───────────────────────────────
   Below 1080px the link bar is gone, and until now nothing replaced it: the
   whole nav was simply unreachable on a phone. The burger is the replacement,
   and `.navmenu` is rendered from the same `nav_sections` as the desktop bar
   (templates/base.html), so a link cannot exist on one and not the other.
   `[hidden]` is honoured explicitly: an author `display` on `.navmenu` would
   otherwise beat the UA sheet and the menu would sit open on every page. */
.nav-burger { display: none; flex: none; margin-left: auto; width: 2.75rem; height: 2.75rem;
  align-items: center; justify-content: center; background: none; border: 1px solid var(--line);
  border-radius: 8px; cursor: pointer; color: var(--ink); }
.nav-burger:hover { background: var(--bg-soft); }
.nav-burger-bars { display: grid; gap: .28rem; width: 1.15rem; }
.nav-burger-bars i { display: block; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease; }
.nav-burger[aria-expanded="true"] .nav-burger-bars i:nth-child(1) { transform: translateY(.5rem) rotate(45deg); }
.nav-burger[aria-expanded="true"] .nav-burger-bars i:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] .nav-burger-bars i:nth-child(3) { transform: translateY(-.5rem) rotate(-45deg); }

.navmenu[hidden] { display: none; }
.navmenu { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
  background: var(--bg); overflow-y: auto; overscroll-behavior: contain;
  animation: navmenu-in .18s ease both; }
@keyframes navmenu-in { from { opacity: 0; transform: translateY(-.5rem); } to { opacity: 1; transform: none; } }
.navmenu-head { display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(1.25rem, 4vw, 3rem); height: 3.9rem; border-bottom: 1px solid var(--line); flex: none; }
.navmenu-close { width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  font-size: 1.6rem; line-height: 1; background: none; border: 1px solid var(--line);
  border-radius: 8px; color: var(--ink); cursor: pointer; }
.navmenu-close:hover { background: var(--bg-soft); }
.navmenu-body { flex: 1 1 auto; padding: 1.2rem clamp(1.25rem, 4vw, 3rem) .4rem; }
.navmenu-sec + .navmenu-sec { margin-top: 1.4rem; border-top: 1px solid var(--line); padding-top: 1.2rem; }
.navmenu-head-link { display: block; font-size: 1.15rem; font-weight: 600; color: var(--ink);
  text-decoration: none; }
.navmenu-head-link:hover { color: var(--blue); }
.navmenu-items { display: grid; gap: .15rem; margin-top: .6rem; }
.navmenu-items a { display: block; text-decoration: none; padding: .55rem .7rem; margin-left: -.7rem;
  border-radius: 8px; }
.navmenu-items a:hover { background: var(--bg-soft); }
.navmenu-items b { display: block; font-size: .95rem; font-weight: 500; color: var(--ink); }
.navmenu-items span { display: block; font-size: .8rem; color: var(--ink-60); line-height: 1.45; }
.navmenu-foot { flex: none; display: grid; gap: .6rem; padding: 1.2rem clamp(1.25rem, 4vw, 3rem) 1.6rem;
  border-top: 1px solid var(--line); background: var(--bg-soft); }
.navmenu-foot .btn { justify-content: center; }
.navmenu-util { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: .4rem; }
.navmenu-util a { font-size: .85rem; color: var(--ink-60); text-decoration: none; }
.navmenu-util a:hover { color: var(--blue); }
body.nav-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .navmenu { animation: none; }
  .nav-burger-bars i { transition: none; }
}

/* ── announcement banner ── */
.banner { background: var(--navy); color: #fff; font-size: .88rem; }
.banner-inner { display: flex; align-items: center; justify-content: center; gap: .8rem; padding: .55rem clamp(1.25rem, 4vw, 3rem); }
.banner .tag { font-family: var(--jbmono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; background: var(--blue); padding: .2rem .55rem; border-radius: 99px; }
.banner a { color: #fff; font-weight: 500; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 3px; }
.banner a:hover { text-decoration-color: #fff; }

/* ── utility bar ── */
.utility { background: var(--bg-soft); border-bottom: 1px solid var(--line); font-size: .82rem; }
.utility-inner { display: flex; justify-content: flex-end; gap: 1.6rem; padding: .4rem clamp(1.25rem, 4vw, 3rem); max-width: var(--wrap); margin: 0 auto; }
.utility a { text-decoration: none; color: var(--ink-60); transition: color .15s; }
.utility a:hover { color: var(--blue); }
.utility .mono { font-size: .76rem; }

/* ── main nav ── */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.nav-inner { display: flex; align-items: center; gap: 2rem; height: 4.5rem; max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }
.logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; font-weight: 600; font-size: 1.15rem; }
.nav-links { display: flex; gap: .4rem; margin-right: auto; margin-left: 1rem; }
.nav-item { position: relative; }
.nav-item > a { display: flex; align-items: center; gap: .35rem; text-decoration: none; font-size: .96rem; font-weight: 500; color: var(--ink-60); padding: .55rem .85rem; border-radius: 8px; transition: color .15s, background .15s; }
.nav-item > a:hover { color: var(--ink); background: var(--bg-soft); }
.nav-item .caret { font-size: .6rem; color: var(--ink-40); transition: transform .2s; }
.nav-item:hover .caret { transform: rotate(180deg); }
.dropdown { position: absolute; top: calc(100% + .4rem); left: 0; min-width: 17rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: .5rem; opacity: 0; visibility: hidden; transform: translateY(6px); transition: all .18s ease; }
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown { opacity: 1; visibility: visible; transform: none; }
.dropdown a { display: block; text-decoration: none; padding: .6rem .8rem; border-radius: 8px; transition: background .12s; }
.dropdown a:hover { background: var(--blue-tint); }
.dropdown a b { display: block; font-size: .92rem; font-weight: 600; color: var(--ink); }
.dropdown a span { font-size: .8rem; color: var(--ink-60); }
.nav-cta { display: flex; gap: .7rem; align-items: center; }

/* ── buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--euclid); font-weight: 600; font-size: .95rem; text-decoration: none; padding: .75rem 1.4rem; border-radius: 8px; border: 1px solid transparent; transition: background .15s, border-color .15s, transform .15s, box-shadow .15s; cursor: pointer; }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--blue); color: #fff; box-shadow: var(--shadow); }
.btn-primary:hover { background: var(--blue-deep); transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.btn-secondary { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--ink-40); }
.btn-ghost { color: var(--ink-60); }
.btn-ghost:hover { color: var(--ink); background: var(--bg-soft); }
.btn-sm { padding: .55rem 1.05rem; font-size: .88rem; }

/* ── shared section bits ── */
.section { padding: clamp(3.5rem, 8vh, 6.5rem) 0; }
.sec-head { max-width: 46rem; margin-bottom: 2.8rem; }
.sec-label { font-family: var(--jbmono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin-bottom: .7rem; }
.sec-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
.sec-head p { color: var(--ink-60); margin-top: .9rem; font-size: 1.1rem; }

/* chips, badges, provenance */
.chip { font-family: var(--jbmono); font-size: .65rem; color: var(--green); background: var(--green-tint); padding: .2rem .55rem; border-radius: 99px; white-space: nowrap; }
.badge { font-family: var(--jbmono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; padding: .3rem .6rem; border-radius: 99px; }
.badge-live { background: var(--green-tint); color: var(--green); }
.badge-soon { background: #f7ecd9; color: var(--amber); }

/* record card */
.record { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; }
.record-head { display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.record-head h3 { font-size: 1.05rem; }
.record-head .domain { font-family: var(--jbmono); font-size: .75rem; color: var(--blue); }
.record-rows { padding: .4rem 1.4rem .9rem; }
.record-row { display: grid; grid-template-columns: 7rem 1fr auto; gap: 1rem; align-items: baseline; padding: .65rem 0; border-bottom: 1px solid var(--line); }
.record-row:last-child { border-bottom: 0; }
.record-row dt { font-family: var(--jbmono); font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-40); }
.record-row dd { font-size: .92rem; font-weight: 500; }
.record-row dd .masked { color: var(--ink-40); letter-spacing: .08em; }
/* The identity line at the top of a record card: favicon + name. Used by the
   home hero demo (home.css) and /data (data.css), which both render the same
   card partial; the rest of the component is right above. */
.record-id { display: flex; align-items: center; gap: .75rem; }
.record-favicon { width: 2.1rem; height: 2.1rem; border-radius: 6px; border: 1px solid var(--line); background: #fff; box-shadow: 0 1px 2px rgba(19,35,58,.08); }
.record-foot { display: flex; justify-content: space-between; font-family: var(--jbmono); font-size: .68rem; color: var(--ink-40); padding: .8rem 1.4rem; background: var(--bg-soft); border-top: 1px solid var(--line); }

/* ── dataviz components (blog + inzichten) ── */
.chart-block { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.7rem; margin: 2.2rem 0; }
.chart-block h3, .chart-block h4 { font-size: 1.05rem; margin-bottom: .25rem; }
.chart-sub { font-family: var(--jbmono); font-size: .68rem; color: var(--ink-40); margin-bottom: 1.4rem; }
.bar-row { display: grid; grid-template-columns: minmax(6rem, 9rem) 1fr 3.4rem; gap: .9rem; align-items: center; padding: .45rem 0; font-size: .88rem; }
.bar-track { background: var(--bg-soft); border-radius: 99px; height: .9rem; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 99px; background: var(--blue); transform-origin: left; animation: grow 1s cubic-bezier(.2,.6,.2,1) both; }
.bar-row:nth-child(odd) .bar-fill { background: var(--blue-deep); }
.bar-fill.alt { background: var(--green) !important; }
@keyframes grow { from { transform: scaleX(0); } }
.bar-val { font-family: var(--jbmono); font-size: .76rem; color: var(--ink-60); text-align: right; }
.chart-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; font-family: var(--jbmono); font-size: .66rem; color: var(--ink-40); border-top: 1px dashed var(--line); margin-top: 1.2rem; padding-top: .9rem; }
.chart-foot .src::before { content: "⌖ "; color: var(--green); }

/* big stat callout (pull-stat in articles) */
.pull-stat { display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: center; background: var(--blue-tint); border-left: 4px solid var(--blue); border-radius: 0 var(--radius) var(--radius) 0; padding: 1.5rem 1.8rem; margin: 2.2rem 0; }
.pull-stat b { font-family: var(--jbmono); font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 400; color: var(--blue-deep); }
.pull-stat span { font-size: 1rem; color: var(--ink-60); }

/* data table */
.data-table { width: 100%; border-collapse: collapse; margin: 2.2rem 0; font-size: .92rem; }
.data-table caption { text-align: left; font-weight: 600; padding-bottom: .8rem; }
.data-table th { font-family: var(--jbmono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-40); font-weight: 400; text-align: left; padding: .55rem .8rem; border-bottom: 2px solid var(--line); }
.data-table td { padding: .65rem .8rem; border-bottom: 1px solid var(--line); }
.data-table tr:hover td { background: var(--bg-soft); }
.data-table td.num { font-family: var(--jbmono); font-size: .8rem; text-align: right; }

/* ── article (blog data-story) ── */
.article-head { max-width: 50rem; margin: 0 auto; padding: clamp(2.5rem, 6vh, 4.5rem) 0 1.5rem; text-align: left; }
.article-meta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; font-family: var(--jbmono); font-size: .72rem; color: var(--ink-40); margin-bottom: 1.2rem; }
.article-meta .cat { color: var(--blue); background: var(--blue-tint); padding: .25rem .65rem; border-radius: 99px; text-transform: uppercase; letter-spacing: .08em; font-size: .64rem; }
.article-head h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); font-weight: 700; }
.article-head .standfirst { font-size: 1.22rem; color: var(--ink-60); margin-top: 1.1rem; font-weight: 400; line-height: 1.55; }
.article-body { max-width: 44rem; margin: 0 auto; }
.article-body > p { margin: 1.3rem 0; }
.article-body h2 { font-size: 1.6rem; margin: 2.6rem 0 .9rem; }
.article-body a { color: var(--blue); text-decoration-color: var(--blue-tint); text-underline-offset: 3px; }
.article-body a:hover { text-decoration-color: var(--blue); }
.article-body .chart-block, .article-body .pull-stat { max-width: 54rem; margin-left: 50%; transform: translateX(-50%); width: min(54rem, calc(100vw - 2.5rem)); }
.method-note { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.5rem; font-size: .9rem; color: var(--ink-60); margin: 2.2rem 0; }
.method-note b { color: var(--ink); display: block; margin-bottom: .3rem; font-family: var(--jbmono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }

/* newsletter box */
.newsletter { background: var(--navy); color: #fff; border-radius: var(--radius); padding: 2.2rem; margin: 3rem 0; display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.6rem; align-items: center; }
.newsletter h3 { font-size: 1.35rem; }
.newsletter p { color: rgba(255,255,255,.75); font-size: .92rem; margin-top: .4rem; }
.newsletter form { display: flex; gap: .6rem; }
.newsletter input { flex: 1; font-family: var(--euclid); font-size: .92rem; padding: .75rem 1rem; border-radius: 8px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; }
.newsletter input::placeholder { color: rgba(255,255,255,.45); }

/* ── footer ── */
.footer { border-top: 1px solid var(--line); margin-top: clamp(3rem, 7vh, 5rem); padding: 3.5rem 0 2rem; background: var(--bg-soft); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; }
.footer h4 { font-family: var(--jbmono); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-40); margin-bottom: .9rem; font-weight: 400; }
.footer a, .footer .foot-line { display: block; font-size: .9rem; color: var(--ink-60); text-decoration: none; padding: .18rem 0; }
.footer a:hover { color: var(--blue); }
.footer .brand-line { font-size: .9rem; color: var(--ink-60); max-width: 26rem; margin-top: .8rem; }
.footer-legal { font-family: var(--jbmono); font-size: .68rem; color: var(--ink-40); margin-top: 2.5rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }

/* ── responsive ── */
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .utility { display: none; }
  .nav-burger { display: flex; }
  .newsletter { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .banner-inner { flex-wrap: wrap; text-align: center; }
  /* phone header: logo left, burger right, nothing else (Erik 2026-09-22). The
     announcement strip and the CTA button both move out of the way — the strip
     because it is the least useful line on a small screen, the button because
     it lives in the menu, one tap away. A row of logo + label + button measured
     ~462px on a 400px screen, which made the layout viewport wider than the
     device and left every fixed overlay hanging off the right edge. */
  .banner { display: none; }
  .nav-cta { display: none; }
  .nav-inner { gap: .75rem; height: 3.9rem; }
  .logo { font-size: 1rem; white-space: nowrap; }
  /* record card: the source chip drops under the value instead of a third column */
  .record-row { grid-template-columns: 5.5rem 1fr; gap: .3rem .8rem; }
  .record-row .chip { grid-column: 2; justify-self: start; }
  /* newsletter: the e-mail field and the button stack instead of overflowing */
  .nl-row { flex-wrap: wrap; width: 100%; }
  .nl-row input { min-width: 0; flex: 1 1 12rem; }
  .nl-row .btn { flex: 1 1 auto; }
}

/* ── newsletter: centered composition with category chips ── */
.newsletter { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .4rem; }
.newsletter h3 { font-size: 1.45rem; }
.newsletter p { max-width: 34rem; }
.newsletter form { display: flex; flex-direction: column; align-items: center; width: 100%; }
.nl-cats { border: 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: center; margin-top: 1.3rem; }
.nl-cats-legend { float: left; font-family: var(--jbmono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-right: .6rem; }
.nl-cat { position: relative; cursor: pointer; }
.nl-cat input { position: absolute; opacity: 0; pointer-events: none; }
.nl-cat span { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--jbmono); font-size: .72rem; padding: .34rem .8rem; border-radius: 99px; border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.55); transition: background .15s, color .15s, border-color .15s; }
.nl-cat span::before { content: ""; width: .52rem; height: .58rem; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: rgba(255,255,255,.25); transition: background .15s; }
.nl-cat:hover span { border-color: rgba(255,255,255,.5); color: rgba(255,255,255,.85); }
.nl-cat input:checked + span { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.85); color: #fff; }
.nl-cat input:checked + span::before { background: #6ea8ff; }
.nl-cat input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.nl-row { display: flex; gap: .6rem; width: min(32rem, 100%); margin-top: 1.1rem; }
.nl-row input { flex: 1; }

/* ── breadcrumbs ── */
.breadcrumbs { padding: 1.5rem 0 0; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; font-family: var(--jbmono); font-size: .7rem; color: var(--ink-40); }
.breadcrumbs li { display: flex; align-items: center; gap: .55rem; }
.breadcrumbs li:not(:last-child)::after { content: "›"; color: var(--ink-40); }
.breadcrumbs a { text-decoration: none; color: var(--ink-60); transition: color .12s; }
.breadcrumbs a:hover { color: var(--blue); }
.breadcrumbs [aria-current] { color: var(--ink-40); max-width: 72ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) { .breadcrumbs [aria-current] { max-width: 26ch; } }

/* ── footer fixes: legal line stays inline, logo stays flex ── */
.footer .logo { display: flex; }
.footer-legal a { display: inline; padding: 0; font-size: inherit; font-family: inherit; color: var(--ink-40); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.footer-legal a:hover { color: var(--blue); text-decoration-color: var(--blue); }
.footer { margin-top: 0; }  /* sections carry their own bottom padding; the margin showed as a white bar between soft-bg blocks */

/* ── cta block (shared: home, prijzen, …) ── */
.cta { background: var(--blue); color: #fff; border-radius: var(--radius); padding: clamp(2.5rem, 6vw, 4.5rem); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.8rem; box-shadow: var(--shadow-lg); }
.cta p { max-width: 40rem; margin-left: auto; margin-right: auto; }
.cta h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.cta p { margin-top: .7rem; color: rgba(255,255,255,.85); }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; }
.btn-white { background: #fff; color: var(--blue-deep); }
.btn-white:hover { background: var(--blue-tint); }
.btn-outline-white { border-color: rgba(255,255,255,.6); color: #fff; }
.btn-outline-white:hover { background: rgba(255,255,255,.12); }

/* ---- "In aanbouw" notice (preview host only, see base.html) ---- */
.uc { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(14,27,47,.78); backdrop-filter: blur(4px); }
.uc.uc-open { display: flex; }
.uc-lock { overflow: hidden; }
.uc-card { width: min(100%, 40rem); background: var(--bg); color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 2.5rem clamp(1.5rem, 5vw, 3rem); border-top: 6px solid var(--amber); animation: uc-in .25s ease-out; }
.uc-kicker { font-family: var(--jbmono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); margin: 0 0 .75rem; }
.uc-title { font-size: clamp(1.8rem, 4.5vw, 2.6rem); line-height: 1.1; margin: 0 0 1rem; letter-spacing: -.02em; }
.uc-body { font-size: 1.05rem; line-height: 1.55; color: var(--ink-60); margin: 0 0 1.75rem; }
.uc-close { width: 100%; font-size: 1.05rem; padding: .95rem 1.4rem; }
@keyframes uc-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .uc-card { animation: none; } }

/* ── company row (partials/company_row.html) ────────────────────────────────
   Shared by every list tier — geo, combo, branche, activity, technologie — so
   the card inside the <li> looks the same wherever it is rendered; the tier
   keeps its own grid on the <ul>. The mark sits on a neutral tile rather than
   on the card. No tile behind the mark: Erik (2026-09-21) found the dark tile
   ugly, so favicons sit straight on the card with their own colours.

   Every rule below the first is written `.co-row .co-x` rather than `.co-x`: the
   tier stylesheets carry `.geo-companies span { font-size: .78rem }`, which as a
   class-plus-type selector out-specifies a bare class and would flatten the
   domain line back into the meta line. Two classes beat one class and a tag. */
.co-row { display: flex; align-items: flex-start; gap: .55rem; }
.co-row .co-body { display: block; min-width: 0; }
.co-row .co-mark { flex: none; width: 16px; height: 16px; margin-top: .15rem; border-radius: 3px;
  object-fit: contain; }
.co-row .co-mark--txt { display: grid; place-items: center; font-family: var(--jbmono);
  font-size: .58rem; line-height: 1; color: var(--ink-40); }
.co-row .co-domain { display: block; font-family: var(--jbmono); font-size: .72rem;
  color: var(--ink-40); overflow-wrap: anywhere; }
.co-row .co-meta { display: block; font-size: .78rem; color: var(--ink-60);
  overflow-wrap: anywhere; }
.co-row .co-shared { display: inline-block; margin-top: .25rem; font-size: .7rem;
  color: var(--amber); }

/* ── product-page primitives (was static/css/product.css) ───────────────────
   Folded into the theme 2026-09-22: nineteen of the roughly thirty page
   templates linked product.css, and at 4 KB the ones that don't are cheaper to
   over-serve than an extra request is to make. The rules sit at the end of the
   theme, exactly where product.css used to sit in the cascade — after the rest
   of theme.css, before every page stylesheet — so nothing moved relative to
   anything else.

   Used by: overheid (hub + product), vacatures, verrijken, volgen, data, mcp,
   over, marktrapport, bedrijfsdata-kopen, vastgoed (3), geo (hub/province/
   city/combo), domein. home.html and onderzoek keep their own `.kicker`:
   home.css redefines `.kicker`, `.kicker .dot` and `.hero-actions` and loads
   after the theme, so it still wins.

   A new product page reuses these by giving its hero-grid/stat/step elements
   one of the grouped selectors below (or just `.kicker` / `.hero-actions`,
   which are unscoped). Page stylesheets keep only their page-unique rules. */

/* hero kicker + pulsing dot */
.kicker { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--jbmono); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-60); background: var(--bg-soft); border: 1px solid var(--line); border-radius: 99px; padding: .4rem .85rem; }
.dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(14,125,82,.5); animation: dd-pulse 2s infinite; }
@keyframes dd-pulse { 70% { box-shadow: 0 0 0 6px rgba(14,125,82,0); } 100% { box-shadow: 0 0 0 0 rgba(14,125,82,0); } }

/* hero CTA row */
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.7rem; }

/* product hero two-column grid */
.ov-hero-grid, .vc-hero-grid, .vr-hero-grid, .vg-hero-grid, .da-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 60rem) { .ov-hero-grid, .vc-hero-grid, .vr-hero-grid, .vg-hero-grid, .da-hero-grid { grid-template-columns: 1fr; } }

/* dark stat strip */
.ov-stats-sec, .vc-stats-sec, .da-stats-sec { background: var(--ink); color: #fff; }
.ov-stats, .vc-stats, .da-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 3vw, 2.5rem); padding-block: clamp(1.8rem, 4vw, 2.6rem); } /* padding-block, not the shorthand: these sit on .wrap and must keep its side gutter */
.ov-stat, .vc-stat, .da-stat { display: flex; flex-direction: column; gap: .15rem; }
.ov-stat b, .vc-stat b, .da-stat b { font-size: clamp(1.5rem, 3vw, 2.1rem); color: #fff; line-height: 1; }
.ov-stat-l, .vc-stat-l, .da-stat-l { font-size: .92rem; font-weight: 600; margin-top: .35rem; }
.ov-stat-s, .vc-stat-s, .da-stat-s { font-size: .8rem; color: rgba(255,255,255,.6); }
@media (max-width: 48rem) { .ov-stats, .vc-stats, .da-stats { grid-template-columns: 1fr 1fr; } }

/* numbered steps (overheid keeps an accent-coloured .ov-step-n in overheid.css) */
.ov-steps, .vc-steps, .vr-steps, .vg-steps, .api-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.ov-step, .vc-step, .vr-step, .vg-step, .api-step { display: flex; gap: 1rem; }
.vc-step-n, .vr-step-n, .vg-step-n, .api-step-n { flex: none; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 50%; background: var(--blue-tint); color: var(--blue-deep); font-family: var(--jbmono); font-weight: 700; }
.ov-step h3, .vc-step h3, .vr-step h3, .vg-step h3, .api-step h3 { font-size: 1.05rem; }
.ov-step p, .vc-step p, .vr-step p, .vg-step p, .api-step p { font-size: .9rem; color: var(--ink-60); margin-top: .35rem; line-height: 1.55; }
@media (max-width: 60rem) { .ov-steps, .vc-steps, .vr-steps, .vg-steps, .api-steps { grid-template-columns: 1fr; } }

/* moat / "het verschil" two-column block */
.ov-moat, .vc-moat, .vg-moat, .da-proof { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.ov-moat h2, .vc-moat h2, .vg-moat h2, .da-proof h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-top: .7rem; }
.ov-moat-body, .vc-moat-body, .vg-moat-body, .da-proof-body { color: var(--ink-60); font-size: 1.05rem; margin-top: 1rem; line-height: 1.6; }
.ov-moat-points, .vc-moat-points, .vg-moat-points, .da-proof-points { list-style: none; display: flex; flex-direction: column; gap: .8rem; }
.ov-moat-points li, .vc-moat-points li, .vg-moat-points li, .da-proof-points li { display: flex; align-items: flex-start; gap: .7rem; font-weight: 500; }
@media (max-width: 56rem) { .ov-moat, .vc-moat, .vg-moat, .da-proof { grid-template-columns: 1fr; } }

/* ── "concept" bar ─────────────────────────────────────────────────────────
   The honest header that says a page's figures are still illustrative. On the
   text pages (textpage_base.html), the blog post and the onderzoek dashboards,
   which is why it stopped being a copy in both article.css and onderzoek.css. */
.mock-note { background: #fdf3e3; color: #7a5314; font-family: var(--jbmono); font-size: .68rem; text-align: center; padding: .45rem; letter-spacing: .06em; }

/* ── A–Z index (crawl surface) ──────────────────────────────────────────────
   The lettered jump-nav plus the multi-column list under it: a page that has to
   link thousands of entities and still be readable. Rendered by
   templates/pages/segment_overview.html (/technologie, /branche). datasets.css
   carried a second, slightly looser copy for a storefront sitemap that no
   template renders any more — this one keeps the live values, so nothing moves
   on screen; a future /datasets sitemap gets the same component for free. */
.az-nav { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.4rem 0 2rem; }
.az-nav a { font-family: var(--jbmono); font-size: .8rem; padding: .3rem .6rem; border: 1px solid var(--line); border-radius: 6px; color: var(--blue); text-decoration: none; }
.az-nav a:hover { background: var(--blue-tint); }
.az-sec { margin: 1.8rem 0; scroll-margin-top: 5.5rem; }
.az-sec h2 { font-family: var(--jbmono); color: var(--blue); font-size: 1rem; border-bottom: 1px solid var(--line); padding-bottom: .35rem; }
.az-list { columns: 4; column-gap: 2rem; margin-top: .8rem; padding: 0; list-style: none; }
.az-list li { break-inside: avoid; padding: .22rem 0; font-size: .92rem; }
.az-list a { color: var(--ink); text-decoration: none; }
.az-list a:hover { color: var(--blue); }
.az-list .c { color: var(--ink-40); font-family: var(--jbmono); font-size: .72rem; margin-left: .4rem; }
@media (max-width: 1080px) { .az-list { columns: 3; } }
@media (max-width: 760px) { .az-list { columns: 2; } }
@media (max-width: 440px) { .az-list { columns: 1; } }