.residents-hero { background: #f2f5f8; padding: 64px 0; }
.residents-hero__grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr); gap:56px; align-items:center; }
.residents-hero__copy h1 { margin-bottom:24px; color:var(--vv-blue-dark); }
.residents-hero__intro { max-width:720px; font-size:clamp(19px,2vw,23px); line-height:1.55; }
.residents-hero__actions, .residents-cta__actions { display:flex; align-items:center; gap:20px; margin-top:28px; }
.residents-emergency { margin:0; font-size:14px; line-height:1.4; color:var(--vv-muted); }
.residents-emergency strong { display:block; color:var(--vv-blue-dark); }
.residents-hero__image { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.residents-section__grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.9fr); gap:56px; align-items:start; }
.residents-list { display:grid; gap:16px; padding:0; margin:28px 0 0; list-style:none; }
.residents-list li { position:relative; padding-left:30px; }
.residents-list li::before { position:absolute; left:0; top:.15em; content:'✓'; color:var(--vv-orange); font-weight:700; }
.residents-steps { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:32px; counter-reset:resident-step; }
.residents-step { position:relative; min-height:180px; padding:28px 24px 24px 72px; border:1px solid var(--vv-border); border-radius:12px; background:#fff; counter-increment:resident-step; }
.residents-step::before { position:absolute; left:24px; top:26px; display:grid; width:34px; height:34px; place-items:center; border-radius:50%; color:#fff; background:var(--vv-blue); content:counter(resident-step); font-weight:700; }
.residents-step h3 { font-size:21px; margin-bottom:10px; }
.residents-after { background:var(--vv-light); }
.residents-after__inner { max-width:900px; }
.residents-privacy .privacy-grid { margin-top:32px; }
.residents-cta { padding:48px 0; color:#fff; background:var(--vv-orange); }
.residents-cta__inner { display:flex; align-items:center; justify-content:space-between; gap:36px; }
.residents-cta h2 { max-width:720px; margin:0; }
.residents-cta .residents-emergency { color:#fff; opacity:.92; }
.residents-cta .residents-emergency strong { color:#fff; }
@media(max-width:980px){.residents-hero__grid,.residents-section__grid{grid-template-columns:1fr}.residents-hero__image{max-height:460px}.residents-cta__inner{align-items:flex-start;flex-direction:column}}
@media(max-width:767px){.residents-hero{padding:42px 0}.residents-steps{grid-template-columns:1fr}.residents-hero__actions,.residents-cta__actions{align-items:flex-start;flex-direction:column}.residents-cta__actions{width:100%}.residents-cta__actions .button{width:100%}.residents-step{min-height:0}.residents-hero__grid,.residents-section__grid{gap:32px}}

/* 2026-08-02 – vervolgpagina in lijn met homepage */
/* Op de lichte compacte hero gebruiken we dezelfde vaste donkerblauwe header als de homepage. */
body:has(.residents-hero) .site-header {
  color: #fff;
  background: var(--vv-blue-dark);
  backdrop-filter: none;
}

body:has(.residents-hero) .site-logo img {
  width: 280px;
}

/* Compactere typografie voor de hero van de vervolgpagina. */
.residents-hero__copy h1 {
  margin-bottom: 24px;
  font-size: clamp(42px, 4.1vw, 58px);
  line-height: 1.08;
}

.residents-hero__intro {
  max-width: 720px;
  margin-bottom: 0;
  font-size: 20px;
  line-height: 1.55;
}

/* Eén vaste afstand tussen elke sectiekop en de eerste tekst eronder. */
.residents-section__grid h2,
.app-section > .site-container > h2,
.residents-after h2,
.residents-privacy > .site-container > h2 {
  margin-bottom: 24px;
}

/* 'Wat gebeurt er daarna?' links uitlijnen met de overige pagina-inhoud. */
.residents-after__inner {
  width: min(var(--content-width), calc(100% - 40px));
  max-width: none;
  margin-inline: auto;
}

.residents-after__inner p {
  max-width: 900px;
  margin-bottom: 0;
}

@media (max-width: 767px) {
  body:has(.residents-hero) .site-logo img {
    width: 190px;
  }

  .residents-hero__copy h1 {
    font-size: clamp(38px, 10vw, 48px);
  }

  .residents-hero__intro {
    font-size: 18px;
  }

  .residents-after__inner {
    width: min(100% - 28px, var(--content-width));
  }
}

/* 2026-08-02 – gelijke maatvoering bovenste twee secties */
.residents-hero {
  padding-top: 104px;
  padding-bottom: 64px;
}

.residents-hero__grid,
.residents-section__grid {
  grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr);
  gap: 56px;
}

.residents-hero__copy h1,
.residents-section__grid h2 {
  font-size: clamp(36px, 3.2vw, 48px);
  line-height: 1.12;
}

.residents-hero__image,
.residents-section__grid .app-section__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 0;
  height: auto;
  object-fit: cover;
  border-radius: 12px;
}

@media (max-width: 980px) {
  .residents-hero {
    padding-top: 72px;
  }
}

@media (max-width: 767px) {
  .residents-hero {
    padding-top: 52px;
    padding-bottom: 42px;
  }

  .residents-hero__copy h1,
  .residents-section__grid h2 {
    font-size: clamp(34px, 9vw, 44px);
  }
}

/* 2026-08-02 – laatste afstemming vervolgpagina Voor inwoners */
/* Eerste sectie begint op dezelfde afstand van de topbar als de tweede sectie. */
.residents-hero {
  padding-top: 84px;
}

/* Minder lege ruimte tussen de stappen en 'Wat gebeurt er daarna?'. */
.residents-after {
  padding-top: 28px;
}

/* Privacyblok exact dezelfde maatvoering als op de homepage. */
.residents-privacy .privacy-grid {
  margin-top: 0;
}

@media (max-width: 767px) {
  .residents-hero {
    padding-top: 58px;
  }

  .residents-after {
    padding-top: 20px;
  }
}

/* 2026-08-02 – één verticale sectiemaat voor de vervolgpagina.
   De compacte eerste sectie gebruikt dezelfde boven- en onderruimte als de andere hoofdsecties. */
.residents-hero,
.residents-after {
  padding-top: 84px;
  padding-bottom: 84px;
}

/* De breedte wordt door de kolom bepaald; de hoogte volgt uit de verhouding van het bronbeeld. */
.residents-hero__image,
.residents-section__grid .app-section__image {
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
}

@media (max-width: 980px) {
  .residents-hero__image,
  .residents-section__grid .app-section__image {
    max-height: none;
  }
}

@media (max-width: 767px) {
  .residents-hero,
  .residents-after {
    padding-top: 58px;
    padding-bottom: 58px;
  }
}


/* 2026-08-02 – hero-uitlijning en 'Wat gebeurt er daarna?' opgenomen in Zo werkt het */
.residents-hero__grid {
  align-items: start;
}

.app-section .residents-after {
  margin-top: 64px;
  padding: 0;
  background: transparent;
}

.app-section .residents-after h2 {
  margin-bottom: 24px;
}

.app-section .residents-after p {
  max-width: 900px;
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .app-section .residents-after {
    margin-top: 44px;
  }
}

/* 2026-08-02 – definitieve sectieruimte vanaf de onderrand van de volledige header. */
.residents-hero {
  padding: 84px 0 !important;
}

@media (max-width: 767px) {
  .residents-hero {
    padding: 58px 0 !important;
  }
}

/* 2026-08-02 – vervolgpaginaheader staat in de normale documentstroom.
   Hierdoor wordt de sectiemarge gemeten vanaf de onderrand van de volledige header,
   niet vanaf de bovenkant van de pagina achter een absoluut gepositioneerde header. */
body:has(.residents-hero) .site-header {
  position: relative;
  top: auto;
}

/* Nu de header ruimte inneemt, is de reguliere sectiemaat de echte witruimte erboven. */
.residents-hero {
  padding: 84px 0 !important;
}

@media (max-width: 767px) {
  .residents-hero {
    padding: 58px 0 !important;
  }
}

/* 2026-08-10 – Zo werkt het: stappen links, standaardfoto rechts. */
.residents-steps-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr);
  gap: 56px;
  align-items: start;
}

.residents-steps-layout__content { min-width: 0; }
.residents-steps-intro__copy { min-width: 0; }
.residents-steps-intro__copy > :last-child { margin-bottom: 0; }

.residents-steps-layout .residents-steps {
  margin-top: 28px;
}

.residents-steps--stacked {
  grid-template-columns: 1fr;
  gap: 14px;
}

.residents-steps--stacked .residents-step {
  min-height: 0;
  padding: 20px 22px 20px 68px;
}

.residents-steps--stacked .residents-step::before {
  left: 22px;
  top: 20px;
  width: 32px;
  height: 32px;
}

.residents-steps--stacked .residents-step h3 {
  margin-bottom: 6px;
  font-size: 20px;
}

.residents-steps--stacked .residents-step p {
  margin-bottom: 0;
}

/* De fotopositie houdt het standaard contentbeeld: breedte door de kolom,
   hoogte uit de eigen verhouding van het bronbestand. */
.residents-steps-intro__image {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 12px;
}

@media (max-width: 980px) {
  .residents-steps-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .residents-steps-intro__image {
    max-width: 640px;
  }
}

@media (max-width: 767px) {
  .residents-steps-layout .residents-steps { margin-top: 24px; }
  .residents-steps--stacked { gap: 12px; }
  .residents-steps--stacked .residents-step {
    padding: 18px 18px 18px 62px;
  }
  .residents-steps--stacked .residents-step::before {
    left: 18px;
    top: 18px;
  }
}

/* 2026-08-10 – Zo werkt het: geen kaartkaders; nummering als transparante outline-cirkel. */
.residents-step::before {
  box-sizing: border-box;
  color: var(--vv-blue-dark);
  background: transparent;
  border: 2px solid var(--vv-blue-dark);
}

.residents-steps--stacked .residents-step {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding-top: 12px;
  padding-right: 0;
  padding-bottom: 12px;
  padding-left: 52px;
}

.residents-steps--stacked .residents-step::before {
  left: 0;
  top: 11px;
}

@media (max-width: 767px) {
  .residents-steps--stacked .residents-step {
    padding: 11px 0 11px 50px;
  }

  .residents-steps--stacked .residents-step::before {
    left: 0;
    top: 10px;
  }
}