/* A2g — strak raster: één linkerlijn voor logo, menu, kop, kaart en secties. Foto van het midden tot de rechterrand. */
.hero-foto.hero-photo { position: relative; padding: 0; overflow: visible; }
.hero-foto.hero-photo .hero-grid { position: static; display: grid; grid-template-columns: minmax(0, 1fr); max-width: 62rem; margin: 0 auto; padding: 0 1rem; gap: 0; align-items: stretch; }
.hero-foto.hero-photo .hero-text { padding: 3rem 0 2.5rem; margin: 0; max-width: none; }
.hero-foto.hero-photo .hero-text > * { margin-left: 0; margin-right: 0; }
.hero-foto.hero-photo .eyebrow { margin-bottom: 1rem; }
.hero-foto.hero-photo h1 { font-size: 2.3rem; line-height: 1.08; margin: 0 0 1rem; max-width: 11em; }
.hero-foto.hero-photo .lead { font-size: 1.15rem; max-width: 30em; margin: 0 0 1.6rem; }
.hero-foto.hero-photo .hero-actions { margin: 0; }
.hero-foto.hero-photo .hero-visual { position: relative; max-width: none; margin: 0 -1rem; width: auto; }
.hero-foto.hero-photo .hero-fig { height: 16rem; position: relative; }
.hero-foto.hero-photo .hero-img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 55% 45%; border-radius: 0; box-shadow: none; display: block; }
.hero-foto.hero-photo .hero-fig::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #17427f 0%, rgba(23,66,127,.35) 30%, transparent 60%); pointer-events: none; }
.hero-foto.hero-photo .next { position: relative; z-index: 2; max-width: 62rem; margin: -2.5rem auto 0; margin-left: max(1rem, calc(50% - 31rem)); margin-right: max(1rem, calc(50% - 31rem)); box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.hero-foto.hero-photo .stats { max-width: 62rem; margin: 0 auto; padding: 1.25rem 1rem 2.5rem; }
.hero-foto.hero-photo .stats li { padding-left: 0; }
/* desktop: text column on the page grid, photo from the page centre to the viewport edge */
@media (min-width: 48rem) {
  .hero-foto.hero-photo .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 31rem; }
  .hero-foto.hero-photo .hero-text { padding: 4.5rem 3rem 5rem 0; }
  .hero-foto.hero-photo h1 { font-size: 3.4rem; }
  .hero-foto.hero-photo .hero-visual { position: absolute; top: 0; bottom: 0; left: 50%; right: max(1rem, calc(50% - 30rem)); width: auto; margin: 0; }
  .hero-foto.hero-photo .hero-fig { height: 100%; }
  .hero-foto.hero-photo .hero-img { border-radius: 0 0 2.5rem 2.5rem; }
  .hero-foto.hero-photo .hero-fig::after { background: linear-gradient(90deg, #17427f 0%, rgba(23,66,127,.45) 12%, transparent 38%), linear-gradient(0deg, rgba(23,66,127,.55) 0%, transparent 30%); border-radius: 0 0 2.5rem 2.5rem; }
  html[data-theme="dark"] .hero-foto.hero-photo .hero-fig::after { background: linear-gradient(90deg, #0f2a55 0%, rgba(15,42,85,.45) 12%, transparent 38%), linear-gradient(0deg, rgba(15,42,85,.55) 0%, transparent 30%); }
  .hero-foto.hero-photo .next { margin-top: -3rem; }
}
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .hero-foto.hero-photo .hero-fig::after { background: linear-gradient(180deg, #0f2a55 0%, rgba(15,42,85,.35) 30%, transparent 60%); } }
@media (prefers-color-scheme: dark) and (min-width: 48rem) { html:not([data-theme="light"]) .hero-foto.hero-photo .hero-fig::after { background: linear-gradient(90deg, #0f2a55 0%, rgba(15,42,85,.45) 12%, transparent 38%), linear-gradient(0deg, rgba(15,42,85,.55) 0%, transparent 30%); } }
/* vertical rhythm & alignment for the rest of the page */
.top-inner { padding-top: .75rem; padding-bottom: .5rem; }
.menu { padding-bottom: .75rem; margin-left: -.6em; }
.why { padding: 3.5rem 1rem 3rem; margin-top: 0; }
.why-grid { gap: 2rem; }
.sfeer { margin-top: 0; }
.sec { padding: 3.5rem 0 1.5rem; }
.sec > h2, .prog-head h2 { margin-bottom: .5em; }
.prog-head { margin-bottom: 1.5rem; }
.acts { gap: .9rem; }
.act { padding: 1.1rem 1.25rem 1.1rem 1.1rem; }
.facts, .contacts { margin-top: .25rem; }
.foot { padding: 2rem 0 2.5rem; }
/* align card box and blue band content to the same left line as the text */
.hero-foto.hero-photo .next { margin-left: max(1rem, calc(50% - 30rem)); margin-right: max(1rem, calc(50% - 30rem)); }
.why > * { max-width: 62rem; padding-left: 1rem; padding-right: 1rem; box-sizing: border-box; }
.why { padding-left: 0; padding-right: 0; }

/* right edge: everything ends on the container's right line */
.hero-foto.hero-photo .hero-text { padding-right: 3.5rem; }
.hero-foto.hero-photo .stats { padding-left: 1rem; padding-right: 1rem; }
.sfeer { padding-top: 3rem; padding-bottom: .5rem; }
.sfeer-grid { gap: 1rem; }
.prog-head { align-items: start; }
.campagne { justify-self: end; max-width: 16rem; }
.act { margin-right: 0; }
.why { margin-bottom: 0; }

.sfeer { padding-left: 0; padding-right: 0; max-width: none; }

@media (max-width: 48rem) { .hero-foto.hero-photo .hero-text { padding: 2.25rem 0 2rem; } .hero-foto.hero-photo .next { margin-top: -2.5rem; } .hero-foto.hero-photo .stats { padding: 1rem 1rem 2rem; } }
@media (max-width: 40rem) { .campagne { justify-self: start; max-width: 100%; width: 100%; } }
/* a11y: explicit hero colours on the blue ground (both modes) */
.hero-foto.hero-photo .eyebrow { color: #e6bf66; border-color: rgba(230,191,102,.6); }
.hero-foto.hero-photo .lead { color: #e2e9f5; }
.hero-foto.hero-photo h1 { color: #fff; }
/* landscape phones: side-by-side hero, no minimum height, compact paddings */
@media (orientation: landscape) and (max-height: 520px) and (min-width: 36rem) {
  .hero-foto.hero-photo .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 0; }
  .hero-foto.hero-photo .hero-text { padding: 1.5rem 2rem 1.5rem 0; }
  .hero-foto.hero-photo h1 { font-size: 1.9rem; margin-bottom: .6rem; }
  .hero-foto.hero-photo .eyebrow { margin-bottom: .5rem; font-size: .75rem; }
  .hero-foto.hero-photo .lead { font-size: 1rem; margin-bottom: 1rem; }
  .hero-foto.hero-photo .hero-visual { position: absolute; top: 0; bottom: 0; left: 52%; right: max(1rem, calc(50% - 30rem)); width: auto; margin: 0; }
  .hero-foto.hero-photo .hero-fig { height: 100%; }
  .hero-foto.hero-photo .hero-img { border-radius: 0 0 1.5rem 1.5rem; }
  .hero-foto.hero-photo .hero-fig::after { background: linear-gradient(90deg, #17427f 0%, rgba(23,66,127,.45) 12%, transparent 38%), linear-gradient(0deg, rgba(23,66,127,.55) 0%, transparent 30%); border-radius: 0 0 1.5rem 1.5rem; }
  html[data-theme="dark"] .hero-foto.hero-photo .hero-fig::after { background: linear-gradient(90deg, #0f2a55 0%, rgba(15,42,85,.45) 12%, transparent 38%), linear-gradient(0deg, rgba(15,42,85,.55) 0%, transparent 30%); }
  .hero-foto.hero-photo .next { margin-top: -1.5rem; padding: .8rem 1rem; }
  .hero-foto.hero-photo .stats { padding: .75rem 1rem 1.5rem; }
  .why { padding: 2rem 0 1.5rem; }
  .sec { padding: 2rem 0 1rem; }
}
@media (prefers-color-scheme: dark) and (orientation: landscape) and (max-height: 520px) and (min-width: 36rem) { html:not([data-theme="light"]) .hero-foto.hero-photo .hero-fig::after { background: linear-gradient(90deg, #0f2a55 0%, rgba(15,42,85,.45) 12%, transparent 38%), linear-gradient(0deg, rgba(15,42,85,.55) 0%, transparent 30%); } }