:root {
  --navy: #06192a;
  --navy-2: #0a2238;
  --navy-3: #0f2e4a;
  --gold: #ffc21c;
  --gold-deep: #e9a900;
  --white: #ffffff;
  --offwhite: #f4f6f8;
  --text: #eaf0f5;
  --muted: #aebbc7;
  --ink: #081523;
  --line: rgba(255,255,255,.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Inter", Arial, sans-serif;
  background: var(--navy);
  color: var(--text);
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.container { width: min(1180px, calc(100% - 36px)); margin: 0 auto; }

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 24% 40%, rgba(255,194,28,.10), transparent 24%),
    radial-gradient(circle at 78% 24%, rgba(255,194,28,.09), transparent 28%),
    linear-gradient(135deg, #03111d 0%, #06192a 46%, #0a2238 100%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, transparent 0 61%, rgba(255,255,255,.035) 61% 62%, transparent 62% 100%),
    repeating-linear-gradient(165deg, transparent 0 34px, rgba(255,255,255,.018) 34px 35px);
  pointer-events: none;
}
.nav {
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 3;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { width: 112px; height: 112px; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(0,0,0,.32)); }
.nav-links { display: flex; gap: 34px; align-items: center; }
.nav-links a {
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  position: relative;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -8px;
  height: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transition: .2s ease;
}
.nav-links a:hover::after { transform: scaleX(1); }

.hero-grid {
  min-height: 690px;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: 58px;
  position: relative;
  z-index: 2;
  padding: 42px 0 74px;
}
.hero-logo-wrap { position: relative; display: grid; place-items: center; min-height: 520px; }
.hero-logo-glow {
  position: absolute;
  width: 430px; height: 430px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,194,28,.22), rgba(255,194,28,.08) 36%, transparent 70%);
  filter: blur(10px);
}
.hero-logo {
  width: min(470px, 100%);
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 28px 40px rgba(0,0,0,.45));
}
.hero-copy { max-width: 680px; }
.eyebrow, .section-label {
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--gold);
  font-weight: 800;
  font-size: .82rem;
}
h1, h2, h3 {
  font-family: "Barlow Condensed", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .01em;
  margin-top: 0;
}
h1 {
  font-style: italic;
  font-weight: 900;
  font-size: clamp(3.6rem, 7vw, 7rem);
  line-height: .92;
  margin-bottom: 28px;
  text-wrap: balance;
}
h1 span { color: var(--gold); }
h2 {
  font-style: italic;
  font-weight: 900;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: .98;
  margin-bottom: 22px;
}
h3 {
  font-style: italic;
  font-weight: 900;
  font-size: 1.65rem;
  line-height: 1;
  margin-bottom: 14px;
}
.intro { font-size: 1.14rem; color: #d9e1e8; max-width: 650px; }
.slogan {
  display: inline-block;
  margin: 20px 0 0;
  color: var(--gold);
  font-family: "Barlow Condensed", sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: .02em;
  border-left: 4px solid var(--gold);
  padding-left: 14px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 24px;
  border-radius: 8px;
  text-decoration: none;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 900;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  border: 2px solid transparent;
  transform: skew(-4deg);
}
.button.primary { background: var(--gold); color: #151515; }
.button.ghost { border-color: rgba(255,255,255,.28); color: white; background: rgba(255,255,255,.03); }
.button:hover { translate: 0 -2px; }
.hero-stripe { height: 7px; background: linear-gradient(90deg, transparent 0 7%, var(--gold) 7% 35%, #fff 35% 36%, var(--gold) 36% 64%, transparent 64%); }

.section-dark { background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%); }
.section-light { background: var(--offwhite); color: var(--ink); }
.section-gold { background: linear-gradient(135deg, #f2b800 0%, #ffc928 55%, #e8a900 100%); color: #101820; }
.activities { padding: 90px 0 100px; }
.section-heading-row { display: flex; justify-content: space-between; gap: 30px; align-items: end; }
.section-heading-row h2 { max-width: 780px; }
.cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 38px;
}
.card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  border: 1px solid rgba(255,194,28,.24);
  border-radius: 16px;
  padding: 28px 22px 26px;
  overflow: hidden;
  min-height: 310px;
}
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--gold);
}
.card-number {
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border: 2px solid var(--gold);
  border-radius: 50%;
  color: var(--gold);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.45rem;
  font-weight: 900;
  margin-bottom: 24px;
}
.card h3 {
  color: white;
  font-size: clamp(1.15rem, 1.45vw, 1.48rem);
  line-height: 1.08;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.card p { color: var(--muted); margin: 0; font-size: .95rem; }

/* De twee langste titels iets compacter zodat ze altijd binnen de kaart blijven. */
.card:first-child h3,
.card:nth-child(4) h3 {
  font-size: clamp(1.05rem, 1.25vw, 1.30rem);
}

.about { padding: 100px 0; }
.about-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
.about-visual { min-height: 450px; position: relative; display: grid; place-items: center; }
.about-visual .accent-box {
  position: absolute;
  inset: 35px 16px 0 36px;
  border-radius: 24px;
  background: linear-gradient(145deg, #071827, #0b2b46);
  transform: rotate(-3deg);
  box-shadow: 0 20px 50px rgba(5,17,28,.2);
}
.about-visual img { width: min(420px, 82%); position: relative; z-index: 1; filter: drop-shadow(0 20px 25px rgba(0,0,0,.35)); }
.dark-label { color: #9a7000; }
.about-copy p { color: #3d4a55; font-size: 1.06rem; }
.about-copy h2 { color: var(--ink); }

.mission-band { padding: 86px 0; position: relative; }
.mission-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0 64%, rgba(255,194,28,.07) 64% 66%, transparent 66%);
  pointer-events: none;
}
.mission-box { max-width: 900px; position: relative; z-index: 1; }
.mission-box p:last-child { color: #d7e0e7; font-size: 1.12rem; }

.contact { padding: 88px 0; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.contact-intro p { font-size: 1.06rem; color: #3d3315; }
.contact-card {
  background: #071827;
  color: white;
  border-radius: 18px;
  padding: 30px;
  box-shadow: 0 18px 42px rgba(74,50,0,.18);
}
.contact-title {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.7rem;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--gold);
  margin-top: 0;
}
.contact-card p { display: grid; grid-template-columns: 105px 1fr; gap: 14px; margin: 14px 0; }
.contact-card span { color: #9fb0be; font-size: .9rem; }
.contact-card a { color: white; text-decoration: none; font-weight: 700; overflow-wrap: anywhere; }
.contact-card a:hover { color: var(--gold); }

footer { background: #020b12; border-top: 1px solid rgba(255,255,255,.08); }
.footer-inner { min-height: 110px; display: flex; justify-content: space-between; align-items: center; gap: 28px; color: #aebbc7; font-size: .9rem; }
.footer-brand { display: flex; align-items: center; gap: 14px; }
.footer-brand img { width: 72px; height: 72px; object-fit: contain; }
.footer-brand strong { display: block; color: white; font-family: "Barlow Condensed", sans-serif; font-size: 1.15rem; text-transform: uppercase; }
.footer-brand span { color: var(--gold); font-style: italic; }

@media (max-width: 1050px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .hero-grid { grid-template-columns: 1fr 1.15fr; }
  .hero-logo-wrap { min-height: 430px; }
}

@media (max-width: 780px) {
  .nav { min-height: 82px; }
  .brand img { width: 88px; height: 88px; }
  .nav-links { gap: 16px; }
  .nav-links a { font-size: .92rem; }
  .hero-grid { grid-template-columns: 1fr; gap: 12px; text-align: center; padding-top: 18px; }
  .hero-logo-wrap { min-height: 320px; }
  .hero-logo { width: min(320px, 80vw); }
  .hero-copy { margin: 0 auto; }
  .slogan { border-left: 0; border-bottom: 3px solid var(--gold); padding: 0 0 8px; }
  .hero-actions { justify-content: center; }
  .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .about-grid { gap: 35px; }
  .about-visual { min-height: 350px; }
}

@media (max-width: 560px) {
  .container { width: min(100% - 24px, 1180px); }
  .nav { align-items: flex-start; padding-top: 8px; }
  .nav-links { flex-wrap: wrap; justify-content: flex-end; padding-top: 20px; }
  .nav-links a { font-size: .82rem; }
  h1 { font-size: clamp(3.2rem, 17vw, 4.9rem); }
  h2 { font-size: clamp(2.5rem, 13vw, 3.7rem); }
  .cards { grid-template-columns: 1fr; }
  .card { min-height: auto; }
  .contact-card p { grid-template-columns: 1fr; gap: 2px; }
  .footer-inner { flex-direction: column; text-align: center; padding: 24px 0; }
  .footer-brand { flex-direction: column; }
}

/* Lange activiteitstitels */
.card h3 {
  font-size: clamp(1.15rem, 1.45vw, 1.48rem);
  line-height: 1.08;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.card:first-child h3,
.card:nth-child(4) h3 {
  font-size: clamp(1.02rem, 1.22vw, 1.28rem);
  line-height: 1.1;
}