/* =========================================================
   00 — BASIS / KLEUREN
   ========================================================= */

:root {
  --navy: #122b4c;
  --blue: #243f94;
  --red: #ef2635;
  --orange: #f49a00;
  --paper: #f3f0e9;
  --white: #ffffff;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  background: var(--paper);
  color: var(--navy);
}

a {
  color: inherit;
}


/* =========================================================
   01 — HEADER
   ========================================================= */

.site-header {
  height: 92px;

  padding: 15px 4vw;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background: var(--paper);
}

.site-header img {
  width: 220px;
  max-height: 62px;

  object-fit: contain;
  object-position: left center;
}

.menu-button {
  padding: 8px 0;

  border: 0;
  background: none;

  color: var(--navy);

  font-size: 14px;
  font-weight: 800;
  letter-spacing: .12em;

  cursor: pointer;
}

.menu-button span {
  margin-left: 12px;
  font-size: 23px;
}


/* =========================================================
   02 — HERO
   ========================================================= */

.hero {
  position: relative;

  height: calc(100vh - 92px);
  min-height: 680px;

  overflow: hidden;

  background: var(--navy);
}

.half {
  position: absolute;

  inset: 0 50% 0 0;

  background-size: cover;
  background-position: center;
}


/* 4 mei */

.remember {
  background-image:
    url('assets/herdenken-publiek.jpg');

  background-position:
    center 47%;

  filter:
    saturate(.82)
    contrast(1.03)
    brightness(1.02);
}


/* 5 mei */

.celebrate {
  inset: 0 0 0 50%;

  background-image:
    url('assets/vieren.webp');

  background-position: center;
}


/* Donkere laag voor tekst */

.shade {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(9, 28, 54, .70) 0%,
      rgba(9, 28, 54, .55) 30%,
      rgba(9, 28, 54, .26) 49%,
      rgba(9, 28, 54, .06) 58%,
      rgba(9, 28, 54, .16) 100%
    );
}


/* Korrel / drukwerkgevoel */

.grain,
.grain::after {
  position: absolute;
  inset: 0;

  content: "";

  pointer-events: none;
}

.grain {
  opacity: .20;

  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");

  mix-blend-mode: soft-light;
}


/* ---------------------------------------------------------
   02A — HERO TEKST
   --------------------------------------------------------- */

.hero-copy {
  position: absolute;
  z-index: 2;

  left: 4.2vw;
  bottom: 8vh;

  width: 43%;

  color: var(--white);
}

.eyebrow,
.kicker {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .17em;
}

.eyebrow {
  margin: 0 0 17px;
}

.hero h1 {
  max-width: 100%;

  margin: 0 0 25px;

  font-size:
    clamp(50px, 5.9vw, 100px);

  line-height: .88;
  letter-spacing: -.052em;

  text-shadow:
    0 2px 18px
    rgba(5, 20, 38, .22);
}

.year {
  margin: 0;

  color: #ff5a45;

  font-size:
    clamp(18px, 1.55vw, 26px);

  font-weight: 900;
  letter-spacing: .12em;
}


/* ---------------------------------------------------------
   02B — HERO KEUZES
   --------------------------------------------------------- */

.choices {
  display: flex;

  gap: 22px;

  max-width: 375px;

  margin-top: 30px;
}

.choices a {
  flex: 1;

  padding:
    12px 8px 7px 0;

  border-top:
    2px solid
    rgba(255, 255, 255, .8);

  color: var(--white);

  font-size: 13px;
  text-decoration: none;
}

.choices .date {
  display: block;
  opacity: .92;
}

.choices b {
  display: block;

  margin-top: 5px;

  font-size: 20px;
}


/* ---------------------------------------------------------
   02C — PIJLEN
   --------------------------------------------------------- */

.arrow,
.link-arrow {
  position: relative;

  display: block;

  width: 42px;
  height: 10px;

  margin-top: 7px;

  transition:
    width .22s ease;
}

.arrow::before,
.link-arrow::before {
  position: absolute;

  left: 0;
  right: 2px;
  top: 4px;

  height: 1.5px;

  content: "";

  background: currentColor;
}

.arrow::after,
.link-arrow::after {
  position: absolute;

  right: 0;
  top: 1px;

  width: 6px;
  height: 6px;

  content: "";

  border-top:
    1.5px solid currentColor;

  border-right:
    1.5px solid currentColor;

  transform:
    rotate(45deg);
}

.choices a:hover .arrow,
.card a:hover .link-arrow {
  width: 60px;
}


/* =========================================================
   03 — INTRO
   ========================================================= */

.intro {
  max-width: 1200px;

  padding:
    120px 8vw 135px;
}

.kicker {
  color: var(--red);
}

.intro h2,
.programme h2 {
  margin:
    20px 0 30px;

  font-size:
    clamp(50px, 7vw, 100px);

  line-height: .91;
  letter-spacing: -.055em;
}

.intro > p:last-child {
  max-width: 650px;

  font-size: 20px;
  line-height: 1.55;
}


/* =========================================================
   04 — HERDENKEN & VIEREN
   ========================================================= */

.cards {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  min-height: 720px;
}

.card {
  position: relative;

  display: flex;
  align-items: flex-end;

  overflow: hidden;

  background-size: cover;
  background-position: center;
}

.card::before {
  position: absolute;
  inset: 0;

  content: "";

  background:
    linear-gradient(
      0deg,
      rgba(7, 24, 45, .82),
      rgba(7, 24, 45, .04) 68%
    );
}


/* 4 mei */

.four {
  background-image:
    url('assets/herdenken.jpg');

  background-position:
    center 28%;
}


/* 5 mei */

.five {
  background-image:
    url('assets/Bandpodium3.webp');

  background-position:
    center center;
}

.card-copy {
  position: relative;
  z-index: 1;

  padding:
    60px 7vw 65px;

  color: var(--white);
}

.card-copy span {
  color: #ff654d;

  font-weight: 900;
  letter-spacing: .15em;
}

.card h3 {
  margin:
    8px 0 15px;

  font-size:
    clamp(50px, 6vw, 88px);

  letter-spacing: -.05em;
}

.card p {
  max-width: 480px;

  font-size: 18px;
  line-height: 1.45;
}

.card a {
  display: inline-flex;
  flex-direction: column;

  margin-top: 18px;

  color: var(--white);

  font-weight: bold;
  text-decoration: none;
}

.card .link-arrow {
  margin-top: 5px;
}


/* =========================================================
   05 — PROGRAMMA
   ========================================================= */

.programme {
  position: relative;

  display: grid;

  grid-template-columns:
    1.4fr .6fr;

  gap: 80px;

  align-items: end;

  padding:
    120px 8vw;

  overflow: visible;

  background: var(--navy);
  color: var(--white);
}

.programme::after {
  position: absolute;
  inset: 0;

  z-index: 0;

  content: "";

  opacity: .12;

  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  pointer-events: none;
}

.programme > div,
.programme > p {
  position: relative;
  z-index: 1;
}

.programme > p {
  font-size: 20px;
  line-height: 1.6;
}


/* =========================================================
   06 — VRIJWILLIGERSSTICKER
   ---------------------------------------------------------
   Grafisch en passend bij campagne / drukwerk.
   Geen glansbol, maar een licht organische rode sticker.
   ========================================================= */

.volunteer-sticker {
  position: absolute;
  z-index: 20;

  right: 7vw;
  bottom: -82px;

  width: 166px;
  height: 166px;

  padding: 34px 23px 29px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;

  border-radius:
    49% 51% 48% 52% /
    51% 48% 52% 49%;

  background:
    linear-gradient(
      145deg,
      #ff4d57 0%,
      #f82a3d 43%,
      #ed1833 72%,
      #d9102c 100%
    );

  color: var(--white);
  text-decoration: none;

  transform:
    rotate(-4deg);

  box-shadow:
    0 2px 0 rgba(255, 255, 255, .25),
    0 10px 18px rgba(7, 20, 38, .22),
    0 27px 42px rgba(7, 20, 38, .20),
    0 0 32px rgba(239, 38, 53, .18);

  overflow: hidden;
  isolation: isolate;

  transition:
    transform .25s cubic-bezier(.2, .8, .2, 1),
    box-shadow .25s ease;
}


/* ---------------------------------------------------------
   06A — LICHTE DRUKWERKRAND
   --------------------------------------------------------- */

.volunteer-sticker::before {
  position: absolute;
  z-index: 1;

  inset: 4px;

  content: "";

  border:
    1px solid
    rgba(255, 255, 255, .20);

  border-radius:
    51% 49% 52% 48% /
    48% 52% 49% 51%;

  pointer-events: none;
}


/* ---------------------------------------------------------
   06B — KORREL
   --------------------------------------------------------- */

.volunteer-sticker::after {
  position: absolute;
  z-index: 1;

  inset: 0;

  content: "";

  border-radius: inherit;

  opacity: .24;

  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.72'/%3E%3C/svg%3E");

  mix-blend-mode: soft-light;

  pointer-events: none;
}


/* ---------------------------------------------------------
   06C — TYPOGRAFIE
   --------------------------------------------------------- */

.volunteer-small,
.volunteer-big {
  position: relative;
  z-index: 2;

  display: block;

  width: 100%;

  transform: none;
}

.volunteer-small {
  margin-bottom: 8px;

  font-size: 10px;
  font-weight: 900;

  line-height: 1;

  letter-spacing: .18em;

  opacity: .92;
}

.volunteer-big {
  font-size: 17px;
  font-weight: 900;

  line-height: .88;
  letter-spacing: -.045em;

  text-shadow:
    0 1px 1px rgba(110, 0, 20, .16);
}


/* ---------------------------------------------------------
   06D — HOVER
   --------------------------------------------------------- */

.volunteer-sticker:hover {
  transform:
    translateY(-6px)
    rotate(-2deg);

  box-shadow:
    0 2px 0 rgba(255, 255, 255, .28),
    0 13px 20px rgba(7, 20, 38, .22),
    0 33px 48px rgba(7, 20, 38, .22),
    0 0 38px rgba(239, 38, 53, .21);
}


/* ---------------------------------------------------------
   06E — MOBIEL
   --------------------------------------------------------- */

@media (max-width: 750px) {

  .volunteer-sticker {
    right: 6vw;
    bottom: -65px;

    width: 132px;
    height: 132px;

    padding:
      27px 18px 22px;

    transform:
      rotate(-4deg);

    box-shadow:
      0 2px 0 rgba(255, 255, 255, .22),
      0 8px 14px rgba(7, 20, 38, .22),
      0 21px 34px rgba(7, 20, 38, .18),
      0 0 25px rgba(239, 38, 53, .16);
  }

  .volunteer-small {
    margin-bottom: 6px;

    font-size: 8px;

    letter-spacing: .15em;
  }

  .volunteer-big {
    font-size: 13px;
  }

}

/* =========================================================
   07 — FOTOSTROOK
   ========================================================= */

.mosaic {
  position: relative;
  z-index: 1;

  display: grid;

  grid-template-columns:
    1fr 1fr;

  height: 65vh;
  min-height: 500px;
}

.mosaic img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* =========================================================
   08 — PARTNERS & SPONSOREN
   ========================================================= */

.partner-strip {
  position: relative;
  z-index: 2;

  width: 100%;

  background: var(--white);
}

.partner-strip-inner {
  min-height: 170px;

  padding:
    35px 7vw;

  display: grid;

  grid-template-columns:
    230px 1fr;

  gap: 45px;

  align-items: center;
}

.partner-heading p {
  margin:
    0 0 12px;

  color: var(--red);

  font-size: 11px;
  font-weight: 900;

  line-height: 1.35;
  letter-spacing: .15em;
}

.partner-heading a {
  position: relative;

  display: inline-block;

  color: var(--navy);

  font-size: 12px;
  font-weight: 800;

  text-decoration: none;
}

.partner-heading a::after {
  position: absolute;

  left: 0;
  bottom: -4px;

  width: 0;
  height: 1px;

  content: "";

  background: var(--navy);

  transition:
    width .2s ease;
}

.partner-heading a:hover::after {
  width: 100%;
}

.partner-logos {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    clamp(25px, 4vw, 70px);

  align-items: center;
}

.partner-logo {
  height: 85px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.partner-logo img {
  display: block;

  max-width: 100%;
  max-height: 68px;

  width: auto;
  height: auto;

  object-fit: contain;
}


/* =========================================================
   09 — FOOTER
   ========================================================= */

.site-footer {
  position: relative;

  width: 100%;

  padding:
    38px 7vw 18px;

  overflow: hidden;

  background: var(--navy);
  color: var(--white);
}

.site-footer::before {
  position: absolute;
  inset: 0;

  content: "";

  opacity: .08;

  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  pointer-events: none;
}

.footer-inner,
.footer-bottom {
  position: relative;
  z-index: 1;

  max-width: 1450px;

  margin:
    0 auto;
}

.footer-inner {
  display: grid;

  grid-template-columns:
    1.5fr 1fr 1fr .8fr;

  gap:
    clamp(35px, 5vw, 80px);

  align-items: start;
}


/* ---------------------------------------------------------
   09A — FOOTER IDENTITEIT
   --------------------------------------------------------- */

.footer-brand img {
  display: block;

  width: 165px;
  height: auto;

  margin-bottom: 14px;

  background: var(--white);

  padding:
    6px 8px;
}

.footer-brand p {
  margin: 0;

  color:
    rgba(255, 255, 255, .68);

  font-size: 12px;
  line-height: 1.45;
}


/* ---------------------------------------------------------
   09B — FOOTER LINKS
   --------------------------------------------------------- */

.footer-column {
  display: flex;

  flex-direction: column;
  align-items: flex-start;
}

.footer-title {
  margin:
    0 0 13px;

  color: #ff654d;

  font-size: 10px;
  font-weight: 900;

  letter-spacing: .16em;
}

.footer-column a {
  margin-bottom: 8px;

  color: var(--white);

  font-size: 12px;

  text-decoration: none;

  opacity: .78;

  transition:
    opacity .2s ease;
}

.footer-column a:hover {
  opacity: 1;
}


/* ---------------------------------------------------------
   09C — SOCIAL MEDIA
   --------------------------------------------------------- */

.social-links {
  display: flex;

  gap: 8px;
}

.social-links a {
  width: 32px;
  height: 32px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: var(--white);
  color: var(--navy);

  transition:
    transform .2s ease;
}

.social-links a:hover {
  transform:
    translateY(-2px);
}

.social-links svg {
  width: 18px;
  height: 18px;
}

.social-links a:first-child svg {
  fill: currentColor;
}

.social-links a:last-child svg {
  fill: none;

  stroke: currentColor;
  stroke-width: 1.8;
}

.social-links .instagram-dot {
  fill: currentColor;
  stroke: none;
}


/* ---------------------------------------------------------
   09D — FOOTER ONDERREGEL
   --------------------------------------------------------- */

.footer-bottom {
  margin-top: 30px;

  padding-top: 14px;

  display: flex;
  justify-content: space-between;

  gap: 30px;

  border-top:
    1px solid
    rgba(255, 255, 255, .16);

  color:
    rgba(255, 255, 255, .48);

  font-size: 10px;
}

.footer-bottom p {
  margin: 0;
}

.footer-bottom a {
  color: inherit;

  text-decoration: none;
}


/* =========================================================
   10 — RESPONSIVE / TABLET
   ========================================================= */

@media (max-width: 1000px) {

  .partner-strip-inner {
    grid-template-columns:
      190px 1fr;

    gap: 30px;
  }

  .partner-logos {
    gap: 25px;
  }

  .partner-logo img {
    max-height: 58px;
  }

  .footer-inner {
    grid-template-columns:
      1.3fr 1fr 1fr .8fr;

    gap: 30px;
  }

}


/* =========================================================
   11 — RESPONSIVE / MOBIEL
   ========================================================= */

@media (max-width: 750px) {


  /* -------------------------------------------------------
     11A — HEADER
     ------------------------------------------------------- */

  .site-header {
    height: 76px;
  }

  .site-header img {
    width: 155px;
  }


  /* -------------------------------------------------------
     11B — MOBIELE HERO

     4-meifoto: 46%
     5-meifoto: 54%

     Tekst staat over de overgang van beide foto's.
     ------------------------------------------------------- */

  .hero {
    height: 900px;
    min-height: 0;
  }

  .half {
    inset:
      0 0 54% 0;
  }

  .remember {
    background-position:
      center 48%;
  }

  .celebrate {
    inset:
      46% 0 0 0;

    background-position:
      center center;
  }


  /* Donkere laag vooral rond de tekst */

  .shade {
    background:
      linear-gradient(
        180deg,
        rgba(8, 26, 49, .05) 0%,
        rgba(8, 26, 49, .08) 25%,
        rgba(8, 26, 49, .35) 38%,
        rgba(8, 26, 49, .67) 48%,
        rgba(8, 26, 49, .69) 64%,
        rgba(8, 26, 49, .46) 82%,
        rgba(8, 26, 49, .40) 100%
      );
  }


  /* Tekst over overgang 4 en 5 mei */

  .hero-copy {
    left: 6vw;
    right: 6vw;

    top: 41%;
    bottom: auto;

    width: auto;

    transform:
      translateY(-50%);
  }

  .eyebrow {
    margin-bottom: 13px;

    font-size: 11px;

    letter-spacing: .16em;
  }

  .hero h1 {
    margin-bottom: 21px;

    font-size:
      clamp(47px, 13.2vw, 68px);

    line-height: .86;
    letter-spacing: -.052em;
  }

  .year {
    font-size: 17px;
  }

  .choices {
    gap: 18px;

    max-width: 100%;

    margin-top: 26px;
  }

  .choices a {
    padding-right: 6px;
  }

  .choices b {
    font-size: 18px;
  }


  /* -------------------------------------------------------
     11C — INTRO
     ------------------------------------------------------- */

  .intro {
    padding:
      85px 7vw;
  }


  /* -------------------------------------------------------
     11D — HERDENKEN & VIEREN
     ------------------------------------------------------- */

  .cards {
    grid-template-columns: 1fr;
  }

  .card {
    min-height: 650px;
  }


  /* -------------------------------------------------------
     11E — PROGRAMMA
     ------------------------------------------------------- */

  .programme {
    grid-template-columns: 1fr;

    padding:
      85px 7vw;

    gap: 25px;
  }


  /* -------------------------------------------------------
     11F — VRIJWILLIGERSBOL
     ------------------------------------------------------- */

  .volunteer-sticker {
    right: 6vw;
    bottom: -61px;

    width: 122px;
    height: 122px;

    padding:
      24px 15px 21px;

    box-shadow:
      0 0 0 2px rgba(255, 255, 255, .04),
      0 0 16px rgba(255, 255, 255, .13),
      0 0 30px rgba(255, 55, 76, .16),

      0 4px 7px rgba(7, 20, 38, .22),
      0 12px 20px rgba(7, 20, 38, .25),
      0 23px 40px rgba(7, 20, 38, .17),

      inset 5px 6px 11px rgba(255, 255, 255, .09),
      inset -10px -13px 18px rgba(110, 0, 24, .17);
  }

  .volunteer-small,
  .volunteer-big {
    transform:
      translate(1px, 1px);
  }

  .volunteer-small {
    margin-bottom: 5px;

    font-size: 8px;

    letter-spacing: .09em;
  }

  .volunteer-big {
    font-size: 11.5px;
  }


  /* -------------------------------------------------------
     11G — FOTOSTROOK
     ------------------------------------------------------- */

  .mosaic {
    grid-template-columns: 1fr;

    height: auto;
  }

  .mosaic img {
    height: 430px;
  }


  /* -------------------------------------------------------
     11H — PARTNERS
     ------------------------------------------------------- */

  .partner-strip-inner {
    min-height: 0;

    padding:
      35px 7vw;

    display: block;
  }

  .partner-heading {
    margin-bottom: 28px;
  }

  .partner-heading p {
    margin-bottom: 8px;
  }

  .partner-logos {
    grid-template-columns:
      1fr 1fr;

    gap:
      18px 30px;
  }

  .partner-logo {
    height: 65px;
  }

  .partner-logo img {
    max-height: 52px;
  }


  /* -------------------------------------------------------
     11I — FOOTER
     ------------------------------------------------------- */

  .site-footer {
    padding:
      32px 7vw 18px;
  }

  .footer-inner {
    grid-template-columns:
      1fr 1fr;

    gap:
      30px 25px;
  }

  .footer-brand {
    grid-column:
      1 / -1;
  }

  .footer-brand img {
    width: 150px;
  }

  .footer-social {
    align-self: start;
  }

  .footer-bottom {
    margin-top: 28px;
  }

}


/* =========================================================
   12 — RESPONSIVE / KLEINE TELEFOONS
   ========================================================= */

@media (max-width: 480px) {

  /* Hero iets hoger voor kleine telefoons */

  .hero {
    height: 920px;
  }

  .hero-copy {
    top: 42%;
  }

  .hero h1 {
    font-size:
      clamp(44px, 12.8vw, 61px);
  }


  /* Partners */

  .partner-logos {
    grid-template-columns:
      1fr 1fr;
  }

  .partner-logo {
    justify-content: flex-start;
  }


  /* Footer */

  .footer-inner {
    grid-template-columns:
      1fr 1fr;
  }

  .footer-brand {
    grid-column:
      1 / -1;
  }

  .footer-social {
    grid-column:
      1 / -1;
  }

  .footer-bottom {
    flex-direction: column;

    gap: 6px;
  }

}
/* =========================================================
   13 — FULLSCREEN MENU
   ========================================================= */

body.menu-is-open {
  overflow: hidden;
}


/* ---------------------------------------------------------
   13A — HEADER MENU-ICOON
   --------------------------------------------------------- */

.menu-button {
  position: relative;
  z-index: 1001;

  display: flex;
  align-items: center;

  gap: 13px;
}

.menu-icon {
  position: relative;

  width: 25px;
  height: 16px;

  display: block;
}

.menu-icon i {
  position: absolute;

  left: 0;

  width: 100%;
  height: 2px;

  background: currentColor;

  transition:
    transform .25s ease,
    top .25s ease;
}

.menu-icon i:first-child {
  top: 4px;
}

.menu-icon i:last-child {
  top: 11px;
}


/* =========================================================
   13B — OVERLAY
   ========================================================= */

.menu-overlay {
  position: fixed;
  z-index: 10000;

  inset: 0;

  min-height: 100vh;

  overflow-x: hidden;
  overflow-y: auto;

  background: var(--navy);

  color: var(--white);

  visibility: hidden;
  pointer-events: none;

  opacity: 0;

  clip-path:
    inset(0 0 100% 0);

  transition:
    clip-path .55s cubic-bezier(.77, 0, .18, 1),
    opacity .2s ease,
    visibility 0s linear .55s;
}

.menu-overlay.is-open {
  visibility: visible;
  pointer-events: auto;

  opacity: 1;

  clip-path:
    inset(0 0 0 0);

  transition:
    clip-path .55s cubic-bezier(.77, 0, .18, 1),
    opacity .2s ease,
    visibility 0s;
}


/* =========================================================
   13C — KORREL
   ========================================================= */

.menu-grain {
  position: fixed;
  z-index: 0;

  inset: 0;

  opacity: .16;

  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");

  mix-blend-mode: soft-light;

  pointer-events: none;
}


/* =========================================================
   13D — ACHTERGRONDTYPOGRAFIE
   ========================================================= */

.menu-background-number {
  position: fixed;
  z-index: 0;

  right: -2vw;
  top: 50%;

  transform:
    translateY(-50%)
    scale(1);

  color:
    rgba(239, 38, 53, .050);

  font-size:
    clamp(300px, 45vw, 760px);

  font-weight: 900;

  line-height: .7;

  letter-spacing: -.10em;

  white-space: nowrap;

  pointer-events: none;
  user-select: none;

  transition:
    transform .45s cubic-bezier(.2, .8, .2, 1),
    color .3s ease,
    font-size .45s cubic-bezier(.2, .8, .2, 1),
    right .45s cubic-bezier(.2, .8, .2, 1),
    letter-spacing .45s ease;
}

.menu-background-number.is-active {
  transform:
    translateY(-50%)
    scale(1.035);
}


/* PROGRAMMA:
   geen cijfer, maar enorm woord dat buiten beeld loopt */

.menu-background-number.is-word {
  right: -24vw;

  font-size:
    clamp(190px, 25vw, 470px);

  line-height: .75;

  letter-spacing: -.075em;

  color:
    rgba(239, 38, 53, .045);
}

.menu-background-number.is-word.is-active {
  transform:
    translateY(-50%)
    scale(1.025);
}


/* =========================================================
   13E — BOVENBALK
   ========================================================= */

.menu-top {
  position: relative;
  z-index: 5;

  min-height: 92px;

  padding:
    15px 4vw;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu-logo {
  width: 220px;
  max-height: 62px;

  padding: 0;

  object-fit: contain;
  object-position: left center;

  background: transparent;
}


/* SLUITEN */

.menu-close {
  display: flex;
  align-items: center;

  gap: 13px;

  padding: 8px 0;

  border: 0;

  background: none;

  color: var(--white);

  font-family: inherit;

  font-size: 14px;
  font-weight: 900;

  letter-spacing: .12em;

  cursor: pointer;
}

.menu-close i {
  display: block;

  font-style: normal;

  font-size: 33px;
  font-weight: 300;

  line-height: .7;

  transition:
    transform .3s ease;
}

.menu-close:hover i {
  transform:
    rotate(90deg);
}

.menu-close:focus {
  outline: none;
}

.menu-close:focus-visible {
  outline:
    2px solid rgba(255, 255, 255, .72);

  outline-offset: 7px;

  border-radius: 2px;
}


/* =========================================================
   13F — MENU-INHOUD
   ========================================================= */

.menu-content {
  position: relative;
  z-index: 3;

  min-height:
    calc(100vh - 190px);

  padding:
    3vh 7vw 7vh;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr) 260px;

  gap:
    clamp(60px, 8vw, 150px);

  align-items: center;
}


/* =========================================================
   13G — PRIMAIRE NAVIGATIE
   ========================================================= */

.menu-primary {
  width: 100%;
  max-width: 1050px;
}

.menu-main-link {
  position: relative;

  display: grid;

  grid-template-columns:
    90px minmax(0, 1fr) 80px;

  gap: 24px;

  align-items: center;

  min-height: 125px;

  border-top:
    1px solid rgba(255, 255, 255, .20);

  color: var(--white);

  text-decoration: none;

  opacity: 0;

  transform:
    translateY(40px);

  transition:
    color .25s ease,
    padding-left .35s cubic-bezier(.2, .8, .2, 1),
    border-color .25s ease;
}

.menu-main-link:last-child {
  border-bottom:
    1px solid rgba(255, 255, 255, .20);
}


/* binnenkomen */

.menu-overlay.is-open
.menu-main-link {
  opacity: 1;

  transform:
    translateY(0);

  transition:
    opacity .55s ease,
    transform .55s cubic-bezier(.2, .8, .2, 1),
    color .25s ease,
    padding-left .35s cubic-bezier(.2, .8, .2, 1),
    border-color .25s ease;
}

.menu-overlay.is-open
.menu-main-link:nth-child(1) {
  transition-delay: .20s;
}

.menu-overlay.is-open
.menu-main-link:nth-child(2) {
  transition-delay: .27s;
}

.menu-overlay.is-open
.menu-main-link:nth-child(3) {
  transition-delay: .34s;
}


/* 04 / 05 */

.menu-main-number {
  color: #ff5a45;

  font-size:
    clamp(32px, 3.3vw, 55px);

  font-weight: 900;

  line-height: 1;

  letter-spacing: -.06em;

  transition:
    transform .35s cubic-bezier(.2, .8, .2, 1),
    color .25s ease;
}

.menu-main-link[data-accent="orange"]
.menu-main-number {
  color: var(--orange);
}

.menu-main-number-empty {
  visibility: hidden;
}


/* tekst */

.menu-main-copy {
  display: flex;
  flex-direction: column;

  min-width: 0;
}

.menu-main-copy small {
  margin-bottom: 4px;

  color:
    rgba(255, 255, 255, .58);

  font-size: 10px;
  font-weight: 900;

  letter-spacing: .18em;
}

.menu-main-copy strong {
  font-size:
    clamp(46px, 6vw, 98px);

  font-weight: 900;

  line-height: .82;

  letter-spacing: -.06em;
}


/* lijn / pijl */

.menu-main-arrow {
  position: relative;

  justify-self: end;

  width: 44px;
  height: 18px;

  opacity: .45;

  transition:
    width .35s cubic-bezier(.2, .8, .2, 1),
    opacity .25s ease,
    transform .35s cubic-bezier(.2, .8, .2, 1);
}

.menu-main-arrow::before {
  position: absolute;

  left: 0;
  right: 2px;
  top: 8px;

  height: 2px;

  content: "";

  background: currentColor;
}

.menu-main-arrow::after {
  position: absolute;

  right: 0;
  top: 3px;

  width: 9px;
  height: 9px;

  content: "";

  border-top:
    2px solid currentColor;

  border-right:
    2px solid currentColor;

  transform:
    rotate(45deg);
}


/* =========================================================
   13H — HOVER HOOFDLINKS
   ========================================================= */

.menu-main-link:hover {
  padding-left: 18px;

  border-color:
    rgba(255, 255, 255, .48);
}

.menu-main-link:hover
.menu-main-number:not(.menu-main-number-empty) {
  transform:
    rotate(-5deg)
    scale(1.12);
}

.menu-main-link:hover
.menu-main-arrow {
  width: 70px;

  opacity: 1;

  transform:
    translateX(5px);
}


/* =========================================================
   13I — SECUNDAIRE NAVIGATIE
   ========================================================= */

.menu-secondary {
  opacity: 0;

  transform:
    translateY(25px);
}

.menu-overlay.is-open
.menu-secondary {
  opacity: 1;

  transform:
    translateY(0);

  transition:
    opacity .5s ease .42s,
    transform .5s ease .42s;
}

.menu-secondary-title {
  margin:
    0 0 18px;

  color: #ff654d;

  font-size: 10px;
  font-weight: 900;

  letter-spacing: .18em;
}

.menu-secondary nav {
  display: flex;
  flex-direction: column;

  align-items: flex-start;
}

.menu-secondary a {
  position: relative;

  margin-bottom: 11px;

  color:
    rgba(255, 255, 255, .74);

  font-size: 15px;
  font-weight: 700;

  line-height: 1.3;

  text-decoration: none;

  transition:
    color .2s ease,
    transform .2s ease;
}

.menu-secondary a::before {
  position: absolute;

  left: -16px;
  top: 8px;

  width: 0;
  height: 1px;

  content: "";

  background: #ff654d;

  transition:
    width .2s ease;
}

.menu-secondary a:hover {
  color: var(--white);

  transform:
    translateX(12px);
}

.menu-secondary a:hover::before {
  width: 9px;
}


/* =========================================================
   13J — ONDERKANT
   ========================================================= */

.menu-bottom {
  position: relative;
  z-index: 3;

  min-height: 80px;

  padding:
    18px 7vw 25px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 30px;

  border-top:
    1px solid rgba(255, 255, 255, .13);

  color:
    rgba(255, 255, 255, .45);

  font-size: 10px;
  font-weight: 800;

  letter-spacing: .14em;

  opacity: 0;

  transition:
    opacity .4s ease;
}

.menu-overlay.is-open
.menu-bottom {
  opacity: 1;

  transition-delay: .48s;
}

.menu-bottom p {
  margin: 0;
}

.menu-social {
  display: flex;

  gap: 24px;
}

.menu-social a {
  color:
    rgba(255, 255, 255, .60);

  text-decoration: none;

  transition:
    color .2s ease;
}

.menu-social a:hover {
  color: var(--white);
}


/* =========================================================
   13K — TABLET
   ========================================================= */

@media (max-width: 950px) {

  .menu-content {
    grid-template-columns:
      minmax(0, 1fr) 190px;

    gap: 45px;
  }

  .menu-main-link {
    grid-template-columns:
      70px minmax(0, 1fr) 55px;

    gap: 18px;
  }

}


/* =========================================================
   13L — MOBIEL
   ========================================================= */

@media (max-width: 750px) {

  .menu-overlay {
    min-height: 100dvh;
  }


  /* bovenkant */

  .menu-top {
    min-height: 76px;

    padding:
      12px 6vw;
  }

  .menu-logo {
    width: 155px;
    max-height: 52px;
  }

  .menu-close {
    font-size: 11px;
  }

  .menu-close i {
    font-size: 28px;
  }


  /* achtergrondtypografie:
     deze MAG bewust buiten beeld vallen */

  .menu-background-number {
    right: -5vw;
    top: 42%;

    font-size: 78vw;
  }

  .menu-background-number.is-word {
    right: -75vw;

    font-size: 43vw;

    letter-spacing: -.08em;
  }


  /* inhoud */

  .menu-content {
    min-height: 0;

    padding:
      5vh 6vw 55px;

    display: block;
  }


  /* hoofdroutes */

  .menu-primary {
    width: 100%;
    max-width: none;
  }

  .menu-main-link {
    grid-template-columns:
      48px minmax(0, 1fr);

    column-gap: 14px;

    min-height: 136px;

    padding:
      19px 0 17px;

    overflow: hidden;
  }


  /* 04 / 05 */

  .menu-main-number {
    align-self: start;

    padding-top: 7px;

    font-size: 25px;
    line-height: 1;

    white-space: nowrap;
  }


  /* lege nummerkolom blijft bestaan bij PROGRAMMA,
     zodat alle drie de titels exact gelijk beginnen */

  .menu-main-number-empty {
    display: block;
    visibility: hidden;
  }


  /* tekst */

  .menu-main-copy {
    min-width: 0;
    width: 100%;
  }

  .menu-main-copy small {
    margin-bottom: 9px;

    font-size: 9px;
    line-height: 1;

    letter-spacing: .16em;
  }


  /* Zichtbare titel:
     groot, maar altijd volledig binnen het scherm */

  .menu-main-copy strong {
    display: block;

    width: 100%;

    font-size:
      clamp(39px, 10.4vw, 56px);

    line-height: .88;

    letter-spacing: -.055em;

    white-space: nowrap;
  }


  /* PROGRAMMA is langer en krijgt daarom
     mobiel bewust een iets kleinere schaal */

  .menu-programme-link
  .menu-main-copy strong {
    font-size:
      clamp(35px, 9.25vw, 50px);
  }


  /* pijlen weg op touch */

  .menu-main-arrow {
    display: none;
  }


  /* geen desktop-hoververschuiving op mobiel */

  .menu-main-link:hover {
    padding-left: 0;
  }


  /* secundair */

  .menu-secondary {
    margin-top: 42px;
  }

  .menu-secondary nav {
    display: grid;

    grid-template-columns:
      1fr 1fr;

    gap:
      8px 20px;
  }

  .menu-secondary a {
    margin: 0;

    padding:
      5px 0;

    font-size: 13px;
  }


  /* onderkant */

  .menu-bottom {
    padding:
      20px 6vw 28px;

    display: block;
  }

  .menu-bottom p {
    margin-bottom: 15px;
  }

  .menu-social {
    gap: 18px;
  }

}


/* =========================================================
   13M — KLEINE TELEFOONS
   ========================================================= */

@media (max-width: 430px) {

  .menu-main-link {
    min-height: 124px;
  }

  .menu-main-copy strong {
    font-size:
      clamp(34px, 9.8vw, 43px);
  }

  .menu-programme-link
  .menu-main-copy strong {
    font-size:
      clamp(30px, 8.55vw, 38px);
  }

}


/* =========================================================
   13N — MINDER BEWEGING
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .menu-overlay,
  .menu-main-link,
  .menu-secondary,
  .menu-bottom,
  .menu-background-number,
  .menu-main-number,
  .menu-main-arrow {
    transition:
      none !important;
  }

}

.footer-brand img {
  width: 220px;
  max-width: 100%;
  height: auto;
  padding: 0;
  background: transparent;
  object-fit: contain;
  object-position: left center;
}

/* =========================================================
   14 — STICHTINGSPAGINA
   Over ons / Steun ons / Contact

   Aanvulling op de bestaande style.css.
   Bestaande homepage blijft ongewijzigd.
   ========================================================= */


/* ---------------------------------------------------------
   14A — ALGEMENE PAGINA
   --------------------------------------------------------- */

.stichting-page {
  width: 100%;
  overflow: hidden;

  background: var(--paper);
  color: var(--navy);
}


/* ---------------------------------------------------------
   14B — INTRO / HERO
   --------------------------------------------------------- */

.stichting-hero {
  position: relative;

  padding:
    125px 8vw 140px;

  background: var(--paper);
}

.stichting-hero .kicker {
  margin: 0 0 30px;
}

.stichting-hero h1 {
  max-width: 1200px;

  margin: 0 0 45px;

  font-size:
    clamp(58px, 8.2vw, 132px);

  font-weight: 900;

  line-height: .88;
  letter-spacing: -.065em;
}

.stichting-hero h1 span {
  color: var(--red);
}

.stichting-hero > p:last-child {
  max-width: 680px;

  margin: 0;

  font-size: 21px;
  line-height: 1.6;
}


/* ---------------------------------------------------------
   14C — INHOUDELIJKE SECTIES
   --------------------------------------------------------- */

.stichting-section {
  display: grid;

  grid-template-columns:
    minmax(160px, .35fr)
    minmax(0, 1fr);

  gap:
    clamp(35px, 7vw, 130px);

  padding:
    115px 8vw 125px;

  border-top:
    1px solid rgba(18, 43, 76, .16);

  scroll-margin-top: 30px;
}

.stichting-section-number {
  padding-top: 12px;

  color: var(--red);

  font-size: 12px;
  font-weight: 900;

  letter-spacing: .16em;
}

.stichting-section-content {
  max-width: 850px;
}

.stichting-section h2 {
  margin: 0 0 40px;

  font-size:
    clamp(48px, 6vw, 94px);

  font-weight: 900;

  line-height: .94;
  letter-spacing: -.055em;
}

.stichting-section-content > p {
  max-width: 720px;

  margin: 0 0 25px;

  font-size: 20px;
  line-height: 1.65;
}

.stichting-section-content > p:last-child {
  margin-bottom: 0;
}


/* ---------------------------------------------------------
   14D — DONKERE SECTIE / STEUN ONS
   --------------------------------------------------------- */

.stichting-section-dark {
  position: relative;

  background: var(--navy);
  color: var(--white);

  border-top: 0;
}

.stichting-section-dark::before {
  position: absolute;
  inset: 0;

  content: "";

  opacity: .10;

  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  pointer-events: none;
}

.stichting-section-dark
.stichting-section-number {
  position: relative;
  z-index: 1;

  color: #ff654d;
}

.stichting-section-dark
.stichting-section-content {
  position: relative;
  z-index: 1;
}


/* ---------------------------------------------------------
   14E — ACTIELINKS
   --------------------------------------------------------- */

.stichting-action {
  display: inline-flex;
  align-items: center;

  gap: 30px;

  margin-top: 25px;
  padding: 15px 0;

  border-bottom:
    2px solid currentColor;

  color: inherit;

  font-size: 17px;
  font-weight: 900;

  text-decoration: none;

  transition:
    gap .25s ease,
    color .25s ease;
}

.stichting-action span {
  font-size: 24px;
  font-weight: 400;

  line-height: 1;
}

.stichting-action:hover {
  gap: 42px;
}

.stichting-section-dark
.stichting-action:hover {
  color: #ff654d;
}


/* ---------------------------------------------------------
   14F — CONTACT
   --------------------------------------------------------- */

.stichting-contact-extra {
  margin-top: 45px !important;

  font-size: 15px !important;
  line-height: 1.6;
}

.stichting-contact-extra a {
  font-weight: 800;

  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.stichting-contact-extra a:hover {
  color: var(--red);
}


/* ---------------------------------------------------------
   14G — TABLET
   --------------------------------------------------------- */

@media (max-width: 1000px) {

  .stichting-hero {
    padding:
      100px 7vw 115px;
  }

  .stichting-section {
    grid-template-columns:
      150px minmax(0, 1fr);

    gap: 35px;

    padding:
      90px 7vw 100px;
  }

}


/* ---------------------------------------------------------
   14H — MOBIEL
   --------------------------------------------------------- */

@media (max-width: 750px) {

  .stichting-hero {
    padding:
      90px 7vw 100px;
  }

  .stichting-hero .kicker {
    margin-bottom: 25px;

    font-size: 11px;
  }

  .stichting-hero h1 {
    margin-bottom: 35px;

    font-size:
      clamp(43px, 10.5vw, 76px);

    line-height: .91;
    letter-spacing: -.06em;

    overflow-wrap: normal;
  }

  .stichting-hero > p:last-child {
    font-size: 18px;
    line-height: 1.55;
  }

  .stichting-section {
    display: block;

    padding:
      80px 7vw 90px;

    scroll-margin-top: 20px;
  }

  .stichting-section-number {
    margin-bottom: 35px;
    padding-top: 0;

    font-size: 11px;
  }

  .stichting-section h2 {
    margin-bottom: 30px;

    font-size:
      clamp(45px, 10vw, 70px);

    line-height: .94;
  }

  .stichting-section-content > p {
    margin-bottom: 22px;

    font-size: 17px;
    line-height: 1.6;
  }

  .stichting-action {
    margin-top: 20px;

    font-size: 16px;
  }

  .stichting-contact-extra {
    margin-top: 40px !important;
    font-size: 14px !important;
  }

}


/* ---------------------------------------------------------
   14I — KLEINE TELEFOONS
   --------------------------------------------------------- */

@media (max-width: 430px) {

  .stichting-hero h1 {
    font-size:
      clamp(39px, 10vw, 46px);
  }

  .stichting-section h2 {
    font-size:
      clamp(40px, 10vw, 48px);
  }

}