/* Lettertype Archivo, lokaal gehost (AVG-vriendelijk, geen Google Fonts) */
@font-face { font-family: "Archivo"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
  src: url("../fonts/archivo-latin-standard-normal.woff2") format("woff2-variations");
  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: "Archivo"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
  src: url("../fonts/archivo-latin-ext-standard-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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: "Archivo"; font-style: italic; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
  src: url("../fonts/archivo-latin-standard-italic.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122; }
/* De Deur Amersfoort — gebouwd door exo31 */

:root {
  --wit: #ffffff;
  --zwart: #000000;
  --tekst: #4a4a48;
  --grijs: #5c5c59;
  --lijn: rgba(0,0,0,.14);
  --mist: #efefec;
  --blauw: #b34700;      /* ember: oranje voor tekst op licht */
  --oranje: #f27a00;     /* kiln: oranje vlakken en knoppen */
  --steen: #6a2a1b;
  --blauw-licht: #e8edf8;

  --font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --maat: min(1320px, 100% - clamp(2.5rem, 6vw, 6rem));
  --nav-h: 76px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 1rem); }
body {
  margin: 0; background: var(--wit); color: var(--tekst);
  font-family: var(--font); font-size: 1.0625rem; line-height: 1.6;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; max-width: 64ch; }
h1, h2, h3, h4 { color: var(--zwart); margin: 0; font-weight: 800; line-height: .96; letter-spacing: -0.022em; font-stretch: 125%; font-variation-settings: "wdth" 125; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 5.8vw, 6rem); letter-spacing: -0.022em; }
h2 { font-size: clamp(2.1rem, 4.6vw, 4.4rem); letter-spacing: -0.022em; }
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.12; font-weight: 750; font-variation-settings: "wdth" 112; }
h4 { font-size: 1.125rem; line-height: 1.25; letter-spacing: -0.01em; font-variation-settings: "wdth" 110; }
.lead { font-size: clamp(1.15rem, 1.6vw, 1.375rem); line-height: 1.5; color: var(--zwart); max-width: 44ch; }
.klein { font-size: .9375rem; color: var(--grijs); }
.wrap { width: var(--maat); margin-inline: auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 2px solid var(--blauw); outline-offset: 3px; border-radius: 2px; }
.skip { position: absolute; left: 1rem; top: -4rem; background: var(--zwart); color: var(--wit); padding: .6rem 1rem; z-index: 100; text-decoration: none; }
.skip:focus { top: 1rem; }

/* ---------- Knoppen & links ---------- */
.knop {
  display: inline-flex; align-items: center; gap: .6em;
  padding: .85em 1.35em; border-radius: 8px;
  background: var(--zwart); color: var(--wit); text-decoration: none;
  font-weight: 500; font-size: 1rem; line-height: 1; border: 1px solid var(--zwart);
  transition: background .25s, color .25s, border-color .25s;
}
.knop:hover { background: var(--blauw); border-color: var(--blauw); }
.knop--licht { background: transparent; color: var(--zwart); border-color: var(--lijn); }
.knop--licht:hover { background: var(--zwart); color: var(--wit); border-color: var(--zwart); }
.knop svg { width: 1.1em; height: 1.1em; flex: none; }
.knop--groot { font-size: 1.1rem; padding: 1em 1.6em; }
.link { color: var(--blauw); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.link:hover { text-decoration-thickness: 2px; }

/* ---------- Navigatie ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h);
  background: rgba(255,255,255,.86); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .3s;
}
.nav.is-scrolled { border-bottom-color: var(--lijn); }
.nav__in { width: var(--maat); margin-inline: auto; height: 100%; display: flex; align-items: center; gap: 2rem; }
.merk { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--zwart); margin-right: auto; }
.merk__logo { width: 40px; height: auto; color: var(--zwart); }
.merk__naam { display: grid; line-height: 1.05; font-variation-settings: "wdth" 112; }
.merk__naam b { font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; }
.merk__naam span { font-size: .8rem; color: var(--grijs); }
.nav__links { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.nav__links a { text-decoration: none; font-size: .975rem; color: var(--zwart); position: relative; padding: .3rem 0; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__cta { padding: .7em 1.15em; font-size: .925rem; }
.nav__cta + .nav__cta { margin-left: -1.25rem; }
.nav__mob { display: none; }
.nav__menu { display: none; background: none; border: 0; padding: .5rem; cursor: pointer; color: var(--zwart); }
.nav__menu span { display: block; width: 26px; height: 1.5px; background: currentColor; margin: 6px 0; transition: transform .3s var(--ease), opacity .2s; }
.nav-open .nav__menu span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-open .nav__menu span:nth-child(2) { opacity: 0; }
.nav-open .nav__menu span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 1260px) {
  .nav__links, .nav__cta { display: none; }
  .nav__menu { display: block; }
  .nav-open .nav__links {
    display: flex; flex-direction: column; gap: 0; position: fixed; inset: var(--nav-h) 0 0 0;
    background: var(--wit); padding: 2rem clamp(1.25rem, 3vw, 3rem);
  }
  .nav-open .nav__links a { font-size: 2.25rem; font-weight: 600; font-variation-settings: "wdth" 125; letter-spacing: -0.02em; display: block; padding: .55rem 0; border-bottom: 1px solid var(--lijn); }
  .nav-open .nav__links a::after { display: none; }
  .nav-open .nav__mob { display: block; margin-top: 1rem; }
  .nav-open .nav__links .nav__mob + .nav__mob { margin-top: .75rem; }
  .nav-open .nav__links .nav__mob a { display: inline-flex; gap: .6em; font-size: 1.05rem; font-weight: 500; letter-spacing: 0; font-variation-settings: "wdth" 100; padding: .9em 1.4em; border-bottom: 1px solid var(--zwart); }
  .nav-open .nav__links .nav__mob a.knop--licht { border-color: var(--lijn); }
  .nav-open .nav__links .nav__mob a.knop { color: var(--wit); background: var(--zwart); border: 1px solid var(--zwart); }
  .nav-open .nav__links .nav__mob a.knop--licht { color: var(--zwart); background: transparent; border: 1px solid var(--lijn); }
  .nav-open .nav { background: var(--wit); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: var(--lijn); }
  .nav-open .nav__links { overflow-y: auto; }

  .nav-open { overflow: hidden; }
}

main { padding-top: var(--nav-h); }

/* ---------- Hero (home) ---------- */
.hero { padding: clamp(3rem, 9vh, 7rem) 0 clamp(2.5rem, 6vh, 4rem); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.hero h1 { max-width: 13ch; }
.hero h1 .regel { display: block; overflow: hidden; padding-bottom: .06em; }
.hero h1 .regel > span { display: block; transform: translateY(105%); animation: omhoog 1s var(--ease) forwards; }
.hero h1 .regel:nth-child(2) > span { animation-delay: .09s; }
.hero h1 .regel:nth-child(3) > span { animation-delay: .18s; }
.hero__intro { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; align-items: center; opacity: 0; animation: verschijn .9s .5s var(--ease) forwards; }
.hero__intro .lead { margin: 0; }
.hero__knoppen { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; align-items: start; }
  .hero h1 { font-size: clamp(2.1rem, 9vw, 3.4rem); }
  .hero__intro { margin-top: 1.5rem; }
  .eerstvolgend { max-width: 360px; }
}
@keyframes omhoog { to { transform: none; } }
@keyframes verschijn { to { opacity: 1; } }

.eerstvolgend {
  border-top: 2px solid var(--zwart); padding-top: 1.1rem;
  opacity: 0; animation: verschijn .9s .65s var(--ease) forwards;
}
.eerstvolgend__kop { font-size: .95rem; color: var(--grijs); margin: 0 0 .35rem; }
.eerstvolgend__dag { font-size: clamp(1.75rem, 2.6vw, 2.25rem); font-weight: 600; color: var(--zwart); line-height: 1.05; letter-spacing: -0.02em; font-variation-settings: "wdth" 125; margin: 0; }
.eerstvolgend__adres { margin: .9rem 0 0; font-size: .975rem; }
.live-stip { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: #c8102e; margin-right: .45rem; vertical-align: .12em; animation: puls 1.6s infinite; }
@keyframes puls { 50% { opacity: .25; } }

/* Video dat bij scrollen uitvouwt */
.film { position: relative; height: 170vh; }
.film__plak { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); display: grid; place-items: center; overflow: hidden; }
.film__kader {
  position: relative; width: 100%; height: 100%;
  clip-path: inset(var(--inset-y, 12%) var(--inset-x, 6%) var(--inset-y, 12%) var(--inset-x, 6%) round var(--rond, 18px));
  will-change: clip-path;
}
.film__kader video, .film__kader img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film__tekst {
  position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(1.5rem, 4vw, 3.5rem) calc((100% - min(1320px, 100% - clamp(2.5rem, 6vw, 6rem))) / 2);
  color: var(--wit); background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,0) 100%);
  opacity: var(--tekst-op, 0); transform: translateY(calc((1 - var(--tekst-op, 0)) * 20px));
}
.film__tekst p { max-width: 30ch; margin: 0; font-size: clamp(1.5rem, 3.4vw, 3rem); line-height: 1.08; font-weight: 800; letter-spacing: -0.022em; font-variation-settings: "wdth" 125; color: var(--wit); }
.film__pauze { position: absolute; right: clamp(1.25rem, 3vw, 2.5rem); top: clamp(1.25rem, 3vw, 2.5rem); z-index: 2; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.6); background: rgba(0,0,0,.25); color: #fff; cursor: pointer; display: grid; place-items: center; opacity: var(--tekst-op, 0); }
.film__pauze svg { width: 14px; height: 14px; }

/* ---------- Stapelende vellen ---------- */
.stapel { position: relative; padding-bottom: 6rem; }
.vel {
  position: sticky; top: calc(var(--nav-h) + var(--i) * 56px);
  background: var(--wit); border-top: 1px solid var(--zwart);
  min-height: calc(100vh - var(--nav-h) - var(--i) * 56px);
  box-shadow: 0 -28px 40px -30px rgba(0,0,0,.18);
}
.vel:first-child { box-shadow: none; }
.vel__tab { height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 1rem; color: var(--zwart); }
.vel__tab h2 { font-size: 1.05rem; letter-spacing: -0.005em; font-variation-settings: "wdth" 108; font-weight: 600; }
.vel__tab a { font-size: .95rem; color: var(--grijs); text-decoration: none; }
.vel__tab a:hover { color: var(--zwart); }
.vel__inhoud { padding: clamp(1.5rem, 4vh, 3rem) 0 clamp(3rem, 8vh, 5rem); }
@media (max-width: 760px), (max-height: 640px) {
  .vel { position: relative; top: auto; min-height: 0; box-shadow: none; }
}

/* Diensten */
.tijden { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-top: 1px solid var(--lijn); }
.tijd { padding: 1.5rem 1.5rem 1.75rem 0; border-right: 1px solid var(--lijn); }
.tijd + .tijd { padding-left: clamp(1rem, 2.5vw, 2rem); }
.tijd:last-child { border-right: 0; }
.tijd__dag { font-size: 1.05rem; color: var(--zwart); margin: 0 0 .3rem; }
.tijd__uur { font-size: clamp(2.6rem, 5.4vw, 5rem); font-weight: 800; line-height: .95; letter-spacing: -0.022em; color: var(--zwart); font-variation-settings: "wdth" 125; font-variant-numeric: tabular-nums; margin: 0; }
.tijd__wat { margin: .75rem 0 0; color: var(--grijs); font-size: .975rem; }
.tijd.is-volgende .tijd__uur { color: var(--blauw); }
.weetjes { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 2rem; margin-top: clamp(2rem, 5vh, 3.5rem); }
.weetje h3 { font-size: 1.125rem; margin-bottom: .4rem; font-variation-settings: "wdth" 110; }
.weetje p { font-size: .975rem; margin: 0; }
@media (max-width: 860px) {
  .tijden { grid-template-columns: 1fr; }
  .tijd, .tijd + .tijd { padding: 1.25rem 0; border-right: 0; border-bottom: 1px solid var(--lijn); display: grid; grid-template-columns: 1fr auto; align-items: end; }
  .tijd__wat { grid-column: 1 / -1; margin-top: .4rem; }
  .weetjes { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) { .weetjes { grid-template-columns: 1fr; gap: 1.25rem; } }

/* Locatie */
.locatie { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.adres { font-size: clamp(1.8rem, 3.4vw, 3.1rem); font-weight: 800; line-height: 1; letter-spacing: -0.022em; color: var(--zwart); font-variation-settings: "wdth" 125; font-style: normal; margin: 0 0 1.5rem; }
.reis { list-style: none; margin: 2rem 0 0; padding: 0; border-top: 1px solid var(--lijn); }
.reis li { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; padding: .95rem 0; border-bottom: 1px solid var(--lijn); font-size: .975rem; }
.reis b { color: var(--zwart); font-weight: 600; }
.kaart { position: relative; aspect-ratio: 4 / 3; background: var(--mist); overflow: hidden; border-radius: 4px; }
.kaart iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.05); }
.kaart__pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); width: 28px; color: var(--blauw); pointer-events: none; }
@media (max-width: 860px) { .locatie { grid-template-columns: 1fr; } .reis li { grid-template-columns: 1fr; gap: .2rem; } }

/* Boog (De Deur) */
.boog { border-radius: 8px; overflow: hidden; background: var(--mist); aspect-ratio: 1 / 1; }
.boog img, .boog video { width: 100%; height: 100%; object-fit: cover; }

/* Over ons (home) */
.wij { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.wij .boog { aspect-ratio: 1 / 1; max-width: 420px; justify-self: end; width: 100%; }
.wij__citaat { font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.08; font-weight: 800; letter-spacing: -0.022em; color: var(--zwart); font-variation-settings: "wdth" 125; margin: 0 0 1.5rem; max-width: 20ch; }
@media (max-width: 760px) { .wij { grid-template-columns: 1fr; } .wij .boog { justify-self: start; max-width: 300px; } }

/* Agenda-lijst */
.agenda { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--zwart); }
.agenda li { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; gap: 1.5rem; padding: 1.25rem 0; border-bottom: 1px solid var(--lijn); align-items: baseline; }
.agenda__wanneer { color: var(--zwart); font-weight: 600; font-variation-settings: "wdth" 110; }
.agenda__wat h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); margin-bottom: .25rem; }
.agenda__wat p { margin: 0; font-size: .975rem; color: var(--grijs); }
.agenda__meer { font-size: .95rem; white-space: nowrap; }
.agenda li.is-voorbij .agenda__wanneer, .agenda li.is-voorbij p { color: var(--grijs); }
.agenda li.is-voorbij .agenda__wanneer { text-decoration: line-through; font-weight: 400; }
@media (max-width: 680px) { .agenda li { grid-template-columns: 1fr; gap: .35rem; } }

/* Geloof (home) */
.kenmerken { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); border-top: 1px solid var(--zwart); }
.kenmerk { padding: 1.5rem 1.25rem 0 0; border-right: 1px solid var(--lijn); }
.kenmerk + .kenmerk { padding-left: 1.25rem; }
.kenmerk:last-child { border-right: 0; }
.kenmerk h3 { font-size: 1.25rem; margin-bottom: .6rem; }
.kenmerk p { font-size: .95rem; margin: 0; }
@media (max-width: 1000px) {
  .kenmerken { grid-template-columns: 1fr 1fr; }
  .kenmerk, .kenmerk + .kenmerk { padding: 1.25rem 1rem 1.25rem 0; border-right: 0; border-bottom: 1px solid var(--lijn); }
}
@media (max-width: 560px) { .kenmerken { grid-template-columns: 1fr; } }

/* Secties algemeen */
.sectie { padding: clamp(4.5rem, 12vh, 9rem) 0; }
.sectie--mist { background: var(--mist); }
.sectie__kop { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem 4rem; align-items: end; margin-bottom: clamp(2.25rem, 6vh, 4rem); }
.sectie__kop p { margin: 0; }
@media (max-width: 860px) { .sectie__kop { grid-template-columns: 1fr; } }

/* Johannes 10:9 */
.deur { padding: clamp(5rem, 14vh, 10rem) 0; }
.deur__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 7vw, 7rem); align-items: center; }
.deur .boog { aspect-ratio: 1 / 1; }
.deur blockquote { margin: 0; }
.deur blockquote p { font-size: clamp(1.8rem, 3.4vw, 3.3rem); line-height: 1.04; font-weight: 800; letter-spacing: -0.022em; color: var(--zwart); font-variation-settings: "wdth" 125; max-width: 18ch; margin: 0 0 1.25rem; }
.deur cite { font-style: normal; color: var(--grijs); }
@media (max-width: 760px) { .deur__grid { grid-template-columns: 1fr; } .deur .boog { max-width: 280px; } }

/* Contactstrook */
.contactstrook { border-top: 1px solid var(--zwart); }
.contactstrook__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
.contactstrook a { display: block; padding: 2rem 1.5rem 2.25rem 0; text-decoration: none; color: var(--zwart); border-right: 1px solid var(--lijn); transition: color .2s; }
.contactstrook a + a { padding-left: 1.5rem; }
.contactstrook a:last-child { border-right: 0; }
.contactstrook span { display: block; color: var(--grijs); font-size: .95rem; margin-bottom: .35rem; }
.contactstrook b { font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 600; letter-spacing: -0.015em; font-variation-settings: "wdth" 112; word-break: break-word; }
.contactstrook a:hover { color: var(--blauw); }
@media (max-width: 760px) {
  .contactstrook__grid { grid-template-columns: 1fr; }
  .contactstrook a, .contactstrook a + a { padding: 1.25rem 0; border-right: 0; border-bottom: 1px solid var(--lijn); }
}

/* ---------- Subpagina's ---------- */
.paginakop { padding: clamp(3.5rem, 11vh, 8rem) 0 clamp(2.5rem, 6vh, 4rem); border-bottom: 1px solid var(--lijn); }
.paginakop h1 { max-width: 16ch; }
.paginakop .lead { margin-top: 1.75rem; }
.twee { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); }
.twee__zij { position: sticky; top: calc(var(--nav-h) + 2rem); align-self: start; }
@media (max-width: 860px) { .twee { grid-template-columns: 1fr; } .twee__zij { position: static; } }

.tijdlijn { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--zwart); }
.tijdlijn li { display: grid; grid-template-columns: 6.5rem minmax(0,1fr); gap: 1.5rem; padding: 1.4rem 0; border-bottom: 1px solid var(--lijn); }
.tijdlijn time { font-size: 1.6rem; font-weight: 600; color: var(--zwart); letter-spacing: -0.02em; font-variation-settings: "wdth" 125; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tijdlijn p { margin: 0; }
@media (max-width: 520px) { .tijdlijn li { grid-template-columns: 1fr; gap: .3rem; } }

.visie { font-size: clamp(1.6rem, 3vw, 2.8rem); line-height: 1.06; font-weight: 800; letter-spacing: -0.022em; color: var(--zwart); font-variation-settings: "wdth" 125; max-width: 22ch; margin: 0; }

.team { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1rem, 3vw, 2.5rem); }
.persoon figure { margin: 0; }
.persoon__foto { aspect-ratio: 4 / 5; overflow: hidden; background: var(--mist); border-radius: 4px; }
.persoon__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform .8s var(--ease); }
.persoon:hover .persoon__foto img { transform: scale(1.03); }
.persoon figcaption { padding-top: .9rem; }
.persoon h3 { font-size: 1.3rem; }
.persoon p { margin: .2rem 0 0; color: var(--grijs); font-size: .95rem; }
@media (max-width: 680px) { .team { grid-template-columns: 1fr 1fr; } .team .persoon:first-child { grid-column: 1 / -1; } }

/* Geloofspagina */
.belijdenis { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--zwart); }
.belijdenis > li { border-bottom: 1px solid var(--lijn); }
.belijdenis details summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 1rem;
  padding: 1.5rem 0; font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 600; color: var(--zwart); letter-spacing: -0.02em; font-variation-settings: "wdth" 125; line-height: 1.1;
}
.belijdenis summary::-webkit-details-marker { display: none; }
.plus { width: 28px; height: 28px; position: relative; flex: none; }
.plus::before, .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 1.5px; background: currentColor; transform: translate(-50%,-50%); transition: transform .35s var(--ease); }
.plus::after { transform: translate(-50%,-50%) rotate(90deg); }
details[open] .plus::after { transform: translate(-50%,-50%) rotate(0deg); }
.belijdenis__tekst { overflow: hidden; }
.belijdenis__tekst ul { margin: 0; padding: 0 0 1.75rem; list-style: none; max-width: 62ch; }
.belijdenis__tekst li { padding: .55rem 0 .55rem 1.5rem; position: relative; }
.belijdenis__tekst li::before { content: ""; position: absolute; left: 0; top: 1.15em; width: .7rem; height: 1.5px; background: var(--blauw); }
.bijbeltekst { font-style: italic; color: var(--grijs); }

/* Agenda pagina */
.ritme { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); border-top: 1px solid var(--zwart); }
.ritme__dag { border-right: 1px solid var(--lijn); padding: 1rem .9rem 1.5rem 0; min-height: 11rem; }
.ritme__dag + .ritme__dag { padding-left: .9rem; }
.ritme__dag:last-child { border-right: 0; }
.ritme__dag > b { display: block; color: var(--zwart); font-weight: 600; margin-bottom: 1rem; font-variation-settings: "wdth" 110; }
.ritme__item { display: block; font-size: .925rem; line-height: 1.35; margin-bottom: .9rem; }
.ritme__item time { display: block; font-size: 1.5rem; font-weight: 600; color: var(--zwart); letter-spacing: -0.02em; font-variation-settings: "wdth" 125; font-variant-numeric: tabular-nums; }
.ritme__leeg { color: var(--grijs); }
.ritme__dag.is-vandaag > b { color: var(--blauw); }
@media (max-width: 900px) {
  .ritme { grid-template-columns: 1fr; }
  .ritme__dag, .ritme__dag + .ritme__dag { min-height: 0; padding: 1rem 0; border-right: 0; border-bottom: 1px solid var(--lijn); display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; }
  .ritme__dag > b { margin: 0; }
  .ritme__dag:has(.ritme__leeg) { display: none; }
}

.flyer { border-radius: 4px; overflow: hidden; border: 1px solid var(--lijn); }

/* Formulieren */
.formulier { display: grid; gap: 1.1rem; max-width: 620px; }
.formulier .rij { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.formulier label { display: grid; gap: .4rem; font-size: .95rem; color: var(--zwart); }
.formulier input, .formulier textarea {
  font: inherit; color: var(--zwart); background: transparent; border: 0; border-bottom: 1px solid #bdbdba;
  padding: .7rem 0; border-radius: 0; transition: border-color .2s;
}
.formulier textarea { min-height: 8rem; resize: vertical; }
.formulier input:focus, .formulier textarea:focus { outline: none; border-bottom-color: var(--blauw); box-shadow: 0 1px 0 var(--blauw); }
.formulier .vink { display: flex; gap: .6rem; align-items: center; color: var(--tekst); }
.formulier .vink input { width: 1.1rem; height: 1.1rem; accent-color: var(--blauw); }
.formulier .knop { justify-self: start; margin-top: .5rem; cursor: pointer; }
.honing { display: none; }
@media (max-width: 560px) { .formulier .rij { grid-template-columns: 1fr; } }

.gegevens { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--zwart); }
.gegevens li { padding: 1.1rem 0; border-bottom: 1px solid var(--lijn); }
.gegevens span { display: block; color: var(--grijs); font-size: .9rem; }
.gegevens a, .gegevens b { color: var(--zwart); font-size: 1.2rem; font-weight: 600; text-decoration: none; letter-spacing: -0.01em; font-variation-settings: "wdth" 110; }
.gegevens a:hover { color: var(--blauw); }

/* Video-boog naast tekst */
.beeld-boog { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.beeld-boog .boog { aspect-ratio: 1 / 1; max-width: 420px; width: 100%; justify-self: end; }
@media (max-width: 760px) { .beeld-boog { grid-template-columns: 1fr; } .beeld-boog .boog { justify-self: start; max-width: 260px; } }

/* Onze kerk */
.kerk { padding: clamp(5rem, 13vh, 9rem) 0 clamp(4rem, 10vh, 7rem); }
.kerk__foto { margin: 0 auto; width: min(1600px, 100% - clamp(2.5rem, 6vw, 6rem)); aspect-ratio: 2400 / 1018; overflow: hidden; border-radius: 6px; background: var(--mist); }
.kerk__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 66% 50%; }
@media (max-width: 860px) {
  .kerk__foto { aspect-ratio: 4 / 3; }
        }

/* Geefband */
.geefband { background: var(--blauw); color: #fff; padding: clamp(3.5rem, 9vh, 6rem) 0; }
.geefband__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem 4rem; align-items: end; }
.geefband h2 { color: #fff; }
.geefband p { color: #fff; margin: 1.25rem 0 0; }
.geefband__knoppen { display: flex; flex-wrap: wrap; gap: 1.25rem 1.75rem; align-items: center; justify-self: end; }
.geefband .knop { background: #fff; color: var(--zwart); border-color: #fff; }
.geefband .knop:hover { background: var(--zwart); color: #fff; border-color: var(--zwart); }
.geefband .link { color: #fff; }
@media (max-width: 760px) { .geefband__in { grid-template-columns: 1fr; } .geefband__knoppen { justify-self: start; } }

/* Voorganger */
.pastor { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.pastor__foto { margin: 0; overflow: hidden; border-radius: 8px; background: var(--mist); }
.pastor__foto { max-width: 520px; aspect-ratio: 4 / 5; }
.pastor__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
@media (max-width: 860px) { .pastor { grid-template-columns: 1fr; } .pastor__foto { max-width: 420px; } }


/* Kidsparty */
.kidsparty { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.kidsparty .flyer { display: block; position: sticky; top: calc(var(--nav-h) + 1.5rem); border-radius: 10px; overflow: hidden; border: 0; box-shadow: 0 30px 60px -30px rgba(29,63,145,.45); transition: transform .5s var(--ease); }
.kidsparty .flyer:hover { transform: translateY(-4px) rotate(-.5deg); }
@media (max-width: 760px) { .kidsparty { grid-template-columns: 1fr; } .kidsparty .flyer { position: static; max-width: 420px; } }


/* ---------- Footer ---------- */
.voet { border-top: 1px solid var(--zwart); padding: clamp(3rem, 8vh, 5rem) 0 2rem; margin-top: 0; }
.voet__grid { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)); gap: 2.5rem; }
.voet h2 { font-size: 1rem; letter-spacing: 0; font-variation-settings: "wdth" 108; margin-bottom: .9rem; }
.voet ul { list-style: none; margin: 0; padding: 0; }
.voet li { margin-bottom: .45rem; font-size: .975rem; }
.voet a { text-decoration: none; }
.voet a:hover { color: var(--blauw); text-decoration: underline; text-underline-offset: .2em; }
.voet__merk .merk__logo { width: 56px; margin-bottom: 1rem; }
.voet__merk p { font-size: .975rem; max-width: 34ch; }
.voet__merk .knop { margin-top: .5rem; }
.voet__onder { margin-top: 3.5rem; padding-top: 1.25rem; border-top: 1px solid var(--lijn); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .875rem; color: var(--grijs); }
.voet__onder a { color: var(--zwart); }
.voet__naam { font-size: clamp(3rem, 13.5vw, 13.5rem); font-weight: 800; letter-spacing: -0.022em; line-height: .82; color: var(--zwart); font-variation-settings: "wdth" 125; margin: 3.5rem 0 0; white-space: nowrap; overflow: hidden; }
@media (max-width: 860px) { .voet__grid { grid-template-columns: 1fr 1fr; } .voet__merk { grid-column: 1 / -1; } }

/* ---------- Onthullen bij scrollen ---------- */
.js .onthul { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .onthul.is-zichtbaar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
  .hero h1 .regel > span { transform: none; }
  .film { height: auto; }
  .film__plak { position: relative; top: 0; height: 70vh; }
  .film__kader { clip-path: none; }
  .film__tekst { opacity: 1; transform: none; }
  .js .onthul { opacity: 1; transform: none; }
}

/* Binnenfoto contactpagina */
.paginakop--foto { padding-bottom: 0; border-bottom: 0; }
.bandfoto { width: min(1600px, 100% - clamp(2.5rem, 6vw, 6rem)); margin: clamp(2.5rem, 6vh, 4rem) auto 0; border-radius: 8px; overflow: hidden; background: var(--mist); aspect-ratio: 2400 / 593; }
.bandfoto img { width: 100%; height: 100%; object-fit: cover; object-position: 48% 50%; }
@media (max-width: 760px) { .bandfoto { aspect-ratio: 16 / 9; } }

/* Kaart pas laden na klik */
.kaart__toestemming { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1rem; padding: clamp(1.25rem, 4vw, 2.5rem); background: var(--mist); }
.kaart__toestemming p { margin: 0; font-size: .975rem; max-width: 42ch; }
.kaart.is-geladen .kaart__toestemming { display: none; }
@media (max-width: 860px) { .kaart { aspect-ratio: auto; min-height: 300px; } .kaart.is-geladen { aspect-ratio: 4 / 3; } }

/* Pauzeknop op video's in een boog */
.boog { position: relative; }
.video__pauze { position: absolute; right: .9rem; bottom: .9rem; width: 40px; height: 40px; border-radius: 8px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.55); color: #fff; cursor: pointer; display: grid; place-items: center; }
.video__pauze svg { width: 13px; height: 13px; }
.video__pauze:hover { background: #000; }
.film__pauze { border-radius: 8px; background: rgba(0,0,0,.55); }

/* Formulieren */
.verplicht { color: var(--grijs); font-size: .875rem; font-weight: 400; }
.formulier__info { font-size: .925rem; color: var(--tekst); margin: .25rem 0 0; max-width: 60ch; }
.formulier .vink { align-items: flex-start; }
.formulier .vink input { margin-top: .2rem; flex: none; }
.keuze { border: 0; padding: 0; margin: 0; display: grid; gap: .6rem; }
.keuze legend { font-size: .95rem; color: var(--zwart); padding: 0; margin-bottom: .4rem; }
.formulier__fout { color: #b00020; font-size: .925rem; margin: 0; }
.formulier input:focus-visible, .formulier textarea:focus-visible { outline: 2px solid var(--blauw); outline-offset: 2px; }
.formulier input[type="checkbox"]:focus-visible { outline: 2px solid var(--blauw); outline-offset: 2px; }

/* Juridische pagina's */
.juridisch { max-width: 760px; }
.juridisch h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 2.75rem 0 .9rem; }
.juridisch h2:first-child { margin-top: 0; }
.juridisch ul { padding-left: 1.2rem; margin: 0 0 1em; }
.juridisch li { margin-bottom: .55rem; max-width: 64ch; }
.voet__juridisch { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.voet__juridisch a { color: var(--tekst); text-decoration: underline; text-underline-offset: .2em; }

/* ---------- Kerkplanting ---------- */
.cijfers { display: flex; flex-wrap: wrap; gap: 1rem 3.5rem; margin: 2.5rem 0 0; }
.cijfers div { border-top: 2px solid var(--zwart); padding-top: .75rem; min-width: 9rem; }
.cijfers dt { font-size: .95rem; color: var(--grijs); }
.cijfers dd { margin: .2rem 0 0; font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 800; line-height: 1; letter-spacing: -0.022em; color: var(--zwart); font-variation-settings: "wdth" 125; font-variant-numeric: tabular-nums; }
.stellen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2.5vw, 2rem); }
.stel figure { margin: 0; }
.stel__foto { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 8px; background: #fff; border: 1px solid var(--lijn); }
.stel__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform .7s var(--ease); }
.stel:hover .stel__foto img { transform: scale(1.03); }
.stel figcaption { padding-top: .9rem; }
.stel h3 { font-size: 1.25rem; }
.stel__plaats { margin: .3rem 0 0; color: var(--zwart); font-weight: 500; }
.stel__vanuit { margin: .15rem 0 0; font-size: .925rem; color: var(--grijs); }
.stel__vanuit--direct { color: var(--blauw); }

/* ---------- ONE80 ---------- */
:root { --o80-nacht: #0c0d14; --o80-oranje: #ff914d; --o80-tekst: #e9eaf0; --o80-zacht: #b9bcc9; }
.o80-sub { background: var(--o80-nacht); color: var(--o80-tekst); border-bottom: 1px solid #23252f; }
.o80-sub__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 56px; flex-wrap: wrap; }
.o80-sub__merk { display: flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; font-weight: 600; font-variation-settings: "wdth" 112; }
.o80-sub__merk img { width: 32px; height: 32px; }
.o80-sub ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.5rem; }
.o80-sub ul a { color: var(--o80-tekst); text-decoration: none; padding: .35rem 0; border-bottom: 1.5px solid transparent; }
.o80-sub ul a:hover, .o80-sub ul a[aria-current="page"] { color: #fff; border-bottom-color: var(--o80-oranje); }
.o80-sub a:focus-visible { outline-color: var(--o80-oranje); }
.o80-kop { background: var(--o80-nacht); color: var(--o80-tekst); padding: clamp(3rem, 9vh, 6.5rem) 0; }
.o80-kop--klein { padding-bottom: clamp(2.5rem, 7vh, 4.5rem); }
.o80-kop h1 { color: #fff; max-width: 17ch; font-size: clamp(2.2rem, 4.8vw, 4.6rem); }
.o80-kop__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.o80-logo { width: clamp(84px, 9vw, 120px); height: auto; margin-bottom: 1.75rem; }
.o80-wanneer { color: var(--o80-oranje); font-weight: 600; font-size: 1.1rem; margin: 0 0 .75rem; }
.o80-lead { font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: var(--o80-tekst); margin-top: 1.5rem; max-width: 46ch; }
.o80-knoppen { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.knop--o80 { background: var(--o80-oranje); border-color: var(--o80-oranje); color: var(--o80-nacht); }
.knop--o80:hover { background: #fff; border-color: #fff; color: var(--o80-nacht); }
.knop--o80-licht { background: transparent; border-color: #5a5d6b; color: #fff; }
.knop--o80-licht:hover { background: #fff; border-color: #fff; color: var(--o80-nacht); }
.o80-kop .knop:focus-visible, .o80-band a:focus-visible { outline-color: var(--o80-oranje); }
.o80-kop__foto { margin: 0; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; }
.o80-kop__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 68%; }
@media (max-width: 860px) { .o80-kop__grid { grid-template-columns: 1fr; } .o80-kop__foto { max-width: 420px; } }
.feiten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; margin: 2rem 0 0; border-top: 1px solid var(--zwart); }
.feiten div { padding: 1rem 0; border-bottom: 1px solid var(--lijn); }
.feiten dt { font-size: .9rem; color: var(--grijs); }
.feiten dd { margin: .15rem 0 0; color: var(--zwart); font-weight: 600; font-size: 1.15rem; font-variation-settings: "wdth" 110; }
@media (max-width: 520px) { .feiten { grid-template-columns: 1fr; } }
.o80-band { background: var(--o80-nacht); color: var(--o80-tekst); padding: clamp(4.5rem, 12vh, 8rem) 0; }
.o80-band h2 { color: #fff; }
.o80-band .sectie__kop p { color: var(--o80-zacht); }
.galerij { columns: 3 300px; column-gap: clamp(.75rem, 1.5vw, 1.25rem); }
.galerij__item { margin: 0 0 clamp(.75rem, 1.5vw, 1.25rem); break-inside: avoid; border-radius: 8px; overflow: hidden; background: #1a1c25; }
.galerij__item img { width: 100%; }
.steden { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--zwart); }
.steden a { display: block; padding: 1.5rem 1.25rem 1.75rem 0; font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 800; letter-spacing: -0.022em; color: var(--zwart); text-decoration: none; font-variation-settings: "wdth" 125; border-right: 1px solid var(--lijn); }
.steden li + li a { padding-left: 1.25rem; }
.steden li:last-child a { border-right: 0; }
.steden a span { color: var(--grijs); font-weight: 500; }
.steden a:hover { color: var(--blauw); }
@media (max-width: 680px) { .steden { grid-template-columns: 1fr; } .steden a, .steden li + li a { padding: 1rem 0; border-right: 0; border-bottom: 1px solid var(--lijn); } }
.acts { display: grid; gap: clamp(3rem, 7vh, 4.5rem); }
.act { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center; }
.act--zonder { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.act__foto { margin: 0; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: var(--mist); max-width: 420px; }
.act__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.act__soort { color: var(--grijs); margin: 0 0 .35rem; }
.act h3 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: 1rem; }
@media (max-width: 760px) { .act { grid-template-columns: 1fr; } .act__foto { max-width: 340px; } }


/* =========================================================
   Hounslow-stijl: zwart, wit en kiln-oranje, Archivo breed
   ========================================================= */
body { font-size: 1.0625rem; color: var(--zwart); }
p { color: var(--tekst); }
.lead, .lead p { color: var(--zwart); }
:focus-visible { outline: 3px solid var(--oranje); outline-offset: 3px; }

/* Knoppen: oranje met zwarte tekst; spookknop met rand (licht afgeronde rechthoek, op verzoek van de klant) */
.knop { background: var(--oranje); color: #000; border: 2px solid var(--oranje); font-weight: 650; font-variation-settings: "wdth" 108; padding: .9em 1.4em; }
.knop:hover { background: #ff9326; border-color: #ff9326; color: #000; }
.knop--licht { background: transparent; color: currentColor; border-color: currentColor; }
.knop--licht:hover { background: var(--zwart); color: #fff; border-color: var(--zwart); }
.link { color: var(--zwart); text-decoration-color: var(--oranje); text-decoration-thickness: 2px; text-underline-offset: .22em; }
.link:hover { color: var(--blauw); }

/* Kop: transparant op een zwart begin, wit zodra je scrolt */
.nav { background: #fff; color: #000; backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav.is-scrolled { box-shadow: 0 1px 0 var(--lijn); border-bottom-color: transparent; }
.nav__links a[aria-current="page"], .nav__links a:hover { text-decoration: none; }
.nav__links a::after { background: var(--oranje); height: 2px; }
.nav__links a { font-weight: 550; }
.merk__naam b { font-weight: 800; font-variation-settings: "wdth" 115; }
.kop-donker .nav:not(.is-scrolled) { background: transparent; color: #fff; }
.kop-donker .nav:not(.is-scrolled) .nav__links a, .kop-donker .nav:not(.is-scrolled) .merk, .kop-donker .nav:not(.is-scrolled) .nav__menu { color: #fff; }
.kop-donker .nav:not(.is-scrolled) .merk__logo { filter: invert(1); }
.kop-donker .nav:not(.is-scrolled) .merk__naam span { color: #bdbdb8; }
.kop-donker .nav:not(.is-scrolled) .knop--licht { color: #fff; border-color: #fff; }
.kop-donker .nav:not(.is-scrolled) .knop--licht:hover { background: #fff; color: #000; }
.kop-donker main { padding-top: 0; }
@media (max-width: 1260px) {
  .nav-open .nav, .nav-open.kop-donker .nav { background: #000 !important; color: #fff; }
  .nav-open .nav .merk, .nav-open .nav .nav__menu, .nav-open .nav__links a { color: #fff !important; }
  .nav-open .nav .merk__logo { filter: invert(1); }
  .nav-open .nav__links { background: #000 !important; }
  .nav-open .nav__links a { border-bottom-color: rgba(255,255,255,.16) !important; font-weight: 800 !important; }
  .nav-open .nav__links .nav__mob a.knop { background: var(--oranje) !important; color: #000 !important; border-color: var(--oranje) !important; }
  .nav-open .nav__links .nav__mob a.knop--licht { background: transparent !important; color: #fff !important; border-color: #fff !important; }
}

/* Home: zwarte hero met de stadsvideo */
.hero { background: #000; color: #fff; padding-top: calc(var(--nav-h) + clamp(3rem, 9vh, 6.5rem)); }
.hero h1 { color: #fff; }
.hero .lead { color: #d6d6d2; }
.hero .knop--licht { color: #fff; border-color: #fff; }
.hero .knop--licht:hover { background: #fff; color: #000; }
.eerstvolgend { border-top-color: var(--oranje); }
.eerstvolgend__kop { color: #bdbdb8; }
.eerstvolgend__dag { color: #fff; }
.eerstvolgend__adres { color: #d6d6d2; }
.eerstvolgend .klein { color: #bdbdb8; }
.film { background: #000; }
.film__plak { top: var(--nav-h); }
.tijd.is-volgende .tijd__uur { color: var(--blauw); }
.vel { border-top: 2px solid var(--zwart); }
.vel__tab h2 { font-weight: 800; font-variation-settings: "wdth" 115; }

/* Subpagina's: zwarte paginakop, zoals Hounslow */
.paginakop { background: #000; color: #fff; border-bottom: 0; padding-top: calc(var(--nav-h) + clamp(3.5rem, 10vh, 7rem)); padding-bottom: clamp(3.5rem, 9vh, 6rem); }
.paginakop h1 { color: #fff; }
.paginakop .lead, .paginakop p { color: #d6d6d2; }
.paginakop .klein { color: #bdbdb8; }
.paginakop .link, .paginakop a:not(.knop) { color: #fff; }
.paginakop .knop--licht { color: #fff; border-color: #fff; }
.paginakop--foto { padding-bottom: clamp(3rem, 8vh, 5rem); }
.cijfers div { border-top-color: var(--oranje); }
.cijfers dt { color: #bdbdb8; }
.cijfers dd { color: #fff; }

/* Grijze secties en accentlijnen */
.sectie--mist { background: var(--mist); }
.tijden, .agenda, .gegevens, .feiten, .tijdlijn, .belijdenis, .kenmerken, .steden, .reis { border-top-color: var(--zwart); }
.tijden { border-top: 2px solid var(--zwart); }
.agenda { border-top-width: 2px; }
.agenda__wanneer { color: var(--blauw); font-weight: 800; font-variation-settings: "wdth" 115; }
.agenda li.is-voorbij .agenda__wanneer { color: var(--grijs); }
.weetje h3 { font-weight: 750; }

/* Tijdlijn met oranje stippen */
.tijdlijn { border-top: 0; position: relative; }
.tijdlijn::before { content: ""; position: absolute; left: 7px; top: 1.9rem; bottom: 1.9rem; width: 2px; background: var(--lijn); }
.tijdlijn li { grid-template-columns: 1fr; gap: .4rem; padding: 1.4rem 0 1.4rem 2.75rem; border-bottom: 0; position: relative; }
.tijdlijn li::before { content: ""; position: absolute; left: 0; top: 1.85rem; width: 16px; height: 16px; border-radius: 50%; background: var(--mist); border: 2px solid var(--oranje); }
.tijdlijn li:last-child::before { background: var(--oranje); }
.tijdlijn time { font-size: clamp(1.7rem, 3vw, 2.4rem); }

/* Johannes 10:9 op zwart, verwijzing in oranje */
.deur { background: #000; color: #fff; }
.deur blockquote p { color: #fff; }
.deur cite { color: var(--oranje); font-weight: 650; }

/* Geefband in kiln-oranje met zwarte tekst */
.geefband { background: var(--oranje); color: #000; }
.geefband h2, .geefband p { color: #000; }
.geefband .knop { background: #000; color: #fff; border-color: #000; }
.geefband .knop:hover { background: #fff; color: #000; border-color: #fff; }
.geefband .link { color: #000; text-decoration-color: #000; }
.geefband :focus-visible { outline-color: #000; }

/* Contactstrook en voet in zwart */
.contactstrook { background: #000; color: #fff; border-top: 0; }
.contactstrook a { color: #fff; border-right-color: rgba(255,255,255,.18) !important; }
.contactstrook span { color: #bdbdb8; }
.contactstrook a:hover { color: var(--oranje); }
@media (max-width: 760px) { .contactstrook a, .contactstrook a + a { border-bottom-color: rgba(255,255,255,.18) !important; } }
.voet { background: #000; color: #bdbdb8; border-top: 1px solid rgba(255,255,255,.14); }
.voet h2 { color: #fff; font-weight: 800; }
.voet p, .voet li { color: #bdbdb8; }
.voet b { color: #fff; }
.voet a { color: #fff; }
.voet a:hover { color: var(--oranje); text-decoration-color: var(--oranje); }
.voet__merk .merk__logo { filter: invert(1); }
.voet__onder { border-top-color: rgba(255,255,255,.14); color: #9d9d98; }
.voet__onder a, .voet__juridisch a { color: #d6d6d2; }
.voet :focus-visible { outline-color: var(--oranje); }
.voet__motto { font-weight: 800; font-variation-settings: "wdth" 125; color: #fff; font-size: clamp(1.3rem, 2.4vw, 1.9rem); letter-spacing: -0.01em; margin: 0 0 2.5rem; }
.voet__motto span { color: var(--oranje); }

/* Kaarten en foto's */
.stel__vanuit--direct { color: var(--blauw); font-weight: 600; }
.kaart__toestemming { background: var(--mist); }
.persoon h3, .stel h3 { font-weight: 800; }
.kop-donker .o80-sub { padding-top: var(--nav-h); }
.voet .knop, .voet .knop:hover { color: #000; }
.voet .knop:hover { background: #fff; border-color: #fff; text-decoration: none; }

/* =========================================================
   Gelijk aan Hounslow: ronde knoppen en boogvormen
   ========================================================= */
.knop { border-radius: 999px; }
.video__pauze, .film__pauze { border-radius: 50%; }
.boog { border-radius: 220px 220px 6px 6px; aspect-ratio: 4 / 5; }
.wij .boog, .deur .boog, .beeld-boog .boog { aspect-ratio: 4 / 5; }
.pastor { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.pastor__foto { max-width: none; aspect-ratio: 4 / 3; border-radius: 260px 260px 6px 6px; background: #fff; }
.pastor__foto img { object-position: 50% 15%; }
@media (max-width: 860px) { .pastor__foto { max-width: 520px; border-radius: 160px 160px 6px 6px; } }
@media (max-width: 860px) { .pastor { grid-template-columns: minmax(0, 1fr); } }
.stel__foto { border-radius: 200px 200px 6px 6px; border: 0; aspect-ratio: 5 / 4; }
.stel__foto img { object-position: 50% 15%; }
.o80-kop__foto, .act__foto { border-radius: 220px 220px 6px 6px; aspect-ratio: 4 / 5; }
.galerij__item:nth-child(3n+2) { border-radius: 200px 200px 8px 8px; }

/* Waarom we er zijn: drie woorden die oplichten tijdens het scrollen */
.pijlers { background: var(--mist); padding: clamp(5rem, 10vw, 9rem) 0; }
.pijlers__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.pijlers__foto { margin: 0; position: sticky; top: calc(var(--nav-h) + 2rem); }
.pijlers__foto img { width: 100%; height: 100%; object-fit: cover; }
.pijlers__intro { margin-bottom: 2.5rem; }
.pijlers__intro .lead { margin-top: 1.25rem; }
.pijlers__lijst { list-style: none; margin: 0; padding: 0; }
.pijlers__lijst li { padding: 2rem 0; border-top: 1px solid var(--lijn); }
.pijlers__woord { margin: 0; font-weight: 800; font-variation-settings: "wdth" 125; font-size: clamp(2.8rem, 7vw, 6.5rem); line-height: .9; letter-spacing: -0.03em; color: transparent; -webkit-text-stroke: 1.5px var(--zwart); transition: color .5s ease, -webkit-text-stroke-color .5s ease; }
.pijlers__lijst li.is-licht .pijlers__woord { color: #d96200; -webkit-text-stroke-color: #d96200; }
.pijlers__lijst p:not(.pijlers__woord) { margin: .9rem 0 0; max-width: 40ch; }
.pijlers__lijst b { color: var(--zwart); }
@media (max-width: 860px) { .pijlers__grid { grid-template-columns: 1fr; } .pijlers__foto { position: static; aspect-ratio: 16 / 11; border-radius: 160px 160px 6px 6px; } }
@media (prefers-reduced-motion: reduce) { .pijlers__woord { color: #d96200; -webkit-text-stroke-color: #d96200; transition: none; } }

/* Onze dochterkerken */
.dochters { padding: clamp(5rem, 10vw, 9rem) 0; }
.dochters__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.dochters__kaarten { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.dochter { display: block; text-decoration: none; color: var(--zwart); }
.dochter__foto { display: block; aspect-ratio: 4 / 5; border-radius: 200px 200px 6px 6px; overflow: hidden; background: var(--oranje); }
.dochter__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; mix-blend-mode: multiply; transition: transform .5s var(--ease); }
.dochter:hover .dochter__foto img { transform: translateY(-6px); }
.dochter strong { display: block; margin-top: 1rem; font-weight: 800; font-variation-settings: "wdth" 118; font-size: 1.3rem; line-height: 1.15; }
.dochter > span:last-child { color: var(--tekst); font-size: 1rem; }
.dochter:hover strong { text-decoration: underline; text-decoration-color: var(--oranje); text-decoration-thickness: 2px; text-underline-offset: .2em; }
@media (max-width: 860px) { .dochters__grid { grid-template-columns: 1fr; } }

/* Samen kerk zijn: fotostrook */
.samen { background: var(--mist); padding: clamp(5rem, 10vw, 9rem) 0 clamp(4rem, 8vw, 7rem); }
.samen__kop { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; flex-wrap: wrap; }
.strook-knoppen { display: flex; gap: .5rem; }
.strook-knoppen button { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--zwart); background: transparent; color: var(--zwart); cursor: pointer; display: grid; place-items: center; }
.strook-knoppen button svg { width: 22px; height: 22px; }
.strook-knoppen button:hover { background: var(--zwart); color: #fff; }
.strook { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2.5rem max(clamp(1.25rem, 3vw, 3rem), calc((100vw - 1320px) / 2)) 1rem; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.strook figure { flex: 0 0 auto; margin: 0; scroll-snap-align: start; height: clamp(280px, 50vh, 500px); }
.strook img { height: 100%; width: auto; object-fit: cover; border-radius: 6px; background: #ddd; }
.strook figure:nth-child(3n+2) img { border-radius: 200px 200px 6px 6px; }
.strook:focus-visible { outline: 3px solid var(--oranje); outline-offset: -3px; }

/* Kerkplanting: Guadeloupe uitgelicht */
.uitgelicht { background: #000; color: #fff; padding: clamp(4.5rem, 10vw, 8rem) 0; }
.uitgelicht h2 { color: #fff; max-width: 18ch; }
.uitgelicht p { color: #d6d6d2; }
.uitgelicht .lead { color: #fff; max-width: 40ch; }
.uitgelicht__label { display: inline-block; background: var(--oranje); color: #000 !important; font-weight: 700; font-size: .95rem; padding: .35rem .9rem; border-radius: 999px; margin: 0 0 1.25rem; }
.uitgelicht__plaats { color: var(--oranje) !important; font-weight: 700; font-size: 1.15rem; margin: .9rem 0 0; }
.uitgelicht__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; margin-top: clamp(2rem, 5vw, 3.5rem); }
.uitgelicht__foto { margin: 0; aspect-ratio: 4 / 5; border-radius: 220px 220px 6px 6px; overflow: hidden; background: var(--oranje); }
.uitgelicht__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; mix-blend-mode: multiply; }
.uitgelicht__tekst .lead { margin-bottom: 1rem; }
.uitgelicht__kaart { margin: 2rem 0 0; background: #121212; border: 1px solid #2a2a2a; border-radius: 8px; padding: 1rem; }
.uitgelicht__kaart figcaption { font-size: .925rem; color: #bdbdb8; margin-top: .75rem; }
.wereldkaart { width: 100%; height: auto; display: block; }
.wereldkaart .land { fill: #3a3a38; stroke: #121212; stroke-width: .6; }
.wereldkaart .route { fill: none; stroke: var(--oranje); stroke-width: 2.5; stroke-dasharray: 7 7; }
.wereldkaart .punt { fill: var(--oranje); }
.wereldkaart .punt--thuis { fill: #fff; }
.wereldkaart .ring { fill: none; stroke: var(--oranje); stroke-width: 2; opacity: .6; }
.wereldkaart .label { fill: #fff; font: 700 22px "Archivo", Arial, sans-serif; }
.wereldkaart .label--oranje { fill: var(--oranje); }
@media (max-width: 860px) { .uitgelicht__grid { grid-template-columns: 1fr; } .uitgelicht__foto { max-width: 380px; } }
.dochter__foto, .uitgelicht__foto { background: #e6e4dd; }
.stel__foto { background: #fff; }
.pastor__foto { background: #e6e4dd; }
.pastor__foto img { mix-blend-mode: multiply; }