/* Fonts — lokaal geserveerd, geen externe aanroep.
   Oxanium en Inter staan onder de SIL Open Font License; het zijn variabele
   fonts, dus één bestand per subset bedient alle gewichten. */
@font-face { font-family: 'Oxanium'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../fonts/oxanium-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Oxanium'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../fonts/oxanium-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/inter-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --bg: #0f1712; --bg2: #16211a; --surface: rgba(255,255,255,0.035); --panel: #17221b;
  --ink: #ffffff; --text: #cfd8c9; --muted: #8f9c88;
  --olive: #3e4532; --green: #8fbf4a; --lime: #d0e6a5; --tint: rgba(208,230,165,0.08);
  --line: rgba(208,230,165,0.16); --line-strong: rgba(208,230,165,0.32);
  --font: 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
  --display: 'Exo 2', 'Segoe UI', Helvetica, Arial, sans-serif;
  --wrap: 1200px; --pad: clamp(20px, 5vw, 64px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul { margin: 0; }
a { color: var(--lime); text-decoration: none; }
a:hover { color: #fff; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }

/* prototype-balk */
.proto-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px var(--pad); background: #060a07; color: #9aa594; font-size: 12px; letter-spacing: 0.02em; border-bottom: 1px solid var(--line); }
.proto-bar strong { color: var(--lime); font-weight: 700; }

/* header */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(15,23,18,0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo img { height: 46px; width: auto; }
.nav { display: flex; align-items: center; gap: 32px; }
.nav a { font-size: 14px; font-weight: 500; letter-spacing: 0.03em; color: var(--muted); padding: 8px 2px; }
.nav a:hover { color: #fff; }
.nav a[aria-current="page"] { color: #fff; }
.menu-btn { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 8px; background: transparent; color: #fff; cursor: pointer; }
.menu-btn .ic-close { display: none; }
body.menu-open .menu-btn .ic-menu { display: none; }
body.menu-open .menu-btn .ic-close { display: block; }

/* knoppen */
.btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: 0.04em; padding: 13px 26px; border-radius: 6px; border: 1px solid transparent; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: #fff; color: var(--bg); border-color: #fff; font-weight: 700; }
.btn-primary:hover { background: var(--lime); border-color: var(--lime); color: var(--bg); }
.btn-lime { background: var(--lime); color: var(--bg); border-color: var(--lime); font-weight: 700; }
.btn-lime:hover { background: #fff; border-color: #fff; color: var(--bg); }
.btn-outline, .btn-ghost { background: transparent; color: var(--lime); border-color: var(--line-strong); }
.btn-outline:hover, .btn-ghost:hover { background: var(--tint); color: #fff; border-color: var(--lime); }
.btn-hdr { padding: 10px 20px; font-size: 14px; }
.link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--lime); }

/* typografie */
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); }
.eyebrow.muted { color: var(--muted); }
.h1 { font-family: var(--display); font-size: clamp(34px, 4vw, 56px); line-height: 1.1; font-weight: 700; letter-spacing: 0.005em; color: #fff; text-wrap: balance; }
.h1.display { font-size: clamp(38px, 5vw, 66px); max-width: 900px; margin-inline: auto; }
.h1.md { font-size: clamp(32px, 3.6vw, 50px); }
.h1 .accent { color: var(--lime); }
.h2 { font-family: var(--display); font-size: clamp(26px, 2.6vw, 36px); line-height: 1.18; font-weight: 600; letter-spacing: 0.005em; color: #fff; text-wrap: balance; }
.h3 { font-family: var(--display); font-size: 19px; line-height: 1.3; font-weight: 600; color: #fff; }
.h3.xl { font-size: clamp(22px, 2vw, 26px); }
.lead { font-size: clamp(16px, 1.2vw, 17.5px); line-height: 1.7; max-width: 62ch; }
.lead.center { margin-inline: auto; text-align: center; max-width: 60ch; }
.tagline { font-family: var(--display); font-weight: 300; font-size: clamp(18px, 2.2vw, 24px); letter-spacing: 0.03em; color: var(--muted); }
.small { font-size: 13px; }
.muted { color: var(--muted); }
.on-dark { color: #fff; }
.on-dark-muted { color: var(--text); }
.crumbs { display: flex; gap: 8px; font-size: 14px; color: var(--muted); }
.crumbs strong { color: #fff; font-weight: 600; }
.badge { display: inline-block; padding: 6px 16px; border: 1px solid var(--line-strong); border-radius: 20px; font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lime); }

/* layout */
.wrap { width: min(var(--wrap), 100% - 2 * var(--pad)); margin-inline: auto; }
.section { padding-block: clamp(56px, 7vw, 88px); }
.pt-0 { padding-top: 0; }
.page-head { display: flex; flex-direction: column; gap: 20px; padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(32px, 4vw, 56px); max-width: 860px; }
.page-head.two-col { max-width: none; display: grid; }
.surface { background: var(--bg2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: clamp(56px, 7vw, 88px); }
.tint { background: radial-gradient(ellipse 50% 60% at 50% 40%, rgba(208,230,165,0.08) 0%, transparent 70%), var(--bg); padding-block: clamp(56px, 7vw, 88px); border-top: 1px solid var(--line); }
.stack { display: flex; flex-direction: column; gap: 22px; }
.stack.sm { gap: 14px; }
.stack.xs { gap: 6px; }
.stack > .btn { align-self: flex-start; }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 6vw, 80px); }
.align-center { align-items: center; }
.align-end { align-items: end; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
/* Voor een blok met maar één kaart. Zonder deze klasse zou die in een
   raster van drie kolommen een derde breed blijven, met tweederde leeg. */
.grid-1 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.section-head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-bottom: 36px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.actions.center { justify-content: center; }
.centered { align-items: center; text-align: center; margin-bottom: 36px; }

/* hero (home, gecentreerd) */
.hero-center { position: relative; overflow: hidden; padding-top: clamp(64px, 9vw, 120px); padding-bottom: clamp(48px, 6vw, 80px); }
.hero-center::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 50% at 50% 25%, rgba(208,230,165,0.13) 0%, transparent 70%), radial-gradient(ellipse 40% 30% at 15% 90%, rgba(143,191,74,0.07) 0%, transparent 60%); }
.hero-trees { position: absolute; right: -40px; bottom: 120px; width: 480px; opacity: 0.11; pointer-events: none; }
.hero-center-inner { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.hero-center-inner .actions { margin-top: 14px; }
.photo-strip { position: relative; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; margin-top: clamp(48px, 6vw, 80px); }
.photo-strip .photo { aspect-ratio: 16 / 10; height: auto; }

/* hero (dienstpagina's) */
.hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 64px); align-items: center; padding-block: clamp(48px, 6vw, 88px) clamp(48px, 6vw, 80px); }
.hero-text { display: flex; flex-direction: column; gap: 24px; }
.hero-media { position: relative; }
.hero-media .photo { aspect-ratio: 4 / 3.4; width: 100%; height: auto; }

.photo { object-fit: cover; border-radius: 14px; width: 100%; border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0,0,0,0.35); }
.photo-wide { aspect-ratio: 21 / 9; border-radius: 18px; }
.photo-contact { aspect-ratio: 16 / 8; border-radius: 16px; }
.row-photo { aspect-ratio: 16 / 9; border-radius: 12px; box-shadow: none; }
.collage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.collage img:first-child { grid-column: span 2; aspect-ratio: 16 / 8; }
.collage img { aspect-ratio: 4 / 3; }

/* kaarten (glas) */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.card:hover { border-color: var(--line-strong); }
.card-pad { display: flex; flex-direction: column; gap: 12px; padding: 26px; }
.card-pad p { font-size: 15px; color: var(--text); }
.card-sm { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 12px; }
.card-sm strong { color: #fff; font-size: 15px; }
.card-form { padding: clamp(22px, 3vw, 34px); border-radius: 16px; background: rgba(255,255,255,0.03); }
.card-loc { display: flex; gap: 16px; padding: 20px; }
.card-loc strong { color: #fff; }
.card-loc p { font-size: 15px; }
.card-service { display: flex; flex-direction: column; overflow: hidden; color: var(--text); }
.card-service:hover { transform: translateY(-3px); background: rgba(255,255,255,0.05); color: var(--text); }
.card-service img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-bottom: 1px solid var(--line); }
.card-body { display: flex; flex-direction: column; gap: 12px; padding: 22px; }
.card-body p { font-size: 14.5px; }
.icon-box { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--tint); border: 1px solid var(--line); color: var(--lime); flex-shrink: 0; }
.icon-box.lg { width: 44px; height: 44px; }
.check { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--lime); color: var(--bg); flex-shrink: 0; }
.check.lg { width: 28px; height: 28px; }
.checks { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.checks li { display: flex; align-items: center; gap: 12px; font-weight: 600; color: #fff; }
.values { display: flex; flex-direction: column; }
.value-row { display: flex; flex-direction: column; gap: 10px; padding: 24px 0; border-top: 1px solid var(--line); }
.value-head { display: flex; align-items: center; gap: 12px; }
.value-row p { padding-left: 40px; font-size: 15px; }
.ic.green { color: var(--green); }
.contact-lines { display: flex; flex-direction: column; gap: 12px; }
.contact-lines a { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; color: #fff; }
.contact-lines a:hover { color: var(--lime); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 80px); }

/* diensten-lijst */
.service-list { display: flex; flex-direction: column; padding-bottom: clamp(56px, 7vw, 88px); }
.service-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 280px 48px; gap: 32px; align-items: center; padding: 30px 0; border-top: 1px solid var(--line); color: var(--text); }
.service-row:last-child { border-bottom: 1px solid var(--line); }
.service-row p { max-width: 56ch; font-size: 15px; }
.service-row:hover .h3 { color: var(--lime); }
.service-row:hover .circle { background: var(--lime); color: var(--bg); border-color: var(--lime); }
.circle { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; color: var(--lime); transition: background .2s ease, color .2s ease; }
.approach { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(32px, 6vw, 80px); }
.mini-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; font-size: 15px; font-weight: 600; color: #fff; }
.mini-link:hover { border-color: var(--lime); color: var(--lime); }

/* band (CTA) */
.band-wrap { padding-bottom: clamp(56px, 7vw, 88px); padding-top: clamp(40px, 5vw, 64px); }
.band { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 40px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 16px; padding: clamp(32px, 4vw, 52px) clamp(24px, 4vw, 56px); }
.band::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 50% 80% at 20% 50%, rgba(208,230,165,0.12) 0%, transparent 70%); }
.band-text { position: relative; display: flex; flex-direction: column; gap: 10px; max-width: 620px; }
.band .btn { position: relative; }
.band .h2 { font-size: clamp(22px, 2.3vw, 30px); }

/* formulier */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 600; color: #fff; }
.form .full { grid-column: span 2; }
.form input, .form textarea { font: inherit; font-size: 15px; color: #fff; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 6px; background: rgba(255,255,255,0.04); }
.form input { height: 46px; }
.form input:focus, .form textarea:focus { outline: 2px solid var(--green); outline-offset: 0; border-color: var(--green); }
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
/* Blijft er alleen een knop over, dan houdt space-between hem links.
   Deze regel duwt een enig kind alsnog naar rechts, zonder iets te
   veranderen aan de varianten waar wél een tekst naast de knop staat. */
.form-foot > :only-child { margin-left: auto; }

/* footer */
.site-footer { background: #0a100c; color: var(--text); padding: clamp(48px, 6vw, 72px) 0 32px; border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col .eyebrow { color: var(--lime); }
.footer-col a { color: var(--text); font-size: 14.5px; }
.footer-col a:hover { color: var(--lime); }
.footer-col p { color: var(--muted); font-size: 14px; }
.footer-brand img { height: 58px; width: auto; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.footer-bottom a { color: var(--muted); margin-left: 20px; }

/* toast */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; background: var(--lime); color: var(--bg); padding: 14px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; box-shadow: 0 12px 32px rgba(0,0,0,0.4); transition: opacity .25s ease, transform .25s ease; pointer-events: none; z-index: 50; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* responsive */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .service-row { grid-template-columns: 40px minmax(0, 1fr) 48px; }
  .row-photo { display: none; }
  .approach { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .section-head { grid-template-columns: 1fr; gap: 16px; }
  .hero-trees { width: 300px; right: -60px; }
}
@media (max-width: 800px) {
  .site-header .wrap { height: 64px; }
  .logo img { height: 40px; }
  .nav { display: none; }
  body.menu-open .nav { display: flex; flex-direction: column; align-items: stretch; gap: 4px; position: absolute; left: 0; right: 0; top: 64px; background: var(--panel); border-bottom: 1px solid var(--line); padding: 12px var(--pad) 20px; box-shadow: 0 24px 40px rgba(0,0,0,0.4); }
  body.menu-open .nav a { padding: 12px 4px; font-size: 17px; color: #fff; border-bottom: 1px solid var(--line); }
  .btn-hdr { display: none; }
  .menu-btn { display: inline-flex; }
  .hero, .two-col, .contact-grid, .page-head.two-col { grid-template-columns: 1fr; }
  .photo-strip { grid-template-columns: 1fr 1fr; }
  .photo-strip .photo:first-child { grid-column: span 2; }
  .hero-trees { width: 220px; right: -70px; top: auto; bottom: 0; }
  .grid-4 { grid-template-columns: 1fr; }
  .band { flex-direction: column; align-items: flex-start; }
  .form { grid-template-columns: 1fr; }
  .form .full { grid-column: span 1; }
  .service-row { grid-template-columns: 40px minmax(0, 1fr); }
  .service-row .circle { display: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom a { margin-left: 0; margin-right: 16px; }
  .proto-bar span { display: none; }
}

/* compact logo (mobiel) */
.logo { display: inline-flex; align-items: center; }
.logo-compact { display: none; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; }
.logo-compact em { font-style: normal; font-weight: 300; color: var(--lime); }
.logo-compact img { height: 34px; width: auto; }

@media (max-width: 800px) {
  .logo-full { display: none; }
  .logo-compact { display: inline-flex; }
  /* hero */
  .hero-center { padding-top: 44px; padding-bottom: 32px; }
  .hero-center-inner { gap: 16px; }
  .h1.display { font-size: clamp(34px, 9.5vw, 42px); }
  .tagline { font-size: 17px; }
  .lead.center { font-size: 16px; }
  .actions { flex-direction: column; align-items: stretch; }
  .actions .btn { width: 100%; justify-content: center; padding: 15px 20px; }
  .actions.center { margin-top: 6px; }
  .hero-trees { display: none; }
  /* fotostrip wordt swipe-carrousel */
  .photo-strip { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-top: 36px; padding-bottom: 6px; margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); width: auto; }
  .photo-strip::-webkit-scrollbar { display: none; }
  .photo-strip .photo { flex: 0 0 82%; scroll-snap-align: center; aspect-ratio: 4 / 3; }
  .photo-strip .photo:first-child { grid-column: auto; }
  /* collage: één grote foto + twee kleine */
  .collage { gap: 10px; }
  .collage img:first-child { aspect-ratio: 16 / 10; }
  /* dienstkaarten: compacte rij */
  .grid-4 { gap: 12px; }
  .card-service { flex-direction: row; align-items: stretch; }
  .card-service img { width: 112px; flex: 0 0 112px; aspect-ratio: auto; height: auto; object-fit: cover; border-bottom: 0; border-right: 1px solid var(--line); }
  .card-body { padding: 16px; gap: 8px; }
  .card-body .icon-box { display: none; }
  .card-body p { font-size: 14px; }
  .card-pad { padding: 20px; }
  /* sectie-ritme */
  .section { padding-block: 44px; }
  .surface, .tint { padding-block: 44px; }
  .two-col, .contact-grid { gap: 32px; }
  .section-head { margin-bottom: 20px; }
  .centered { margin-bottom: 20px; }
  .h2 { font-size: clamp(24px, 6.5vw, 28px); }
  .page-head { padding-top: 40px; padding-bottom: 24px; gap: 14px; }
  .hero { padding-block: 40px 36px; gap: 24px; }
  .hero-text { gap: 18px; }
  .hero-media .photo { aspect-ratio: 4 / 3; }
  .band { padding: 28px 22px; gap: 20px; }
  .band .btn { width: 100%; justify-content: center; }
  .service-row { padding: 22px 0; gap: 16px; }
  .mini-link { padding: 14px 16px; }
  .card-form { padding: 20px; }
  .form-foot .btn { width: 100%; justify-content: center; }
  .footer-brand img { height: 44px; }
  .site-footer { padding-top: 40px; }
  .value-row { padding: 18px 0; }
}

/* team */
.avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-family: var(--display); font-weight: 700; letter-spacing: 0.04em; color: var(--bg); background: linear-gradient(135deg, var(--lime), var(--green)); flex-shrink: 0; }
.avatar-lg { width: 76px; height: 76px; font-size: 24px; }
.avatar-md { width: 56px; height: 56px; font-size: 18px; }
.team-grid { gap: 20px; }
.team-card { display: flex; flex-direction: column; gap: 16px; padding: 28px; }
.team-card p { font-size: 15px; }
.team-head { display: flex; align-items: center; gap: 18px; }
.team-head .badge { margin-left: auto; align-self: flex-start; }
.badge-sm { padding: 4px 10px; font-size: 11px; }
.team-role { font-size: 14.5px; font-weight: 600; color: var(--lime); }
.team-now strong { color: #fff; font-weight: 600; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.tag { display: inline-block; padding: 5px 11px; border: 1px solid var(--line); border-radius: 20px; font-size: 12.5px; color: var(--text); background: rgba(255,255,255,0.02); }
.team-tile { display: flex; flex-direction: column; gap: 10px; padding: 22px; color: var(--text); }
.team-tile strong { color: #fff; font-family: var(--display); font-size: 17px; }
.team-tile:hover { transform: translateY(-3px); background: rgba(255,255,255,0.05); color: var(--text); }
@media (max-width: 800px) {
  .team-grid, .grid-2.team-grid { grid-template-columns: 1fr; }
  .team-card { padding: 20px; }
  .team-head { flex-wrap: wrap; gap: 14px; }
  .team-head .badge { margin-left: 0; }
  .avatar-lg { width: 60px; height: 60px; font-size: 20px; }
  .team-tile { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px 14px; }
  .team-tile .avatar { margin-right: 4px; }
  .team-tile strong { flex: 1 1 auto; }
  .team-tile .small { flex-basis: 100%; padding-left: 70px; }
  .section-head .btn { width: 100%; justify-content: center; }
}

/* ===== Readiness Check ===== */
.wizard { max-width: 860px; margin-inline: auto; }
.wiz-intro, .wiz-stage { display: flex; flex-direction: column; gap: 24px; padding: clamp(24px, 4vw, 44px); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.wiz-dims { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.wiz-dim { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; color: var(--text); display: flex; gap: 10px; align-items: flex-start; }
.wiz-dim b { font-family: var(--display); color: var(--lime); font-weight: 600; }
.wiz-meta { display: flex; flex-wrap: wrap; gap: 16px 28px; font-size: 14px; color: var(--muted); }
.wiz-meta span { display: inline-flex; align-items: center; gap: 8px; }
.wiz-head { display: flex; flex-direction: column; gap: 14px; }
.wiz-progress { display: flex; align-items: center; gap: 14px; }
.wiz-bar { flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.08); overflow: hidden; display: block; }
.wiz-fill { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--green), var(--lime)); transition: width .6s cubic-bezier(.2,.65,.2,1); }
.wiz-count { white-space: nowrap; }
.wiz-q { font-size: clamp(22px, 2.4vw, 30px); }
.wiz-options { display: flex; flex-direction: column; gap: 10px; }
.wiz-opt { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; font: inherit; font-size: 16px; color: #fff; background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; cursor: pointer; transition: border-color .2s ease, background .2s ease; min-height: 56px; }
.wiz-opt:hover { border-color: var(--line-strong); background: rgba(255,255,255,0.05); }
.wiz-opt.selected { border-color: var(--lime); background: rgba(208,230,165,0.08); }
.wiz-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-strong); flex-shrink: 0; position: relative; }
.wiz-opt.selected .wiz-dot { border-color: var(--lime); }
.wiz-opt.selected .wiz-dot::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--lime); }
.wiz-nav { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--line); }
.wiz-nav .btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.wiz-result-top { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 28px; align-items: center; }
.wiz-ring { position: relative; width: 150px; height: 150px; }
.wiz-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 10; }
.ring-fg { fill: none; stroke: var(--lime); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(.2,.65,.2,1); }
.wiz-ring-val { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.wiz-ring-val strong { font-family: var(--display); font-size: 40px; font-weight: 700; color: #fff; line-height: 1; }
.wiz-ring-val span { font-size: 12px; color: var(--muted); }
.wiz-bars { display: flex; flex-direction: column; gap: 12px; }
.wiz-barrow { display: grid; grid-template-columns: 220px minmax(0, 1fr) 40px; gap: 14px; align-items: center; font-size: 15px; }
.wiz-barlabel { color: #fff; font-weight: 500; }
.wiz-barval { font-family: var(--display); font-weight: 600; color: var(--lime); text-align: right; }
.wiz-advice { display: flex; flex-direction: column; gap: 14px; }
.wiz-score-chip { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 30px; padding: 0 10px; border-radius: 15px; border: 1px solid var(--line-strong); font-family: var(--display); font-weight: 600; color: var(--lime); font-size: 14px; }
.wiz-form { gap: 16px; }
.wiz-form .form textarea { font-family: var(--font); font-size: 14px; line-height: 1.5; }
.wiz-fallback { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--text); }
.check-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px; }
.check-card { display: flex; flex-direction: column; gap: 12px; padding: 28px; color: var(--text); }
.check-card:hover { transform: translateY(-3px); background: rgba(255,255,255,0.05); color: var(--text); }
.check-card .h3 { font-size: 22px; }
.readiness-block { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.readiness-block .actions { flex-direction: column; align-items: stretch; }
.readiness-block .actions .btn { justify-content: space-between; }
.callout { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--tint); flex-wrap: wrap; }
.callout strong { color: #fff; }
@media (max-width: 800px) {
  .wiz-dims { grid-template-columns: 1fr; }
  .wiz-result-top { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .wiz-result-top .stack { align-items: center; }
  .wiz-barrow { grid-template-columns: 1fr 44px; }
  .wiz-barrow .wiz-bar { grid-column: 1 / -1; order: 3; }
  .check-cards, .readiness-block, .wiz-advice .grid-2 { grid-template-columns: 1fr; }
  .wiz-intro, .wiz-stage { padding: 20px; }
  .wiz-nav .btn { flex: 1; justify-content: center; }
}

/* v2: preview, rapport, positionering */
.wiz-sub { font-size: clamp(22px, 2.4vw, 30px); }
.wiz-second { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; font-size: 15px; }
.wiz-second strong { color: #fff; }
.wiz-cta { gap: 14px; border-color: var(--line-strong); background: rgba(208,230,165,0.06); }
.wiz-cta .btn { align-self: flex-start; }
.wiz-leadform { margin-top: 6px; }
.wiz-leadform[hidden], .wiz-form[hidden], .wiz-cta button[hidden] { display: none !important; }
.wiz-discuss { display: flex; flex-direction: column; gap: 14px; padding-top: 24px; border-top: 1px solid var(--line); }
.wiz-positioning { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line); }
.wiz-pos { padding: 16px; border: 1px solid var(--line); border-radius: 12px; font-size: 14px; }
.wiz-pos strong { display: block; color: #fff; margin-bottom: 6px; font-family: var(--display); }
.wiz-pos.now { border-color: var(--lime); }
.wiz-report-head { display: flex; flex-direction: column; gap: 10px; }
.wiz-report-head .badge { align-self: flex-start; }
.wiz-section { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }
.wiz-dimcard { gap: 12px; }
.wiz-dimhead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.wiz-rank { margin-left: auto; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lime); }
.wiz-findings { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.wiz-prio { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-top: 1px solid var(--line); }
.wiz-prio:first-of-type { border-top: 0; padding-top: 0; }
.wiz-prio strong { color: #fff; }
@media (max-width: 800px) { .wiz-positioning .grid-3, .wiz-section .grid-3 { grid-template-columns: 1fr; } .wiz-rank { margin-left: 0; } }

/* 1. homepage: drie foto's gelijk groot */
.photo-strip { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 1100px) { .photo-strip { grid-template-columns: 1fr 1fr 1fr; } .photo-strip .photo:first-child { grid-column: auto; } }
/* 3. footer: logo in oorspronkelijke verhouding */
.footer-brand img { height: 58px; width: auto; max-width: 100%; align-self: flex-start; object-fit: contain; }
@media (max-width: 700px) { .footer-brand img { height: 44px; } }
/* 5/6. profielen met meerdere alinea's */
.team-card .team-bio { display: flex; flex-direction: column; gap: 10px; }
.team-tagline { color: var(--lime); font-weight: 600; }

/* v3 */
@font-face { font-family: 'Aquatico'; src: url(../fonts/Aquatico.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
.brand { font-family: 'Aquatico', 'Oxanium', sans-serif; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 400; }
.logo-compact { font-family: 'Aquatico', 'Oxanium', sans-serif; font-weight: 400; font-size: 16px; letter-spacing: 0.16em; }
.logo-compact em { font-weight: 400; }
:root { --display: 'Oxanium', 'Exo 2', 'Segoe UI', Helvetica, Arial, sans-serif; }
.h1, .h2, .h3 { letter-spacing: 0; }
.tagline { font-weight: 300; }
.stack > .badge, .hero-text > .badge { align-self: flex-start; }
.logo-compact { font-family: 'Oxanium', 'Exo 2', 'Segoe UI', sans-serif; font-weight: 300; font-size: 17px; letter-spacing: 0.2em; text-transform: uppercase; color: #fff; }
.logo-compact em { font-style: normal; font-weight: 300; color: var(--lime); letter-spacing: 0.28em; }
html, body { overflow-x: clip; }
.qa { min-width: 0; } .qa > div { min-width: 0; }
.q { color: var(--lime); font-weight: 600; }
.center-text { text-align: center; }
.risk-card .eyebrow { margin-bottom: 14px; }
.step { position: relative; }
.step-num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--lime); font-family: var(--display); font-weight: 700; font-size: 15px; }
.qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--line); }
.qa-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.qa p { font-size: 14.5px; }
.card-main .q { font-size: 15px; }
.band-rhadix { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; }
.band-rhadix .band-text { max-width: none; gap: 14px; }
.band-photo { aspect-ratio: 4 / 3; box-shadow: none; }
.partner-card { gap: 14px; }
.mini-link.path { justify-content: flex-start; }
.mini-link.path .stack { flex: 1; }
.mini-link.path strong { color: #fff; }
.insight { color: var(--text); }
.insight:hover { transform: translateY(-3px); background: rgba(255,255,255,0.05); color: var(--text); }
.expertise-grid .card-pad p { font-size: 15px; }
.main-grid .card-body p { font-size: 14px; }
.main-grid .h3 { font-size: 18px; }
@media (max-width: 1024px) {
  .band-rhadix { grid-template-columns: 1fr; }
  .band-photo { display: none; }
}
@media (max-width: 800px) {
  .qa { grid-template-columns: 1fr; }
  .grid-3.steps, .grid-2.steps { grid-template-columns: 1fr; }
  .card-main { flex-direction: column; }
  .card-main img { width: 100%; flex: none; aspect-ratio: 16 / 9; border-right: 0; border-bottom: 1px solid var(--line); }
  .card-main .card-body .icon-box { display: inline-flex; }
}

/* ===== beleving (Apple-achtig, rustig) ===== */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s cubic-bezier(.2,.65,.2,1), transform .9s cubic-bezier(.2,.65,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: .12s; } .js .reveal.d2 { transition-delay: .24s; } .js .reveal.d3 { transition-delay: .36s; } .js .reveal.d4 { transition-delay: .5s; }
.js .stagger > * { opacity: 0; transform: translateY(18px); transition: opacity .8s cubic-bezier(.2,.65,.2,1), transform .8s cubic-bezier(.2,.65,.2,1); }
.js .stagger.in > * { opacity: 1; transform: none; }
.js .stagger.in > :nth-child(2) { transition-delay: .1s; } .js .stagger.in > :nth-child(3) { transition-delay: .2s; } .js .stagger.in > :nth-child(4) { transition-delay: .3s; } .js .stagger.in > :nth-child(5) { transition-delay: .4s; }

/* header: transparant bovenaan, vervaagd bij scrollen */
.js .site-header { background: transparent; border-bottom-color: transparent; transition: background .35s ease, border-color .35s ease; }
.js .site-header.scrolled { background: rgba(15,23,18,0.82); border-bottom-color: var(--line); }

/* opening */
.hero-full { min-height: calc(100vh - 72px); display: flex; flex-direction: column; justify-content: center; padding-top: clamp(32px, 6vw, 72px); }
.hero-trees-big { right: auto; left: 50%; top: 50%; bottom: auto; width: min(70vw, 760px); transform: translate(-50%, -58%); opacity: 0.07; will-change: transform; }
.hero-full .hero-center-inner { gap: 24px; }
.hero-full .h1.display { font-size: clamp(40px, 5.6vw, 76px); max-width: 1000px; }

/* micro-interacties */
.btn .ic { transition: transform .25s ease; }
.btn:hover .ic { transform: translateX(3px); }
.card-service { overflow: hidden; }
.card-service img { transition: transform .6s cubic-bezier(.2,.65,.2,1); }
.card-service:hover img { transform: scale(1.03); }

/* sticky verhaal */
.story { padding-block: clamp(40px, 6vw, 80px); background: linear-gradient(180deg, var(--bg2) 0%, var(--bg) 18%, var(--bg) 82%, var(--bg2) 100%); }
.story-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.story-sticky { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 28px; padding: 32px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.story-nodes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; position: relative; }
.story-nodes::before { content: ''; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 2px; background: var(--line); }
.story-nodes::after { content: ''; position: absolute; left: 13px; top: 14px; width: 2px; height: 0; background: var(--lime); transition: height .7s cubic-bezier(.2,.65,.2,1); }
.story[data-active="2"] .story-nodes::after { height: 33%; } .story[data-active="3"] .story-nodes::after { height: 66%; } .story[data-active="4"] .story-nodes::after { height: calc(100% - 28px); }
.node { display: flex; align-items: center; gap: 18px; padding: 14px 0; position: relative; }
.node-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--bg); flex-shrink: 0; transition: background .5s ease, border-color .5s ease, box-shadow .5s ease; }
.node-label { font-family: var(--display); font-weight: 600; font-size: 22px; color: var(--muted); transition: color .5s ease; }
.story[data-active="1"] .node:nth-child(-n+1) .node-dot, .story[data-active="2"] .node:nth-child(-n+2) .node-dot, .story[data-active="3"] .node:nth-child(-n+3) .node-dot, .story[data-active="4"] .node:nth-child(-n+4) .node-dot { background: var(--lime); border-color: var(--lime); }
.story[data-active="1"] .node:nth-child(1) .node-dot, .story[data-active="2"] .node:nth-child(2) .node-dot, .story[data-active="3"] .node:nth-child(3) .node-dot, .story[data-active="4"] .node:nth-child(4) .node-dot { box-shadow: 0 0 0 8px rgba(208,230,165,0.15); }
.story[data-active="1"] .node:nth-child(-n+1) .node-label, .story[data-active="2"] .node:nth-child(-n+2) .node-label, .story[data-active="3"] .node:nth-child(-n+3) .node-label, .story[data-active="4"] .node:nth-child(-n+4) .node-label { color: #fff; }
.story-steps { display: flex; flex-direction: column; }
.story-step { display: flex; flex-direction: column; gap: 16px; min-height: 60vh; justify-content: center; padding-block: 32px; }
.story-step .h2 { font-size: clamp(28px, 3vw, 42px); }
.story-hint { padding-top: 8px; border-top: 1px solid var(--line); }

/* lichte sectie + zachte overgangen */
.fade { height: 140px; }
.fade-to-light { background: linear-gradient(180deg, var(--bg) 0%, #f4f6ef 100%); }
.fade-to-dark { background: linear-gradient(180deg, #f4f6ef 0%, var(--bg) 100%); }
.light { background: #f4f6ef; color: #3f463a; padding-block: 24px clamp(56px, 7vw, 88px); --surface: #ffffff; --line: #dfe4d4; --line-strong: #c9d1b9; --muted: #7a8272; --text: #3f463a; --tint: #eef4e3; }
.light .h1, .light .h2, .light .h3, .light strong { color: #1f2419; }
.light .card { background: #fff; box-shadow: 0 10px 30px rgba(31,36,25,0.06); }
.light .step-num { color: #4f6e1c; border-color: #c9d1b9; background: #eef4e3; }
.light .eyebrow { color: #4f6e1c; }
.light .centered { margin-bottom: 36px; }

/* AI-sectie met netwerk van datapunten */
.ai-section { position: relative; overflow: hidden; padding-block: clamp(80px, 12vw, 160px); background: var(--bg); }
.ai-net { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: .9; }
.ai-section::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 55% 70% at 30% 50%, rgba(15,23,18,0.92) 0%, rgba(15,23,18,0.55) 55%, rgba(15,23,18,0) 100%); }
.ai-inner { position: relative; z-index: 1; max-width: 640px; }
.h2.xl { font-size: clamp(30px, 3.4vw, 46px); }

@media (max-width: 1024px) {
  .story-grid { grid-template-columns: 1fr; }
  .story-sticky { position: relative; top: auto; }
  .story-step { min-height: auto; padding-block: 28px; }
  .story-hint { display: none; }
}
@media (max-width: 800px) {
  .hero-full { min-height: auto; }
  .hero-trees-big { display: block; width: 90vw; opacity: .06; top: 38%; }
  .fade { height: 80px; }
  .ai-section::after { background: linear-gradient(180deg, rgba(15,23,18,0.85), rgba(15,23,18,0.85)); }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .stagger > * { opacity: 1; transform: none; transition: none; }
  .story-nodes::after, .node-dot, .node-label, .card-service img, .btn .ic { transition: none; }
  .hero-trees-big { transform: translate(-50%, -58%) !important; }
}

/* menu zonder JS: checkbox */
.menu-toggle { display: none; }
.menu-btn { display: none; }
@media (max-width: 800px) {
  .menu-btn { display: inline-flex; }
  .menu-toggle:checked ~ .nav { display: flex; flex-direction: column; align-items: stretch; gap: 4px; position: absolute; left: 0; right: 0; top: 64px; background: var(--panel); border-bottom: 1px solid var(--line); padding: 12px var(--pad) 20px; box-shadow: 0 24px 40px rgba(0,0,0,0.4); z-index: 30; }
  .menu-toggle:checked ~ .nav a { padding: 12px 4px; font-size: 17px; color: #fff; border-bottom: 1px solid var(--line); }
  .menu-toggle:checked ~ .menu-btn .ic-menu { display: none; }
  .menu-toggle:checked ~ .menu-btn .ic-close { display: block; }
}

/* Testversie-banner — verschijnt alleen op rhoderlanden-test.rhadix.nl */
.testbanner { position: sticky; top: 0; z-index: 90; background: #b45309; color: #fff;
  font-size: 13px; line-height: 1.45; padding: 9px 18px; text-align: center; }
.testbanner strong { letter-spacing: 0.06em; text-transform: uppercase; }
@media (max-width: 800px) { .testbanner { font-size: 12px; padding: 8px 12px; } }

/* ── Artikelen ───────────────────────────────────────────────────────────────
   Leesbare tekstkolom voor Inzichten. Maximaal ongeveer 68 tekens per regel;
   daarboven wordt lopende tekst vermoeiend om te lezen. */
.artikel { max-width: 68ch; display: flex; flex-direction: column; gap: 18px; }
.artikel > h2 { margin: 18px 0 0; font-family: var(--display); font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.25; font-weight: 600; color: #fff; }
.artikel > h3 { margin: 10px 0 0; font-family: var(--display); font-size: 19px; line-height: 1.35;
  font-weight: 600; color: #fff; }
.artikel > p { margin: 0; }
.artikel > ul, .artikel > ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.artikel blockquote { margin: 6px 0; padding: 14px 18px; border-left: 3px solid var(--lime);
  background: var(--tint); border-radius: 0 10px 10px 0; font-size: 17px; }
.artikel blockquote p { margin: 0; }
.artikel figure { margin: 6px 0; }
.artikel figure img { width: 100%; border-radius: 12px; display: block; }
.artikel figcaption { margin-top: 8px; font-size: 13px; color: var(--muted); }
.artikel a { text-decoration: underline; text-underline-offset: 3px; }

/* Meta-regel en label boven een artikel */
.artikel-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
/* De scheidingsstip hoort bij het item erachter, niet als los flex-item.
   Anders blijft hij bij het afbreken aan het regeleinde hangen — zichtbaar
   op mobiel zodra er datum, auteur én leestijd naast elkaar staan. */
.artikel-meta > span:not(.tag)::before { content: "·"; margin-right: 8px; }
.artikel-meta .tag { padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--lime); }

/* ── Inzichten-tijdlijn ──────────────────────────────────────────────────────
   Chronologisch, nieuwste bovenaan. Op een breed scherm staat de datum in een
   eigen kolom links van de lijn; op een smal scherm zakt hij boven het item,
   want twee kolommen naast elkaar worden daar onleesbaar smal. */
.tijdlijn { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.tijdlijn-item {
  display: grid;
  grid-template-columns: 170px 1px minmax(0, 1fr);
  column-gap: 28px;
  padding-bottom: 36px;
  position: relative;
}
.tijdlijn-item:last-child { padding-bottom: 0; }

/* De verticale lijn is de middelste kolom; bij het laatste item stopt hij. */
.tijdlijn-item::before {
  content: ""; grid-column: 2; grid-row: 1 / -1;
  width: 1px; background: var(--line); justify-self: center;
}
.tijdlijn-item:last-child::before { height: 22px; }

/* De stip op de lijn, uitgelijnd op de eerste regel van de datum. */
.tijdlijn-item::after {
  content: ""; position: absolute; left: 170px; top: 7px;
  width: 9px; height: 9px; margin-left: -4px;
  border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px var(--bg);
}

.tijdlijn-datum {
  grid-column: 1; text-align: right; padding-top: 1px;
  font-size: 14px; color: var(--muted); white-space: nowrap;
}
.tijdlijn-inhoud { grid-column: 3; display: flex; flex-direction: column; gap: 10px; }
.tijdlijn-inhoud > * { margin: 0; }
.tijdlijn-inhoud h2 a { color: inherit; text-decoration: none; }
.tijdlijn-inhoud h2 a:hover { color: var(--lime); }

.tijdlijn-labels { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tijdlijn-labels .categorie {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--lime); font-family: var(--display); font-weight: 600;
}
.tijdlijn-labels .tag {
  padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 12px; color: var(--muted);
}

@media (max-width: 800px) {
  .tijdlijn-item {
    grid-template-columns: 1px minmax(0, 1fr);
    column-gap: 18px; padding-bottom: 30px;
  }
  .tijdlijn-item::before { grid-column: 1; }
  .tijdlijn-item::after { left: 0; top: 6px; }
  .tijdlijn-datum { grid-column: 2; text-align: left; margin-bottom: 8px; }
  .tijdlijn-inhoud { grid-column: 2; }
}

/* Bescheiden afsluiting onder een artikel — een notitie, geen banner. */
.artikel-cta { max-width: 68ch; display: flex; flex-direction: column; gap: 10px;
  padding: 18px 20px; border: 1px solid var(--line); border-left: 3px solid var(--lime);
  border-radius: 0 12px 12px 0; background: var(--tint); }
.artikel-cta p { margin: 0; font-size: 15px; }

/* ════════════════════════════════════════════════════════════════════════════
   Inzicht-artikelpagina — rustige leespagina

   Alles hieronder is gescoped op `.page > article`. Die combinatie komt
   uitsluitend op een artikelpagina voor; op over-ons staat <article> genest in
   een raster en blijft dus buiten schot. Er is daarom geen enkele wijziging in
   de HTML nodig en geen andere pagina verandert mee.

   De pagina las als een lange rij losse alinea's. Dat kwam door twee dingen:
   de tekstkolom was smal (68ch, circa 570px) en de ruimte tussen alinea's was
   even groot als die vóór een tussenkop, waardoor er geen ritme ontstond.
   ════════════════════════════════════════════════════════════════════════════ */

/* Eén leesbreedte voor kop, tekst en afsluiting, zodat alles op één lijn
   begint. 800px ligt midden in de gevraagde 760-820. */
.page > article .page-head,
.page > article .artikel,
.page > article .artikel-auteur,
.page > article .artikel-cta {
  max-width: 800px;
  /* De page-head is zelf een `.wrap` en wordt door `margin-inline: auto`
     gecentreerd zodra hij smaller is dan de wrap. De tekst en de beeldstrook
     zitten ín een wrap en zouden links blijven staan — dan begint de titel
     200px verder naar rechts dan de tekst eronder. Daarom centreren we alle
     drie, zodat ze één kolom vormen. */
  margin-inline: auto;
}

/* De ruimte onder de metagegevens wordt hier bepaald in plaats van door de
   algemene page-head (56px). Staat er een beeldstrook, dan is dit het gat
   tussen de metagegevens en het beeld; staat die er niet, dan is het het gat
   tot de tekst. In beide gevallen even ruim. */
.page > article .page-head { padding-bottom: 45px; }

/* ── Boven het artikel ─────────────────────────────────────────────────── */

/* De intro mag duidelijk anders klinken dan de bodytekst: groter, lichter van
   kleur en met iets meer lucht. */
.page > article .page-head .lead {
  max-width: 800px;
  font-size: clamp(18px, 1.5vw, 20.5px);
  line-height: 1.62;
  color: var(--ink);
}

/* Datum, leestijd en tags zijn bijzaak: compacter, zodat ze niet met de titel
   en de intro concurreren. */
.page > article .artikel-meta { gap: 8px; font-size: 13px; }
.page > article .artikel-meta .tag { padding: 2px 9px; font-size: 11px; }

/* Ondertekening onder het artikel. Los van de regel bovenaan: die is een
   byline met datum en leestijd, dit is de afzender. Een artikel kan namens
   Rhoderlanden Groep zijn of op naam van een persoon; de aanhef verschilt,
   de opmaak niet. */
.artikel-auteur { display: flex; flex-direction: column; gap: 2px;
  padding-top: 18px; border-top: 1px solid var(--line); }
.artikel-auteur span { font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); }
.artikel-auteur strong { font-weight: 500; font-size: 17px; color: var(--text); }

/* ── De tekst zelf ─────────────────────────────────────────────────────── */

/* Van een flexkolom met één vaste tussenruimte naar gewone marges, want alleen
   zo kan de ruimte vóór een tussenkop groter zijn dan die tussen alinea's. */
.page > article .artikel { display: block; max-width: 800px; }

.page > article .artikel > p {
  margin: 0 0 13px;
  line-height: 1.78;
}

.page > article .artikel > ul,
.page > article .artikel > ol {
  margin: 4px 0 20px;
  padding-left: 22px;
  display: block;
}
.page > article .artikel > ul li,
.page > article .artikel > ol li { margin-bottom: 7px; line-height: 1.7; }

/* Ruim vóór een tussenkop, kort erna: dat maakt zichtbaar waar een nieuw
   onderwerp begint. De accentkleur doet de rest, dus de koppen hoeven niet
   groot te zijn. */
.page > article .artikel > h2 {
  margin: 48px 0 14px;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.3;
  letter-spacing: 0.005em;
  color: var(--lime);
}
.page > article .artikel > h3 {
  margin: 34px 0 10px;
  font-size: 18px;
  color: var(--lime);
}

/* Losse kernzin, zoals "Een getal is nog geen waarheid." Iets groter dan de
   bodytekst en in de accentkleur — nadrukkelijk geen kop, kader, vlak of
   citaat. De extra ruimte eromheen laat hem op zichzelf staan. */
.page > article .artikel > .lead {
  max-width: none;
  margin: 26px 0 24px;
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.55;
  font-weight: 500;
  color: var(--lime);
}

/* Overige bouwstenen uit het sjabloon houden hun eigen ritme. */
.page > article .artikel blockquote { margin: 22px 0; }
.page > article .artikel figure { margin: 24px 0; }

/* Geen loze ruimte aan de uiteinden van de kolom. */
.page > article .artikel > :first-child { margin-top: 0; }
.page > article .artikel > :last-child { margin-bottom: 0; }

/* ── Smal scherm ───────────────────────────────────────────────────────── */

@media (max-width: 800px) {
  /* De breedtebegrenzing doet hier niets meer; `.wrap` houdt de zijmarge al
     aan via --pad (minimaal 20px). De tekst gebruikt dus vrijwel de volle
     breedte, met wat minder ruimte rond de koppen. */
  .page > article .artikel > h2 { margin: 36px 0 12px; }
  .page > article .artikel > h3 { margin: 26px 0 9px; }
  .page > article .artikel > .lead { margin: 20px 0 18px; }
  .page > article .page-head .lead { font-size: 17.5px; }
}

/* ── Beeldstrook bij een Inzicht-artikel ─────────────────────────────────────
   Een smalle visuele strook tussen de metagegevens en de tekst, ongeveer zo
   hoog als de menubalk. Geen openingsbeeld en geen beeld in de lopende tekst:
   allebei namen ze de pagina over.

   De hoogte staat op de container, niet op het beeld, en er komt nergens een
   `aspect-ratio` aan te pas. De <img> vult die container volledig en `cover`
   bepaalt welk deel zichtbaar is. Daarmee hangt de zichtbare hoogte nergens af
   van de intrinsieke 1600x900 van het bestand — precies de afhankelijkheid die
   eerder in Safari een veel te hoog beeld opleverde. */

/* De sectie bepaalt de ruimte rondom: 45px erboven komt van de page-head,
   50px eronder van deze sectie. De tekstsectie eronder heeft `pt-0`, dus die
   telt er niet bij op. */
.page > article .strooksectie { padding-top: 0; padding-bottom: 50px; }

/* De tekstsectie eronder draagt `pt-0`, maar op smal scherm zet een latere
   `.section`-regel de bovenpadding alsnog op 44px — gelijke specificiteit,
   dus de laatste wint. Hier expliciet uitzetten, zodat het gat onder de strook
   op elke breedte 50px is en niet ineens 94. */
.page > article .strooksectie + section { padding-top: 0; }

.page > article .artikel-strook {
  max-width: 800px;             /* gelijk aan de artikelkolom */
  height: 110px;                /* vaste containerhoogte */
  margin-block: 0;              /* <figure> heeft van zichzelf 1em boven en onder */
  margin-inline: auto;          /* zelfde kolom als de titel en de tekst */
  overflow: hidden;
  border-radius: 12px;
  background: var(--panel);     /* rustige achtergrond zolang het beeld laadt */
}
.page > article .artikel-strook img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  border-radius: 0;             /* de container rondt al af */
}

/* Per artikel bij te sturen wanneer het midden niet het beste deel toont. */
.page > article .artikel-strook.uitsnede-hoog img { object-position: center 30%; }
.page > article .artikel-strook.uitsnede-laag img { object-position: center 72%; }

/* Beeld in de lopende tekst blijft mogelijk via het sjabloon; die houdt 16:9. */
.page > article .artikel figure { margin: 30px 0; }
.page > article .artikel figure img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
  background: var(--panel);
}
.page > article .artikel figcaption {
  margin-top: 9px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}
.page > article .artikel figure.eigen-verhouding img { aspect-ratio: auto; object-fit: contain; }

@media (max-width: 1024px) {
  .page > article .artikel-strook { height: 100px; }
}

@media (max-width: 800px) {
  .page > article .artikel figure { margin: 24px 0; }
}

@media (max-width: 600px) {
  .page > article .artikel-strook { height: 90px; }
}