/* ============================================================
   OnDestination - Wie wij zijn / About page styles
   Requires: colors_and_type.css + home.css
   ============================================================ */

/* ── Page Hero ── */
.page-hero.band { padding: 148px 0 108px; }

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 75% 65% at 72% 48%, rgba(111,224,0,.10), transparent 62%);
  pointer-events: none;
  z-index: 0;
}
.page-hero .wrap { position: relative; z-index: 2; }

.ph-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 80px;
  align-items: center;
}
.ph-copy h1.kard {
  font-size: clamp(52px, 7.5vw, 116px);
  line-height: .96;
  margin: 0 0 28px;
  color: #F8F5EE;
}
.ph-copy h1.kard em {
  font-style: normal;
  color: #6FE000;
  text-shadow: 0 0 60px rgba(111,224,0,.38);
}
.page-hero .lead {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.6;
  font-weight: 300;
  color: #D4D4D4;
  max-width: 50ch;
  margin: 0 0 36px;
}
.ph-cta { display: flex; gap: 14px; flex-wrap: wrap; }

.ph-photo { position: relative; }
.ph-photo .ph {
  aspect-ratio: 4/5;
  border-radius: 24px;
  box-shadow: 0 48px 96px rgba(0,0,0,.55);
}
.ph-photo-tag {
  position: absolute;
  left: 22px;
  bottom: 22px;
  background: #000;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  padding: 9px 16px;
  border-radius: 999px;
}
.ph-photo-tag b { color: #6FE000; }

/* ── Het Verhaal ── */
.verhaal-grid {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: 72px;
  align-items: center;
}
.verhaal-photo { position: relative; }
.verhaal-photo .ph {
  aspect-ratio: 3/4;
  border-radius: 20px;
  box-shadow: 0 30px 60px rgba(0,0,0,.14);
}
.verhaal-photo-tag {
  position: absolute;
  left: 22px;
  bottom: 22px;
  background: #000;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  padding: 9px 16px;
  border-radius: 999px;
}
.verhaal-photo-tag b { color: #6FE000; }
.verhaal-copy h2 {
  font-size: clamp(32px, 4vw, 58px);
  line-height: 1.04;
  margin: 0 0 26px;
}
.verhaal-copy p {
  font-size: 17px;
  line-height: 1.7;
  color: #3a3a36;
  margin: 0 0 18px;
  max-width: 56ch;
}
.verhaal-copy .arrow-link { color: #0A0A0A; margin-top: 8px; }

/* ── Drijfveer manifesto ── */
.drijfveer-inner {
  position: relative;
  z-index: 2;
  max-width: 1040px;
  margin: 0 auto;
}
.manifesto-quote {
  font-family: 'Kardige', sans-serif;
  font-size: clamp(28px, 3.8vw, 58px);
  line-height: 1.1;
  letter-spacing: -.025em;
  color: #F8F5EE;
  margin: 0 0 52px;
  border-left: 3px solid #6FE000;
  padding-left: 32px;
}
.manifesto-quote em {
  font-style: normal;
  color: #6FE000;
}
.drijfveer-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  padding-left: 35px;
}
.drijfveer-body p {
  font-size: 17px;
  line-height: 1.72;
  font-weight: 300;
  color: #C7C7C7;
  margin: 0;
}

/* ── Onze aanpak ── */
.aanpak-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 56px;
}
.aanpak-item {
  background: #141414;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 36px 28px 32px;
  display: flex;
  flex-direction: column;
  transition: border-color 240ms cubic-bezier(.22,.61,.36,1), transform 240ms cubic-bezier(.22,.61,.36,1);
}
.aanpak-item:hover {
  border-color: rgba(111,224,0,.32);
  transform: translateY(-4px);
}
.aanpak-num {
  font-family: 'Kardige', sans-serif;
  font-size: 54px;
  line-height: 1;
  letter-spacing: -.04em;
  color: rgba(111,224,0,.2);
  margin-bottom: 22px;
}
.aanpak-item h3 {
  font-family: 'Kardige', sans-serif;
  font-size: 28px;
  line-height: 1.08;
  color: #F8F5EE;
  margin: 0 0 14px;
  font-weight: 400;
  letter-spacing: -.015em;
}
.aanpak-item p {
  font-size: 15px;
  line-height: 1.68;
  color: #8a8a86;
  margin: 0;
  flex: 1;
}

/* ── De oprichters ── */
.oprichters-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 56px;
}
.oprichter-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 24px;
  overflow: hidden;
  transition: transform 260ms cubic-bezier(.22,.61,.36,1), box-shadow 260ms;
}
.oprichter-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 32px 64px rgba(0,0,0,.13);
}
.oprichter-photo { aspect-ratio: 16/10; position: relative; }
.oprichter-photo .ph { width: 100%; height: 100%; border-radius: 0; }
.oprichter-body { padding: 28px 28px 26px; }
.oprichter-role {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: #3F8A00;
  margin: 0 0 8px;
}
.oprichter-body h3 {
  font-family: 'Kardige', sans-serif;
  font-size: 36px;
  font-weight: 400;
  letter-spacing: -.018em;
  color: #0A0A0A;
  margin: 0 0 14px;
  line-height: 1.06;
}
.oprichter-body p {
  font-size: 15px;
  line-height: 1.68;
  color: #4a4a4a;
  margin: 0 0 20px;
  max-width: 48ch;
}
.oprichter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.oprichter-tag {
  background: #F3EEE2;
  color: #4a4a4a;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.06);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .page-hero.band { padding: 108px 0 72px; }
  .ph-grid { grid-template-columns: 1fr; gap: 40px; }
  .ph-photo { display: none; }
  .verhaal-grid { grid-template-columns: 1fr; gap: 36px; }
  .drijfveer-body { grid-template-columns: 1fr; gap: 18px; padding-left: 0; }
  .aanpak-grid { grid-template-columns: 1fr; }
  .oprichters-grid { grid-template-columns: 1fr; }
  .manifesto-quote { padding-left: 20px; }
}