/* Shared base — tokens, reset, typography, buttons, brand, topbar, footer.
   Extracted once from both pages; identical rules deduplicated. */

:root{
  --bg:#F1F6F4;
  --surface:#FFFFFF;
  --surface-2:#E3EEEA;
  --primary:#1E5A55;
  --primary-dark:#15413D;
  --accent:#C2410C;
  --accent-dark:#A8401F;
  /* verdonkerd: wit-op-accent en op-perzik halen nu WCAG AA */
  --ink:#1C2A28;
  --muted:#5C6C69;
  --line:#D8E4DF;
  --on-dark:rgba(255,255,255,.85);
  --fd:"Bricolage Grotesque",system-ui,sans-serif;
  --fb:"Mulish",system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  /* links uitgelijnd, met comfortabele inset (niet tegen de kant) */;
}

*{box-sizing:border-box;margin:0;padding:0}

html{font-size:62.5% !important;scroll-behavior:smooth}

body{font-family:var(--fb);font-size:1.7rem;line-height:1.6;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}

a{color:inherit;text-decoration:none}

:where(a,button):focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}

.kicker{font-family:var(--fd);font-weight:600;font-size:1.3rem;letter-spacing:.16em;text-transform:uppercase}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;font-family:var(--fd);font-weight:600;font-size:1.55rem;padding:1.2rem 2.2rem;border-radius:100px;border:2px solid transparent;transition:transform .2s var(--ease),background .2s,border-color .2s}

.btn--primary{background:var(--primary);color:#fff}

.btn--primary:hover{background:var(--primary-dark);transform:translateY(-2px)}

.btn--light{background:#fff;color:var(--primary)}

.btn--light:hover{transform:translateY(-2px)}

.btn--ghost{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}

.btn--ghost:hover{border-color:#fff}

.topbar{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:space-between;align-items:center;padding:1.4rem var(--pad);pointer-events:none}

.topbar>*{pointer-events:auto}

.brand{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--fd);font-weight:800;font-size:1.9rem;color:#fff;background:rgba(21,42,40,.28);backdrop-filter:blur(8px);padding:.6rem 1.1rem;border-radius:100px}

.brand .m{width:2.8rem;height:2.8rem;border-radius:50%;background:#fff;color:var(--primary);display:grid;place-items:center}

.brand .m svg{width:1.7rem;height:1.7rem}

.footer{background:var(--ink);color:var(--on-dark);padding:clamp(3rem,6vw,5rem) var(--pad) 2.4rem;display:grid;grid-template-columns:2fr 1fr 1fr;gap:3rem}

.footer .brand{color:#fff;background:none;padding:0}

.footer h4{color:#fff;font-family:var(--fd);font-size:1.5rem;margin-bottom:.8rem}

.footer li{list-style:none;font-size:1.5rem;line-height:1.95}

.footer a:hover{color:#fff}

.footer__bottom{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.14);padding-top:1.6rem;font-size:1.3rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}

@media(max-width:760px){.footer{grid-template-columns:1fr;gap:2rem}}

/* === WordPress integratie-fixes (Alastic) === */
.admin-bar .topbar { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .topbar { top: 46px; } }
body { background-color: var(--bg) !important; }
h1,h2,h3,h4,h5,h6 { text-transform: none !important; }