/* Brookz / Nationale Overname Dag — shared brand tokens */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Roboto+Slab:wght@700;900&display=swap');

:root{
  /* Primary palette (brand guide p.11) */
  --dark: #0f1828;
  --tech: #0c1e5b;
  --dutch: #fe471b;
  --innovate: #cdcdf3;
  --white: #ffffff;

  /* Secondary (pasteltinten) — approximated from guide p.12 */
  --green: #c6e8c6;
  --dark-green: #1f4a3a;
  --yellow: #f6e27a;
  --blue: #c9dcf3;
  --rose: #f5d4cf;
  --burgundy: #6e1e2b;
  --purp: #4a2f7a;

  /* Type */
  --font-body: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-logo: 'Roboto Slab', Georgia, serif; /* Serifa substitute */

  /* Spacing */
  --page-x: clamp(20px, 5vw, 72px);
  --maxw: 1440px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; max-width: 100%; }
body{
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--dark);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.45;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

/* Logo type (Serifa Bold substitute: Roboto Slab 900) */
.logo-type{
  font-family: var(--font-logo);
  font-weight: 900;
  letter-spacing: -0.02em;
}
.logo-type .k{ /* per guide: K steekt iets uit */
  display: inline-block;
  transform: translateY(-0.04em);
}

/* "Blocks" — the signature grid element */
.block{
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 0;
}
.block.tall{ min-height: 420px; }
.block h2, .block h3 {
  font-weight: 400; /* Poppins Regular for headings per guide p.15 */
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
}
.block .payoff{
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
}

/* Color blocks */
.bg-dark{ background: var(--dark); color: var(--white); }
.bg-tech{ background: var(--tech); color: var(--white); }
.bg-dutch{ background: var(--dutch); color: var(--white); }
.bg-innovate{ background: var(--innovate); color: var(--dark); }
.bg-white{ background: var(--white); color: var(--dark); }
.bg-yellow{ background: var(--yellow); color: var(--dark); }
.bg-rose{ background: var(--rose); color: var(--dark); }
.bg-blue{ background: var(--blue); color: var(--dark); }
.bg-green{ background: var(--green); color: var(--dark-green); }
.bg-burgundy{ background: var(--burgundy); color: var(--white); }
.bg-darkgreen{ background: var(--dark-green); color: var(--white); }
.bg-purp{ background: var(--purp); color: var(--white); }

/* Heading scale — large, confident */
.h-display{
  font-weight: 400;
  font-size: clamp(44px, 7vw, 108px);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.h-xl{ font-weight: 400; font-size: clamp(36px, 5vw, 72px); line-height: 1.0; letter-spacing: -0.03em; }
.h-lg{ font-weight: 400; font-size: clamp(28px, 3.2vw, 48px); line-height: 1.05; letter-spacing: -0.02em; }
.h-md{ font-weight: 500; font-size: clamp(20px, 1.6vw, 26px); line-height: 1.2; letter-spacing: -0.01em; }
.eyebrow{
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.label{
  display: inline-block;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
}

/* Buttons */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
  border-radius: 999px;
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-1px); }
.btn-dutch{ background: var(--dutch); color: var(--white); }
.btn-dutch:hover{ background: #e83d12; }
.btn-dark{ background: var(--dark); color: var(--white); }
.btn-dark:hover{ background: #1a2640; }
.btn-ghost{ background: transparent; color: currentColor; border-color: currentColor; }
.btn-white{ background: var(--white); color: var(--dark); }
.btn-white:hover{ background: #f3f3f3; }
.btn .arrow{
  display: inline-block; width: 18px; height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M5 12h13M13 6l6 6-6 6' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' d='M5 12h13M13 6l6 6-6 6'/></svg>") no-repeat center / contain;
}

/* Top Nav */
.nav{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid #eee;
}
.nav-inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 16px var(--page-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav-logo{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.nav-logo .brookz-logo{
  height: 22px;
  width: auto;
  display: block;
  color: var(--dark);
  flex-shrink: 0;
}
.nav-logo .sep{ width: 1px; height: 18px; background: #ddd; flex-shrink: 0; }
.nav-logo .event{
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--tech);
  white-space: nowrap;
  line-height: 1.2;
}
.nav-links{
  display: flex;
  gap: 28px;
  align-items: center;
}
.nav-links a{
  font-weight: 500;
  font-size: 14px;
  color: #222;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
}
.nav-links a.active{ border-bottom-color: var(--dutch); }
.nav-links a:hover{ color: var(--dutch); }
.nav-cta{ display: flex; align-items: center; gap: 10px; }

/* Footer */
footer.site-foot{
  background: var(--dark);
  color: var(--white);
  padding: 80px var(--page-x) 40px;
  margin-top: 0;
}
footer.site-foot .foot-grid{
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
}
footer .foot-logo{
  height: 48px;
  width: auto;
  display: block;
  color: #fff;
}
footer .foot-pay{
  font-family: var(--font-logo);
  font-weight: 900;
  font-size: 64px;
  letter-spacing: -0.03em;
  line-height: 1;
}
footer .foot-pay .off{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  display: block;
  margin-top: 8px;
  letter-spacing: 0;
}
footer h4{
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  margin: 0 0 16px;
}
footer ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
footer a { opacity: 0.9; }
footer a:hover { color: var(--dutch); }
footer .foot-bot{
  max-width: var(--maxw);
  margin: 56px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}

/* Track color mapping */
.track-verkoper-nu{ --track-bg: var(--dutch); --track-fg: var(--white); --track-tint: #ffe6df; }
.track-verkoper-klaar{ --track-bg: var(--tech); --track-fg: var(--white); --track-tint: #dfe4f3; }
.track-koper{ --track-bg: var(--dark-green); --track-fg: var(--white); --track-tint: #d9e8df; }
.track-groeier{ --track-bg: var(--purp); --track-fg: var(--white); --track-tint: #e3dcf0; }
.track-plenary{ --track-bg: var(--dark); --track-fg: var(--white); --track-tint: #e7e9ee; }
.track-break{ --track-bg: var(--innovate); --track-fg: var(--dark); --track-tint: #ededfb; }

/* Placeholder image (subtly striped) */
.placeholder{
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,0.06) 0 1px, transparent 1px 14px),
    linear-gradient(180deg, #eee, #e4e4e6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  color: #666;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.placeholder.dark{
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 14px),
    linear-gradient(180deg, #263049, #1a2236);
  color: rgba(255,255,255,0.6);
}

/* Utility */
.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 var(--page-x); }
.grid-2{ display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.grid-3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.grid-4{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
@media (max-width: 900px){
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .nav-links{ display: none; }
  .nav-inner{ gap: 12px; padding: 12px var(--page-x); }
  footer .foot-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .nav-logo .brookz-logo, .nav-logo .sep{ display: none; }
  .nav-logo .event{ font-size: 14px; color: var(--dark); white-space: normal; }
  .nav-cta .btn{ padding: 10px 16px; font-size: 13px; }
}

.sr-only{ position: absolute; width:1px; height:1px; overflow:hidden; clip: rect(0,0,0,0); }