/* =============================================================
   VERSIE 2  ·  HET GETIJ
   Koel en kustachtig. Een doorlopende waterlijn draagt de pagina,
   de inhoud ligt erboven en eronder. Alle beelden in één duotoon.
   ============================================================= */

#v2-root{
  --mist:#e7ebec;
  --mist2:#d6dddf;
  --mist3:#c3ccd0;
  --slate:#16242b;
  --slate2:#2e4550;
  --slate3:#4a636e;
  --brass:#7a5c2e;
  --brass-l:#b08d5b;
  --rule:#b9c4c8;
  --pad:clamp(1.25rem,5vw,4rem);
  --maxw:1240px;
  --disp:"Archivo",system-ui,-apple-system,sans-serif;
  --serif:"Instrument Serif",Georgia,serif;

  background:var(--mist);
  color:var(--slate);
  font-family:var(--disp);
  font-size:clamp(.98rem,.95rem + .16vw,1.03rem);
  line-height:1.68;
  font-weight:400;
  overflow-x:hidden;
}

/* de golflijn als herhaalbare rand, het motief van deze versie */
.v2-tide{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='24' viewBox='0 0 300 24' fill='none'%3E%3Cpath d='M0 12C37.5 3 62.5 21 100 12s62.5 9 100 0 62.5 9 100 0' stroke='%232e4550' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-position:0 center;background-size:300px 24px;
  height:24px;opacity:.4;
}

/* ---------- gedeelde bouwstenen ---------- */
.v2-kicker{
  font:600 .66rem/1 var(--disp);letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass);margin-bottom:1rem;
}
.v2-kicker--inv{color:var(--brass-l)}
.v2-kicker--c{text-align:center}
.v2-h2{
  font-family:var(--disp);font-weight:600;
  font-size:clamp(1.8rem,1.05rem + 2.7vw,3.05rem);
  line-height:1.06;letter-spacing:-.035em;color:var(--slate);
}
#v2-root h3{font-family:var(--disp);font-weight:600;letter-spacing:-.02em}
#v2-root img{filter:grayscale(1) sepia(.35) hue-rotate(165deg) saturate(1.3) contrast(1.03)}
#v2-root .v2-brand img,#v2-root .v2-foot__brand img{filter:none}

/* ---------- navigatie ---------- */
.v2-nav{
  position:sticky;top:0;z-index:40;
  background:rgba(231,235,236,.9);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid transparent;transition:border-color .3s ease;
}
.v2-nav.is-stuck{border-bottom-color:var(--rule)}
.v2-nav__in{
  max-width:var(--maxw);margin-inline:auto;padding:.65rem var(--pad);
  display:flex;align-items:center;gap:1.5rem;
}
.v2-brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;flex:0 0 auto}
.v2-brand img{width:26px;height:auto}
.v2-brand span{
  display:flex;flex-direction:column;line-height:1;
  font:700 .95rem/1 var(--disp);letter-spacing:-.03em;color:var(--slate);
}
.v2-brand i{font:500 .55rem/1.5 var(--disp);font-style:normal;
  letter-spacing:.18em;text-transform:uppercase;color:var(--slate3)}
.v2-nav__links{display:flex;gap:1.5rem;margin-left:auto}
.v2-nav__links a{
  font:500 .8rem/1 var(--disp);letter-spacing:-.01em;text-decoration:none;
  color:var(--slate2);padding:.35rem 0;border-bottom:1px solid transparent;
  transition:border-color .25s ease,color .25s ease;
}
.v2-nav__links a:hover{color:var(--slate);border-bottom-color:var(--brass)}
.v2-nav__cta{
  margin-left:auto;flex:0 0 auto;
  font:600 .82rem/1 var(--disp);letter-spacing:-.01em;text-decoration:none;
  color:var(--mist);background:var(--slate);padding:.72rem 1.1rem;
  transition:background .2s ease;white-space:nowrap;
}
.v2-nav__cta:hover{background:var(--slate2)}
@media (max-width:1023px){.v2-nav__links{display:none}.v2-nav__cta{margin-left:auto}}

/* ---------- 1 · hero, horizonsplit ---------- */
.v2-hero{position:relative}
.v2-hero__sky{
  max-width:var(--maxw);margin-inline:auto;
  padding:clamp(2rem,5vw,4.5rem) var(--pad) clamp(1.8rem,3.5vw,3rem);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:end;
}
.v2-eyebrow{
  grid-column:1/-1;
  font:600 .68rem/1 var(--disp);letter-spacing:.22em;text-transform:uppercase;
  color:var(--slate3);margin-bottom:1.5rem;
}
.v2-hero__h{
  font-family:var(--disp);font-weight:700;
  font-size:clamp(2.5rem,.9rem + 6.6vw,5.6rem);
  line-height:.93;letter-spacing:-.05em;color:var(--slate);
}
.v2-hero__h span{color:var(--slate3)}
.v2-hero__lead{
  font-family:var(--serif);font-size:clamp(1.08rem,.98rem + .55vw,1.42rem);
  line-height:1.5;color:var(--slate2);max-width:42ch;
}
.v2-wline{color:var(--slate2);opacity:.5}
.v2-wline svg{width:200%;height:34px;transform:translateX(0)}
.v2-hero__sea{position:relative;overflow:hidden}
/* De zeeband is bewust laag: de belknoppen liggen erop en moeten binnen de
   eerste schermhoogte vallen. */
.v2-hero__sea img{
  width:100%;height:clamp(250px,34vh,440px);object-fit:cover;object-position:50% 62%;
}
.v2-hero__over{
  position:absolute;left:0;right:0;bottom:0;
  padding:clamp(1.25rem,4vw,2.5rem) var(--pad);
  display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;
  background:linear-gradient(to top,rgba(22,36,43,.82),rgba(22,36,43,0));
}
.v2-cta{
  font:600 .95rem/1 var(--disp);letter-spacing:-.01em;text-decoration:none;
  background:var(--mist);color:var(--slate);padding:1rem 1.5rem;
  transition:transform .2s ease,background .2s ease;
}
.v2-cta:hover{transform:translateY(-2px);background:#fff}
.v2-cta--g{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.v2-cta--g:hover{background:rgba(255,255,255,.12)}
@media (max-width:820px){
  .v2-hero__sky{grid-template-columns:1fr;align-items:start;gap:1.4rem}
  .v2-hero__over{justify-content:stretch;flex-direction:column}
  .v2-cta{text-align:center}
}

/* ---------- 2 · direct ---------- */
.v2-now{
  max-width:var(--maxw);margin-inline:auto;
  padding:clamp(2.5rem,5vw,4rem) var(--pad);
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(1.5rem,4vw,4rem);align-items:start;
  border-bottom:1px solid var(--rule);
}
.v2-now__h{
  font-family:var(--disp);font-weight:600;
  font-size:clamp(1.5rem,1rem + 1.7vw,2.3rem);
  line-height:1.1;letter-spacing:-.035em;margin-bottom:.7rem;
}
.v2-now__l p{color:var(--slate2);max-width:44ch}
.v2-now__k{
  font:600 .64rem/1 var(--disp);letter-spacing:.18em;text-transform:uppercase;
  color:var(--brass);margin-bottom:.9rem;
}
.v2-now__list{display:grid;gap:.5rem;margin-bottom:.9rem}
.v2-now__list li{
  padding-left:1.15rem;position:relative;font-weight:500;
}
.v2-now__list li::before{
  content:"";position:absolute;left:0;top:.68em;width:7px;height:1px;background:var(--brass)}
.v2-now__f{font-size:.9em;color:var(--slate3)}
@media (max-width:760px){.v2-now{grid-template-columns:1fr}}

/* ---------- 3 · in het kort ---------- */
.v2-led{
  max-width:var(--maxw);margin-inline:auto;
  padding:clamp(3rem,6vw,5.5rem) var(--pad);
}
.v2-led__head{margin-bottom:clamp(1.8rem,3.5vw,2.8rem)}
.v2-led__rows{border-top:1px solid var(--slate)}
.v2-led__rows li{
  display:grid;grid-template-columns:4rem minmax(0,13rem) minmax(0,1fr);
  gap:clamp(.8rem,2.5vw,2.5rem);align-items:baseline;
  padding:1.2rem 0;border-bottom:1px solid var(--rule);
  transition:background .25s ease;
}
.v2-led__rows li:hover{background:var(--mist2)}
.v2-led__n{
  font:500 .78rem/1 var(--disp);letter-spacing:.12em;color:var(--brass);
}
.v2-led__rows b{
  font-family:var(--disp);font-weight:600;letter-spacing:-.025em;
  font-size:clamp(1.08rem,.95rem + .55vw,1.35rem);color:var(--slate);
}
.v2-led__rows p{color:var(--slate2);font-size:.96em}
.v2-led__band{margin-top:clamp(1.8rem,4vw,3rem)}
.v2-led__band img{width:100%;height:clamp(120px,18vw,190px);object-fit:cover}
@media (max-width:700px){
  .v2-led__rows li{grid-template-columns:2.6rem 1fr;gap:.3rem .9rem}
  .v2-led__rows p{grid-column:2}
}

/* ---------- 4 · de eerste dagen, horizontale rail ---------- */
.v2-rail{
  background:var(--slate);color:var(--mist);
  padding:clamp(3rem,6vw,5.5rem) 0;overflow:hidden;
}
.v2-rail__head{
  max-width:var(--maxw);margin:0 auto clamp(1.6rem,3.5vw,2.6rem);
  padding-inline:var(--pad);
}
.v2-rail__head .v2-h2{color:var(--mist)}
.v2-rail__head .v2-kicker{color:var(--brass-l)}
.v2-rail__hint{
  margin-top:.7rem;font:500 .72rem/1 var(--disp);letter-spacing:.14em;
  text-transform:uppercase;color:rgba(231,235,236,.5);
}
.v2-rail__vp{
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:thin;scrollbar-color:rgba(231,235,236,.35) transparent;
  padding-bottom:1.2rem;
}
.v2-rail__track{
  display:flex;gap:1px;background:rgba(231,235,236,.18);
  width:max-content;padding-inline:var(--pad);
  border-block:1px solid rgba(231,235,236,.18);
}
.v2-rail__card{
  flex:0 0 min(78vw,320px);scroll-snap-align:start;
  background:var(--slate);padding:1.8rem 1.5rem 2.2rem;
  transition:background .3s ease;
}
.v2-rail__card:hover{background:#1d3038}
.v2-rail__card span{
  display:block;font:500 .76rem/1 var(--disp);letter-spacing:.14em;
  color:var(--brass-l);margin-bottom:1.6rem;
}
.v2-rail__card h3{
  font-size:1.3rem;margin-bottom:.55rem;color:#fff;
}
.v2-rail__card p{color:rgba(231,235,236,.72);font-size:.95em}
.v2-rail__vp::-webkit-scrollbar{height:6px}
.v2-rail__vp::-webkit-scrollbar-thumb{background:rgba(231,235,236,.35)}

/* ---------- 5 · begraven of cremeren ---------- */
.v2-cmp{
  max-width:var(--maxw);margin-inline:auto;
  padding:clamp(3rem,6vw,5.5rem) var(--pad);
}
.v2-cmp__head{margin-bottom:clamp(1.8rem,3.5vw,2.8rem);max-width:56ch}
.v2-cmp__lead{
  margin-top:.9rem;font-family:var(--serif);
  font-size:clamp(1.05rem,.98rem + .4vw,1.3rem);line-height:1.5;color:var(--slate2);
}
.v2-cmp__tbl{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);
}
.v2-cmp__col{background:var(--mist);padding:clamp(1.4rem,3vw,2.4rem)}
.v2-cmp__col--b{background:var(--mist2)}
.v2-cmp__col h3{
  font-size:clamp(1.3rem,1.05rem + 1vw,1.75rem);letter-spacing:-.035em;
  margin-bottom:1.2rem;padding-bottom:.9rem;border-bottom:2px solid var(--slate);
}
.v2-cmp__col dt{
  font:600 .66rem/1.4 var(--disp);letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass);margin-top:1.1rem;
}
.v2-cmp__col dt:first-of-type{margin-top:0}
.v2-cmp__col dd{margin:.3rem 0 0;color:var(--slate2);font-size:.97em}

/* ---------- 6 · opbaren ---------- */
.v2-lay{position:relative;isolation:isolate;
  min-height:clamp(420px,58vh,620px);display:grid;align-items:center;
  padding:clamp(2.5rem,5vw,4.5rem) var(--pad);overflow:hidden}
.v2-lay__bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:52% 50%;z-index:-2;
}
.v2-lay::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,rgba(22,36,43,.9) 0%,rgba(22,36,43,.72) 46%,rgba(22,36,43,.28) 100%);
}
.v2-lay__card{
  max-width:min(46rem,100%);margin-right:auto;color:var(--mist);
}
.v2-lay__card .v2-h2{color:#fff}
.v2-lay__card .v2-kicker{color:var(--brass-l)}
.v2-lay__card p{color:rgba(231,235,236,.84);margin-top:1.1rem;max-width:52ch}

/* ---------- 7 · de afscheidsdienst ---------- */
.v2-spread{
  max-width:1080px;margin-inline:auto;
  padding:clamp(3rem,6vw,5.5rem) var(--pad);
}
.v2-spread__cols{
  columns:2;column-gap:clamp(1.6rem,4vw,3.5rem);
  color:var(--slate2);
}
.v2-spread__cols p{margin-bottom:1rem;break-inside:avoid}
.v2-spread__cols p:first-child::first-letter{
  float:left;font-family:var(--serif);font-size:3.6em;line-height:.82;
  padding:.06em .12em 0 0;color:var(--slate);
}
.v2-pull{
  margin-top:clamp(2rem,4vw,3rem);padding-top:clamp(1.6rem,3vw,2.4rem);
  border-top:1px solid var(--rule);
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.35rem,.95rem + 1.9vw,2.3rem);line-height:1.28;
  color:var(--slate);text-align:center;max-width:24ch;margin-inline:auto;
}
@media (max-width:700px){.v2-spread__cols{columns:1}}

/* ---------- 8 · regio ---------- */
.v2-reg{padding:clamp(3rem,6vw,5.5rem) 0;background:var(--mist2)}
.v2-reg__head{max-width:var(--maxw);margin:0 auto clamp(1.4rem,3vw,2.2rem);
  padding-inline:var(--pad)}
.v2-reg__mq{
  overflow:hidden;border-block:1px solid var(--rule);
  padding:.9rem 0;background:var(--mist);
}
.v2-reg__mv{
  display:flex;gap:2.5rem;width:max-content;
  animation:v2drift 46s linear infinite;
}
.v2-reg__mv span{
  font-family:var(--disp);font-weight:600;letter-spacing:-.04em;
  font-size:clamp(1.5rem,.9rem + 2.4vw,2.7rem);color:var(--slate);
  display:flex;align-items:center;gap:2.5rem;white-space:nowrap;
}
.v2-reg__mv span::after{
  content:"";width:9px;height:9px;border-radius:50%;background:var(--brass);
  flex:0 0 auto;opacity:.55;
}
@keyframes v2drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.v2-reg__sr{
  max-width:var(--maxw);margin:1.3rem auto 0;padding-inline:var(--pad);
  color:var(--slate2);max-width:min(var(--maxw),64ch);
}
.v2-reg__bands{
  max-width:var(--maxw);margin:clamp(1.6rem,3.5vw,2.6rem) auto 0;
  padding-inline:var(--pad);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;
}
.v2-reg__bands img{width:100%;height:clamp(110px,14vw,150px);object-fit:cover}
@media (prefers-reduced-motion:reduce){.v2-reg__mv{animation:none}}

/* ---------- 9 · rouwkaart en nazorg ---------- */
.v2-steps{
  max-width:var(--maxw);margin-inline:auto;
  padding:clamp(3rem,6vw,5.5rem) var(--pad);
}
.v2-steps__head{margin-bottom:clamp(1.8rem,3.5vw,2.8rem)}
.v2-steps__stack{display:grid;gap:clamp(.8rem,1.6vw,1.1rem);max-width:960px}
.v2-scard{
  background:var(--mist);border:1px solid var(--rule);
  border-left:3px solid var(--slate);
  padding:clamp(1.2rem,2.6vw,1.9rem) clamp(1.2rem,3vw,2.2rem);
  transition:border-left-color .25s ease,transform .25s ease;
}
.v2-scard:hover{border-left-color:var(--brass);transform:translateX(4px)}
.v2-scard:nth-child(1){margin-left:0}
.v2-scard:nth-child(2){margin-left:clamp(0px,2vw,2rem)}
.v2-scard:nth-child(3){margin-left:clamp(0px,4vw,4rem)}
.v2-scard:nth-child(4){margin-left:clamp(0px,6vw,6rem)}
.v2-scard:nth-child(5){margin-left:clamp(0px,8vw,8rem)}
.v2-scard h3{font-size:1.22rem;margin-bottom:.4rem}
.v2-scard p{color:var(--slate2);font-size:.97em;max-width:62ch}

/* ---------- 10 · contact ---------- */
.v2-con{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
}
.v2-con__l{
  background:var(--slate);color:var(--mist);
  padding:clamp(2.5rem,6vw,5rem) clamp(1.25rem,5vw,4rem);
  display:flex;flex-direction:column;justify-content:center;
}
.v2-con__h{
  font-family:var(--disp);font-weight:700;letter-spacing:-.045em;
  font-size:clamp(2.1rem,1.2rem + 3.4vw,3.6rem);line-height:1;
  color:#fff;margin-bottom:clamp(1.6rem,3vw,2.4rem);
}
.v2-con__dials{display:grid;gap:1px;background:rgba(231,235,236,.2);
  border-block:1px solid rgba(231,235,236,.2)}
.v2-con__dials a{
  background:var(--slate);padding:1.15rem 0;text-decoration:none;
  display:flex;flex-direction:column;gap:.3rem;transition:padding-left .25s ease,background .25s ease;
}
.v2-con__dials a:hover{background:#1d3038;padding-left:.7rem}
.v2-con__dials span{
  font:600 .63rem/1 var(--disp);letter-spacing:.17em;text-transform:uppercase;
  color:var(--brass-l);
}
.v2-con__dials b{
  font:600 clamp(1.1rem,.9rem + .8vw,1.45rem)/1.2 var(--disp);
  letter-spacing:-.03em;color:#fff;word-break:break-word;
}
.v2-con__r{
  background:var(--mist2);
  padding:clamp(2.5rem,6vw,5rem) clamp(1.25rem,5vw,4rem);
  display:flex;flex-direction:column;justify-content:center;gap:1.4rem;
}
.v2-con__k{
  display:block;font:600 .63rem/1 var(--disp);letter-spacing:.17em;
  text-transform:uppercase;color:var(--brass);margin-bottom:.8rem;
}
.v2-con__r address{
  font-size:clamp(1.05rem,.95rem + .45vw,1.25rem);line-height:1.7;color:var(--slate);
}
.v2-con__map{
  align-self:start;font:600 .84rem/1 var(--disp);color:var(--slate);
  text-decoration:none;border-bottom:2px solid var(--brass);padding-bottom:.3rem;
  transition:color .2s ease;
}
.v2-con__map:hover{color:var(--brass)}
.v2-con__fig img{width:100%;height:clamp(100px,13vw,150px);object-fit:cover}

/* ---------- voettekst ---------- */
.v2-foot{background:var(--slate);color:rgba(231,235,236,.66);
  padding:clamp(2.5rem,5vw,3.5rem) var(--pad);
  border-top:1px solid rgba(231,235,236,.16)}
.v2-foot__in{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1.8rem;align-items:start;
}
.v2-foot__brand{display:flex;align-items:center;gap:.8rem}
.v2-foot__brand img{width:42px;filter:brightness(0) invert(1);opacity:.75}
.v2-foot__brand p{font-family:var(--serif);font-style:italic;
  font-size:1.08rem;line-height:1.35;color:var(--mist)}
.v2-foot__nav{display:flex;flex-direction:column;gap:.5rem}
.v2-foot__nav a{font:500 .84rem/1 var(--disp);text-decoration:none;
  color:rgba(231,235,236,.7);transition:color .2s ease}
.v2-foot__nav a:hover{color:#fff}
.v2-foot__legal{font:400 .78rem/1.75 var(--disp);color:rgba(231,235,236,.5)}
.v2-foot__legal a{color:rgba(231,235,236,.72)}

/* ---------- mobiele belbalk ---------- */
.v2-bar{display:none}
@media (max-width:760px){
  .v2-bar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--slate);
    padding:.55rem .75rem calc(.55rem + env(safe-area-inset-bottom,0px));
    gap:.5rem;box-shadow:0 -6px 22px rgba(22,36,43,.3);
  }
  .v2-bar a{
    flex:1;text-align:center;text-decoration:none;color:var(--slate);
    font:600 .92rem/1 var(--disp);padding:.85rem .5rem;background:var(--mist);
  }
  .v2-bar__alt{flex:0 0 auto;background:transparent;color:#fff;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.34)}
  .v2-foot{padding-bottom:calc(5.5rem + env(safe-area-inset-bottom,0px))}
}