@font-face {
  font-family: "Anton Local";
  src: url("fonts/anton-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Basis & Typografie */
  --ink: #141619;
  --cream: #fff8d9;
  --paper: #fffef7;
  --display: "Anton Local", Impact, "Arial Black", sans-serif;
  --body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --hand: "Segoe Print", "Comic Sans MS", cursive;
  --shell: min(1340px, calc(100% - 48px));

  /* Carnavalskleuren (Hank Feest) */
  --red: #e62348;
  --red-dark: #b81436;
  --yellow: #ffd826;
  --yellow-glow: #ffe766;
  --sky: #6dd2ef;
  --sky-soft: #d8f5ff;
  --blue: #1162e0;
  --green: #80dc3d;
  --pink: #ff68b4;
  --pink-soft: #ffcbe5;
  --purple: #8648db;
  --lilac: #cba8ff;
  --spotify: #1ed760;

  /* Bouwloods Industriële Palette (Staal, Lassen, Werkplaats) */
  --steel-950: #0b0e13;
  --steel-900: #12161f;
  --steel-850: #19202c;
  --steel-800: #232b3b;
  --steel-700: #333e54;
  --steel-border: #445370;
  --weld-amber: #ff9d1a;
  --weld-white: #fffdf5;
  --weld-glow: rgba(255, 157, 26, 0.4);

  /* Structuur & Effecten */
  --line: 3px solid var(--ink);
  --line-steel: 3px solid var(--steel-border);
  --shadow: 7px 7px 0 var(--ink);
  --shadow-sm: 4px 4px 0 var(--ink);
  --shadow-lg: 10px 10px 0 var(--ink);
  --shadow-glow: 0 16px 36px -8px rgba(230, 35, 72, 0.35);
  --glass-bg: rgba(255, 248, 217, 0.88);
  --glass-border: rgba(20, 22, 25, 0.12);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-pill: 999px;
}

/* --------------------------------------------------------------------------
   RESET & BASIS
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  overflow-x: clip;
  scroll-behavior: smooth;
  background: var(--cream);
  color: var(--ink);
}
body {
  margin: 0;
  min-width: 0;
  overflow-x: clip;
  color: var(--ink);
  background: var(--cream);
  font: 600 1.05rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; }
::selection { color: var(--paper); background: var(--red-dark); }
:focus-visible { outline: 4px solid var(--blue); outline-offset: 4px; }

.skip-link {
  position: fixed;
  z-index: 10000;
  top: 12px;
  left: 12px;
  padding: 12px 18px;
  color: #fff;
  background: var(--ink);
  border: 2px solid var(--yellow);
  font-weight: 900;
  transform: translateY(-160%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: none; }

/* --------------------------------------------------------------------------
   NAVIGATIE (STICKY & GLASS DOCK)
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: 86px;
  background: var(--glass-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: var(--line);
  transition: height 0.28s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.28s ease, box-shadow 0.28s ease;
}
.site-header.header-scrolled {
  height: 68px;
  background: rgba(255, 248, 217, 0.94);
  box-shadow: 0 10px 30px -5px rgba(20, 22, 25, 0.12);
}
.nav-shell {
  display: flex;
  width: var(--shell);
  height: 100%;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  transition: transform 0.2s ease;
}
.brand:hover { transform: scale(1.02); }
.brand img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(3px 3px 0 rgba(20, 22, 25, 0.2));
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.brand:hover img { transform: rotate(-5deg) scale(1.08); }
.brand span { display: grid; line-height: 1; }
.brand b { font-size: 1.02rem; font-weight: 950; letter-spacing: -0.02em; }
.brand small {
  margin-top: 5px;
  color: var(--red-dark);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.16em;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 34px);
}
.main-nav a {
  position: relative;
  font-size: 0.82rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  padding: 6px 0;
  transition: color 0.15s ease;
}
.main-nav a:not(.nav-party)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.main-nav a:not(.nav-party):hover::after,
.main-nav a:not(.nav-party):focus-visible::after,
.main-nav a[aria-current="page"]:not(.nav-party)::after {
  transform: scaleX(1);
  transform-origin: left;
}
.main-nav a[aria-current="page"]:not(.nav-party) {
  color: var(--red-dark);
}

.nav-party {
  display: inline-flex;
  min-height: 44px;
  padding: 0 18px;
  align-items: center;
  gap: 10px;
  color: #fff;
  background: var(--red-dark);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  transform: rotate(-1deg);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, background-color 0.2s ease;
}
.nav-party:hover {
  background: var(--red);
  box-shadow: 2px 2px 0 var(--ink);
  transform: translate(2px, 2px) rotate(1deg);
}
.nav-party span { color: var(--yellow); font-size: 1.1em; }

/* Mobiel Menu */
.menu { display: none; }
.menu summary {
  display: flex;
  min-height: 44px;
  padding: 0 12px;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.1em;
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary i, .menu summary i::before {
  display: block;
  width: 22px;
  height: 3px;
  background: var(--ink);
  content: "";
  transition: transform 0.2s ease;
}
.menu summary i::before { transform: translateY(6px); }
.menu[open] summary i { transform: rotate(45deg); }
.menu[open] summary i::before { transform: rotate(-90deg); }

.menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(20, 22, 25, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.menu nav {
  position: fixed;
  top: 76px;
  right: 14px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  width: min(320px, calc(100vw - 28px));
  max-height: calc(100svh - 165px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  background: var(--yellow);
  border: var(--line);
  box-shadow: 8px 8px 0 var(--ink);
  border-radius: 6px;
  animation: menu-slide-in 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes menu-slide-in {
  from { opacity: 0; transform: translateY(-15px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.menu-header {
  padding-bottom: 12px;
  margin-bottom: 8px;
  border-bottom: 2px solid var(--ink);
  display: flex;
  flex-direction: column;
}
.menu-header span { font: 400 1.25rem/1 var(--display); letter-spacing: 0.02em; }
.menu-header small { font-size: 0.65rem; font-weight: 900; letter-spacing: 0.12em; color: var(--red-dark); }
.menu nav a {
  padding: 12px 14px;
  font-weight: 950;
  text-decoration: none;
  text-transform: uppercase;
  border-bottom: 2px solid rgba(20, 22, 25, 0.15);
  transition: background-color 0.15s ease, padding-left 0.15s ease;
}
.menu nav a:hover {
  background: rgba(255, 255, 255, 0.4);
  padding-left: 18px;
}
.menu-party {
  margin-top: 10px;
  color: #fff !important;
  background: var(--red-dark) !important;
  border: 2px solid var(--ink) !important;
  box-shadow: 4px 4px 0 var(--ink);
  text-align: center;
}

/* --------------------------------------------------------------------------
   KNOPPEN & DESIGN TOKENS
   -------------------------------------------------------------------------- */
.section-shell { width: var(--shell); margin: 0 auto; }
.section-kicker {
  display: flex;
  margin-bottom: clamp(36px, 5vw, 68px);
  padding-bottom: 14px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--ink);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.section-number {
  margin: 0 0 20px;
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.party-button, .outline-button {
  position: relative;
  display: inline-flex;
  min-height: 54px;
  padding: 0 24px;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--yellow);
  font-size: 0.82rem;
  font-weight: 950;
  letter-spacing: 0.09em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, background-color 0.2s ease;
}
.party-button {
  color: #fff;
  background: var(--ink);
}
.party-button::before, .outline-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: skewX(-25deg);
  transition: left 0.6s ease;
}
.party-button:hover::before, .outline-button:hover::before {
  left: 180%;
}
.party-button:hover {
  box-shadow: 2px 2px 0 var(--yellow);
  transform: translate(4px, 4px);
  background: #252830;
}
.party-button span { color: var(--yellow); font-size: 1.15rem; }

.outline-button {
  color: var(--ink);
  background: var(--paper);
  box-shadow: 6px 6px 0 var(--red);
}
.outline-button:hover {
  box-shadow: 2px 2px 0 var(--red);
  transform: translate(4px, 4px);
  background: #fff;
}
.outline-button span { color: var(--red-dark); font-size: 1.15rem; }
.party-button-light { box-shadow: 6px 6px 0 var(--yellow); }

/* --------------------------------------------------------------------------
   CINEMATISCHE HERO EXPERIENCE
   -------------------------------------------------------------------------- */
.party-hero {
  position: relative;
  isolation: isolate;
  background: linear-gradient(135deg, var(--sky) 0%, #46bfeb 60%, #9be2f7 100%);
  border-bottom: var(--line);
  overflow: hidden;
}
.hero-particles-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 8;
}
.hero-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.hero-beam {
  position: absolute;
  top: -20%;
  width: 32vw;
  height: 140%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.05) 60%, transparent 100%);
  transform: rotate(-24deg);
  filter: blur(28px);
}
.beam-left { left: 8%; animation: beam-sway-1 8s ease-in-out infinite alternate; }
.beam-right { right: 18%; animation: beam-sway-2 9s ease-in-out infinite alternate; }
@keyframes beam-sway-1 { from { transform: rotate(-28deg); } to { transform: rotate(-20deg); } }
@keyframes beam-sway-2 { from { transform: rotate(-20deg); } to { transform: rotate(-26deg); } }
.hero-glow-orb {
  position: absolute;
  top: 15%;
  left: 25%;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(255, 230, 100, 0.45) 0%, transparent 70%);
  filter: blur(40px);
}

.hero-main {
  --scene-left: calc(100% - min(78vw, 1220px));
  position: relative;
  min-height: max(480px, calc(100svh - 225px));
  overflow: hidden;
  background: var(--sky-soft);
}
.hero-main::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: 0.16;
  background-image: radial-gradient(rgba(20, 22, 25, 0.5) 1.2px, transparent 1.2px);
  background-size: 18px 18px;
  content: "";
  mask-image: linear-gradient(90deg, #000 0%, transparent 68%);
}
.hero-scene {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: min(78vw, 1220px);
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.08) contrast(1.02);
  transform: scaleX(-1);
  transform-origin: center center;
}
.hero-video {
  pointer-events: none;
  transition: opacity 0.4s ease;
  visibility: visible;
  opacity: 1;
}
.hero-video.video-user-paused,
body.motion-disabled .hero-video {
  visibility: hidden !important;
  opacity: 0 !important;
}

.hero-wash {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(90deg,
    var(--sky) 0%,
    var(--sky) calc(var(--scene-left) + 40px),
    rgba(109, 210, 239, 0.72) calc(var(--scene-left) + 260px),
    transparent calc(var(--scene-left) + 650px)
  );
}

.hero-inner {
  position: relative;
  z-index: 5;
  display: flex;
  width: var(--shell);
  min-height: inherit;
  margin: 0 auto;
  padding: 28px 0;
  align-items: center;
}
.hero-copy {
  width: min(52%, 670px);
}
.stamp {
  display: flex;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 14px;
  align-items: center;
  gap: 8px 10px;
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.15em;
}
.stamp span {
  padding: 5px 10px;
  color: #fff;
  background: var(--red-dark);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-2deg);
}
.hero-copy h1 {
  margin: 0;
  font: 400 clamp(4.8rem, 8vw, 8.8rem)/0.78 var(--display);
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.hero-copy h1 span, .hero-copy h1 em {
  display: block;
  width: fit-content;
  max-width: 100%;
}
.hero-copy h1 span:nth-child(2) {
  color: var(--paper);
  -webkit-text-stroke: 2px var(--ink);
  text-shadow: 6px 6px 0 var(--ink);
  transform: rotate(-1deg);
}
.hero-copy h1 em {
  margin-top: 0.08em;
  padding: 0.02em 0.14em 0.07em;
  color: var(--yellow);
  background: var(--red-dark);
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  font-style: normal;
  transform: rotate(1.2deg);
}
.hero-joke {
  max-width: 530px;
  margin: 18px 0 0;
  font-size: clamp(1.02rem, 1.25vw, 1.2rem);
  font-weight: 850;
  line-height: 1.48;
}
.hero-copy .party-button { margin-top: 20px; }

.motion-toggle {
  display: inline-flex;
  min-height: 40px;
  margin: 14px 0 0 12px;
  padding: 7px 12px;
  align-items: center;
  color: var(--ink);
  background: var(--yellow);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
  font: 950 0.68rem/1.15 var(--body);
  letter-spacing: 0.06em;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.motion-toggle:hover { background: var(--paper); transform: translate(1px, 1px); }
.motion-toggle[hidden] { display: none; }

.sticker {
  position: absolute;
  z-index: 5;
  display: grid;
  place-items: center;
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  font: 400 1rem/1.06 var(--display);
  text-align: center;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
}
.sticker:hover { transform: scale(1.12) rotate(4deg); }
.sticker-one {
  top: 8%;
  right: 3%;
  width: 106px;
  height: 106px;
  background: var(--green);
  border-radius: 50%;
  transform: rotate(9deg);
}
.sticker-two {
  right: 2.5%;
  bottom: 8%;
  padding: 12px 16px;
  color: #fff;
  background: var(--purple);
  transform: rotate(-6deg);
}
.badge-celebrate {
  animation: badge-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: var(--yellow) !important;
  color: var(--ink) !important;
}
@keyframes badge-pop {
  0% { transform: scale(0.9); }
  50% { transform: scale(1.25) rotate(12deg); }
  100% { transform: scale(1); }
}

/* --------------------------------------------------------------------------
   COUNTDOWN BOARD
   -------------------------------------------------------------------------- */
.countboard {
  position: relative;
  z-index: 10;
  display: grid;
  min-height: 145px;
  grid-template-columns: minmax(210px, 0.72fr) 2fr minmax(210px, 0.75fr);
  color: var(--ink);
  background: var(--paper);
  border-top: var(--line);
  box-shadow: 0 10px 30px rgba(20, 22, 25, 0.08);
}
.count-intro {
  display: grid;
  padding: 20px 30px;
  align-content: center;
  justify-content: end;
  border-right: var(--line);
}
.count-intro small {
  color: var(--red-dark);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.16em;
}
.count-intro b {
  margin-top: 6px;
  font: 400 1.85rem/0.92 var(--display);
}
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); }
.count-part {
  position: relative;
  display: grid;
  min-width: 0;
  padding: 12px 8px;
  place-content: center;
  border-right: var(--line);
  text-align: center;
  overflow: hidden;
}
.count-part span {
  min-width: 2ch;
  font: 400 clamp(3.4rem, 5.2vw, 5.8rem)/0.8 var(--display);
  font-variant-numeric: tabular-nums;
  display: inline-block;
  transform-origin: center bottom;
}
.count-part small {
  margin-top: 10px;
  font-size: 0.75rem;
  font-weight: 950;
  letter-spacing: 0.14em;
}
.digit-flip {
  animation: digit-pulse 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes digit-pulse {
  0% { transform: scale(1.18); color: var(--red); }
  100% { transform: scale(1); color: inherit; }
}
.count-days { background: var(--yellow); }
.count-seconds { background: var(--red); color: #fff; }

.date-ticket {
  display: grid;
  padding: 16px 24px;
  place-content: center;
  background: var(--pink);
  text-align: center;
}
.date-ticket span {
  font-size: 0.74rem;
  font-weight: 950;
  letter-spacing: 0.12em;
}
.date-ticket b { font: 400 2.9rem/0.95 var(--display); }
.date-ticket small {
  margin-top: 5px;
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   PARTY TICKER (VLOEIENDE MARQUEE)
   -------------------------------------------------------------------------- */
.party-ticker {
  overflow: hidden;
  padding: 14px 0 12px;
  color: #fff;
  background: var(--red-dark);
  border-bottom: var(--line);
}
.ticker-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: clamp(24px, 4vw, 68px);
  font: 400 clamp(1.45rem, 2.2vw, 2.3rem)/1 var(--display);
  letter-spacing: 0.04em;
  white-space: nowrap;
  animation: marquee-scroll 24s linear infinite;
}
.ticker-track b { color: var(--yellow); font-size: 0.8em; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   01 / DE CLUB SECTIE
   -------------------------------------------------------------------------- */
.club-section {
  padding: clamp(86px, 10vw, 150px) 0;
  background: radial-gradient(circle at 94% 12%, rgba(255, 87, 166, 0.22) 0 8%, transparent 8.2%),
    radial-gradient(circle at 4% 93%, rgba(99, 209, 240, 0.28) 0 11%, transparent 11.2%),
    var(--cream);
}
.club-heading {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(36px, 8vw, 130px);
}
.club-heading h2, .agenda-heading h2, .ways-heading h2 {
  margin: 0;
  font: 400 clamp(4.4rem, 8.5vw, 8.8rem)/0.82 var(--display);
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.club-heading h2 em, .agenda-heading h2 em, .ways-heading h2 em {
  color: var(--red);
  font-style: normal;
}
.club-intro { display: grid; gap: 20px; }
.club-intro > p:last-child {
  max-width: 560px;
  margin: 0;
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
}
.scribble {
  width: fit-content;
  margin: 0;
  padding: 8px 14px;
  background: var(--yellow);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  font: 800 clamp(0.92rem, 1.2vw, 1.05rem)/1.25 var(--hand);
  transform: rotate(-2deg);
}
.club-photo {
  position: relative;
  width: min(100%, 530px);
  margin: 0 0 10px;
  overflow: hidden;
  background: #d7f4ff;
  border: var(--line);
  box-shadow: var(--shadow);
  transform: rotate(1.6deg);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.club-photo:hover { transform: rotate(0) scale(1.02); }
.club-photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(1.08);
}
.club-photo figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 8px 12px;
  color: #fff;
  background: var(--red-dark);
  border-top: 2px solid var(--ink);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-align: center;
}

.manual-grid {
  display: grid;
  margin-top: clamp(65px, 8vw, 110px);
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 36px);
}
.manual-grid article {
  position: relative;
  min-height: 320px;
  padding: 30px;
  border: var(--line);
  box-shadow: var(--shadow);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}
.manual-grid article:hover {
  box-shadow: 12px 12px 0 var(--ink);
}
.manual-grid article:nth-child(1) { transform: rotate(-1.2deg); }
.manual-grid article:nth-child(2) { transform: translateY(18px) rotate(1deg); }
.manual-grid article:nth-child(3) { transform: rotate(-0.8deg); }
.manual-yellow { background: var(--yellow); }
.manual-pink { background: var(--pink-soft); }
.manual-green { background: var(--green); }
.manual-grid article > span { font: 400 1.1rem/1 var(--display); }
.manual-grid article > i {
  position: absolute;
  top: 22px;
  right: 24px;
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 50%;
  font: 400 2rem/1 var(--display);
}
.manual-grid h3 {
  max-width: 310px;
  margin: 70px 0 12px;
  font: 400 clamp(2rem, 3vw, 3.1rem)/0.95 var(--display);
  text-transform: uppercase;
}
.manual-grid p { max-width: 330px; margin: 0; font-size: 1.02rem; }

/* --------------------------------------------------------------------------
   02 / DE BOUWLOODS (DONKER, STAAL, INDUSTRIEEL, LASVONKEN)
   -------------------------------------------------------------------------- */
.build-story {
  position: relative;
  display: grid;
  min-height: 780px;
  grid-template-columns: minmax(0, 1.1fr) minmax(440px, 0.9fr);
  color: #fff;
  background: var(--steel-900);
  border-top: 4px solid var(--ink);
  border-bottom: 4px solid var(--ink);
  overflow: hidden;
  transition: background-color 0.2s ease;
}
.build-story.weld-flash {
  background-color: #1f2735 !important;
}

.sparks-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 6;
}
.build-ambient-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.blueprint-grid {
  position: absolute;
  inset: 0;
  opacity: 0.12;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
  background-size: 40px 40px;
}
.weld-glow-radial {
  position: absolute;
  top: 35%;
  left: 20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255, 160, 30, 0.22) 0%, rgba(255, 80, 20, 0.08) 50%, transparent 70%);
  filter: blur(50px);
}

.build-image-wrap {
  position: relative;
  z-index: 3;
  min-height: 650px;
  overflow: hidden;
  border-right: var(--line);
}
.build-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% center;
  filter: contrast(1.06) brightness(0.96);
  transition: transform 0.5s ease;
}
.build-image-wrap:hover img { transform: scale(1.03); }

.photo-label {
  position: absolute;
  left: 28px;
  bottom: 28px;
  padding: 9px 14px;
  color: #fff;
  background: var(--red-dark);
  border: 2px solid #fff;
  box-shadow: 4px 4px 0 var(--ink);
  font-size: 0.74rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  transform: rotate(-3deg);
  user-select: none;
}
.weld-spark-badge {
  position: absolute;
  right: 28px;
  top: 28px;
  padding: 8px 14px;
  color: var(--ink);
  background: var(--yellow);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  font: 400 0.92rem/1 var(--display);
  letter-spacing: 0.08em;
  transform: rotate(2deg);
}

.build-copy {
  position: relative;
  z-index: 4;
  display: flex;
  padding: clamp(55px, 7vw, 105px);
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  background: linear-gradient(135deg, rgba(25, 32, 44, 0.95), rgba(18, 22, 31, 0.98));
}
.industrial-stamp {
  display: inline-block;
  margin-bottom: 20px;
  padding: 6px 12px;
  color: var(--yellow);
  background: rgba(255, 216, 38, 0.12);
  border: 1px dashed var(--yellow);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.16em;
}
.build-copy h2 {
  margin: 0;
  font: 400 clamp(3.8rem, 6.4vw, 7.5rem)/0.84 var(--display);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #fff;
}
.build-copy h2 em {
  color: var(--weld-amber);
  font-style: normal;
  text-shadow: 0 0 20px rgba(255, 157, 26, 0.6);
}
.build-copy blockquote {
  display: inline-block;
  margin: 26px 0 0;
  padding: 4px 20px 8px;
  color: #fff;
  background: var(--red-dark);
  border: 3px solid #fff;
  box-shadow: 6px 6px 0 var(--ink);
  font: 400 clamp(3rem, 5vw, 5rem)/1 var(--display);
  transform: rotate(-2deg);
}
.plan-b {
  margin: 22px 0 0;
  color: var(--yellow);
  font: 400 clamp(1.7rem, 2.3vw, 2.4rem)/1 var(--display);
  letter-spacing: 0.04em;
}
.build-copy > p:not(.section-number):not(.plan-b) {
  max-width: 580px;
  margin: 24px 0 0;
  color: #e2e8f0;
  font-size: 1.08rem;
}
.outline-button-steel {
  margin-top: 32px;
  color: #fff;
  background: var(--steel-800);
  border: 2px solid var(--weld-amber);
  box-shadow: 6px 6px 0 var(--weld-amber);
}
.outline-button-steel:hover {
  background: var(--steel-700);
  box-shadow: 2px 2px 0 var(--weld-amber);
}
.outline-button-steel span { color: var(--yellow); }

/* --------------------------------------------------------------------------
   03 / AGENDA SECTIE
   -------------------------------------------------------------------------- */
.agenda-section {
  padding: clamp(88px, 10vw, 150px) 0;
  background: radial-gradient(circle at 85% 10%, rgba(255, 216, 38, 0.45), transparent 28%),
    radial-gradient(circle at 5% 88%, rgba(255, 104, 180, 0.25), transparent 28%),
    var(--sky-soft);
}
.agenda-heading {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  align-items: end;
  gap: 50px;
}
.agenda-heading h2 em {
  display: inline-block;
  padding: 0 0.1em 0.06em;
  color: var(--yellow);
  background: var(--red-dark);
  border: var(--line);
  box-shadow: 7px 7px 0 var(--ink);
  transform: rotate(1deg);
}
.agenda-heading p {
  max-width: 520px;
  margin: 0 0 14px;
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
}

.ticket-stack {
  display: grid;
  margin-top: clamp(60px, 7vw, 95px);
  gap: 28px;
}
.agenda-ticket {
  position: relative;
  display: grid;
  min-height: 180px;
  grid-template-columns: 175px 1fr 190px;
  border: var(--line);
  box-shadow: var(--shadow);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}
.agenda-ticket:hover {
  box-shadow: 12px 12px 0 var(--ink);
}
.agenda-ticket:nth-child(1) { transform: rotate(-0.5deg); }
.agenda-ticket:nth-child(2) { transform: translateX(16px) rotate(0.6deg); }
.agenda-ticket:nth-child(3) { transform: translateX(-8px) rotate(-0.4deg); }

.ticket-red { color: #fff; background: var(--red-dark); }
.ticket-yellow { background: var(--yellow); }
.ticket-blue { color: #fff; background: var(--blue); }

.ticket-date {
  display: grid;
  padding: 18px;
  place-content: center;
  border-right: 3px dashed currentColor;
  text-align: center;
}
.ticket-date span { font: 400 4.6rem/0.78 var(--display); }
.ticket-date b { margin-top: 8px; font: 400 1.65rem/1 var(--display); }
.ticket-date small { margin-top: 5px; font-size: 0.78rem; font-weight: 950; letter-spacing: 0.14em; }

.ticket-copy {
  display: grid;
  padding: 24px 36px;
  align-content: center;
}
.ticket-status {
  width: fit-content;
  margin-bottom: 8px;
  padding: 4px 10px;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ticket-copy h3 {
  margin: 0;
  font: 400 clamp(2.2rem, 4vw, 4.4rem)/0.95 var(--display);
  text-transform: uppercase;
}
.ticket-copy p { margin: 8px 0 0; font-size: 1.02rem; }

.ticket-time {
  display: grid;
  padding: 20px;
  place-content: center;
  border-left: 3px dashed currentColor;
  text-align: center;
}
.ticket-time small { font-size: 0.7rem; font-weight: 950; letter-spacing: 0.14em; }
.ticket-time b { margin-top: 6px; font: 400 clamp(2rem, 3.7vw, 3.8rem)/1 var(--display); }

.agenda-more { margin-top: 55px; }

/* --------------------------------------------------------------------------
   04 / OFFICIËLE TRACKS (DJ WATJUH & SPOTIFY)
   -------------------------------------------------------------------------- */
.music-section {
  position: relative;
  display: grid;
  min-height: 480px;
  padding: clamp(75px, 8vw, 130px) max(28px, calc((100vw - 1340px) / 2));
  overflow: hidden;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.94fr);
  align-items: center;
  gap: 50px;
  background: radial-gradient(circle at 4% 8%, rgba(255, 222, 41, 0.75) 0 8%, transparent 8.2%),
    radial-gradient(circle at 44% 94%, rgba(255, 103, 178, 0.65) 0 12%, transparent 12.2%),
    linear-gradient(135deg, #af85ff, #d2aaff 55%, #88d9ff);
  border-top: var(--line);
  border-bottom: var(--line);
}
.music-stars { position: absolute; inset: 0; pointer-events: none; }
.music-stars span {
  position: absolute;
  color: var(--pink);
  font: 400 8rem/1 var(--display);
  -webkit-text-stroke: 2px var(--ink);
}
.music-stars span:nth-child(1) { top: -20px; left: 45%; transform: rotate(-15deg); }
.music-stars span:nth-child(2) { right: 26%; bottom: -35px; color: var(--yellow); transform: rotate(12deg); }
.music-stars span:nth-child(3) { top: 5%; right: 2%; color: var(--blue); transform: rotate(11deg); }
.music-stars span:nth-child(4) { bottom: 5%; left: 2%; color: var(--green); }

.music-copy { position: relative; z-index: 3; }
.music-copy > p { margin: 0 0 22px; font-size: 0.76rem; font-weight: 950; letter-spacing: 0.16em; }
.music-copy h2 {
  margin: 0;
  font: 400 clamp(4.2rem, 7vw, 8rem)/0.82 var(--display);
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.music-copy h2 em {
  color: var(--yellow);
  -webkit-text-stroke: 2px var(--ink);
  text-shadow: 5px 5px 0 var(--ink);
  font-style: normal;
}
.music-joke {
  display: inline-block;
  margin-top: 26px;
  padding: 8px 14px;
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  font: 800 0.98rem/1.25 var(--hand);
  transform: rotate(-1deg);
}

.music-visual {
  position: relative;
  z-index: 3;
  min-width: 0;
  height: min(42vw, 530px);
  min-height: 380px;
  background: #8eddf6;
  border: var(--line);
  box-shadow: var(--shadow);
  transform: rotate(1deg);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.music-visual:hover { transform: rotate(0) scale(1.02); }
.music-visual > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
  filter: saturate(1.08);
}
.music-visual > .scene-video {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
  filter: saturate(1.08);
  pointer-events: none;
  transition: opacity 0.35s ease;
  visibility: visible;
  opacity: 1;
}
.music-visual > .scene-video.video-user-paused,
body.motion-disabled .music-visual > .scene-video {
  visibility: hidden !important;
  opacity: 0 !important;
}

.scene-motion-toggle {
  position: absolute;
  z-index: 4;
  top: 14px;
  left: 14px;
  min-height: 40px;
  padding: 7px 14px;
  color: var(--ink);
  background: var(--yellow);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
  font: 950 0.68rem/1.15 var(--body);
  letter-spacing: 0.05em;
  transition: background-color 0.15s ease;
}
.scene-motion-toggle:hover { background: var(--paper); }
.scene-motion-toggle[hidden] { display: none; }
.toggle-text-desktop { display: inline; }
.toggle-text-mobile { display: none; }

/* Equalizer Micro-interactie */
.dj-equalizer {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 4;
  display: flex;
  gap: 5px;
  align-items: flex-end;
  height: 32px;
  padding: 6px 10px;
  background: rgba(20, 22, 25, 0.85);
  border: 2px solid var(--yellow);
  border-radius: 4px;
}
.dj-equalizer span {
  display: block;
  width: 4px;
  height: 60%;
  background: var(--spotify);
  border-radius: 2px;
  animation: equalizer-bounce 1.2s ease-in-out infinite alternate;
}
.dj-equalizer span:nth-child(2) { animation-delay: -0.3s; height: 90%; }
.dj-equalizer span:nth-child(3) { animation-delay: -0.6s; height: 40%; }
.dj-equalizer span:nth-child(4) { animation-delay: -0.9s; height: 100%; }
.dj-equalizer span:nth-child(5) { animation-delay: -0.2s; height: 75%; }
.dj-equalizer span:nth-child(6) { animation-delay: -0.7s; height: 50%; }
.dj-equalizer span:nth-child(7) { animation-delay: -0.4s; height: 85%; }
.dj-equalizer span:nth-child(8) { animation-delay: -0.8s; height: 65%; }
@keyframes equalizer-bounce {
  0% { transform: scaleY(0.3); }
  100% { transform: scaleY(1); }
}

.spotify-button {
  position: absolute;
  right: -18px;
  bottom: -32px;
  z-index: 5;
  display: grid;
  min-width: 290px;
  min-height: 110px;
  padding: 18px 22px;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 16px;
  background: var(--spotify);
  border: var(--line);
  box-shadow: var(--shadow);
  text-decoration: none;
  transform: rotate(2deg);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}
.spotify-button:hover {
  box-shadow: 3px 3px 0 var(--ink);
  transform: translate(4px, 4px) rotate(-1deg);
}
.spotify-button > i,
.spotify-button > .spotify-icon-svg {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  color: #fff;
  background: var(--ink);
  border-radius: 50%;
  font: 400 1.9rem/1 var(--display);
}
.spotify-button > span { display: grid; font: 400 2.1rem/1 var(--display); }
.spotify-button small {
  margin-bottom: 4px;
  font: 950 0.66rem/1 var(--body);
  letter-spacing: 0.15em;
}
.spotify-button > b { font-size: 1.5rem; }

/* --------------------------------------------------------------------------
   05 / SUPPORT TEASER
   -------------------------------------------------------------------------- */
.support-teaser {
  display: grid;
  min-height: 700px;
  grid-template-columns: 0.92fr 1.08fr;
  background: radial-gradient(circle at 3% 91%, rgba(255, 216, 38, 0.6) 0 11%, transparent 11.2%),
    linear-gradient(135deg, #ff55a9, #ff94cb);
  border-bottom: var(--line);
}
.support-copy {
  display: flex;
  padding: clamp(64px, 8vw, 124px) max(28px, calc((100vw - 1340px) / 2));
  padding-right: clamp(40px, 7vw, 110px);
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.support-copy h2 {
  margin: 0;
  font: 400 clamp(4.3rem, 7vw, 8rem)/0.82 var(--display);
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.support-copy h2 em {
  color: var(--yellow);
  -webkit-text-stroke: 2px var(--ink);
  text-shadow: 5px 5px 0 var(--ink);
  font-style: normal;
}
.support-copy > p:not(.section-number) {
  max-width: 590px;
  margin: 28px 0 0;
  font-size: clamp(1.02rem, 1.3vw, 1.22rem);
}
.support-copy .party-button { margin-top: 32px; }

.racer-visual {
  position: relative;
  min-width: 0;
  min-height: 610px;
  overflow: hidden;
  background: #88dbee;
  border-left: var(--line);
}
.racer-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 59% center;
  filter: saturate(1.08);
}
.racer-visual > .scene-video {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 59% center;
  filter: saturate(1.08);
  pointer-events: none;
  transition: opacity 0.35s ease;
  visibility: visible;
  opacity: 1;
}
.racer-visual > .scene-video.video-user-paused,
body.motion-disabled .racer-visual > .scene-video {
  visibility: hidden !important;
  opacity: 0 !important;
}
.racer-visual > span {
  position: absolute;
  z-index: 3;
  right: 5%;
  bottom: 6%;
  padding: 13px 18px;
  color: #fff;
  background: var(--red-dark);
  border: var(--line);
  box-shadow: 6px 6px 0 var(--ink);
  font: 400 1.45rem/1.02 var(--display);
  text-align: center;
  transform: rotate(-6deg);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
}
.racer-visual > span:hover { transform: rotate(0) scale(1.08); }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--yellow);
  border-top: var(--line);
}
.footer-inner {
  position: relative;
  z-index: 2;
  display: grid;
  width: var(--shell);
  min-height: 390px;
  margin: 0 auto;
  padding: 70px 0;
  grid-template-columns: 0.85fr 0.8fr 1.35fr;
  align-items: center;
  gap: clamp(35px, 6vw, 85px);
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 18px;
  text-decoration: none;
  transition: transform 0.2s ease;
}
.footer-brand:hover { transform: scale(1.02); }
.footer-brand img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  filter: drop-shadow(5px 6px 0 rgba(20, 22, 25, 0.18));
}
.footer-brand span { display: grid; }
.footer-brand b { font: 400 clamp(1.65rem, 2.5vw, 2.5rem)/1 var(--display); }
.footer-brand small { margin-top: 8px; font-size: 0.78rem; font-weight: 900; }

.footer-call-wrap { display: grid; gap: 12px; }
.footer-call {
  margin: 0;
  font: 400 clamp(1.65rem, 2.8vw, 2.8rem)/1.05 var(--display);
  text-transform: uppercase;
}
.footer-contact-link {
  display: inline-flex;
  width: fit-content;
  padding-bottom: 4px;
  border-bottom: 2px solid currentColor;
  font-size: 0.84rem;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
}

.social-links { display: grid; gap: 12px; }
.social-links a {
  display: grid;
  min-height: 76px;
  padding: 10px 16px;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 14px;
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  text-decoration: none;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease;
}
.social-links a:nth-child(2) { background: var(--pink-soft); }
.social-links a:nth-child(3) { background: var(--green); }
.social-links a:hover {
  box-shadow: 1px 1px 0 var(--ink);
  transform: translate(3px, 3px);
}
.social-links i,
.social-links .social-icon-box {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: #fff;
  background: var(--ink);
  border-radius: 50%;
  font: 400 1.6rem/1 var(--display);
}
.social-links span {
  display: grid;
  font: 400 1.45rem/1 var(--display);
  text-transform: uppercase;
}
.social-links small {
  margin-bottom: 4px;
  font: 900 0.6rem/1 var(--body);
  letter-spacing: 0.14em;
}
.social-links b { font-size: 1.3rem; }

.footer-sun {
  position: absolute;
  top: -150px;
  left: 31%;
  width: 390px;
  height: 390px;
  background: var(--pink);
  border: var(--line);
  border-radius: 50%;
  opacity: 0.6;
}
.footer-tools {
  position: relative;
  z-index: 2;
  display: flex;
  width: var(--shell);
  margin: 0 auto;
  padding: 0 0 26px;
  gap: 16px 30px;
  align-items: center;
  flex-wrap: wrap;
}
.footer-tools a {
  font-size: 0.84rem;
  font-weight: 850;
  text-underline-offset: 4px;
}
.footer-tools button {
  min-height: 44px;
  margin-left: auto;
  padding: 9px 16px;
  color: var(--ink);
  background: var(--cream);
  border: 2px solid var(--ink);
  font-size: 0.82rem;
  font-weight: 850;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.15s ease;
}
.footer-tools button:hover { transform: translate(1px, 1px); }
.footer-tools button[hidden] { display: none; }

.footer-bottom {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 58px;
  padding: 0 max(28px, calc((100vw - 1340px) / 2));
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: #fff;
  background: var(--red-dark);
  border-top: var(--line);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.12em;
}

/* --------------------------------------------------------------------------
   PAGINA-SPECIFIEKE STIJLEN (AGENDA, WATJUH, SUPPORT, CONTACT, 404)
   -------------------------------------------------------------------------- */
/* Agenda */
.calendar-hero {
  position: relative;
  min-height: min(650px, calc(100svh - 86px));
  overflow: hidden;
  background: var(--sky);
  border-bottom: var(--line);
}
.calendar-hero::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, var(--sky) 0%, rgba(109, 210, 239, 0.95) 20%, rgba(109, 210, 239, 0.4) 52%, transparent 78%);
  content: "";
  pointer-events: none;
}
.calendar-hero-art { position: absolute; inset: 0; }
.calendar-hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.calendar-hero-copy, .watjuh-intro-copy, .contact-hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  width: var(--shell);
  min-height: min(650px, calc(100svh - 86px));
  margin: 0 auto;
  padding: 55px 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.calendar-hero-copy h1, .watjuh-intro h1, .contact-hero h1, .not-found-hero h1 {
  margin: 0;
  font: 400 clamp(5rem, 8vw, 8.5rem)/0.84 var(--display);
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.calendar-hero-copy h1 em, .watjuh-intro h1 em, .contact-hero h1 em, .not-found-hero h1 em {
  display: inline-block;
  margin-top: 0.08em;
  padding: 0.02em 0.14em 0.08em;
  color: var(--yellow);
  background: var(--red-dark);
  border: var(--line);
  box-shadow: 7px 7px 0 var(--ink);
  font-style: normal;
  transform: rotate(-1deg);
}
.calendar-hero-copy > p:not(.stamp), .watjuh-intro-copy > p:not(.stamp), .contact-hero-copy > p:not(.stamp) {
  max-width: 530px;
  margin: 28px 0 0;
  font-size: clamp(1.02rem, 1.3vw, 1.24rem);
  font-weight: 800;
}
.calendar-hero-copy .party-button, .watjuh-intro-copy .party-button, .contact-hero-copy .party-button {
  margin-top: 28px;
}
.calendar-board { border-bottom: var(--line); }
.calendar-list {
  padding: clamp(78px, 9vw, 135px) 0;
  background: radial-gradient(circle at 98% 10%, rgba(255, 112, 183, 0.34), transparent 26%), var(--cream);
}
.calendar-list-heading, .channels-heading, .watjuh-manual-heading {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  align-items: end;
  gap: 44px;
}
.calendar-list-heading h2, .channels-heading h2, .watjuh-manual-heading h2, .watjuh-next h2 {
  margin: 0;
  font: 400 clamp(3.8rem, 6.6vw, 7rem)/0.94 var(--display);
  letter-spacing: -0.028em;
  text-transform: uppercase;
}
.calendar-list-heading h2 em, .channels-heading h2 em, .watjuh-manual-heading h2 em, .watjuh-next h2 em {
  color: var(--blue);
  font-style: normal;
}
.calendar-list-heading p, .channels-heading p, .watjuh-manual-heading p {
  max-width: 500px;
  margin: 0 0 7px;
  font-size: 1.12rem;
}
.calendar-actions {
  display: flex;
  margin-top: 44px;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}
.calendar-actions p { margin: 0; font-size: 0.95rem; }
.calendar-note {
  width: fit-content;
  max-width: 760px;
  margin: 55px 0 0;
  padding: 18px 24px;
  background: var(--yellow);
  border: var(--line);
  box-shadow: 5px 5px 0 var(--ink);
  font-size: 1.02rem;
  font-weight: 850;
  transform: rotate(-0.6deg);
}

.calendar-follow {
  display: grid;
  min-height: 540px;
  grid-template-columns: 1.02fr 0.98fr;
  background: var(--green);
  border-top: var(--line);
}
.calendar-follow-art, .contact-support-art {
  position: relative;
  min-height: 540px;
  overflow: hidden;
}
.calendar-follow-art img, .contact-support-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 46% center;
}
.calendar-follow-copy, .contact-support-copy {
  display: flex;
  padding: clamp(54px, 6vw, 90px);
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  border-left: var(--line);
}
.calendar-follow-copy h2, .contact-support-copy h2 {
  margin: 0;
  font: 400 clamp(4.2rem, 6.2vw, 7rem)/0.9 var(--display);
  text-transform: uppercase;
}
.calendar-follow-copy h2 em, .contact-support-copy h2 em { color: var(--blue); font-style: normal; }
.calendar-follow-copy > p:not(.section-number), .contact-support-copy > p:not(.section-number) {
  max-width: 540px;
  margin: 24px 0;
  font-size: 1.12rem;
}

/* Contact Page Hero */
.contact-hero {
  display: grid;
  min-height: 640px;
  grid-template-columns: 0.96fr 1.04fr;
  border-bottom: var(--line);
}
.contact-hero-copy {
  display: flex;
  padding: clamp(55px, 6vw, 88px) 5vw clamp(55px, 6vw, 88px) max(28px, calc((100vw - 1340px) / 2));
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.contact-hero-art {
  position: relative;
  min-width: 0;
  min-height: 640px;
  margin: 0;
  overflow: hidden;
  border-left: var(--line);
}
.contact-hero-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 53% center;
}
.contact-hero-art figcaption {
  position: absolute;
  z-index: 3;
  right: 5%;
  bottom: 6%;
  left: 5%;
  width: fit-content;
  max-width: 90%;
  padding: 10px 16px;
  color: #fff;
  background: var(--red-dark);
  border: var(--line);
  box-shadow: 5px 5px 0 var(--ink);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  transform: rotate(-1deg);
}

/* Watjuh Hero (Geoptimaliseerd voor 16:9 Video & Poster) */
.watjuh-intro {
  position: relative;
  display: grid;
  min-height: 500px;
  grid-template-columns: 0.82fr 1.18fr;
  align-items: stretch;
  background: radial-gradient(circle at 5% 90%, rgba(255, 112, 183, 0.75), transparent 28%),
    linear-gradient(135deg, #ffd926, #fff4a2);
  border-bottom: var(--line);
  overflow: hidden;
}
.watjuh-intro-copy {
  display: flex;
  padding: clamp(48px, 5vw, 76px) clamp(24px, 3.5vw, 44px) clamp(48px, 5vw, 76px) max(28px, calc((100vw - 1340px) / 2));
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.watjuh-intro-art {
  position: relative;
  min-width: 0;
  height: 100%;
  min-height: 420px;
  margin: 0;
  overflow: hidden;
  border-left: var(--line);
  background: #fff8d6;
}
.watjuh-intro-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.watjuh-intro-art > .scene-video {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  transition: opacity 0.35s ease;
  visibility: visible;
  opacity: 1;
}
.watjuh-intro-art > .scene-video.video-user-paused,
body.motion-disabled .watjuh-intro-art > .scene-video {
  visibility: hidden !important;
  opacity: 0 !important;
}
.watjuh-intro-art figcaption {
  position: absolute;
  z-index: 3;
  bottom: 14px;
  left: 14px;
  width: fit-content;
  max-width: calc(100% - 28px);
  padding: 8px 14px;
  color: #fff;
  background: var(--red-dark);
  border: var(--line);
  box-shadow: 4px 4px 0 var(--ink);
  font-size: 0.74rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  transform: rotate(-1deg);
}

.watjuh-ticker { background: var(--blue); }
.watjuh-manual {
  padding: clamp(78px, 9vw, 135px) 0;
  background: radial-gradient(circle at 2% 9%, rgba(137, 221, 79, 0.5), transparent 20%),
    radial-gradient(circle at 92% 90%, rgba(255, 112, 183, 0.32), transparent 26%),
    var(--paper);
}
.watjuh-steps {
  display: grid;
  margin-top: clamp(50px, 7vw, 85px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.5vw, 32px);
}
.watjuh-steps article {
  min-height: 330px;
  padding: 28px;
  border: var(--line);
  box-shadow: var(--shadow);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.watjuh-steps article:hover { transform: translateY(-6px) rotate(0deg); }
.watjuh-steps article:nth-child(1) { background: var(--yellow); transform: rotate(-1deg); }
.watjuh-steps article:nth-child(2) { background: var(--pink-soft); transform: translateY(14px) rotate(1deg); }
.watjuh-steps article:nth-child(3) { background: var(--sky); transform: rotate(-0.6deg); }
.watjuh-steps article span {
  display: inline-block;
  padding-bottom: 11px;
  border-bottom: 2px solid var(--ink);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.14em;
}
.watjuh-steps article h3 {
  margin: 34px 0 13px;
  font: 400 clamp(2.1rem, 3.1vw, 3.7rem)/0.95 var(--display);
}
.watjuh-steps article p { margin: 0; font-size: 1.02rem; }

.watjuh-next {
  padding: clamp(78px, 9vw, 130px) 0;
  color: #fff;
  background: radial-gradient(circle at 90% 15%, rgba(255, 225, 50, 0.25), transparent 22%), var(--blue);
}
.watjuh-next h2 em { color: var(--yellow); }
.watjuh-next-links { display: grid; margin-top: 55px; gap: 16px; }
.watjuh-next-links a {
  display: grid;
  min-height: 102px;
  padding: 16px 28px;
  grid-template-columns: 70px 1fr auto;
  align-items: center;
  gap: 20px;
  color: var(--ink);
  background: var(--cream);
  border: var(--line);
  box-shadow: 6px 6px 0 var(--ink);
  text-decoration: none;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.watjuh-next-links a:nth-child(2) { background: var(--yellow); }
.watjuh-next-links a:nth-child(3) { background: var(--pink-soft); }
.watjuh-next-links a:hover { transform: translate(5px, 5px); }
.watjuh-next-links span { font-size: 0.95rem; font-weight: 950; }
.watjuh-next-links strong { font: 400 clamp(1.8rem, 3vw, 3rem)/1 var(--display); }
.watjuh-next-links b { font-size: 2rem; }

/* Support Page */
.support-hero {
  position: relative;
  display: grid;
  min-height: max(620px, calc(100svh - 86px));
  grid-template-columns: 0.95fr 1.05fr;
  overflow: hidden;
  background: radial-gradient(circle at 10% 92%, rgba(255, 227, 49, 0.8), transparent 27%),
    linear-gradient(135deg, #65d7f2, #9fe6f7);
  border-bottom: var(--line);
}
.support-hero-copy {
  position: relative;
  z-index: 3;
  display: flex;
  padding: clamp(54px, 6vw, 88px) 6vw clamp(54px, 6vw, 88px) max(28px, calc((100vw - 1340px) / 2));
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.support-hero-copy h1 {
  margin: 0;
  font: 400 clamp(5rem, 6vw, 7rem)/0.79 var(--display);
  letter-spacing: -0.038em;
  text-transform: uppercase;
}
.support-hero-copy h1 em {
  display: inline-block;
  margin-top: 0.1em;
  padding: 0.03em 0.14em 0.08em;
  color: var(--yellow);
  background: var(--red-dark);
  border: var(--line);
  box-shadow: 7px 7px 0 var(--ink);
  font-style: normal;
  transform: rotate(-1deg);
}
.support-hero-copy > p:not(.stamp) {
  max-width: 610px;
  margin: 30px 0 0;
  font-size: clamp(1.04rem, 1.35vw, 1.25rem);
}
.support-hero-copy .party-button { margin-top: 30px; }
.support-hero-copy > p.support-nudge {
  width: fit-content;
  margin-top: 20px;
  padding: 8px 12px;
  background: var(--yellow);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0.085em;
  transform: rotate(-1deg);
}

.support-hero-art {
  position: relative;
  min-width: 0;
  min-height: 620px;
  overflow: hidden;
  background: #94ddf1;
  border-left: var(--line);
}
.support-hero-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
  filter: saturate(1.08);
}
.support-hero-art > .scene-video {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
  filter: saturate(1.08);
  pointer-events: none;
  transition: opacity 0.35s ease;
  visibility: visible;
  opacity: 1;
}
.support-hero-art > .scene-video.video-user-paused,
body.motion-disabled .support-hero-art > .scene-video {
  visibility: hidden !important;
  opacity: 0 !important;
}
.support-sticker {
  position: absolute;
  z-index: 3;
  right: 5%;
  bottom: 8%;
  display: grid;
  width: 120px;
  height: 120px;
  place-items: center;
  background: var(--yellow);
  border: var(--line);
  border-radius: 50%;
  box-shadow: 6px 6px 0 var(--ink);
  font: 400 1.2rem/1.02 var(--display);
  text-align: center;
  transform: rotate(8deg);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
}
.support-sticker:hover { transform: scale(1.12) rotate(14deg); }
.support-squiggle {
  position: absolute;
  z-index: 4;
  top: 4%;
  left: 44%;
  color: var(--red);
  font: 400 clamp(3rem, 6vw, 6rem)/1 var(--display);
  pointer-events: none;
  transform: rotate(-14deg);
}
.support-ticker { background: var(--purple); }

.ways-section {
  padding: clamp(88px, 10vw, 150px) 0;
  background: radial-gradient(circle at 97% 12%, rgba(138, 221, 80, 0.4), transparent 20%),
    radial-gradient(circle at 0% 88%, rgba(255, 113, 186, 0.28), transparent 24%),
    var(--cream);
}
.ways-heading em { color: var(--blue); }
.ways-grid {
  display: grid;
  margin-top: clamp(65px, 8vw, 110px);
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 34px);
}
.way-card {
  position: relative;
  display: flex;
  min-height: 430px;
  padding: 30px;
  flex-direction: column;
  align-items: flex-start;
  border: var(--line);
  box-shadow: var(--shadow);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}
.way-card:hover {
  box-shadow: 12px 12px 0 var(--ink);
}
.way-time { background: var(--yellow); transform: rotate(-1deg); }
.way-material { background: var(--sky); transform: translateY(17px) rotate(0.8deg); }
.way-sponsor { background: var(--pink-soft); transform: rotate(-0.6deg); }
.way-icon {
  display: grid;
  width: 68px;
  height: 68px;
  margin-bottom: 25px;
  place-items: center;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 50%;
  font: 400 2rem/1 var(--display);
}
.way-card small { font-size: 0.68rem; font-weight: 950; letter-spacing: 0.15em; }
.way-card h3 {
  margin: 12px 0 16px;
  font: 400 clamp(2.5rem, 3.5vw, 3.8rem)/0.94 var(--display);
  text-transform: uppercase;
}
.way-card p { margin: 0 0 28px; font-size: 1.02rem; }
.way-card a {
  display: flex;
  width: 100%;
  margin-top: auto;
  padding-top: 14px;
  align-items: center;
  justify-content: space-between;
  border-top: 2px solid var(--ink);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}
.way-card a span { color: var(--red-dark); font-size: 1.2rem; }

.payment-later {
  position: relative;
  display: grid;
  min-height: 600px;
  padding: clamp(74px, 9vw, 130px) max(28px, calc((100vw - 1340px) / 2));
  overflow: hidden;
  grid-template-columns: minmax(150px, 0.35fr) 1fr minmax(170px, 0.35fr);
  align-items: center;
  gap: clamp(25px, 6vw, 90px);
  color: #fff;
  background: radial-gradient(circle at 95% 65%, rgba(255, 107, 179, 0.8) 0 16%, transparent 16.2%),
    repeating-linear-gradient(125deg, transparent 0 78px, rgba(255, 255, 255, 0.045) 78px 88px),
    linear-gradient(120deg, #ad143c, #e02b51);
  border-top: var(--line);
  border-bottom: var(--line);
}
.payment-note {
  display: grid;
  width: clamp(130px, 14vw, 195px);
  aspect-ratio: 1;
  place-items: center;
  color: var(--ink);
  background: var(--yellow);
  border: var(--line);
  border-radius: 50%;
  box-shadow: 8px 8px 0 var(--ink);
  font: 400 clamp(2rem, 3vw, 3.5rem)/0.9 var(--display);
  text-align: center;
  transform: rotate(-7deg);
}
.payment-copy { position: relative; z-index: 2; }
.payment-copy > p:first-child {
  margin: 0 0 22px;
  color: var(--yellow);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.15em;
}
.payment-copy h2 {
  margin: 0;
  font: 400 clamp(3.6rem, 6.3vw, 7rem)/0.83 var(--display);
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.payment-copy h2 em { color: var(--yellow); font-style: normal; }
.payment-copy > p:not(:first-child) { max-width: 670px; margin: 26px 0 0; font-size: 1.1rem; }
.outline-button-cream { color: var(--ink); background: var(--cream); }
.payment-euro {
  color: var(--pink);
  font: 400 clamp(10rem, 18vw, 20rem)/0.7 var(--display);
  -webkit-text-stroke: 3px var(--ink);
  text-shadow: 9px 9px 0 var(--ink);
  transform: rotate(8deg);
  pointer-events: none;
}

.impact-section {
  display: grid;
  min-height: 720px;
  grid-template-columns: 1fr 1fr;
  background: linear-gradient(135deg, #a5eb5d, #72dff0);
  border-bottom: var(--line);
}
.impact-image {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  border-right: var(--line);
}
.impact-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 37% center;
  filter: saturate(1.08);
}
.impact-image span {
  position: absolute;
  right: 30px;
  bottom: 30px;
  padding: 12px 18px;
  color: #fff;
  background: var(--blue);
  border: var(--line);
  box-shadow: 6px 6px 0 var(--ink);
  font: 400 1.35rem/1.03 var(--display);
  text-align: center;
  transform: rotate(-4deg);
}
.impact-copy {
  display: flex;
  padding: clamp(65px, 8vw, 120px);
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.impact-copy h2 {
  margin: 0;
  font: 400 clamp(3.8rem, 6.2vw, 7.2rem)/0.84 var(--display);
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.impact-copy h2 em { color: var(--blue); font-style: normal; }
.impact-copy > p:not(.section-number) { max-width: 620px; margin: 28px 0 0; font-size: 1.1rem; }
.impact-copy .party-button { margin-top: 32px; }

/* Contact Page */
.contact-hero {
  background: radial-gradient(circle at 0 100%, rgba(255, 225, 50, 0.65), transparent 27%),
    linear-gradient(135deg, #ff75b8, #ffb9d9);
}
.contact-hero-art img { object-position: 57% center; }
.contact-channels { padding: clamp(78px, 9vw, 135px) 0; background: var(--cream); }
.channel-grid {
  display: grid;
  margin-top: clamp(52px, 7vw, 88px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.5vw, 32px);
}
.channel-card {
  position: relative;
  display: flex;
  min-height: 300px;
  padding: 28px;
  flex-direction: column;
  align-items: flex-start;
  color: var(--ink);
  border: var(--line);
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}
.channel-card:hover {
  box-shadow: 12px 12px 0 var(--ink);
}
.channel-facebook { background: var(--sky); }
.channel-instagram { background: var(--pink-soft); }
.channel-spotify { background: var(--green); }
.channel-symbol {
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  color: #fff;
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 50%;
  font: 400 2.8rem/1 var(--display);
}
.channel-card small { margin-top: auto; font-size: 0.76rem; font-weight: 950; letter-spacing: 0.12em; }
.channel-card strong { margin-top: 10px; font: 400 clamp(2.5rem, 3.5vw, 4rem)/0.95 var(--display); }
.channel-arrow { position: absolute; right: 26px; bottom: 28px; font-size: 1.9rem; }

.contact-support {
  display: grid;
  min-height: 560px;
  grid-template-columns: 0.92fr 1.08fr;
  background: var(--green);
  border-top: var(--line);
}
.contact-support-copy {
  padding-left: max(28px, calc((100vw - 1340px) / 2));
  border-left: 0;
}
.contact-support-copy h2 em { color: var(--red-dark); }
.contact-support-copy .party-button { margin-top: 10px; }
.contact-support-art { border-left: var(--line); }
.contact-support-art img { object-position: 58% center; }

/* 404 Page */
.not-found-hero {
  background: radial-gradient(circle at 10% 90%, rgba(255, 216, 38, 0.75), transparent 28%),
    linear-gradient(135deg, #ff75b8, #ffd826);
}

/* --------------------------------------------------------------------------
   SCROLL-REVEAL TRANSITIONS
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   DIRECTE REGIOBANK DONATIE MODULE
   -------------------------------------------------------------------------- */
.direct-donate-section {
  scroll-margin-top: clamp(65px, 8vw, 90px);
  padding: clamp(80px, 9vw, 140px) 0;
  background: radial-gradient(circle at 95% 15%, rgba(255, 216, 38, 0.4), transparent 28%),
    radial-gradient(circle at 5% 85%, rgba(109, 210, 239, 0.3), transparent 28%),
    var(--cream);
  border-bottom: var(--line);
}
.donate-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(30px, 4vw, 60px);
  align-items: start;
}
.donate-card {
  position: relative;
  background: var(--paper);
  border: var(--line);
  box-shadow: var(--shadow-lg);
  padding: clamp(28px, 4vw, 44px);
  border-radius: 4px;
}
.donate-badge {
  display: inline-block;
  padding: 5px 12px;
  background: var(--red-dark);
  color: #fff;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.14em;
  margin-bottom: 16px;
  transform: rotate(-1.5deg);
}
.donate-header h2 {
  margin: 0 0 14px;
  font: 400 clamp(3.2rem, 5.2vw, 5.6rem)/0.88 var(--display);
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.donate-header h2 em {
  color: var(--red);
  font-style: normal;
}
.donate-header p {
  margin: 0 0 24px;
  font-size: 1.05rem;
  color: #2d3748;
}

.donate-presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.preset-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 10px;
  min-height: 74px;
  background: #fff;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease, background-color 0.18s ease;
}
.preset-btn b {
  font: 400 1.65rem/1 var(--display);
  color: var(--ink);
  letter-spacing: 0.02em;
}
.preset-btn small {
  font-size: 0.68rem;
  font-weight: 900;
  color: #555;
  margin-top: 4px;
  text-align: center;
}
.preset-btn:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
  background: var(--cream);
}
.preset-btn:active {
  transform: scale(0.95);
}
.preset-btn.is-selected {
  background: var(--yellow) !important;
  border-color: var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  transform: translateY(-3px);
}
.preset-btn.is-selected b { color: var(--red-dark); }

.custom-amount-wrap {
  margin-bottom: 20px;
  padding: 16px 20px;
  background: var(--sky-soft);
  border: 2px solid var(--ink);
  border-radius: 4px;
}
.custom-amount-wrap label {
  display: block;
  font-size: 0.8rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.input-currency {
  display: flex;
  align-items: center;
  background: #fff;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 4px 14px;
}
.input-currency span {
  font: 400 1.8rem/1 var(--display);
  color: var(--red-dark);
  margin-right: 8px;
}
.input-currency input {
  width: 100%;
  border: none;
  background: transparent;
  font: 400 1.8rem/1 var(--display);
  color: var(--ink);
  outline: none;
}

.donate-impact-box {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 20px;
  background: #fff8d9;
  border: 2px dashed var(--ink);
  border-radius: 4px;
  margin-bottom: 24px;
}
.impact-icon {
  font-size: 1.8rem;
  line-height: 1;
}
.impact-text strong {
  display: block;
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red-dark);
  margin-bottom: 4px;
}
.impact-text p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.45;
}

.donate-action-wrap {
  display: grid;
  gap: 12px;
}
.donate-main-btn {
  width: 100%;
  min-height: 64px;
  font-size: 0.95rem;
  background: var(--red);
  box-shadow: 6px 6px 0 var(--ink);
  gap: 16px;
}
.donate-main-btn:hover {
  background: var(--red-dark);
  box-shadow: 2px 2px 0 var(--ink);
}
.donate-main-btn.is-loading {
  opacity: 0.92;
  cursor: wait;
  filter: brightness(0.95);
  pointer-events: none;
}
.donate-main-btn.is-loading b {
  display: inline-block;
  animation: spin-arrow 0.8s linear infinite;
}
@keyframes spin-arrow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.donate-main-btn.btn-highlight-pulse {
  animation: btn-attention 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes btn-attention {
  0% { transform: scale(1); }
  35% { transform: scale(1.03) translateY(-3px); box-shadow: 8px 8px 0 var(--ink), 0 0 24px rgba(230, 35, 72, 0.6); }
  100% { transform: scale(1); }
}
.donate-subtext {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 900;
  color: #4a5568;
}

.donate-visual-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.donate-figure {
  margin: 0;
  position: relative;
  background: var(--yellow);
  border: var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
  border-radius: 4px;
}
.donate-figure-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f7d54e;
}
.donate-figure-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.donate-figure-media > .scene-video {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  transition: opacity 0.35s ease;
  visibility: visible;
  opacity: 1;
}
.donate-figure-media > .scene-video.video-user-paused,
body.motion-disabled .donate-figure-media > .scene-video {
  visibility: hidden !important;
  opacity: 0 !important;
}
.donate-figure figcaption {
  position: relative;
  z-index: 3;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--yellow);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-align: center;
}

.donate-cheer-note {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--paper);
  border: var(--line);
  box-shadow: var(--shadow-sm);
  border-radius: 4px;
}
.donate-cheer-note .cheer-heart {
  font-size: 1.8rem;
  line-height: 1;
  flex-shrink: 0;
  display: inline-block;
  animation: cheer-pulse 2.2s ease-in-out infinite;
}
@keyframes cheer-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.22) rotate(-6deg); }
}
.donate-cheer-note p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink);
}
.donate-cheer-note strong {
  display: block;
  font-size: 0.98rem;
  color: var(--red-dark);
  margin-bottom: 2px;
}

/* --------------------------------------------------------------------------
   MOBIEL BOTTOM ACTION DOCK (ONDER DE DUIM)
   -------------------------------------------------------------------------- */
.mobile-bottom-dock {
  display: none;
}
.dock-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.dock-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}
.dock-icon {
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
}
.dock-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: left;
  min-width: 0;
}
.dock-text b {
  font: 400 0.96rem/1 var(--display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dock-text small {
  font-size: 0.64rem;
  font-weight: 800;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dock-btn-support {
  background: var(--red);
  color: #fff;
  border-color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  animation: dock-pulse 3s infinite ease-in-out;
}
.dock-btn-support .dock-text b {
  color: #fff;
}
.dock-btn-support .dock-text small {
  color: var(--yellow-glow);
}
.dock-btn-agenda {
  background: var(--yellow);
  color: var(--ink);
}
.dock-btn-menu {
  background: var(--paper);
}

@keyframes dock-pulse {
  0%, 100% { box-shadow: 3px 3px 0 var(--ink); }
  50% { box-shadow: 3px 3px 0 var(--ink), 0 0 16px rgba(230, 35, 72, 0.55); }
}

/* --------------------------------------------------------------------------
   OFFICIËLE SOCIAL LOGO'S (SVG)
   -------------------------------------------------------------------------- */
.social-svg {
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
  flex-shrink: 0;
}
.channel-symbol .social-svg {
  display: block;
}
.outline-button .social-svg {
  vertical-align: -0.18em;
  margin-right: 6px;
}

/* --------------------------------------------------------------------------
   PRIJZENKAST & EREMETAAL
   -------------------------------------------------------------------------- */
.trophy-hero {
  position: relative;
  display: grid;
  min-height: 540px;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  background: radial-gradient(circle at 15% 20%, rgba(255, 216, 38, 0.45), transparent 40%),
    radial-gradient(circle at 85% 85%, rgba(230, 35, 72, 0.25), transparent 40%),
    var(--cream);
  border-bottom: var(--line);
  overflow: hidden;
}
.trophy-hero-copy {
  padding: clamp(60px, 8vw, 110px) 0 clamp(60px, 8vw, 110px) max(28px, calc((100vw - 1340px) / 2));
}
.trophy-hero-copy h1 {
  font: 400 clamp(4.2rem, 8vw, 7.8rem)/0.88 var(--display);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 14px 0 20px;
}
.trophy-hero-copy h1 em {
  display: inline-block;
  padding: 0 0.12em 0.05em;
  color: var(--ink);
  background: var(--yellow);
  border: var(--line);
  box-shadow: 6px 6px 0 var(--ink);
  transform: rotate(-1.5deg);
}
.trophy-hero-copy p {
  max-width: 580px;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.5;
  margin-bottom: 24px;
}
.trophy-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 2px solid var(--ink);
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 var(--ink);
}
.hero-badge-gold { background: var(--yellow); color: var(--ink); }
.hero-badge-bronze { background: #f0a36b; color: var(--ink); }
.hero-badge-fun { background: var(--pink-soft); color: var(--ink); }

.trophy-hero-art {
  position: relative;
  height: 100%;
  min-height: 480px;
  margin: 0;
  border-left: var(--line);
  background: var(--paper);
  overflow: hidden;
}
.trophy-hero-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.trophy-hero-art > .scene-video {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  transition: opacity 0.35s ease;
  visibility: visible;
  opacity: 1;
}
.trophy-hero-art > .scene-video.video-user-paused,
body.motion-disabled .trophy-hero-art > .scene-video {
  visibility: hidden !important;
  opacity: 0 !important;
}
.trophy-hero-art figcaption {
  position: absolute;
  z-index: 3;
  bottom: 14px;
  left: 14px;
  padding: 6px 14px;
  background: var(--ink);
  color: #fff;
  border: 2px solid var(--paper);
  font-family: var(--display);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.official-trophies {
  padding: clamp(80px, 9vw, 130px) 0;
  background: var(--sky-soft);
  border-bottom: var(--line);
}
.trophies-heading {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  align-items: end;
  gap: 40px;
  margin-bottom: clamp(48px, 6vw, 75px);
}
.trophies-heading h2 {
  font: 400 clamp(3.2rem, 6.5vw, 5.4rem)/0.92 var(--display);
  text-transform: uppercase;
  margin: 0;
}
.trophies-heading h2 em {
  display: inline-block;
  padding: 0 0.12em 0.05em;
  color: #fff;
  background: var(--red-dark);
  border: var(--line);
  box-shadow: 6px 6px 0 var(--ink);
  transform: rotate(1deg);
}
.trophies-heading p {
  max-width: 520px;
  font-size: clamp(1.02rem, 1.3vw, 1.18rem);
  line-height: 1.5;
  margin: 0;
}

.trophy-showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3.5vw, 44px);
}
.trophy-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 4vw, 48px);
  border: var(--line);
  box-shadow: var(--shadow);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
  overflow: hidden;
}
.trophy-card:hover {
  box-shadow: 12px 12px 0 var(--ink);
  transform: translateY(-4px);
}
.trophy-card-gold {
  background: linear-gradient(145deg, #fff9db 0%, #ffec8a 60%, #ffd826 100%);
}
.trophy-card-bronze {
  background: linear-gradient(145deg, #fff0e6 0%, #fbd1b5 60%, #f3a878 100%);
}
.trophy-ribbon {
  position: absolute;
  top: 26px;
  right: -38px;
  width: 160px;
  padding: 6px 0;
  text-align: center;
  background: var(--red);
  color: #fff;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  font-family: var(--display);
  font-size: 0.88rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transform: rotate(45deg);
  box-shadow: 0 4px 6px rgba(0,0,0,0.15);
  pointer-events: none;
}
.ribbon-bronze {
  background: var(--ink);
  color: #fff;
}
.trophy-badge-icon {
  font-size: clamp(3.2rem, 5vw, 4.5rem);
  line-height: 1;
  margin-bottom: 16px;
  filter: drop-shadow(4px 4px 0 rgba(0,0,0,0.18));
}
.trophy-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.trophy-season {
  font-family: var(--body);
  font-size: 0.82rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  color: var(--ink);
}
.trophy-rank-pill {
  padding: 4px 12px;
  border: 2px solid var(--ink);
  font-family: var(--display);
  font-size: 1rem;
  letter-spacing: 0.05em;
  box-shadow: 2px 2px 0 var(--ink);
}
.pill-gold { background: var(--yellow); color: var(--ink); }
.pill-bronze { background: #d97736; color: #fff; }

.trophy-card h3 {
  font: 400 clamp(1.8rem, 2.8vw, 2.5rem)/1.02 var(--display);
  text-transform: uppercase;
  margin: 0 0 16px;
}
.trophy-card h3 em {
  color: var(--red-dark);
}
.trophy-story {
  font-size: 1.02rem;
  line-height: 1.55;
  margin-bottom: 24px;
}
.trophy-highlights {
  list-style: none;
  padding: 0;
  margin: auto 0 0 0;
  display: grid;
  gap: 8px;
  border-top: 2px dashed rgba(20, 22, 25, 0.3);
  padding-top: 18px;
}
.trophy-highlights li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 0.94rem;
  font-weight: 850;
}
.trophy-highlights li span {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  background: var(--ink);
  color: #fff;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 950;
  flex-shrink: 0;
}

/* Onofficiële Wisselbekers */
.fun-trophies {
  padding: clamp(75px, 8vw, 120px) 0;
  background: var(--paper);
  border-bottom: var(--line);
}
.fun-heading {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  align-items: end;
  gap: 40px;
  margin-bottom: clamp(40px, 5vw, 65px);
}
.fun-heading h2 {
  font: 400 clamp(2.8rem, 5.5vw, 4.6rem)/0.94 var(--display);
  text-transform: uppercase;
  margin: 0;
}
.fun-heading h2 em {
  display: inline-block;
  padding: 0 0.12em 0.05em;
  color: var(--ink);
  background: var(--pink-soft);
  border: var(--line);
  box-shadow: 5px 5px 0 var(--ink);
  transform: rotate(-1deg);
}
.fun-heading p {
  max-width: 520px;
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.5;
  margin: 0;
}
.fun-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.5vw, 32px);
}
.fun-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px;
  background: var(--cream);
  border: var(--line);
  box-shadow: var(--shadow);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}
.fun-card:hover {
  box-shadow: 10px 10px 0 var(--ink);
  transform: translateY(-3px);
}
.fun-card:nth-child(1) { background: #fffbe6; }
.fun-card:nth-child(2) { background: var(--pink-soft); }
.fun-card:nth-child(3) { background: #e8f7ff; }

.fun-icon {
  font-size: 2.8rem;
  line-height: 1;
  margin-bottom: 12px;
}
.fun-card small {
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.14em;
  color: #666;
}
.fun-card h3 {
  font: 400 1.85rem/1.05 var(--display);
  text-transform: uppercase;
  margin: 8px 0 12px;
}
.fun-card p {
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 20px;
}
.fun-status {
  margin-top: auto;
  padding: 6px 12px;
  background: var(--ink);
  color: #fff;
  font-family: var(--display);
  font-size: 0.88rem;
  letter-spacing: 0.05em;
  text-align: center;
}

/* Trophy CTA */
.trophy-cta {
  padding: clamp(75px, 8vw, 120px) 0;
  background: var(--yellow);
}
.trophy-cta-inner {
  padding: clamp(36px, 5vw, 64px);
  background: var(--paper);
  border: var(--line);
  box-shadow: var(--shadow-lg);
}
.trophy-cta-copy h2 {
  font: 400 clamp(2.8rem, 5.5vw, 4.8rem)/0.92 var(--display);
  text-transform: uppercase;
  margin: 8px 0 18px;
}
.trophy-cta-copy h2 em {
  color: var(--red);
}
.trophy-cta-copy p {
  max-width: 720px;
  font-size: clamp(1.04rem, 1.35vw, 1.22rem);
  line-height: 1.55;
  margin-bottom: 28px;
}
.trophy-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

/* --------------------------------------------------------------------------
   SPONSORS & PARTNERS
   -------------------------------------------------------------------------- */
.sponsors-hero {
  position: relative;
  display: grid;
  min-height: 520px;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  background: radial-gradient(circle at 10% 20%, rgba(255, 104, 180, 0.35), transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(255, 216, 38, 0.45), transparent 40%),
    var(--cream);
  border-bottom: var(--line);
  overflow: hidden;
}
.sponsors-hero-copy {
  padding: clamp(60px, 8vw, 110px) 0 clamp(60px, 8vw, 110px) max(28px, calc((100vw - 1340px) / 2));
}
.sponsors-hero-copy h1 {
  font: 400 clamp(4rem, 7.8vw, 7.5rem)/0.88 var(--display);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 14px 0 20px;
}
.sponsors-hero-copy h1 em {
  display: inline-block;
  padding: 0 0.12em 0.05em;
  color: #fff;
  background: var(--red);
  border: var(--line);
  box-shadow: 6px 6px 0 var(--ink);
  transform: rotate(1deg);
}
.sponsors-hero-copy p {
  max-width: 590px;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.5;
  margin-bottom: 28px;
}
.sponsors-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.sponsors-hero-art {
  position: relative;
  height: 100%;
  min-height: 480px;
  margin: 0;
  border-left: var(--line);
  background: var(--paper);
  overflow: hidden;
}
.sponsors-hero-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.sponsors-hero-art > .scene-video {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  transition: opacity 0.35s ease;
  visibility: visible;
  opacity: 1;
}
.sponsors-hero-art > .scene-video.video-user-paused,
body.motion-disabled .sponsors-hero-art > .scene-video {
  visibility: hidden !important;
  opacity: 0 !important;
}
.sponsors-hero-art figcaption {
  position: absolute;
  z-index: 3;
  bottom: 14px;
  left: 14px;
  padding: 6px 14px;
  background: var(--ink);
  color: #fff;
  border: 2px solid var(--paper);
  font-family: var(--display);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   SPONSORS VERHAAL (COLLECTIEVE KRACHT)
   -------------------------------------------------------------------------- */
.sponsors-story-section {
  padding: clamp(75px, 8vw, 120px) 0;
  background: var(--sky-soft);
  border-bottom: var(--line);
}
.sponsors-story-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(35px, 5vw, 65px);
}
.story-copy h2 {
  font: 400 clamp(3.2rem, 6.2vw, 5.2rem)/0.92 var(--display);
  text-transform: uppercase;
  margin: 0 0 18px;
}
.story-copy h2 em {
  display: inline-block;
  padding: 0 0.12em 0.05em;
  color: #fff;
  background: var(--red-dark);
  border: var(--line);
  box-shadow: 6px 6px 0 var(--ink);
  transform: rotate(1deg);
}
.story-lead {
  font-size: clamp(1.08rem, 1.4vw, 1.26rem);
  font-weight: 700;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 16px;
}
.story-copy p {
  font-size: 1.02rem;
  line-height: 1.55;
  color: #222;
  margin: 0 0 16px;
}

.story-pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.pillar-card {
  display: flex;
  flex-direction: column;
  padding: 22px 20px;
  background: #ffffff;
  border: var(--line);
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}
.pillar-card:hover {
  box-shadow: 7px 7px 0 var(--ink);
  transform: translateY(-2px);
}
.pillar-icon {
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: 10px;
}
.pillar-card strong {
  font: 400 1.35rem/1.1 var(--display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: var(--ink);
}
.pillar-card p {
  font-size: 0.88rem;
  line-height: 1.45;
  margin: 0;
  color: #444;
}

/* --------------------------------------------------------------------------
   SPONSORS ERELIJST (UNIFIED CARDS MET LOGO'S & WEBSITES)
   -------------------------------------------------------------------------- */
.sponsors-list-section {
  padding: clamp(80px, 9vw, 130px) 0;
  background: var(--paper);
  border-bottom: var(--line);
}
.sponsors-heading {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  align-items: end;
  gap: 40px;
  margin-bottom: clamp(48px, 6vw, 75px);
}
.sponsors-heading h2 {
  font: 400 clamp(3.2rem, 6.5vw, 5.4rem)/0.92 var(--display);
  text-transform: uppercase;
  margin: 0;
}
.sponsors-heading h2 em {
  display: inline-block;
  padding: 0 0.12em 0.05em;
  color: var(--ink);
  background: var(--yellow);
  border: var(--line);
  box-shadow: 6px 6px 0 var(--ink);
  transform: rotate(-1deg);
}
.sponsors-heading p {
  max-width: 520px;
  font-size: clamp(1.02rem, 1.3vw, 1.18rem);
  line-height: 1.5;
  margin: 0;
}

/* --------------------------------------------------------------------------
/* --------------------------------------------------------------------------
   SPONSORS ERELIJST (SPEELS, ROND & FEESTELIJK - GEEN SAAIE HOKJES)
   -------------------------------------------------------------------------- */
.sponsors-collage-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: clamp(24px, 3.5vw, 36px);
  padding: 16px 4px 30px;
}

/* Algemene kaart structuur: zacht, vrolijk en ultra-rond */
.sponsor-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 3px solid var(--ink);
  border-radius: 32px; /* Mooi en uitgesproken rond */
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s ease, background-color 0.28s ease;
  overflow: visible;
  --card-rotate: 0deg;
  transform: rotate(var(--card-rotate));
}
.sponsor-card:nth-child(4n+1) { --card-rotate: -1.1deg; }
.sponsor-card:nth-child(4n+2) { --card-rotate: 1.2deg; }
.sponsor-card:nth-child(4n+3) { --card-rotate: -0.8deg; }
.sponsor-card:nth-child(4n)   { --card-rotate: 1deg; }

.sponsor-card[data-reveal] {
  opacity: 0;
  transform: translateY(28px) rotate(var(--card-rotate));
}
.sponsor-card[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0) rotate(var(--card-rotate));
}

.sponsor-card:hover {
  box-shadow: 10px 10px 0 var(--ink);
  transform: translateY(-8px) rotate(0deg) scale(1.02) !important;
  z-index: 10;
}

/* --------------------------------------------------------------------------
   SPEELSE CORNER PIN BADGE (CARNAVALSBATONNETJE IN DE HOEK)
   -------------------------------------------------------------------------- */
.sponsor-badge-pin {
  position: absolute;
  top: -12px;
  right: -8px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--tag-bg, var(--yellow));
  border: 2.5px solid var(--ink);
  box-shadow: 2.5px 2.5px 0 var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  line-height: 1;
  z-index: 6;
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sponsor-card:hover .sponsor-badge-pin {
  transform: scale(1.18) rotate(12deg);
}

/* --------------------------------------------------------------------------
   LOGO CONTAINERS (ROND, INSET & HOOG CONTRAST)
   -------------------------------------------------------------------------- */
.sponsor-logo-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 136px;
  height: 136px;
  margin: 14px 14px 0;
  padding: 10px 16px;
  border: 2.5px solid var(--ink);
  border-radius: 22px; /* Harmonisch afgerond venster */
  overflow: hidden;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.04);
}

/* Hoog-contrast thema's voor specifieke logo's */
.sponsor-logo-box.bg-navy {
  background: linear-gradient(145deg, #09111c 0%, #132238 100%);
  border-color: #1a2a40;
}
.sponsor-logo-box.bg-steel {
  background: linear-gradient(145deg, #13161c 0%, #222833 100%);
  border-color: #272f3d;
}
.sponsor-logo-box.bg-petrol {
  background: linear-gradient(145deg, #0c1b24 0%, #153042 100%);
  border-color: #1b3d54;
}
.sponsor-logo-box.bg-white {
  background: #ffffff;
}
.sponsor-logo-box.bg-warm-white {
  background: #fffdf5;
}

/* Logo afmetingen: passend, prominent en vullend in het balkje */
.sponsor-logo-img {
  max-height: 98px;
  max-width: 90%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.25s ease;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
}
.sponsor-card:hover .sponsor-logo-img {
  transform: scale(1.05);
}

/* Kareltjes passend en trots in het balkje */
.sponsor-card-kareltjes .sponsor-logo-img,
.sponsor-logo-img[alt*="Kareltjes"] {
  max-height: 116px;
  max-width: 94%;
}

/* --------------------------------------------------------------------------
   SPONSOR ZONDER LOGO: SPEELS NAAMBORD MET FEEST-HEADER
   -------------------------------------------------------------------------- */
.sponsor-billboard-header {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 130px;
  margin: 14px 14px 0;
  padding: 18px 22px;
  border: 2.5px solid var(--ink);
  border-radius: 22px; /* Harmonisch afgerond venster */
  background-color: var(--bg-accent, #ffd926);
  overflow: hidden;
}
.billboard-pattern {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.35),
    rgba(255, 255, 255, 0.35) 10px,
    transparent 10px,
    transparent 20px
  );
  pointer-events: none;
}
.sponsor-billboard-tag {
  position: relative;
  z-index: 2;
  display: inline-block;
  padding: 3px 12px;
  background: var(--ink);
  color: #ffffff;
  font-family: var(--body);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
  margin-bottom: 6px;
}
.billboard-name {
  position: relative;
  z-index: 2;
  font: 400 clamp(1.65rem, 2.2vw, 2.05rem)/0.98 var(--display);
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
  letter-spacing: 0.02em;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.9);
}

/* --------------------------------------------------------------------------
   KAART INHOUD & TYPOGRAFIE
   -------------------------------------------------------------------------- */
.sponsor-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 22px 22px;
}
.sponsor-card-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 10px;
}
.sponsor-tag-badge {
  display: inline-block;
  padding: 5px 14px;
  color: var(--ink);
  background: var(--tag-bg, var(--yellow));
  border: 2px solid var(--ink);
  border-radius: 999px; /* Bubbly en rond */
  font-family: var(--display);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  box-shadow: 2px 2px 0 var(--ink);
  text-transform: uppercase;
}
.sponsor-card-title {
  font: 400 clamp(1.45rem, 1.9vw, 1.85rem)/1.08 var(--display);
  text-transform: uppercase;
  margin: 4px 0 0;
  color: var(--ink);
}
.sponsor-card-desc {
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 18px;
  color: #2e333d;
}
.sponsor-card-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1.5px dashed rgba(20, 22, 25, 0.2);
}
.sponsor-action-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 18px;
  background: #ffffff;
  border: 2.5px solid var(--ink);
  border-radius: 999px; /* Bubbly pill knop */
  box-shadow: 3px 3px 0 var(--ink);
  text-decoration: none;
  font-family: var(--display);
  font-size: 0.92rem;
  letter-spacing: 0.05em;
  color: var(--ink);
  text-transform: uppercase;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.sponsor-action-link:hover {
  background: var(--yellow);
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}
.sponsor-action-link b {
  font-size: 1.1rem;
}
.sponsor-ere-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px; /* Bubbly pill */
  background: rgba(20, 22, 25, 0.05);
  border: 1.5px solid rgba(20, 22, 25, 0.18);
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #555;
}

/* --------------------------------------------------------------------------
   SPEELSE CARNAVALS ACCENTEN (ZACHTE PASTEL-TINTS, GEEN BALKJES BOVENAAN)
   -------------------------------------------------------------------------- */
.sponsor-card.accent-yellow {
  background: #fffef2;
  --bg-accent: #ffe873;
  --tag-bg: #ffd926;
}
.sponsor-card.accent-yellow .sponsor-badge-pin {
  background: #ffd926;
}

.sponsor-card.accent-orange {
  background: #fff8f2;
  --bg-accent: #ffd1b3;
  --tag-bg: #ff9b54;
}
.sponsor-card.accent-orange .sponsor-badge-pin {
  background: #ff9b54;
}

.sponsor-card.accent-blue {
  background: #f4faff;
  --bg-accent: #bfe5fa;
  --tag-bg: #74c7f0;
}
.sponsor-card.accent-blue .sponsor-badge-pin {
  background: #74c7f0;
}

.sponsor-card.accent-green {
  background: #f4fbf4;
  --bg-accent: #cbf4be;
  --tag-bg: #8ce175;
}
.sponsor-card.accent-green .sponsor-badge-pin {
  background: #8ce175;
}

.sponsor-card.accent-cyan {
  background: #f2fcfb;
  --bg-accent: #c4f7f2;
  --tag-bg: #6ce4dc;
}
.sponsor-card.accent-cyan .sponsor-badge-pin {
  background: #6ce4dc;
}

.sponsor-card.accent-pink {
  background: #fff5fa;
  --bg-accent: #ffd4ea;
  --tag-bg: #ff94c9;
}
.sponsor-card.accent-pink .sponsor-badge-pin {
  background: #ff94c9;
}

/* Mobiele optimalisatie */
@media (max-width: 840px) {
  .sponsors-collage-board {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 10px 0 24px;
  }
  .sponsor-card {
    --card-rotate: 0deg !important;
    transform: none !important;
  }
  .sponsor-card[data-reveal] {
    transform: translateY(20px) !important;
  }
  .sponsor-card[data-reveal].is-revealed {
    transform: none !important;
  }
}

.sponsor-cta-section {
  padding: clamp(75px, 8vw, 120px) 0;
  background: var(--sky-soft);
}
.sponsor-cta-box {
  padding: clamp(36px, 5vw, 64px);
  background: var(--paper);
  border: var(--line);
  box-shadow: var(--shadow-lg);
}
.sponsor-cta-content h2 {
  font: 400 clamp(2.8rem, 5.5vw, 4.8rem)/0.92 var(--display);
  text-transform: uppercase;
  margin: 8px 0 18px;
}
.sponsor-cta-content h2 em {
  color: var(--red);
}
.sponsor-cta-content p {
  max-width: 720px;
  font-size: clamp(1.04rem, 1.35vw, 1.22rem);
  line-height: 1.55;
  margin-bottom: 28px;
}
.sponsor-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

/* --------------------------------------------------------------------------
   RESPONSIVE DESIGN (BREAKPOINTS)
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .hero-main { --scene-left: 12vw; }
  .hero-copy h1 { font-size: clamp(4.6rem, 9.5vw, 7rem); }
  .hero-scene { width: 88vw; object-position: 55% center; }
  .countboard { grid-template-columns: 175px 1fr 180px; }
  .count-intro { padding: 15px; }
  .manual-grid article { min-height: 340px; }
  .build-story { grid-template-columns: 1fr 1fr; }
  .build-copy { padding: 55px 38px; }
  .agenda-ticket { grid-template-columns: 145px 1fr 155px; }
  .music-section { grid-template-columns: minmax(0, 1fr) minmax(0, 0.84fr); }
  .support-copy { padding-left: 36px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-call { display: none; }
  .support-hero-copy { padding-left: 36px; }
  .payment-later { grid-template-columns: 140px 1fr; }
  .payment-euro { position: absolute; right: -1%; bottom: 10%; opacity: 0.3; }
  .watjuh-intro-copy, .contact-hero-copy { padding-left: 36px; }
  .calendar-follow-copy, .contact-support-copy { padding: 55px 38px; }
  .trophy-hero, .sponsors-hero { grid-template-columns: 1fr 1fr; }
  .trophy-hero-copy, .sponsors-hero-copy { padding-left: 36px; }
}

@media (max-width: 840px) {
  :root { --shell: calc(100% - 28px); }
  .site-header { height: 72px; }
  .site-header.header-scrolled { height: 64px; }
  .brand img { width: 44px; height: 44px; }
  .brand b { font-size: 0.84rem; }
  .brand small { display: none; }
  .main-nav { display: none; }
  .menu { position: relative; display: block; }

  .hero-main { min-height: max(590px, calc(100svh - 198px)); }
  .hero-inner { padding: 34px 0 295px; align-items: flex-start; }
  .hero-copy { width: 100%; }
  .hero-copy h1 { font-size: clamp(4rem, 16vw, 6.2rem); }
  .hero-copy h1 span:nth-child(2) { -webkit-text-stroke-width: 1px; text-shadow: 4px 4px 0 var(--ink); }
  .hero-copy h1 em { border-width: 2px; box-shadow: 5px 5px 0 var(--ink); }
  .hero-joke { width: 85%; margin-top: 16px; font-size: 0.98rem; }
  .hero-copy .party-button { min-height: 48px; margin-top: 18px; padding: 0 18px; gap: 15px; font-size: 0.72rem; }
  .hero-scene { top: auto; right: -15%; bottom: 0; width: 118%; height: 55%; object-position: 70% 57%; }
  .hero-wash { background: linear-gradient(180deg, var(--sky) 0 45%, rgba(109, 210, 239, 0.92) 53%, transparent 78%); }
  .sticker-one { top: auto; right: auto; bottom: 22%; left: 5%; width: 78px; height: 78px; font-size: 0.75rem; }
  .sticker-two { display: none; }

  .countboard { min-height: 126px; grid-template-columns: 1fr; }
  .count-intro { display: none; }
  .countdown { min-height: 82px; }
  .count-part { padding: 8px 2px; border-right-width: 2px; }
  .count-part span { font-size: clamp(2.45rem, 12vw, 3.3rem); }
  .count-part small { margin-top: 6px; font-size: 0.68rem; }
  .date-ticket { display: flex; min-height: 46px; padding: 7px 10px; align-items: center; justify-content: center; gap: 15px; border-top: 2px solid var(--ink); }
  .date-ticket span { font-size: 0.66rem; }
  .date-ticket b { font-size: 1.95rem; }
  .date-ticket small { display: none; }

  .section-kicker {
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    margin-bottom: 28px;
  }
  .stamp {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
  }

  .club-heading, .agenda-heading, .ways-heading { grid-template-columns: 1fr; }
  .club-heading h2, .agenda-heading h2, .ways-heading h2 { font-size: clamp(3.8rem, 15vw, 6.2rem); }
  .club-intro { padding: 0; }
  .manual-grid, .ways-grid { grid-template-columns: 1fr; }
  .manual-grid article, .manual-grid article:nth-child(2), .way-card, .way-material { min-height: 270px; transform: none !important; }
  .manual-grid h3 { margin-top: 55px; }

  .build-story, .impact-section { grid-template-columns: 1fr; }
  .build-image-wrap, .impact-image { min-height: 460px; border-right: 0; border-bottom: var(--line); }
  .build-copy, .impact-copy { padding: 60px 24px 74px; }
  .build-copy h2, .impact-copy h2 { font-size: clamp(3.6rem, 14vw, 6rem); }

  .agenda-ticket { grid-template-columns: 115px 1fr; transform: none !important; }
  .ticket-time { grid-column: 1 / -1; display: flex; min-height: 54px; padding: 9px 18px; align-items: center; justify-content: flex-end; gap: 12px; border-top: 2px dashed currentColor; border-left: 0; }
  .ticket-time b { font-size: 2rem; }
  .ticket-date { padding: 12px; }
  .ticket-date span { font-size: 3.5rem; }
  .ticket-copy { padding: 20px; }
  .ticket-copy h3 { font-size: clamp(2rem, 8vw, 3rem); }

  .music-section { min-height: 0; padding: 74px 24px; grid-template-columns: 1fr; }
  .music-copy h2 { font-size: clamp(3.8rem, 14vw, 6.2rem); }
  .music-visual { width: min(100%, 580px); height: auto; aspect-ratio: 1.15; min-height: 0; margin-bottom: 34px; transform: none; }
  .music-visual > img, .music-visual > .scene-video { object-position: 62% center; }
  .spotify-button { min-width: 0; width: min(100%, 420px); transform: none; }

  .support-teaser { grid-template-columns: 1fr; }
  .support-copy { padding: 70px 24px; }
  .support-copy h2 { font-size: clamp(3.8rem, 14vw, 6.2rem); }
  .racer-visual { min-height: 500px; border-top: var(--line); border-left: 0; }

  .footer-inner { padding: 60px 0; grid-template-columns: 1fr; }
  .footer-sun { left: auto; right: -170px; }
  .footer-bottom { padding: 16px 14px; flex-direction: column; align-items: flex-start; justify-content: center; }

  .calendar-hero { display: flex; min-height: 0; flex-direction: column; }
  .calendar-hero::before { display: none; }
  .calendar-hero-copy { order: 1; width: 100%; min-height: 0; padding: 64px 24px 68px; background: var(--sky); }
  .calendar-hero-art { position: relative; order: 2; width: 100%; aspect-ratio: 1672 / 941; }
  .calendar-list-heading, .channels-heading, .watjuh-manual-heading { grid-template-columns: 1fr; gap: 20px; }
  .calendar-list-heading h2, .channels-heading h2, .watjuh-manual-heading h2, .watjuh-next h2 { font-size: clamp(3.4rem, 11vw, 5.8rem); }
  .calendar-follow, .contact-support, .contact-hero { grid-template-columns: 1fr; }
  .calendar-follow-art, .contact-support-art, .contact-hero-art { min-height: 0; aspect-ratio: 3 / 2; border-left: 0; }
  .calendar-follow-copy { border-top: var(--line); border-left: 0; }
  .contact-hero-copy { padding: 64px 24px 68px; }
  .contact-hero-art { border-top: var(--line); }

  .watjuh-intro {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .watjuh-intro-copy {
    padding: clamp(38px, 6vw, 60px) max(16px, 4.5vw) clamp(30px, 5vw, 44px);
  }
  .watjuh-intro-art {
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 9;
    border-left: 0;
    border-top: var(--line);
    position: relative;
    overflow: hidden;
  }
  .watjuh-steps, .channel-grid { grid-template-columns: 1fr; }
  .contact-support-art { border-top: var(--line); }

  .support-hero { grid-template-columns: 1fr; }
  .support-hero-copy { padding: 65px 24px 72px; }
  .support-hero-copy h1 { font-size: clamp(4rem, 14vw, 6rem); }
  .support-hero-art { min-height: 500px; border-top: var(--line); border-left: 0; }
  .support-squiggle { top: 46%; left: 5%; }
  .payment-later { padding: 74px 24px; grid-template-columns: 1fr; }
  .payment-euro { right: -8%; bottom: 3%; font-size: 12rem; }

  /* Mobiel Bottom Dock & Spacing */
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .mobile-bottom-dock {
    display: grid;
    grid-template-columns: 1.35fr 1fr 0.95fr;
    gap: 8px;
    position: fixed;
    bottom: max(10px, env(safe-area-inset-bottom, 10px));
    left: 10px;
    right: 10px;
    z-index: 1050;
    padding: 6px;
    background: rgba(20, 22, 25, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 2px solid var(--ink);
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 4px 4px 0 var(--ink);
  }

  /* Donatie Sectie */
  .donate-grid { grid-template-columns: 1fr; gap: 28px; }
  .donate-presets { grid-template-columns: repeat(3, 1fr); }

  /* Compacte & logisch gepositioneerde video knoppen op mobiel */
  .toggle-text-desktop { display: none; }
  .toggle-text-mobile { display: inline; }

  .scene-motion-toggle {
    top: 10px;
    right: 10px;
    left: auto;
    min-height: 28px;
    padding: 4px 9px;
    font-size: 0.60rem;
    line-height: 1.1;
    letter-spacing: 0.04em;
    border-width: 1.5px;
    box-shadow: 2px 2px 0 var(--ink);
    border-radius: 4px;
    background: rgba(247, 213, 78, 0.95);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .music-visual > .scene-motion-toggle {
    right: auto;
    left: 10px;
  }
  .dj-equalizer {
    top: 10px;
    right: 10px;
    height: 26px;
    padding: 3px 6px;
    gap: 3px;
  }
  .dj-equalizer span {
    width: 3px;
  }

  /* Subtiele, niet-belemmerende rode tekstbanners op mobiel */
  .watjuh-intro-art figcaption,
  .contact-hero-art figcaption,
  .calendar-hero-art figcaption,
  .calendar-follow-art figcaption,
  .contact-support-art figcaption,
  .trophy-hero-art figcaption,
  .sponsors-hero-art figcaption {
    position: absolute;
    bottom: 8px;
    right: 8px;
    left: 8px;
    width: fit-content;
    max-width: calc(100% - 16px);
    margin: 0 auto;
    padding: 4px 10px;
    font-size: 0.58rem;
    line-height: 1.2;
    letter-spacing: 0.04em;
    border-width: 1.5px;
    box-shadow: 2px 2px 0 var(--ink);
    transform: rotate(-0.5deg);
    text-align: center;
    background: rgba(184, 20, 54, 0.94);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  .racer-visual > span {
    right: 8px;
    bottom: 8px;
    padding: 4px 9px;
    font-size: 0.82rem;
    line-height: 1.05;
    border-width: 1.5px;
    box-shadow: 2px 2px 0 var(--ink);
    transform: rotate(-3deg);
    background: rgba(184, 20, 54, 0.94);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  .donate-figure figcaption {
    padding: 6px 10px;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
  }

  .donate-cheer-note {
    padding: 10px 14px;
    gap: 10px;
  }
  .donate-cheer-note .cheer-heart {
    font-size: 1.45rem;
  }
  .donate-cheer-note p {
    font-size: 0.84rem;
    line-height: 1.4;
  }
  .donate-cheer-note strong {
    font-size: 0.88rem;
  }

  .trophy-hero, .sponsors-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .trophy-hero-copy, .sponsors-hero-copy {
    padding: clamp(38px, 6vw, 60px) max(16px, 4.5vw) clamp(30px, 5vw, 44px);
  }
  .trophy-hero-copy h1, .sponsors-hero-copy h1 {
    font-size: clamp(3.2rem, 12vw, 4.6rem);
    line-height: 0.92;
    margin: 10px 0 16px;
    word-break: break-word;
  }
  .trophy-hero-art, .sponsors-hero-art {
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 9;
    border-left: 0;
    border-top: var(--line);
    position: relative;
    overflow: hidden;
  }
  .sponsors-hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 12px;
  }
  .sponsors-hero-actions .party-button,
  .sponsors-hero-actions .outline-button {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .trophy-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
  }
  .trophy-hero-badges .hero-badge {
    font-size: clamp(0.78rem, 3.2vw, 0.92rem);
    padding: 5px 10px;
  }

  .trophies-heading, .fun-heading, .sponsors-heading {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 32px;
  }
  .trophies-heading h2, .fun-heading h2, .sponsors-heading h2 {
    font-size: clamp(2.8rem, 10vw, 4.2rem);
    line-height: 0.94;
  }
  .trophy-showcase-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .trophy-card {
    padding: 26px 18px 22px;
    transform: none !important;
  }
  .trophy-card h3 {
    font-size: clamp(1.65rem, 6.5vw, 2.2rem);
  }
  .trophy-story {
    font-size: 0.94rem;
    line-height: 1.5;
  }
  .trophy-ribbon {
    top: 18px;
    right: -42px;
    font-size: 0.72rem;
    width: 140px;
  }
  .fun-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .fun-card {
    padding: 22px 18px;
    transform: none !important;
  }
  .sponsors-story-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .story-pillars {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .pillar-card {
    padding: 18px 16px;
    transform: none !important;
  }
  .sponsors-collage-board {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 8px 0 18px;
  }
  .sponsor-card {
    --card-rotate: 0deg !important;
    transform: none !important;
  }
  .sponsor-card[data-reveal].is-revealed {
    transform: translateY(0) !important;
  }
  .sponsor-card.sponsor-card-wide {
    grid-column: span 1 !important;
    flex-direction: column !important;
  }
  .sponsor-card.sponsor-card-wide .sponsor-logo-box,
  .sponsor-card.sponsor-card-wide .sponsor-billboard-header {
    width: 100% !important;
    border-right: none !important;
    border-bottom: var(--line) !important;
  }
  .sponsor-card.sponsor-card-wide .sponsor-card-body {
    width: 100% !important;
    padding: 18px 16px !important;
  }
  .sponsor-logo-box {
    min-height: 115px;
    padding: 16px 20px;
  }
  .sponsor-logo-img {
    max-height: 64px;
    max-width: 86%;
  }
  .sponsor-billboard-header {
    min-height: 110px;
    padding: 20px 16px 14px;
  }
  .card-sticker-tag {
    font-size: 0.64rem;
    padding: 3px 8px;
    margin-bottom: 6px;
  }
  .billboard-name {
    font-size: clamp(1.65rem, 7.2vw, 2.15rem);
    word-break: break-word;
  }
  .sponsor-card-body {
    padding: 18px 16px;
  }
  .sponsor-tag-badge {
    font-size: 0.78rem;
    padding: 3px 8px;
  }
  .sponsor-card-title {
    font-size: clamp(1.45rem, 6.2vw, 1.85rem);
  }
  .sponsor-card-desc {
    font-size: 0.92rem;
    line-height: 1.5;
    margin-bottom: 16px;
  }
  .sponsor-action-link {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 0.88rem;
  }
  .sponsor-ere-pill {
    font-size: 0.76rem;
    padding: 7px 10px;
  }
  .tape-strip {
    width: 95px;
    height: 24px;
    top: -12px;
  }
  .tape-strip.tape-brabant {
    width: 110px;
    height: 26px;
  }

  .trophy-cta-actions, .sponsor-cta-buttons {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 12px;
  }
  .trophy-cta-actions .party-button,
  .trophy-cta-actions .outline-button,
  .sponsor-cta-buttons .party-button,
  .sponsor-cta-buttons .outline-button {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 500px) {
  .hero-main { min-height: max(580px, calc(100svh - 198px)); }
  .hero-inner { padding-bottom: 235px; }
  .hero-copy h1 { font-size: clamp(3.8rem, 19vw, 5.2rem); }
  .hero-joke { width: 92%; }
  .hero-scene { right: -28%; width: 146%; height: 50%; object-position: 68% center; }
  .count-part small { font-size: 0.62rem; letter-spacing: 0.08em; }
  .club-heading h2, .agenda-heading h2, .ways-heading h2 { font-size: clamp(3.5rem, 17vw, 5rem); }
  .manual-grid article { padding: 22px; }
  .build-image-wrap, .impact-image { min-height: 380px; }
  .build-copy h2, .impact-copy h2 { font-size: clamp(3.4rem, 15vw, 4.8rem); }
  .agenda-ticket { grid-template-columns: 90px minmax(0, 1fr); }
  .ticket-date span { font-size: 2.9rem; }
  .ticket-date b { font-size: 1.2rem; }
  .ticket-copy { min-width: 0; padding: 16px; }
  .ticket-copy h3 { font-size: clamp(1.6rem, 7vw, 2.9rem); overflow-wrap: anywhere; }
  .music-copy h2 { font-size: clamp(3.4rem, 15vw, 4.8rem); }
  .music-visual { aspect-ratio: 1; }
  .music-visual .spotify-button { right: -5px; bottom: -25px; min-width: 0; width: min(92%, 305px); }
  .support-copy h2 { font-size: clamp(3.6rem, 15vw, 4.9rem); }
  .racer-visual, .support-hero-art { min-height: 390px; }
  .footer-brand img { width: 72px; height: 72px; }
  .footer-brand b { font-size: 1.6rem; }
  .support-hero-copy h1 { font-size: clamp(3.7rem, 16vw, 4.9rem); }
  .support-sticker { width: 92px; height: 92px; font-size: 0.9rem; }
  .calendar-actions .outline-button { width: 100%; gap: 12px; padding: 12px; }
  .watjuh-next-links a { min-height: 88px; padding: 14px; grid-template-columns: 32px 1fr 20px; gap: 8px; }
  .watjuh-next-links strong { font-size: clamp(1.4rem, 6.4vw, 2rem); }

  body { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  .mobile-bottom-dock {
    left: 8px;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom, 8px));
    gap: 5px;
    padding: 5px;
    border-radius: 14px;
  }
  .dock-btn { padding: 7px 6px; gap: 6px; }
  .dock-icon { font-size: 1.2rem; }
  .dock-text b { font-size: 0.84rem; }
  .dock-text small { font-size: 0.58rem; }
  .donate-header h2 { font-size: clamp(2.4rem, 9.5vw, 3.4rem); margin-bottom: 8px; }
  .donate-header p { font-size: 0.92rem; margin-bottom: 14px; }
  .donate-presets { grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
  .preset-btn { padding: 8px 4px; min-height: 56px; box-shadow: 3px 3px 0 var(--ink); }
  .preset-btn b { font-size: 1.25rem; }
  .preset-btn small { font-size: 0.58rem; margin-top: 2px; }
  .preset-custom, .preset-btn-custom { grid-column: auto; }
  .donate-card { padding: 18px 14px; }
  .donate-main-btn { min-height: 54px; font-size: 0.88rem; padding: 0 12px; gap: 8px; margin-top: 4px; }
  .donate-impact-box { padding: 10px 12px; gap: 10px; margin-top: 12px; margin-bottom: 0; }
  .impact-icon { font-size: 1.3rem; }
  .impact-text strong { font-size: 0.68rem; margin-bottom: 2px; }
  .impact-text p { font-size: 0.86rem; line-height: 1.35; }

  .scene-motion-toggle {
    top: 8px;
    right: 8px;
    min-height: 24px;
    padding: 3px 7px;
    font-size: 0.54rem;
  }
  .music-visual > .scene-motion-toggle {
    left: 8px;
    right: auto;
  }
  .trophy-hero-art figcaption,
  .sponsors-hero-art figcaption,
  .watjuh-intro-art figcaption,
  .contact-hero-art figcaption,
  .calendar-hero-art figcaption,
  .calendar-follow-art figcaption,
  .contact-support-art figcaption {
    bottom: 6px;
    padding: 3px 8px;
    font-size: 0.52rem;
    letter-spacing: 0.03em;
  }
  .sponsor-logo-box { min-height: 100px; padding: 14px 16px; }
  .sponsor-logo-img { max-height: 55px; }
  .sponsor-billboard-header { min-height: 98px; padding: 16px 14px 12px; }
  .billboard-name { font-size: clamp(1.5rem, 7vw, 1.95rem); }
  .sponsor-card-body { padding: 16px 14px; }
  .racer-visual > span {
    right: 6px;
    bottom: 6px;
    padding: 3px 7px;
    font-size: 0.76rem;
  }

  .trophy-hero-copy h1, .sponsors-hero-copy h1 { font-size: clamp(2.8rem, 11vw, 3.8rem); }
  .trophy-card, .fun-card { padding: 20px 14px; }
  .trophy-badge-icon { font-size: 2.5rem; }
  .sponsor-tag-badge { font-size: 0.74rem; }
}

/* --------------------------------------------------------------------------
   ACCESSIBILITY & REDUCED MOTION
   -------------------------------------------------------------------------- */
html.motion-paused *,
html.motion-paused *::before,
html.motion-paused *::after {
  animation-play-state: paused !important;
  scroll-behavior: auto !important;
  transition-duration: 0.01ms !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}