:root {
      --paper: #fbf7f0;
      --paper-2: #f4ede3;
      --ink: #14131c;
      --ink-2: #252331;
      --muted: #6e6872;
      --coral: #e76f51;
      --coral-dark: #c85238;
      --coral-soft: #f3b4a3;
      --line: rgba(20, 19, 28, .13);
      --white: #fff;
      --radius-lg: 34px;
      --radius-md: 24px;
      --radius-sm: 15px;
      --wrap: min(1240px, calc(100vw - 48px));
      --ease: cubic-bezier(.22,1,.36,1);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    body.menu-open { overflow: hidden; }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }
    button, input { font: inherit; }
    ::selection { background: var(--coral); color: var(--paper); }

    .grain {
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: .045;
      z-index: 100;
      background-image:
        radial-gradient(circle at 20% 20%, #000 0 0.7px, transparent .8px),
        radial-gradient(circle at 75% 30%, #000 0 0.7px, transparent .8px);
      background-size: 10px 10px, 13px 13px;
      mix-blend-mode: multiply;
    }

    .wrap { width: var(--wrap); margin-inline: auto; }
    .section { padding: 120px 0; }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 22px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
    }
    .eyebrow::before {
      content: "";
      width: 28px; height: 2px;
      background: currentColor;
      border-radius: 999px;
    }
    .section-title {
      max-width: 900px;
      margin: 0;
      font-size: clamp(42px, 6vw, 80px);
      line-height: .97;
      letter-spacing: -.055em;
      font-weight: 800;
    }
    .section-intro {
      max-width: 720px;
      margin: 28px 0 0;
      font-size: clamp(17px, 1.7vw, 21px);
      line-height: 1.65;
      color: var(--muted);
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      min-height: 54px;
      padding: 0 22px;
      border: 1px solid transparent;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 700;
      transition: transform .35s var(--ease), background-color .35s, color .35s, border-color .35s;
      cursor: pointer;
    }
    .button:hover { transform: translateY(-3px); }
    .button svg { width: 16px; height: 16px; transition: transform .35s var(--ease); }
    .button:hover svg { transform: translate(3px,-3px); }
    .button-primary { background: var(--coral); color: var(--paper); }
    .button-primary:hover { background: var(--coral-dark); }
    .button-ghost { border-color: var(--line); background: rgba(255,255,255,.18); }
    .button-ghost:hover { border-color: var(--ink); }
    .button-light { background: var(--paper); color: var(--ink); }

    /* Header */
    .site-header {
      position: fixed;
      inset: 0 0 auto;
      z-index: 80;
      padding: 18px 0;
      transition: padding .35s var(--ease), background .35s, backdrop-filter .35s, border-color .35s;
      border-bottom: 1px solid transparent;
    }
    .site-header.scrolled {
      padding: 10px 0;
      background: color-mix(in srgb, var(--paper) 88%, transparent);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border-color: var(--line);
    }
    .nav {
      width: var(--wrap);
      margin: auto;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 34px;
    }
    .logo {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      font-size: 21px;
      font-weight: 800;
      letter-spacing: -.05em;
    }
    .logo-mark {
      position: relative;
      width: 35px; height: 35px;
      background: var(--coral);
      clip-path: polygon(19% 0, 100% 24%, 59% 100%, 0 34%);
      transform: rotate(4deg);
    }
    .logo span { color: var(--coral); }
    .nav-links {
      display: flex;
      justify-content: center;
      gap: clamp(18px, 2.2vw, 34px);
      font-size: 13px;
      font-weight: 600;
    }
    .nav-links a {
      position: relative;
      padding: 8px 0;
    }
    .nav-links a::after {
      content: "";
      position: absolute;
      left: 0; right: 100%; bottom: 3px;
      height: 2px;
      background: var(--coral);
      transition: right .3s var(--ease);
    }
    .nav-links a:hover::after { right: 0; }
    .nav-actions { display: flex; gap: 10px; align-items: center; }
    .nav-actions .button { min-height: 44px; padding-inline: 18px; }
    .menu-button {
      display: none;
      width: 44px; height: 44px;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: var(--paper);
      place-items: center;
      cursor: pointer;
    }
    .menu-button span, .menu-button span::before, .menu-button span::after {
      content: "";
      width: 18px; height: 2px;
      background: var(--ink);
      display: block;
      position: relative;
      transition: .25s;
    }
    .menu-button span::before { position: absolute; top: -6px; }
    .menu-button span::after { position: absolute; top: 6px; }
    .menu-open .menu-button span { background: transparent; }
    .menu-open .menu-button span::before { top: 0; transform: rotate(45deg); }
    .menu-open .menu-button span::after { top: 0; transform: rotate(-45deg); }

    .mobile-menu {
      position: fixed;
      inset: 0;
      z-index: 70;
      background: var(--ink);
      color: var(--paper);
      padding: 110px 24px 32px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-18px);
      transition: .45s var(--ease);
    }
    .menu-open .mobile-menu {
      opacity: 1;
      visibility: visible;
      transform: none;
    }
    .mobile-menu nav { display: grid; gap: 12px; }
    .mobile-menu nav a {
      font-size: clamp(38px, 10vw, 64px);
      line-height: 1.02;
      letter-spacing: -.055em;
      font-weight: 800;
      border-bottom: 1px solid rgba(255,255,255,.14);
      padding: 10px 0 16px;
    }
    .mobile-menu .button { margin-top: 28px; }

    /* Hero */
    .hero {
      min-height: 930px;
      padding: 150px 0 74px;
      display: flex;
      align-items: center;
      position: relative;
      isolation: isolate;
    }
    .hero::before {
      content: "";
      position: absolute;
      width: 680px; height: 680px;
      top: -190px; left: -280px;
      border: 1px solid var(--line);
      border-radius: 50%;
      z-index: -1;
    }
    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, .93fr) minmax(420px, .82fr);
      align-items: center;
      gap: clamp(55px, 8vw, 120px);
    }
    .hero-kicker {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      margin-bottom: 28px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255,255,255,.26);
      font-size: 12px;
      font-weight: 700;
    }
    .hero-kicker i {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--coral);
      box-shadow: 0 0 0 5px rgba(231,111,81,.13);
    }
    h1 {
      margin: 0;
      max-width: 700px;
      font-size: clamp(60px, 8vw, 112px);
      line-height: .88;
      letter-spacing: -.07em;
      font-weight: 800;
    }
    h1 .accent {
      color: var(--coral);
      display: inline-block;
      transform: translateX(.06em) rotate(-1.5deg);
    }
    .hero-quote {
      margin: 28px 0 0;
      font-size: clamp(21px, 2.3vw, 30px);
      line-height: 1.2;
      font-weight: 600;
      letter-spacing: -.025em;
    }
    .hero-copy {
      max-width: 610px;
      margin: 22px 0 0;
      font-size: 17px;
      line-height: 1.75;
      color: var(--muted);
    }
    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 34px;
    }
    .hero-meta {
      display: flex;
      gap: 18px;
      flex-wrap: wrap;
      margin-top: 38px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
    }
    .hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
    .hero-meta span::before {
      content: "";
      width: 5px; height: 5px;
      border-radius: 50%;
      background: var(--coral);
    }

    .hero-visual {
      position: relative;
      min-height: 650px;
    }
    .hero-photo {
      position: absolute;
      overflow: hidden;
      border-radius: var(--radius-lg);
      box-shadow: 0 35px 90px rgba(20,19,28,.16);
    }
    .hero-photo img {
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform .8s var(--ease);
    }
    .hero-photo:hover img { transform: scale(1.035); }
    .hero-photo.main {
      width: min(500px, 90%);
      height: 590px;
      right: 0; top: 0;
      transform: rotate(2.2deg);
    }
    .hero-photo.small {
      width: 235px; height: 260px;
      left: -35px; bottom: -5px;
      transform: rotate(-5deg);
      border: 7px solid var(--paper);
      z-index: 4;
    }
    .spotlight {
      position: absolute;
      width: 300px; height: 260px;
      left: 20px; top: -62px;
      z-index: -1;
      opacity: .95;
      transform: rotate(-7deg);
    }
    .spotlight img { width: 100%; height: 100%; object-fit: contain; }
    .coral-orbit {
      position: absolute;
      width: 210px; height: 210px;
      right: -68px; bottom: 32px;
      border: 42px solid var(--coral);
      border-radius: 50%;
      z-index: -1;
      opacity: .95;
    }
    .hero-note {
      position: absolute;
      right: -24px; top: 76px;
      z-index: 5;
      width: 140px; height: 140px;
      display: grid;
      place-items: center;
      padding: 20px;
      border-radius: 50%;
      background: var(--ink);
      color: var(--paper);
      text-align: center;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.4;
      transform: rotate(8deg);
    }
    .hero-note::after {
      content: "↘";
      display: block;
      font-size: 18px;
      margin-top: 4px;
      color: var(--coral-soft);
    }

    .ticker {
      border-block: 1px solid var(--line);
      overflow: hidden;
      background: rgba(255,255,255,.22);
    }
    .ticker-track {
      display: flex;
      width: max-content;
      animation: ticker 30s linear infinite;
    }
    .ticker span {
      display: inline-flex;
      align-items: center;
      gap: 22px;
      padding: 17px 26px;
      white-space: nowrap;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .09em;
      text-transform: uppercase;
    }
    .ticker span::after {
      content: "✦";
      color: var(--coral);
      font-size: 14px;
    }
    @keyframes ticker { to { transform: translateX(-50%); } }

    /* About */
    .about {
      background: var(--ink);
      color: var(--paper);
      position: relative;
      overflow: hidden;
    }
    .about::after {
      content: "";
      position: absolute;
      width: 760px; height: 760px;
      right: -260px; bottom: -470px;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 50%;
    }
    .about-grid {
      display: grid;
      grid-template-columns: 1.08fr .92fr;
      gap: clamp(52px, 7vw, 105px);
      align-items: center;
    }
    .about-image {
      position: relative;
      height: 650px;
      border-radius: var(--radius-lg);
      overflow: hidden;
    }
    .about-image img {
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center;
    }
    .about-image::after {
      content: "";
      position: absolute; inset: 0;
      box-shadow: inset 0 -130px 100px rgba(20,19,28,.18);
    }
    .about .eyebrow { color: var(--coral-soft); }
    .about h2 {
      margin: 0;
      font-size: clamp(50px, 6vw, 86px);
      line-height: .98;
      letter-spacing: -.06em;
    }
    .about p {
      color: rgba(251,247,240,.72);
      font-size: 17px;
      line-height: 1.8;
      margin: 28px 0 32px;
    }
    .about-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      margin: 0 0 34px;
    }
    .about-tags span {
      border: 1px solid rgba(255,255,255,.18);
      padding: 8px 12px;
      border-radius: 999px;
      font-size: 12px;
      color: rgba(251,247,240,.8);
    }

    /* Audience */
    .audience-head {
      display: grid;
      grid-template-columns: 1fr minmax(280px, .65fr);
      gap: 50px;
      align-items: end;
      margin-bottom: 54px;
    }
    .audience-head .section-intro { margin: 0; }
    .audience-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 18px;
    }
    .audience-card {
      position: relative;
      min-height: 490px;
      overflow: hidden;
      border-radius: var(--radius-md);
      color: var(--paper);
      isolation: isolate;
      transform: translateZ(0);
    }
    .audience-card:nth-child(1) { grid-column: span 7; }
    .audience-card:nth-child(2) { grid-column: span 5; }
    .audience-card:nth-child(3) { grid-column: span 5; }
    .audience-card:nth-child(4) { grid-column: span 7; }
    .audience-card img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      z-index: -2;
      transition: transform .7s var(--ease), filter .7s var(--ease);
    }
    .audience-card::before {
      content: "";
      position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(12,12,18,.06) 0%, rgba(12,12,18,.2) 42%, rgba(12,12,18,.92) 100%);
      z-index: -1;
    }
    .audience-card:hover img { transform: scale(1.045); filter: saturate(1.06); }
    .audience-content {
      position: absolute;
      inset: auto 28px 28px;
    }
    .audience-index {
      position: absolute;
      top: 20px; right: 20px;
      width: 42px; height: 42px;
      border: 1px solid rgba(255,255,255,.38);
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: rgba(20,19,28,.18);
      backdrop-filter: blur(10px);
      font-size: 11px;
      font-weight: 700;
    }
    .audience-content h3 {
      margin: 0;
      font-size: clamp(28px, 3.2vw, 44px);
      line-height: 1;
      letter-spacing: -.045em;
    }
    .audience-content p {
      max-width: 540px;
      margin: 12px 0 18px;
      color: rgba(251,247,240,.76);
      font-size: 14px;
      line-height: 1.55;
    }
    .chips { display: flex; flex-wrap: wrap; gap: 7px; }
    .chips span, .chips a {
      background: rgba(251,247,240,.13);
      border: 1px solid rgba(255,255,255,.2);
      border-radius: 999px;
      padding: 7px 10px;
      font-size: 11px;
      font-weight: 600;
      backdrop-filter: blur(10px);
    }
    /* Knopjes in de foto zijn echte links naar de dienst. Ze moeten boven de
       klikbare kaartlaag liggen, anders vangt die laag de klik op. */
    .chips a {
      position: relative;
      z-index: 2;
      color: var(--paper);
      transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
    }
    .chips a:hover, .chips a:focus-visible {
      background: var(--paper);
      border-color: var(--paper);
      color: var(--ink);
      transform: translateY(-1px);
    }
    /* Laag over de hele kaart: klik je ergens in de kaart, dan ga je naar de
       doelgroeppagina. De titel blijft daarnaast een gewone link. */
    .audience-cover { position: absolute; inset: 0; z-index: 1; }
    .audience-title-link { position: relative; z-index: 2; color: inherit; }
    .audience-title-link:hover { color: inherit; }
    .audience-arrow {
      position: absolute;
      top: 22px; left: 22px;
      width: 48px; height: 48px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: var(--paper);
      color: var(--ink);
      transform: translateY(-8px);
      opacity: 0;
      transition: .35s var(--ease);
    }
    .audience-card:hover .audience-arrow { opacity: 1; transform: none; }

    /* Join CTA */
    .join {
      margin: 24px 0;
      padding: 38px 0;
    }
    .join-card {
      position: relative;
      min-height: 550px;
      overflow: hidden;
      border-radius: 40px;
      background: var(--coral);
      display: grid;
      grid-template-columns: .95fr 1.05fr;
      align-items: stretch;
    }
    .join-copy {
      padding: clamp(38px, 6vw, 82px);
      align-self: center;
      position: relative;
      z-index: 2;
    }
    .join-copy .eyebrow { margin-bottom: 18px; }
    .join-copy h2 {
      margin: 0;
      max-width: 640px;
      font-size: clamp(48px, 6vw, 82px);
      line-height: .95;
      letter-spacing: -.06em;
    }
    .join-copy p {
      max-width: 590px;
      margin: 24px 0 30px;
      font-size: 16px;
      line-height: 1.72;
    }
    .join-image { min-height: 520px; }
    .join-image img {
      width: 100%; height: 100%;
      object-fit: cover;
    }
    .join-image::after {
      content: "";
      position: absolute;
      inset: 0 0 0 42%;
      pointer-events: none;
      background: linear-gradient(90deg, var(--coral) 0%, rgba(231,111,81,.18) 35%, transparent 65%);
    }

    /* Reviews */
    .reviews-top {
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 30px;
      margin-bottom: 42px;
    }
    .reviews-top .section-title { max-width: 780px; }
    .rating {
      flex: 0 0 auto;
      text-align: right;
      font-size: 12px;
      color: var(--muted);
    }
    .rating strong {
      display: block;
      color: var(--ink);
      font-size: 28px;
      letter-spacing: -.03em;
    }
    .stars { color: var(--coral); letter-spacing: 2px; }
    .review-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    .review {
      min-height: 350px;
      padding: 30px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: rgba(255,255,255,.26);
      display: flex;
      flex-direction: column;
      transition: .35s var(--ease);
    }
    .review:hover { transform: translateY(-7px); border-color: rgba(231,111,81,.4); }
    .quote-mark {
      font-size: 70px;
      line-height: .7;
      font-weight: 800;
      color: var(--coral);
      margin-bottom: 24px;
    }
    .review blockquote {
      margin: 0;
      font-size: 17px;
      line-height: 1.65;
      letter-spacing: -.012em;
    }
    .review-author {
      margin-top: auto;
      padding-top: 28px;
      border-top: 1px solid var(--line);
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 20px;
      font-size: 12px;
      color: var(--muted);
    }
    .review-author strong { display: block; color: var(--ink); font-size: 14px; }

/* Review-slider (wanneer een pagina meer dan 3 reviews heeft) */
.review-slider-wrap{position:relative}
.review-slider{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.review-slider::-webkit-scrollbar{display:none}
.review-slider .review{flex:0 0 calc((100% - 32px)/3);scroll-snap-align:start}
.review-slider-nav{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.review-slider-nav[hidden]{display:none}
.review-slider-nav button{width:44px;height:44px;border-radius:999px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.review-slider-nav button:hover{background:var(--mint)}
.review-slider-nav button svg{width:18px;height:18px}
@media (max-width:1000px){.review-slider .review{flex:0 0 calc((100% - 16px)/2)}}
@media (max-width:760px){.review-slider .review{flex:0 0 calc(100% - 24px)}}

    /* Values */
    .values {
      background: var(--ink);
      color: var(--paper);
      overflow: hidden;
    }
    .values-head {
      display: grid;
      grid-template-columns: 1fr .7fr;
      align-items: end;
      gap: 55px;
      margin-bottom: 58px;
    }
    .values .section-intro { color: rgba(251,247,240,.65); margin: 0; }
    .values-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    .value {
      padding: 34px;
      min-height: 360px;
      border: 1px solid rgba(255,255,255,.13);
      border-radius: var(--radius-md);
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
      transition: border-color .35s, transform .35s var(--ease);
    }
    .value:hover { border-color: rgba(231,111,81,.55); transform: translateY(-6px); }
    .value::after {
      content: "";
      position: absolute;
      width: 190px; height: 190px;
      right: -110px; top: -90px;
      background: var(--coral);
      border-radius: 50%;
      opacity: .08;
      transition: .45s var(--ease);
    }
    .value:hover::after { transform: scale(1.45); opacity: .13; }
    .value-icon {
      width: 62px; height: 62px;
      border-radius: 20px;
      background: var(--coral);
      display: grid;
      place-items: center;
      color: var(--paper);
    }
    .value-icon svg { width: 31px; height: 31px; stroke: currentColor; }
    .value h3 {
      margin: auto 0 12px;
      font-size: 34px;
      letter-spacing: -.04em;
    }
    .value p {
      margin: 0;
      color: rgba(251,247,240,.64);
      line-height: 1.65;
      font-size: 14px;
    }

    /* Performances */
    .performances-head {
      display: flex;
      justify-content: space-between;
      gap: 30px;
      align-items: end;
      margin-bottom: 46px;
    }
    .performance-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
    }
    .performance-card {
      display: grid;
      grid-template-rows: 420px auto;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      overflow: hidden;
      background: rgba(255,255,255,.22);
      transition: transform .35s var(--ease), box-shadow .35s;
    }
    .performance-card:hover {
      transform: translateY(-7px);
      box-shadow: 0 26px 60px rgba(20,19,28,.1);
    }
    .performance-image {
      position: relative;
      overflow: hidden;
    }
    .performance-image img {
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform .6s var(--ease);
    }
    .performance-card:hover img { transform: scale(1.035); }
    .performance-badge {
      position: absolute;
      left: 18px; top: 18px;
      border-radius: 999px;
      padding: 8px 11px;
      background: var(--paper);
      font-size: 11px;
      font-weight: 700;
    }
    .performance-content {
      padding: 26px 28px 29px;
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 20px;
    }
    .performance-content h3 {
      margin: 4px 0 0;
      font-size: clamp(28px, 3vw, 42px);
      letter-spacing: -.045em;
      line-height: 1.05;
    }
    .performance-type { font-size: 12px; color: var(--muted); }
    .performance-link {
      width: 46px; height: 46px;
      flex: 0 0 auto;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: var(--coral);
      color: var(--paper);
    }

    /* Newsletter / footer */
    .newsletter {
      padding: 60px 0 0;
    }
    .newsletter-card {
      position: relative;
      border-radius: 40px 40px 0 0;
      background: var(--coral);
      padding: clamp(42px, 6vw, 78px);
      overflow: hidden;
    }
    .newsletter-card::after {
      content: "";
      position: absolute;
      width: 340px; height: 340px;
      border: 60px solid rgba(251,247,240,.2);
      border-radius: 50%;
      right: -130px; top: -130px;
    }
    .newsletter-grid {
      display: grid;
      grid-template-columns: 1fr minmax(320px, .7fr);
      gap: 70px;
      align-items: end;
      position: relative;
      z-index: 2;
    }
    .newsletter h2 {
      margin: 0;
      max-width: 720px;
      font-size: clamp(50px, 6vw, 84px);
      line-height: .94;
      letter-spacing: -.06em;
    }
    .newsletter p { max-width: 670px; line-height: 1.7; }
    .newsletter-form {
      display: flex;
      gap: 8px;
      align-items: center;
      padding: 6px;
      border: 1px solid rgba(20,19,28,.23);
      border-radius: 999px;
      background: rgba(251,247,240,.34);
      backdrop-filter: blur(12px);
    }
    .newsletter-form input {
      min-width: 0;
      flex: 1;
      border: 0;
      outline: 0;
      background: transparent;
      padding: 0 14px;
      color: var(--ink);
    }
    .newsletter-form input::placeholder { color: rgba(20,19,28,.55); }
    .newsletter-form button {
      flex: 0 0 auto;
      min-height: 48px;
      border: 0;
      border-radius: 999px;
      background: var(--ink);
      color: var(--paper);
      padding: 0 20px;
      font-weight: 700;
      cursor: pointer;
    }
    .form-note {
      min-height: 20px;
      margin: 9px 0 0;
      font-size: 11px;
      opacity: .72;
    }
    footer {
      background: var(--ink);
      color: var(--paper);
      padding: 70px 0 24px;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.2fr repeat(3, .7fr);
      gap: 60px;
      padding-bottom: 58px;
      border-bottom: 1px solid rgba(255,255,255,.12);
    }
    .footer-brand .logo { font-size: 28px; }
    .footer-brand p {
      max-width: 300px;
      color: rgba(251,247,240,.6);
      line-height: 1.6;
      font-size: 13px;
    }
    footer h4 {
      margin: 0 0 18px;
      font-size: 12px;
      color: rgba(251,247,240,.48);
      text-transform: uppercase;
      letter-spacing: .1em;
    }
    footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
    footer li, footer address {
      font-size: 13px;
      color: rgba(251,247,240,.72);
      font-style: normal;
      line-height: 1.7;
    }
    footer a:hover { color: var(--coral-soft); }
    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
      padding-top: 22px;
      font-size: 11px;
      color: rgba(251,247,240,.44);
    }
    .footer-bottom div { display: flex; gap: 18px; }

    /* Reveal */
    [data-reveal] {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .75s var(--ease), transform .75s var(--ease);
    }
    [data-reveal].visible { opacity: 1; transform: none; }
    [data-reveal-delay="1"] { transition-delay: .08s; }
    [data-reveal-delay="2"] { transition-delay: .16s; }
    [data-reveal-delay="3"] { transition-delay: .24s; }

    @media (max-width: 1100px) {
      :root { --wrap: min(100% - 36px, 980px); }
      .nav-links, .nav-actions .button-ghost { display: none; }
      /* De menubalk heeft op desktop drie kolommen: logo | links | knoppen.
         Zodra .nav-links verdwijnt blijven er twee vullingen over voor drie
         kolommen, waardoor de knoppen in de middenkolom belanden en de lege
         derde kolom plus de gap (34px) rechts van de hamburger overblijven.
         Daarom hier terug naar twee kolommen, zodat de hamburger net zo ver
         van de rechterrand staat als het logo van de linkerrand. */
      .nav { grid-template-columns: auto auto; justify-content: space-between; }
      .nav-actions { justify-self: end; }
      .menu-button { display: grid; }
      .hero { min-height: auto; padding-top: 140px; }
      .hero-grid { grid-template-columns: 1fr; }
      .hero-copy { max-width: 680px; }
      .hero-visual { width: min(690px, 100%); margin: 10px auto 0; }
      .hero-photo.main { width: 75%; }
      .hero-photo.small { left: 0; }
      .about-grid { grid-template-columns: 1fr; }
      .about-image { height: 580px; }
      .audience-head, .values-head { grid-template-columns: 1fr; align-items: start; gap: 22px; }
      .audience-head .section-intro, .values .section-intro { margin-top: 0; }
      .join-card { grid-template-columns: 1fr; }
      .join-image::after { inset: 45% 0 0; background: linear-gradient(180deg, var(--coral) 0%, rgba(231,111,81,.1) 42%, transparent); }
      .newsletter-grid { grid-template-columns: 1fr; gap: 36px; }
      .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
      .footer-grid > :last-child { grid-column: 2 / 4; }
    }

    @media (max-width: 760px) {
      :root { --wrap: calc(100vw - 28px); --radius-lg: 26px; --radius-md: 21px; }
      .section { padding: 86px 0; }
      .site-header { padding-top: 12px; }
      .nav-actions .button-primary { display: none; }
      .hero { padding-top: 120px; padding-bottom: 48px; }
      h1 { font-size: clamp(58px, 17vw, 84px); }
      .hero-quote { font-size: 20px; }
      .hero-copy { font-size: 15px; }
      .hero-actions { align-items: stretch; }
      .hero-actions .button { flex: 1 1 100%; }
      .hero-meta { gap: 9px 18px; }
      .hero-visual { min-height: 520px; }
      .hero-photo.main { width: 88%; height: 470px; }
      .hero-photo.small { width: 170px; height: 190px; left: -4px; bottom: 0; }
      .spotlight { width: 220px; height: 180px; left: -22px; top: -30px; }
      .hero-note { width: 104px; height: 104px; font-size: 9px; right: -6px; top: 48px; }
      .coral-orbit { width: 150px; height: 150px; right: -60px; border-width: 30px; }
      .ticker span { padding-inline: 18px; }
      .about-image { height: 430px; }
      .about p { font-size: 15px; }
      .audience-grid { display: grid; grid-template-columns: 1fr; }
      .audience-card:nth-child(n) { grid-column: auto; min-height: 470px; }
      .join { margin: 0; padding: 22px 0; }
      .join-card { border-radius: 28px; }
      .join-copy { padding: 34px 26px; }
      .join-image { min-height: 360px; }
      .join-image::after { inset: 35% 0 0; }
      .reviews-top { align-items: start; flex-direction: column; }
      .rating { text-align: left; }
      .review-grid, .values-grid, .performance-grid { grid-template-columns: 1fr; }
      .review { min-height: 310px; }
      .performance-card { grid-template-rows: 310px auto; }
      .newsletter-card { padding: 36px 24px; border-radius: 28px 28px 0 0; }
      .newsletter-form { border-radius: 20px; flex-direction: column; align-items: stretch; padding: 8px; }
      .newsletter-form input { min-height: 46px; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
      .footer-brand { grid-column: 1 / -1; }
      .footer-grid > :last-child { grid-column: 1 / -1; }
      .footer-bottom { flex-direction: column; align-items: flex-start; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
      }
      [data-reveal] { opacity: 1; transform: none; }
    }

/* Responsive-veiligheid: geen horizontale scroll door decoratieve vormen */
html{overflow-x:hidden}

/* ============================================================
   MERKKLEUREN (brandguide): groen-voorwaarts, oranje alleen licht accent.
   Exacte hex staat centraal hier — makkelijk aan te passen.
   ============================================================ */
:root{
  --ink:#123233;        /* coulissegroen — primair donker */
  --ink-2:#0d2625;      /* donkerder groen (hover) */
  --mint:#b9e1d0;       /* mint — zacht merkvlak */
  --mint-soft:#d6ecdf;
  --paper:#fbf7f0;      /* zand/paper — achtergrond */
  --paper-2:#f1ece2;
  --muted:#5c6b69;      /* groenig grijs voor bodytekst */
  --line:rgba(18,50,51,.14);
  /* --coral (#e76f51) blijft, maar SPAARZAAM: accentwoord, stippen, sterren, underline */
}
/* Grote vlakken van oranje -> groen/mint */
.button-primary{background:var(--ink);color:var(--paper)}
.button-primary:hover{background:var(--ink-2)}
.coral-orbit{border-color:var(--mint)}
.join-card{background:var(--ink);color:var(--paper)}
.join-image::after{background:linear-gradient(90deg,var(--ink) 0%,rgba(18,50,51,.2) 35%,transparent 65%)}
.value-icon{background:var(--mint);color:var(--ink)}
.value:hover{border-color:rgba(185,225,208,.5)}
.value::after{background:var(--mint)}
.performance-link{background:var(--ink);color:var(--paper)}
.newsletter-card{background:var(--mint);color:var(--ink)}
.newsletter-card::after{border-color:rgba(255,255,255,.4)}
.newsletter-form{border-color:rgba(18,50,51,.2);background:rgba(255,255,255,.45)}
.newsletter-form button{background:var(--ink);color:var(--paper)}
.newsletter-form input::placeholder{color:rgba(18,50,51,.5)}

/* Echt logo i.p.v. het CSS-ruit-logo */
.logo-mark{display:none}
.logo-img{height:64px;width:auto;display:block}
.site-header.scrolled .logo-img{height:64px}
.footer-brand .logo-pill{display:inline-flex;background:var(--paper);border-radius:12px;padding:8px 12px}
.footer-brand .logo-pill img{height:38px;width:auto;display:block}

/* ============================================================
   Brandguide = 3 kleuren (Podiumlicht/Coulissegroen/Nachtdecor), GEEN oranje.
   Kleine accenten nu in merkkleuren i.p.v. coral.
   ============================================================ */
.hero .accent{color:var(--ink);background:var(--mint);border-radius:12px;padding:0 .14em}
.hero-kicker i{background:var(--ink);box-shadow:0 0 0 5px rgba(18,50,51,.12)}
.hero-meta span::before{background:var(--ink)}
.nav-links a::after{background:var(--ink)}
.review:hover{border-color:rgba(18,50,51,.4)}
.quote-mark{color:var(--mint)}
.stars{color:var(--ink)}
.about .eyebrow{color:var(--mint)}
.hero-note::after{color:var(--mint)}
::selection{background:var(--mint);color:var(--ink)}
.logo span{color:inherit}
.logo-pill{color:inherit}

/* ============================================================
   Navigatie — "Voor wie" dropdown (desktop) + accordion (mobiel)
   ============================================================ */
.nav-item{position:relative}
.nav-drop-trigger{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:0;padding:8px 0;margin:0;
  font:inherit;font-size:13px;font-weight:600;color:inherit;cursor:pointer;
  position:relative;
}
.nav-drop-trigger::after{
  content:"";position:absolute;left:0;right:100%;bottom:3px;height:2px;
  background:var(--ink);transition:right .3s var(--ease);
}
.nav-item:hover .nav-drop-trigger::after,
.nav-item.open .nav-drop-trigger::after{right:0}
.nav-drop-chev{width:11px;height:11px;transition:transform .25s var(--ease)}
.nav-item:hover .nav-drop-chev,
.nav-item.open .nav-drop-chev{transform:rotate(180deg)}

/* .nav-dropdown is de HOVERBARE zone: begint direct op top:100% (geen gap),
   de visuele "lucht" tussen trigger en kaart zit als onzichtbare padding-top
   BINNEN dit element. Zo blijft de muis continu binnen een hoverbaar
   element tijdens het diagonaal bewegen naar de kaart — anders verliest de
   muis :hover in de kloof en klapt de dropdown dicht voor je 'm bereikt. */
.nav-dropdown{
  position:absolute;top:100%;left:50%;
  transform:translateX(-50%);
  width:min(760px,92vw);
  padding-top:18px;
  opacity:0;visibility:hidden;pointer-events:none;
  /* GEEN transition: elke property in een transition-lijst bleek hier vast
     te blijven hangen op de startwaarde door de globale
     prefers-reduced-motion-regel (transition-duration:.001ms!important,
     zie onderaan dit bestand) — eerst geprobeerd met alleen opacity
     geanimeerd, ook die bleef op 0 staan. Instant tonen/verbergen is
     betrouwbaar, net als bij .mm-sub hierboven. */
  z-index:90;
}
.nav-item:hover .nav-dropdown,
.nav-item.open .nav-dropdown{
  opacity:1;visibility:visible;pointer-events:auto;
}
.nav-dropdown-panel{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:0 30px 70px rgba(20,19,28,.16);
  padding:30px;
}
.nav-dropdown-grid{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:22px}
.nav-dropdown-title{display:block;font-weight:800;font-size:14px;letter-spacing:-.02em;color:var(--ink);margin-bottom:12px;white-space:nowrap}
.nav-dropdown-title:hover{color:var(--mint)}
.nav-dropdown-links{display:grid;gap:9px}
.nav-dropdown-links a{display:block;font-size:13px;font-weight:500;color:var(--muted)}
.nav-dropdown-links a:hover{color:var(--ink)}

/* Mobiel: "Voor wie" als accordion binnen het fullscreen menu.
   .mobile-menu + .mm-sub-title (2 klassen) is bewust specifieker dan de
   bestaande ".mobile-menu nav a" basisregel (1 klasse + 2 elementen), zodat
   de kleinere subtekst die basisregel (groot lettertype) overschrijft. */
.mm-group{border-bottom:1px solid rgba(255,255,255,.14)}
.mm-toggle{
  width:100%;text-align:left;background:none;border:0;color:inherit;margin:0;
  font-size:clamp(38px,10vw,64px);line-height:1.02;letter-spacing:-.055em;font-weight:800;
  padding:10px 0 16px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.mm-chev{width:28px;height:28px;flex:0 0 auto;transition:transform .3s var(--ease)}
.mm-group.open .mm-chev{transform:rotate(180deg)}
/* display:none/block i.p.v. een geanimeerde hoogte: de pagina heeft globaal
   `transition-duration:.001ms !important` bij prefers-reduced-motion (zie
   onderaan dit bestand), en een animatie met zo'n extreem korte duur bleek
   in sommige engines op de startwaarde te blijven hangen (accordion bleef
   dan dicht). display:none/block heeft dat probleem nooit — zelfde patroon
   als de admin-instellingen-accordion (admin/assets/admin.css). */
.mm-sub{display:none}
.mm-group.open .mm-sub{display:block}
.mm-sub-block{display:grid;gap:7px;padding-top:6px}
.mm-sub-block:first-child{padding-top:0}
.mm-sub-block:last-child{padding-bottom:22px}
.mobile-menu .mm-sub-title{
  font-size:16px;line-height:1.3;letter-spacing:normal;font-weight:800;color:var(--mint);
  border-bottom:0;padding:2px 0;
}
.mm-sub-links{display:grid;gap:2px;padding-left:2px}
.mobile-menu .mm-sub-links a{
  font-size:14px;line-height:1.5;letter-spacing:normal;font-weight:500;color:rgba(251,247,240,.72);
  border-bottom:0;padding:2px 0;
}
.mobile-menu .mm-sub-links a:hover{color:var(--paper)}

@media (max-width:1100px){
  .nav-dropdown{display:none}
}

/* ============================================================
   Herbruikbare componenten voor BINNENPAGINA'S (2026-ontwerp).
   Zelfde tokens/taal als de homepage: Poppins, podiumlicht/
   coulissegroen/nachtdecor, ronde kaarten, eyebrow-labels.
   ============================================================ */

/* Generieke inner-hero: kruimelpad + kop (+ optioneel label/lead/knoppen) */
.inner-hero{position:relative;padding:150px 0 70px;isolation:isolate;overflow:hidden}
.inner-hero::before{content:"";position:absolute;width:680px;height:680px;top:-190px;left:-280px;border:1px solid var(--line);border-radius:50%;z-index:-1}
.breadcrumb-new{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:20px;font-size:12px;font-weight:600;color:var(--muted)}
.breadcrumb-new a:hover{color:var(--ink)}
.breadcrumb-new span:last-child{color:var(--ink);font-weight:700}
/* break-word + hyphens: lange titels (bv. een voorstellingsnaam uit beheer) vallen
   op smalle schermen anders buiten beeld, want een lang woord kan niet afbreken. */
.inner-hero h1{max-width:820px;margin:0;font-size:clamp(44px,5.5vw,76px);line-height:.98;letter-spacing:-.055em;font-weight:800;overflow-wrap:break-word;hyphens:auto}
.inner-hero h1 .accent{color:var(--ink);background:var(--mint);border-radius:10px;padding:0 .12em}
.inner-hero-lead{max-width:640px;margin:22px 0 0;font-size:17px;line-height:1.75;color:var(--muted)}
.inner-hero .hero-actions{margin-top:30px}

/* Sectie-ritme: wit/zand-achtig wisselen zoals de rest van het ontwerp */
.section-tint{background:var(--paper-2)}

/* Generiek accentwoord in h2/h3 (h1 heeft al .hero/.inner-hero-specifieke regels
   met hogere specificiteit hierboven) — voorkomt terugval op coral. */
.accent{color:var(--ink);background:var(--mint);border-radius:8px;padding:0 .1em}

/* Kicker boven een kop, elders dan de hero (zelfde look als .eyebrow) */
.kicker-new{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.kicker-new::before{content:"";width:24px;height:2px;background:var(--ink)}

/* Prijs + FAQ (herbruikt op elke detailpagina met aanbod) */
/* Geen eigen padding: deze sectie houdt hetzelfde ritme (120px) als elke andere. */
.price-faq-grid-new{display:grid;grid-template-columns:.85fr 1.15fr;gap:20px;align-items:start}
.price-card-new{background:var(--ink);color:var(--paper);border-radius:var(--radius-lg);padding:clamp(28px,3vw,38px)}
.price-card-new .kicker-new{color:var(--mint)}
.price-card-new .kicker-new::before{background:var(--mint)}
.price-card-new h3{font-size:30px;margin:0 0 10px;letter-spacing:-.03em}
.price-card-new>p{font-size:13px;line-height:1.7;color:rgba(251,247,240,.72);margin:0}
.price-value-new{margin:22px 0 18px;font-size:14px;color:rgba(251,247,240,.75)}
.price-value-new strong{display:block;font-size:36px;color:var(--mint);font-weight:800;letter-spacing:-.02em}
.price-list-new{list-style:none;margin:0 0 26px;padding:20px 0 0;border-top:1px solid rgba(255,255,255,.14);display:grid;gap:9px}
.price-list-new li{position:relative;padding-left:22px;font-size:13px;line-height:1.6}
.price-list-new li::before{content:"✓";position:absolute;left:0;color:var(--mint);font-weight:800}
.price-card-new .button-row{display:flex;gap:8px;flex-wrap:wrap}
.price-card-new .button{min-height:44px;font-size:13px}
/* Op de donkere kaart is de ink-knop onzichtbaar: daar is mint de primaire kleur. */
.price-card-new .button-primary{background:var(--mint);color:var(--ink)}
.price-card-new .button-primary:hover{background:#a8d6c2}
.button-dark-outline-new{border-color:rgba(255,255,255,.4)!important;color:#fff}

.faq-column-new h2{font-size:clamp(30px,3vw,40px);margin:0 0 14px}
.faq-column-new>p{font-size:14px;line-height:1.7;color:var(--muted);margin:0 0 22px}
.faq-list-new{display:grid;gap:8px}
.faq-item-new{background:var(--paper-2);border-radius:16px;overflow:hidden}
.faq-item-new summary{list-style:none;position:relative;padding:16px 46px 16px 18px;font-weight:700;font-size:14px;cursor:pointer;color:var(--ink)}
.faq-item-new summary::-webkit-details-marker{display:none}
.faq-item-new summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-weight:800;color:var(--ink);font-size:16px}
.faq-item-new[open] summary::after{content:"−"}
.faq-answer-new{padding:0 18px 16px}
.faq-answer-new p{margin:0;font-size:13px;line-height:1.65;color:var(--muted)}

/* Detail-pagina: "wat ons anders maakt" (waarden-rijen + foto) */
.detail-diff-grid-new{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,70px);align-items:center}
.value-rows-new{display:grid;gap:10px;margin-top:26px}
.value-row-new{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center;background:#fff;border-radius:14px;padding:16px 18px}
.value-row-new .ic{width:44px;height:44px;border-radius:12px;background:var(--paper-2);display:grid;place-items:center;flex:0 0 auto}
.value-row-new .ic svg{width:20px;height:20px;stroke:var(--ink)}
.value-row-new h3{font-size:15px;font-weight:800;margin:0 0 2px;letter-spacing:-.01em;color:var(--ink)}
.value-row-new p{font-size:13px;color:var(--muted);margin:0}
.detail-diff-image-new{aspect-ratio:1/1.05;border-radius:var(--radius-lg);overflow:hidden}
.detail-diff-image-new img{width:100%;height:100%;object-fit:cover}

/* Detail-pagina: verhaal (foto + tekst, 2-koloms) */
.story-grid-new{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,6vw,70px);align-items:center}
.story-image-new{aspect-ratio:1/1.08;border-radius:var(--radius-lg);overflow:hidden}
.story-image-new img{width:100%;height:100%;object-fit:cover}
.story-copy-new h2{font-size:clamp(30px,3.4vw,42px);letter-spacing:-.03em;margin:0 0 18px}
.story-copy-new p{font-size:15px;line-height:1.8;color:var(--muted);margin:0 0 16px}
.story-note-new{background:var(--paper-2);border-radius:12px;padding:14px 16px;font-size:13px!important;color:var(--muted);margin-top:20px!important}

/* Hero-facts: kleine iconenrij onder de lead-tekst in de hero */
.hero-facts-new{display:flex;flex-wrap:wrap;gap:22px 32px;margin-top:28px}
.hero-facts-new span{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--muted)}
.hero-facts-new svg{width:15px;height:15px;stroke:var(--ink);flex:0 0 auto}

/* Stappenlijst (bv. "hoe ziet een avond eruit") */
.step-section-new{display:grid;grid-template-columns:.9fr 1.3fr;gap:clamp(40px,6vw,70px);align-items:start}
.step-section-new .intro p{font-size:14px;line-height:1.8;color:var(--muted)}
.pullquote-new{border-left:2px solid var(--ink);padding-left:16px;margin:20px 0;font-style:italic;color:var(--ink);font-size:14px}
.step-list-new{display:grid;gap:10px}
.step-row-new{display:grid;grid-template-columns:38px 1fr;gap:16px;background:#fff;border-radius:14px;padding:16px 18px}
.step-row-new .n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--mint);color:var(--ink);font-weight:800;font-size:13px}
.step-row-new h3{font-size:15px;font-weight:800;margin:0 0 4px;letter-spacing:-.01em}
.step-row-new p{font-size:13px;line-height:1.6;color:var(--muted);margin:0}

/* Feature-cards (bv. "wat kun je verwachten") — variant van .value voor lichte achtergrond */
.feature-grid-new{display:grid;gap:14px}
.feature-grid-new.cols-3{grid-template-columns:repeat(3,1fr)}
.feature-grid-new.cols-2{grid-template-columns:repeat(2,1fr)}
.feature-grid-new.cols-4{grid-template-columns:repeat(4,1fr)}
.feature-card-new{background:#fff;border-radius:var(--radius-md);padding:26px;display:flex;flex-direction:column;min-height:250px}
.feature-card-new .value-icon{margin-bottom:14px}
.feature-card-new .kicker-new{margin-bottom:8px}
.feature-card-new h3{font-size:22px;letter-spacing:-.02em;margin:0 0 12px}
.feature-card-new p{font-size:13px;line-height:1.7;color:var(--muted);flex:1;margin:0 0 14px}
.feature-card-new .tags-new{display:flex;flex-wrap:wrap;gap:5px;padding-top:12px;border-top:1px solid var(--line)}
.feature-card-new .tags-new span{background:var(--ink);color:var(--paper);border-radius:999px;padding:4px 9px;font-size:9px;font-weight:800}

@media (max-width:1000px){
  .detail-diff-grid-new{grid-template-columns:1fr}
  .story-grid-new{grid-template-columns:1fr}
  .step-section-new{grid-template-columns:1fr}
  .feature-grid-new.cols-3,.feature-grid-new.cols-4{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .feature-grid-new.cols-2,.feature-grid-new.cols-3,.feature-grid-new.cols-4{grid-template-columns:1fr}
}

/* MIK Impro Battle: tickets/schema/info/sponsorpakketten */
.ticket-grid-new{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ticket-card-new{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:26px}
.ticket-card-new.featured{border:2px solid var(--ink);box-shadow:0 20px 44px rgba(20,19,28,.1)}
.ticket-time-new{display:inline-flex;background:var(--paper-2);color:var(--ink);border-radius:999px;padding:5px 11px;font-size:11px;font-weight:800}
.ticket-badge-new{position:absolute;top:22px;right:22px;background:var(--ink);color:var(--paper);border-radius:999px;padding:5px 11px;font-size:10px;font-weight:800}
.ticket-card-new h2{font-size:clamp(32px,3vw,42px);margin:14px 0 2px;letter-spacing:-.03em}
.ticket-card-new h3{font-size:20px;margin:0 0 10px}
.ticket-card-new p{font-size:13px;line-height:1.65;color:var(--muted);margin:0}

.schedule-list-new{display:grid;gap:8px}
.schedule-row-new{display:grid;grid-template-columns:66px 1fr;gap:12px;padding:12px 14px;border-radius:10px;background:var(--paper-2);font-size:13px}
.schedule-row-new strong{color:var(--ink)}
.schedule-row-new span{color:var(--muted)}

.info-grid-new{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:52px}
.info-card-new{background:var(--paper-2);border-radius:12px;padding:18px}
.info-card-new h3{font-size:12px;font-weight:800;letter-spacing:.02em;margin:0 0 6px;color:var(--ink)}
.info-card-new p{font-size:13px;color:var(--muted);margin:0}

.partner-grid-new{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.partner-card-new{display:flex;flex-direction:column;background:var(--paper-2);border-radius:var(--radius-md);padding:26px;min-height:380px}
.partner-card-new h3{font-size:24px;margin:0 0 4px;letter-spacing:-.02em}
.partner-card-new .price{font-size:13px;font-weight:800;color:var(--ink);opacity:.6;margin-bottom:14px}
.partner-card-new ul{list-style:none;margin:0 0 20px;padding:0;flex:1;display:grid;align-content:start;gap:7px}
.partner-card-new li{position:relative;padding-left:18px;font-size:12px;line-height:1.55;color:var(--muted)}
.partner-card-new li::before{content:"✓";position:absolute;left:0;color:var(--ink);font-weight:800}
.partner-card-new .button{width:100%;justify-content:center}

@media (max-width:1000px){
  .ticket-grid-new,.partner-grid-new{grid-template-columns:1fr 1fr}
  .ticket-grid-new .ticket-card-new:last-child,.partner-grid-new .partner-card-new:last-child{grid-column:1/-1}
  .info-grid-new{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .ticket-grid-new,.partner-grid-new,.info-grid-new{grid-template-columns:1fr}
  .ticket-grid-new .ticket-card-new:last-child,.partner-grid-new .partner-card-new:last-child{grid-column:auto}
}

/* Voorstelling-detailpagina: video/galerij/quotes/praktische info */
.show-media-new{padding:40px 0}
.show-video-new{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;background:#000;box-shadow:0 26px 60px rgba(20,19,28,.14)}
.show-video-new iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.show-feature-new{max-height:560px;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 26px 60px rgba(20,19,28,.14)}
.show-feature-new img{width:100%;height:100%;object-fit:cover}
/* Aanvraagwizard (proefles): stappen links, samenvatting + formulier rechts */
.aanvraag-wizard{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,3vw,40px);align-items:start}
.aanvraag-steps{display:grid;gap:30px}
.aanvraag-step-label{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);opacity:.55}
.aanvraag-step-label::before{content:"";width:22px;height:2px;background:var(--ink);opacity:.4}
.aanvraag-step h2{font-size:clamp(22px,2.2vw,28px);letter-spacing:-.03em;margin:8px 0 16px}
.aanvraag-options{display:flex;flex-wrap:wrap;gap:8px}
.aanvraag-options[hidden]{display:none} /* display:flex wint anders van het hidden-attribuut */
.aanvraag-pick{background:#fff;border:1px solid var(--line);border-radius:999px;padding:11px 20px;font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
.aanvraag-pick:hover{border-color:var(--ink)}
.aanvraag-pick.is-active{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.aanvraag-placeholder{margin:0;font-size:14px;color:var(--muted)}
.aanvraag-panel{background:var(--paper-2);border-radius:var(--radius-lg);padding:clamp(26px,3vw,38px)}
.aanvraag-panel>h2{font-size:clamp(24px,2.4vw,30px);letter-spacing:-.03em;margin:0 0 18px}
.aanvraag-summary{display:grid;gap:8px;margin:0 0 26px;padding:0 0 22px;border-bottom:1px solid var(--line)}
.aanvraag-summary>div{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.aanvraag-summary dt{font-size:13px;color:var(--muted)}
.aanvraag-summary dd{margin:0;font-size:14px;font-weight:700;color:var(--ink);text-align:right}
.aanvraag-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.aanvraag-fields[hidden]{display:none}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld[hidden]{display:none}
.fld-full{grid-column:1/-1}
.fld>span,.aanvraag-radio legend{font-size:13px;font-weight:700;color:var(--ink)}
.fld>span em{font-style:normal;font-weight:500;color:var(--muted)}
.fld input,.fld textarea,.fld select{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff;color:var(--ink);font:inherit;font-size:14px}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:2px solid var(--mint);border-color:var(--mint)}
.fld textarea{resize:vertical;min-height:96px}
.fld small,.aanvraag-radio small{font-size:12px;line-height:1.5;color:var(--muted)}
.aanvraag-radio{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.aanvraag-radio legend{padding:0}
.aanvraag-radio-row{display:flex;gap:10px;margin-top:2px}
.aanvraag-radio-row label{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 18px;font-size:14px;font-weight:600;cursor:pointer;flex:1}
.aanvraag-radio-row input{accent-color:var(--ink)}
.aanvraag-notice{margin:18px 0 0;border-radius:12px;padding:13px 16px;font-size:14px;font-weight:600}
.aanvraag-notice[hidden]{display:none}
.aanvraag-notice.is-ok{background:var(--mint);color:var(--ink)}
.aanvraag-notice.is-err{background:#fde2da;color:#b64327}
.aanvraag-terms{display:flex;align-items:flex-start;gap:10px;margin:20px 0 18px;font-size:13px;line-height:1.6;color:var(--muted)}
.aanvraag-terms input{margin-top:3px;accent-color:var(--ink)}
.aanvraag-terms a{color:var(--ink);font-weight:700;text-decoration:underline}
.js-aanvraag-submit[disabled]{opacity:.45;cursor:not-allowed}
.js-aanvraag-submit[disabled]:hover{transform:none}
@media (max-width:1000px){
  .aanvraag-wizard{grid-template-columns:1fr}
}
@media (max-width:620px){
  .aanvraag-fields{grid-template-columns:1fr}
  .aanvraag-summary>div{flex-direction:column;gap:2px}
  .aanvraag-summary dd{text-align:left}
}

/* Praktische feiten als compacte kaarten, direct onder de hero */
.show-facts-new{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.show-fact-new{background:var(--paper-2);border-radius:14px;padding:16px 18px}
.show-fact-new .lbl{margin:0 0 5px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);opacity:.55}
.show-fact-new .val{margin:0;font-size:14px;font-weight:600;line-height:1.5;color:var(--ink)}
.show-gallery-new{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.show-gallery-new a{display:block;aspect-ratio:1.3/1;border-radius:14px;overflow:hidden;background:var(--paper-2);cursor:zoom-in}
.show-gallery-new img{width:100%;height:100%;object-fit:cover;transition:transform .3s var(--ease)}
.show-gallery-new a:hover img{transform:scale(1.05)}
.show-quotes-new{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.show-quote-new{margin:0;background:var(--mint);border-radius:var(--radius-md);padding:26px 28px}
.show-quote-new blockquote{margin:0 0 12px;font-size:22px;line-height:1.25;letter-spacing:-.02em;color:var(--ink);font-weight:600}
.show-quote-new figcaption{font-size:12px;font-weight:800;color:var(--ink-2)}
.show-badges-new{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.show-badge-new{display:inline-flex;align-items:center;background:var(--mint);color:var(--ink);font-size:11px;font-weight:800;padding:6px 12px;border-radius:999px;line-height:1}
.show-badge-new.st-event{background:var(--ink);color:var(--paper)}
.show-badge-new.st-uitverkocht{background:#2a2a2a;color:#fff}
.show-badge-new.st-archief{background:var(--paper-2);color:var(--muted)}
@media (max-width:1000px){.show-gallery-new{grid-template-columns:repeat(2,1fr)}.show-quotes-new{grid-template-columns:1fr}}
@media (max-width:760px){.show-gallery-new{grid-template-columns:1fr}.show-facts-new{grid-template-columns:1fr 1fr}}

/* Aanbod-kaarten (doelgroeppagina's): foto boven, leesbare witte body eronder
   -- past beter bij langere tekst dan de fotokaarten van .audience-card. */
.offer-grid-new{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.offer-card-new{background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.offer-card-new:hover{transform:translateY(-6px);box-shadow:0 26px 50px rgba(20,19,28,.1)}
.offer-card-new img{width:100%;aspect-ratio:1.4/1;object-fit:cover;display:block}
.offer-card-new .body{padding:24px;display:flex;flex-direction:column;flex:1}
.offer-card-new h3{font-size:23px;letter-spacing:-.03em;margin:0 0 10px}
.offer-card-new p{font-size:14px;line-height:1.7;color:var(--muted);flex:1;margin:0 0 18px}
.offer-card-new .button{align-self:flex-start}

/* Donkere pakketkaarten (bv. teamuitje) */
.packages-grid-new{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.package-card-new{background:var(--ink);color:var(--paper);border-radius:var(--radius-md);padding:28px;display:flex;flex-direction:column;min-height:260px}
.package-card-new h3{font-size:26px;margin:0 0 10px;letter-spacing:-.03em}
.package-card-new p{font-size:13px;line-height:1.65;color:rgba(251,247,240,.72);flex:1;margin:0}
.package-price-new{margin:18px 0 16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);color:var(--mint);font-size:13px;font-weight:700}
.package-card-new .button{width:100%;justify-content:center}

/* Tarieventabel */
.tariff-card-new{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(26px,3vw,36px);box-shadow:0 24px 60px rgba(20,19,28,.06)}
.tariff-card-new h2{font-size:clamp(28px,3vw,38px);margin:0 0 8px}
.tariff-card-new>p{font-size:13px;color:var(--muted);margin:0}
.table-wrap-new{overflow-x:auto;margin:22px 0 6px}
.tariff-table-new{width:100%;border-collapse:collapse;min-width:640px}
.tariff-table-new th,.tariff-table-new td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);font-size:13px}
.tariff-table-new th{font-weight:700;color:var(--muted)}
.tariff-table-new td{color:var(--ink)}
.tariff-note-new{margin-top:16px;font-size:12px;color:var(--muted)}

/* Contact-achtige grid (contact + proefles) */
.contact-grid-new{display:grid;grid-template-columns:.85fr 1.15fr;gap:18px;align-items:stretch}
.contact-card-new{background:var(--paper-2);border-radius:var(--radius-lg);padding:clamp(26px,3vw,34px)}
.contact-card-new h2{font-size:clamp(30px,3vw,38px);margin:0 0 8px}
.contact-methods-new{display:grid;gap:6px;margin-top:20px}
.contact-method-new{display:flex;gap:16px;align-items:flex-start;padding:10px 0;border-radius:14px}
.contact-method-new .ic{width:44px;height:44px;border-radius:14px;background:#fff;display:grid;place-items:center;flex:0 0 auto}
.contact-method-new .ic svg{width:18px;height:18px;stroke:var(--ink)}
.contact-method-new h3{font-size:14px;font-weight:800;margin:2px 0 2px;color:var(--ink)}
.contact-method-new p{font-size:13px;color:var(--muted);margin:0}
.contact-form-card-new{background:var(--mint);border-radius:var(--radius-lg);padding:clamp(26px,3vw,34px)}
.contact-form-card-new h2{font-size:clamp(30px,3vw,38px);margin:0 0 10px}
.contact-form-card-new>p{font-size:14px;line-height:1.65;color:var(--ink);opacity:.8;margin:0 0 20px}
.contact-form-new{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.contact-form-new .field{display:grid;gap:6px}
.contact-form-new .field-full{grid-column:1/-1}
.contact-form-new label{font-size:12px;font-weight:700;color:var(--ink)}
.contact-form-new input,.contact-form-new textarea{border:0;border-radius:10px;padding:13px 14px;background:#fff;font:inherit;color:var(--ink);outline:2px solid transparent}
.contact-form-new input:focus,.contact-form-new textarea:focus{outline-color:rgba(18,50,51,.25)}
.contact-form-new textarea{min-height:130px;resize:vertical}
.contact-form-new .button{justify-self:start;margin-top:6px}
.form-status-new{grid-column:1/-1;border-radius:12px;padding:12px 16px;margin:0 0 6px;font-size:13px;font-weight:700}
.form-status-new.ok{background:rgba(255,255,255,.6);color:var(--ink-2)}
.form-status-new.err{background:rgba(255,255,255,.85);color:#b0362a}
.map-section-new{height:300px;border-radius:var(--radius-lg);overflow:hidden;margin-top:20px}
.map-section-new iframe{display:block;width:100%;height:100%;border:0}

/* Juridische/inhoudelijke lopende tekst (voorwaarden, privacy) */
.legal-block-new{padding-bottom:28px;margin-bottom:28px;border-bottom:1px solid var(--line)}
.legal-block-new:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.legal-block-new h2{font-size:clamp(26px,3vw,36px);letter-spacing:-.03em;margin:0 0 14px}
.legal-block-new h3{font-size:16px;font-weight:800;margin:22px 0 8px;color:var(--ink)}
.legal-block-new p{font-size:14px;line-height:1.8;color:var(--muted);margin:0 0 14px}
.legal-block-new p:last-child{margin-bottom:0}
.legal-intro-new{font-size:15px;line-height:1.8;color:var(--muted);max-width:820px;margin:0 0 40px}

/* Team/quote-sectie (over ons) */
.team-grid-new{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:center}
.team-photo-new{aspect-ratio:1/1;border-radius:var(--radius-lg);overflow:hidden}
.team-photo-new img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.team-quote-new{margin:22px 0 26px;padding-left:18px;border-left:2px solid var(--ink);font-style:italic;color:var(--ink);font-size:17px;line-height:1.5}
.team-copy-new p{font-size:15px;line-height:1.8;color:var(--muted)}

/* Principe-/pijler-kaarten (bv. over-ons missie/visie) */
.principle-grid-new{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.principle-card-new{background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:30px;min-height:280px}
.principle-card-new .kicker-new{margin-bottom:14px}
.principle-card-new h2{font-size:30px;margin:0 0 16px;letter-spacing:-.03em}
.principle-card-new p,.principle-card-new li{font-size:14px;line-height:1.75;color:var(--muted)}
.principle-card-new ul{padding-left:18px;margin:0}

/* Fonds/informatiepagina (doorlopende tekst met knoppen) */
.fund-new h2{font-size:clamp(28px,3vw,38px);margin:34px 0 10px;letter-spacing:-.03em}
.fund-new h2:first-child{margin-top:0}
.fund-new p{font-size:15px;line-height:1.8;color:var(--muted)}
.fund-new a:not(.button){color:var(--ink);font-weight:700;text-decoration:underline}

@media (max-width:1000px){
  .price-faq-grid-new{grid-template-columns:1fr}
  .contact-grid-new{grid-template-columns:1fr}
  .team-grid-new{grid-template-columns:1fr}
  .packages-grid-new{grid-template-columns:1fr 1fr}
  .principle-grid-new{grid-template-columns:1fr 1fr}
  .principle-card-new:last-child{grid-column:1/-1}
}
@media (max-width:760px){
  .inner-hero{padding:120px 0 46px}
  .contact-form-new{grid-template-columns:1fr}
  .packages-grid-new{grid-template-columns:1fr}
  .principle-grid-new{grid-template-columns:1fr}
  .principle-card-new:last-child{grid-column:auto}
}

/* ---------------------------------------------------------------------------
 * Mobiel menu: vier correcties
 * ------------------------------------------------------------------------- */

/* 1. Het paneel moet zelf kunnen scrollen. Met "Voor wie" opengeklapt is de
      inhoud hoger dan het scherm (947px op een 812px scherm), terwijl
      body{overflow:hidden} de pagina erachter vastzet. De knop onderaan was
      daardoor niet te bereiken. */
.mobile-menu{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

/* 2. Kleinere koppen. Op 375px vulde "MIK Impro Battle" de regel exact tot de
      rand (327 van 327px) en op tablets groeide hij door tot 64px. */
.mobile-menu nav a,.mm-toggle{font-size:clamp(30px,8vw,46px)}

/* 3. De primaire knop is ink-op-ink op dit donkere paneel en zag er daardoor
      uit als gewone tekst in plaats van een knop. */
.mobile-menu .button-primary{background:var(--mint);color:var(--ink)}
.mobile-menu .button-primary:hover{background:#a8d6c2}

/* 4. De header is bij het scrollen lichtgetint en ligt boven het menu
      (z-index 80 vs 70), wat een lichte balk over het donkere paneel legde.
      Bij een open menu dus transparant; het donkere logo krijgt een licht
      vlak mee zodat het leesbaar blijft (zelfde patroon als in de footer). */
.menu-open .site-header{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:transparent}
.menu-open .logo{background:var(--paper);border-radius:12px;padding:5px 9px}

/* ---------------------------------------------------------------------------
 * Cookiemelding (AVG/ePrivacy): weigeren even zichtbaar als accepteren
 * ------------------------------------------------------------------------- */
.cookiebar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--ink);color:var(--paper);
  box-shadow:0 -10px 40px rgba(18,50,51,.25)}
.cookiebar.is-hidden{display:none}
.cookiebar-inner{width:var(--wrap);margin:0 auto;display:flex;gap:clamp(16px,3vw,40px);
  align-items:center;justify-content:space-between;padding:20px 0;flex-wrap:wrap}
.cookiebar-text{flex:1 1 380px;min-width:0}
.cookiebar-text strong{display:block;font-size:15px;margin-bottom:4px}
.cookiebar-text p{margin:0;font-size:13px;line-height:1.65;color:rgba(251,247,240,.78)}
.cookiebar-text a{color:var(--mint);text-decoration:underline}
.cookiebar-actions{display:flex;gap:10px;flex-wrap:wrap;flex:0 0 auto}
.cookiebar-actions .button{min-height:46px;font-size:13px}
.cookiebar-actions .button-ghost{border-color:rgba(255,255,255,.45);color:var(--paper);background:transparent}
.cookiebar-actions .button-ghost:hover{border-color:var(--paper)}
.cookiebar-actions .button-primary{background:var(--mint);color:var(--ink)}
.cookiebar-actions .button-primary:hover{background:#a8d6c2}
@media (max-width:760px){
  .cookiebar-inner{flex-direction:column;align-items:stretch;gap:14px;padding:18px 0}
  .cookiebar-actions .button{flex:1 1 100%;justify-content:center}
}

/* ---------------------------------------------------------------------------
 * Voorstellingpagina: boekblok en FAQ gelijk verdeeld, met aanvraagformulier
 * ------------------------------------------------------------------------- */
.price-faq-grid-new.is-half{grid-template-columns:1fr 1fr}

/* Formulier binnen de donkere kaart */
.card-form-new{display:grid;gap:12px;margin-top:22px}
.card-form-new label{display:grid;gap:6px}
.card-form-new label>span{font-size:12px;font-weight:700;color:rgba(251,247,240,.82)}
.card-form-new input,.card-form-new textarea{width:100%;border:1px solid rgba(255,255,255,.22);
  border-radius:12px;padding:11px 14px;background:rgba(255,255,255,.08);color:var(--paper);
  font:inherit;font-size:14px}
.card-form-new input::placeholder,.card-form-new textarea::placeholder{color:rgba(251,247,240,.45)}
.card-form-new input:focus,.card-form-new textarea:focus{outline:2px solid var(--mint);border-color:var(--mint)}
.card-form-new textarea{resize:vertical;min-height:84px}
.card-form-new .button{justify-self:start;margin-top:4px}
.card-form-status{margin:18px 0 0;border-radius:12px;padding:12px 14px;font-size:13px;font-weight:600}
.card-form-status.is-ok{background:var(--mint);color:var(--ink)}
.card-form-status.is-err{background:#fde2da;color:#b64327}

/* Streep met daaronder links de knop naar alle voorstellingen */
.na-blok-new{margin-top:44px;padding-top:30px;border-top:1px solid var(--line);
  display:flex;justify-content:flex-start}

@media (max-width:1000px){
  /* zwaarder dan de basisregel hierboven, anders blijft het op mobiel 2 koloms */
  .price-faq-grid-new.is-half{grid-template-columns:1fr}
}
@media (max-width:760px){
  .na-blok-new .button{flex:1 1 100%;justify-content:center}
}

/* Gecentreerd slotblok: de container blijft even breed als elke andere .wrap,
   alleen de tekst erin staat gecentreerd in een smallere kolom. */
.cta-midden-new{max-width:640px;margin-inline:auto;text-align:center}

/* Social-iconen in de footer, onder de pay-off */
.footer-socials{display:flex;gap:10px;margin-top:18px}
.footer-socials a{display:grid;place-items:center;width:40px;height:40px;border-radius:999px;
  border:1px solid rgba(255,255,255,.22);color:var(--paper);transition:background .2s,border-color .2s,color .2s}
.footer-socials a:hover{background:var(--mint);border-color:var(--mint);color:var(--ink)}
.footer-socials svg{width:18px;height:18px;fill:currentColor}

/* Join-blok: op mobiel/tablet staat het groene tekstblok BOVEN de foto, dus
   moet het verloop van boven komen. De merkkleur-override hierboven zet het
   verloop weer op 90deg (links) en staat ná de media-queries, waardoor die ook
   op smalle schermen won. Daarom hier nogmaals, met de juiste richting. */
@media (max-width:1000px){
  .join-image::after{background:linear-gradient(180deg,var(--ink) 0%,rgba(18,50,51,.2) 42%,transparent)}
}