/* ---- TOKENS (Bricks → Settings → Global Variables) ------- */
:root {
  /* Colour */
  --color-navy:#1B3A6B; --color-navy-light:#4A6FA5; --color-navy-darker:#142C52;
  --color-link:#6B8FC9; --color-violet:#7B68EE; --color-white:#FFFFFF;
  --color-surface:#F5F5F5; --color-surface-2:#ECEFF3; --color-border:#D0D5DD;
  --dot-red:#FF272B; --dot-green:#24AD39; --dot-yellow:#FFBE1C; --logo-blue:#0084FE;
  --bg:var(--color-white); --bg-alt:var(--color-surface); --bg-dark:var(--color-navy);
  --text:#555F6E; --text-strong:var(--color-navy); --text-muted:#8A93A2; --text-invert:var(--color-white);
  --border:var(--color-border); --accent:var(--color-navy);
  --navy-soft:#EAF0F9; --violet-soft:#EEEBFE; --success:#24AD39;
  /* Type */
  --font-display:'Thicccboi','Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fs-display:clamp(2.5rem,1.6rem + 3.6vw,3.5rem);
  --fs-h1:clamp(2rem,1.5rem + 2vw,2.75rem);
  --fs-h2:clamp(1.6rem,1.25rem + 1.4vw,2.5rem);
  --fs-h3:clamp(1.35rem,1.2rem + 0.5vw,1.75rem);
  --fs-h4:1.375rem; --fs-lead:1.25rem; --fs-base:1rem; --fs-sm:.875rem; --fs-xs:.8125rem;
  --lh-tight:1.1; --lh-heading:1.2; --lh-snug:1.4; --lh-body:1.6;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extra:800;
  --ls-tight:-0.02em; --ls-normal:0; --ls-wide:0.12em;
  /* Spacing */
  --space-1:.25rem; --space-2:.5rem; --space-3:1rem; --space-4:1.5rem;
  --space-5:3rem; --space-6:5rem; --space-7:7.5rem;
  --section-py:clamp(4rem,2.5rem + 5vw,7.5rem);
  --container-max:1160px; --container-narrow:760px; --container-pad:clamp(1.25rem,.5rem + 3vw,2.5rem);
  /* Radii */
  --radius-nav:6px; --radius-btn:8px; --radius-card:12px; --radius-pill:999px;
  /* Shadows */
  --shadow-sm:0 1px 2px rgba(27,58,107,.06); --shadow-card:0 8px 24px rgba(27,58,107,.08);
  --shadow-lg:0 16px 40px rgba(27,58,107,.12); --shadow-btn:0 4px 12px rgba(27,58,107,.18);
  /* Motion */
  --ease:cubic-bezier(0.22,1,0.36,1); --dur-fast:140ms; --dur:220ms; --dur-slow:380ms;
}

/* ---- RESET ----------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  font-family:var(--font-body); font-size:var(--fs-base); line-height:var(--lh-body);
  color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
img,svg,video { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; padding:0; }
h1,h2,h3,h4 { font-family:var(--font-display); line-height:var(--lh-heading); color:var(--text-strong); text-wrap:balance; }
button { font:inherit; }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* ---- HELPERS --------------------------------------------- */
.container { width:100%; max-width:var(--container-max); margin-inline:auto; padding-inline:var(--container-pad); }
.container--narrow { max-width:var(--container-narrow); }
.section { padding-block:var(--section-py); }
.section--alt { background:var(--bg-alt); }
.muted { color:var(--text-muted); }
.center { text-align:center; }
.eyebrow { display:inline-block; font-family:var(--font-display); font-size:var(--fs-xs); font-weight:var(--fw-bold); letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--color-navy-light); }
.lead { font-size:var(--fs-lead); line-height:var(--lh-snug); font-weight:var(--fw-regular); }

/* Section heading block ------------------------------------ */
.section-head { display:flex; flex-direction:column; gap:var(--space-3); margin-bottom:var(--space-5); max-width:56ch; }
.section-head__title { font-size:var(--fs-h2); font-weight:var(--fw-bold); letter-spacing:var(--ls-tight); }

/* ---- BUTTONS --------------------------------------------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--fs-base); line-height:1; letter-spacing:var(--ls-normal); padding:.875rem var(--space-4); border-radius:var(--radius-btn); border:1px solid transparent; cursor:pointer; transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease); }
.btn--primary { background:var(--color-navy); color:var(--text-invert); }
.btn--primary:hover { background:var(--color-navy-light); box-shadow:var(--shadow-btn); transform:translateY(-2px); }
.btn--primary:active { background:var(--color-navy-darker); box-shadow:none; transform:translateY(0); }
.btn:focus-visible { outline:none; box-shadow:0 0 0 3px var(--navy-soft); }
.btn__icon { width:18px; height:18px; flex:0 0 auto; }

/* Media placeholder (vervang door Bricks Image) ------------ */
.media-ph { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-2); background:var(--navy-soft); border:1px solid var(--border); border-radius:var(--radius-card); color:var(--color-navy-light); overflow:hidden; }
.media-ph svg { width:40px; height:40px; opacity:.7; }
.media-ph__label { font-family:var(--font-display); font-size:var(--fs-xs); font-weight:var(--fw-semibold); letter-spacing:.04em; }

/* ---- BLOG FILTER CHIPS ----------------------------------- */
.chips { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.chip { font-family:var(--font-display); font-size:var(--fs-sm); font-weight:var(--fw-medium); padding:8px 16px; border-radius:var(--radius-pill); border:1px solid var(--border); color:var(--color-navy); background:#fff; cursor:pointer; transition:all var(--dur) var(--ease); }
.chip:hover { border-color:var(--color-navy); }
.chip[aria-current="true"] { background:var(--color-navy); color:#fff; border-color:var(--color-navy); }

/* ---- BLOG ARTIKEL-GRID ----------------------------------- */
.post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); }
.post-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--border); border-radius:var(--radius-card); overflow:hidden; transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease); }
.post-card:hover { box-shadow:var(--shadow-card); transform:translateY(-4px); }
.post-card__media { aspect-ratio:16 / 10; border-radius:0; border:none; }
.post-card__body { display:flex; flex-direction:column; gap:var(--space-2); padding:var(--space-4); flex:1 1 auto; }
.post-card__meta { display:flex; gap:var(--space-2); align-items:center; font-size:var(--fs-xs); color:var(--text-muted); }
.tag { display:inline-block; font-family:var(--font-display); font-size:var(--fs-xs); font-weight:var(--fw-semibold); letter-spacing:.02em; padding:4px 11px; border-radius:var(--radius-pill); background:var(--navy-soft); color:var(--color-navy); }
.post-card__title { font-size:var(--fs-h4); font-weight:var(--fw-semibold); color:var(--color-navy); line-height:1.25; }
.post-card__excerpt { font-size:.9rem; color:var(--text); }
.post-card__link { margin-top:auto; font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--fs-sm); color:var(--color-navy); display:inline-flex; align-items:center; gap:6px; }
.post-card__link svg { width:16px; height:16px; }

/* Pagina-eigen: exact-vier gebalanceerd raster (2×2) ------- */
.post-grid--four { grid-template-columns:repeat(2,1fr); max-width:940px; margin-inline:auto; }

/* ---- SCROLL REVEAL --------------------------------------- */
[data-reveal] { opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease),transform .7s var(--ease); }
[data-reveal].in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ [data-reveal]{ opacity:1; transform:none; } }

/* ---- RESPONSIVE (desktop-first, Bricks breakpoints) ------ */
@media (max-width:991px) {
  .post-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:767px) {
  .post-grid,.post-grid--four { grid-template-columns:1fr; }
}

/* ===== Bricks-conversie fixes (page-scoped) ===== */
html{font-size:100%!important;}                 /* rem-root reset: Bricks zet html op 62.5% */
html.tws-builder [data-reveal]{opacity:1!important;transform:none!important;} /* builder: niet leeg */
.eyebrow.brxe-text-basic,.btn.brxe-text-basic,.invul__tag.brxe-text-basic,.quote__name.brxe-text-basic,.quote__avatar.brxe-text-basic,.media-ph__label.brxe-text-basic,.section-head__title.brxe-text-basic,.card__title.brxe-text-basic,.cta__title.brxe-text-basic,.hero__title.brxe-text-basic,.pack__name.brxe-text-basic,.step__num.brxe-text-basic,.stat__num.brxe-text-basic,.tag.brxe-text-basic,.product__title.brxe-text-basic,.shop-card__title.brxe-text-basic,.shop-card__price.brxe-text-basic,.price-now.brxe-text-basic,.price-badge.brxe-text-basic,.chip.brxe-text-basic,.post-card__link.brxe-text-basic,.post-card__title.brxe-text-basic{font-family:var(--font-display)!important;}