/* =========================================================
   Onze impact (publiek) — gele banner, routes, thema's en uitleg over netto-opbrengst
   ========================================================= */
.impact-hero { background: radial-gradient(ellipse at 92% 90%, #ffdcad 0, transparent 55%), linear-gradient(100deg, #fff4ae, #fff7c9); overflow: hidden; }
.impact-hero-inner { max-width: 1240px; margin: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 16px; min-height: 440px; padding: 34px 32px 20px; }
.impact-eyebrow { font-size: 13px; letter-spacing: 1.6px; font-weight: 700; margin-bottom: 10px; color: var(--bs-ink); }
.impact-hero-copy h1 { font-family: var(--bs-heading); font-size: 60px; line-height: 1.02; letter-spacing: -2.2px; color: var(--bs-ink); }
.impact-hero-copy h1 span { display: block; }
.impact-hero-copy h1 .pink { color: var(--bs-pink); }
.impact-hero-copy p { font-size: 18px; line-height: 27px; max-width: 500px; margin: 18px 0 24px; }
.impact-hero-visual { position: relative; }
.impact-hero-photo { width: 100%; height: 390px; object-fit: contain; }
.impact-doodle { position: absolute; width: 58px; left: 2%; top: 24px; transform: rotate(-15deg); pointer-events: none; }
.impact-heart { position: absolute; right: 4%; top: 14px; width: 34px; transform: rotate(12deg); }

.impact-public-page { max-width: 1240px; margin: auto; padding: 36px 32px 48px; display: flex; flex-direction: column; gap: 36px; }
.impact-title { font-family: var(--bs-heading); font-size: 32px; line-height: 1.2; letter-spacing: -1px; color: var(--bs-ink); }
.impact-sub { font-size: 17px; line-height: 25px; margin-top: 6px; }

.impact-intro { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.impact-intro p { font-size: 17px; line-height: 26px; margin-top: 10px; }
.impact-intro-card { display: flex; align-items: center; gap: 20px; background: #fdeff4; border-radius: 22px; padding: 22px 26px; }
.impact-intro-card > img { width: 54px; height: 54px; flex: none; }
.impact-intro-card ul, .impact-transparency ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.impact-intro-card li, .impact-transparency li { position: relative; padding-left: 26px; font-weight: 700; font-size: 15px; color: var(--bs-ink); }
.impact-intro-card li::before, .impact-transparency li::before { content: ''; position: absolute; left: 0; top: 2px; width: 17px; height: 17px; background: url(/assets/icons/check.svg) no-repeat center / contain; }

.impact-route-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 20px; }
.impact-route-card { position: relative; border-radius: 22px; padding: 18px 20px 22px; background: var(--tone); min-height: 290px; display: flex; flex-direction: column; }
.impact-route-card.mint { --tone: #e6f8ec; }
.impact-route-card.pink { --tone: #fdeef4; }
.impact-route-card.lilac { --tone: #ece6ff; }
.impact-route-card.yellow { --tone: #fff4d1; }
.impact-route-icon { width: 46px; height: 46px; border-radius: 50%; background: #ffffffc0; display: grid; place-items: center; position: absolute; top: 16px; left: 18px; z-index: 1; }
.impact-route-icon img { width: 24px; height: 24px; }
.impact-route-photo { width: 72%; height: 130px; object-fit: contain; align-self: flex-end; mix-blend-mode: multiply; margin-bottom: 14px; }
.impact-route-card h3 { font-size: 21px; color: var(--bs-ink); margin-bottom: 6px; }
.impact-route-card p { font-size: 14px; line-height: 21px; }

.impact-destinations { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px; align-items: center; }
.impact-destination-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 26px; }
.impact-label { font-size: 13px; color: var(--bs-muted); margin: 14px 0 10px; }
.impact-theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.impact-theme { background: #fff; border: 1px solid #efece3; border-radius: 18px; padding: 14px 16px; }
.impact-theme span { width: 38px; height: 38px; border-radius: 50%; background: var(--bs-mint); display: grid; place-items: center; margin-bottom: 8px; }
.impact-theme span img { width: 20px; height: 20px; }
.impact-theme strong { display: block; font-size: 16px; color: var(--bs-ink); }
.impact-theme p { font-size: 14px; line-height: 20px; color: var(--bs-muted); margin-top: 2px; }

.impact-info-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.impact-net-proceeds, .impact-choose { display: flex; gap: 18px; border-radius: 22px; padding: 24px 26px; }
.impact-net-proceeds { background: #fdeff4; }
.impact-choose { background: #e9f8ed; }
.impact-info-icon { width: 52px; height: 52px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; }
.impact-info-icon img { width: 26px; height: 26px; }
.impact-net-proceeds h2, .impact-choose h2, .impact-account-copy h2 { font-size: 21px; color: var(--bs-ink); margin-bottom: 8px; }
.impact-net-proceeds p, .impact-choose p, .impact-account-copy p { font-size: 15px; line-height: 23px; }
.impact-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.impact-link img { width: 16px; height: 16px; }

.impact-transparency { background: #fff; border: 1px solid #efece3; border-radius: 22px; padding: 22px 26px; }
.impact-transparency h2 { font-size: 21px; color: var(--bs-ink); margin-bottom: 14px; }
.impact-transparency ul { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 30px; }
.impact-transparency li { font-weight: 400; }

.impact-account-preview { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: center; background: #f2faf3; border-radius: 24px; padding: 26px; }
.impact-account-copy { display: flex; gap: 18px; }
.impact-account-card { background: #fff; border-radius: 18px; padding: 18px 20px; box-shadow: 0 6px 20px #0b0f1a0d; }
.impact-account-card > p { font-size: 12px; letter-spacing: 1px; font-weight: 700; color: var(--bs-muted); margin-bottom: 10px; }
.impact-account-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.impact-account-card li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--bs-ink); }
.impact-account-card li img { width: 18px; height: 18px; }

.impact-final-cta { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 16px; border-radius: 28px; padding: 34px 46px; background: radial-gradient(ellipse at 93% 90%, #ffd8a5 0, transparent 60%), linear-gradient(100deg, #fff1a0, #fff5c9); }
.impact-final-cta h2 { font-family: var(--bs-heading); font-size: 44px; line-height: 1.06; letter-spacing: -1.8px; color: var(--bs-ink); }
.impact-final-cta p { font-size: 17px; margin: 12px 0 20px; max-width: 420px; }
.impact-final-visual { position: relative; }
.impact-final-visual img:first-child { width: 100%; height: 250px; object-fit: contain; }

@media (max-width: 1100px) {
  .impact-route-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .impact-intro, .impact-destinations, .impact-account-preview { grid-template-columns: minmax(0, 1fr); }
  .impact-destination-photo { aspect-ratio: 16 / 9; }
}
@media (max-width: 760px) {
  .impact-hero-inner { display: flex; flex-direction: column; padding: 28px 20px 8px; min-height: 0; }
  .impact-hero-copy h1 { font-size: 42px; letter-spacing: -1.4px; }
  .impact-hero-copy p { font-size: 16px; line-height: 24px; }
  .impact-hero-visual { width: 100%; }
  .impact-hero-photo { height: 250px; }
  .impact-public-page { padding: 26px 20px 40px; gap: 28px; }
  .impact-title { font-size: 26px; }
  .impact-route-grid, .impact-info-grid, .impact-transparency ul, .impact-theme-grid { grid-template-columns: minmax(0, 1fr); }
  .impact-route-card { min-height: 0; }
  .impact-net-proceeds, .impact-choose, .impact-account-copy { flex-direction: column; gap: 12px; }
  .impact-final-cta { grid-template-columns: minmax(0, 1fr); padding: 28px 22px 6px; }
  .impact-final-cta h2 { font-size: 32px; letter-spacing: -1px; }
  .impact-final-cta .bs-button, .impact-destinations .bs-button { width: 100%; }
  .impact-final-visual img:first-child { height: 200px; }
}