:root {
  /* palet: zie Development/Design/Color pallete.svg */
  --rood: #9A2E2E;        /* Brick Ember */
  --rood-donker: #7A2424;
  --amber: #FFA213;       /* Amber Glow */
  --creme: #FFEFD6;       /* Papaya Whip */
  --groen: #19433F;       /* Dark Slate Grey */
  --teal: #338079;        /* stip in het beeldmerk */
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; }

/* Ontwerp is gemaakt op 1440x900; de stage schaalt mee met het venster
   en rekt in de breedte/hoogte op, zodat randelementen aan de schermrand blijven. */
.stage {
  position: absolute; top: 0; left: 0;
  width: calc(100vw / var(--s, 1)); height: calc(100vh / var(--s, 1));
  transform: scale(var(--s, 1)); transform-origin: 0 0;
}
body {
  font-family: 'Inter', 'Ubuntu Sans', sans-serif;
  color: var(--creme);
  /* Crème onder de horizon zit hier en niet in de geschaalde .stage: anders wordt de korrel herschaald
     en ontstaat er een moirépatroon. De horizon ligt in de stage op 50% - 10px, op het scherm dus op 50vh - 10px * --s. */
  background:
    /* crème: lichter vlak onder de horizon in het midden, naar de randen iets warmer/donkerder */
    radial-gradient(ellipse 80% 120% at 50% 0%, #FFF6E8 0%, var(--creme) 45%, #EDD2A9 100%)
      0 calc(50vh - 10px * var(--s, 1)) / 100% calc(50vh + 10px * var(--s, 1)) no-repeat,
    radial-gradient(ellipse 55% 45% at 50% 30%, #B23C3A 0%, rgba(178,60,58,0) 70%),
    radial-gradient(ellipse at 50% 25%, #A53332 0%, var(--rood) 45%, #681D1D 100%);
  overflow: hidden;
  position: relative;
}
/* ---------- Korrel, als oud drukwerk ----------
   Fijne SVG-ruis (feTurbulence), alleen op de achtergrond, niet over tekst. Elke laag pakt alleen de toppen
   van de ruis (alpha = a*R + b) en zwakt die af met slope, zodat er losse spikkels overblijven. */
:root {
  --korrel:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='f' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='2' numOctaves='2' seed='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  6 0 0 0 -3.2'/><feComponentTransfer><feFuncA type='linear' slope='0.1'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='f' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='1.8' numOctaves='2' seed='9' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  6 0 0 0 -3.4'/><feComponentTransfer><feFuncA type='linear' slope='0.07'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
}
body::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--korrel);
}

/* Horizon: dun amber lijntje op de grens rood/crème (het crème zelf zit op body). De lijn ligt op het midden
   van de ronde knoppen (360px + 80px bij 900px hoog), zodat de "zon" op de horizon staat. */
.stage::before {
  content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 11px); height: 1px;
  background: rgba(255,162,19,.35);
}

/* ---------- Tag met logo ---------- */
.tag {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 300px; padding: 22px 22px 26px;
  background: var(--rood);   /* effen: het logo-SVG heeft zelf een effen rood vlak */
  border-radius: 0 0 22px 22px;
  box-shadow: 0 18px 40px rgba(48, 12, 12, .45), 0 2px 0 rgba(255,255,255,.06) inset;
  z-index: 10;
}
/* inkeping in het label: een donkere groef met een lichte rand eronder/rechts, alsof het licht van linksboven komt */
.tag::after {
  content: ""; position: absolute; inset: -2px 9px 9px;
  border: 1.5px solid rgba(60, 12, 12, .5);
  border-top: none;
  box-shadow: 1px 1px 0 rgba(255, 225, 205, .14), inset 1px 1px 0 rgba(255, 225, 205, .14);
  border-radius: 0 0 15px 15px;
  pointer-events: none;
}
.tag .logo { display: block; overflow: hidden; }
/* rand iets wegsnijden: onder het rode vlak in de SVG ligt een wit vlak dat bij schalen doorschemert */
.tag img { display: block; width: calc(100% + 4px); margin: -2px; }

/* tijdens het laden geen overgangen, anders fade de actieve menuknop bij een directe link naar #contact */
.laden * { transition: none !important; }

/* ---------- Navigatie ---------- */
nav {
  position: absolute; top: 44px; left: 160px; right: 160px;   /* gelijk met de inhoud tussen de ronde knoppen */
  display: flex; justify-content: space-between; align-items: center;
  font-size: 16px; font-weight: 500;
}
nav .links, nav .rechts { display: flex; gap: 40px; align-items: center; }
nav a { color: var(--creme); text-decoration: none; opacity: .92; }
nav a.actief { position: relative; opacity: 1; }
nav a.actief:not(.knop-rand)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px;
  height: 2px; background: var(--creme); border-radius: 2px;
}
.knop-rand {
  border: 1.5px solid rgba(255,239,214,.75); border-radius: 999px;
  padding: 11px 22px; display: inline-flex; gap: 10px; align-items: center;
  transition: background .3s, color .3s;
}
.knop-rand.actief { background: var(--creme); color: var(--rood); }

/* ---------- Inhoud: de pagina's schuiven tussen menu/logo en onderrand ---------- */
.inhoud {
  position: absolute; left: 0; right: 0; top: 170px; bottom: 100px; overflow: hidden;
  touch-action: pan-y;   /* horizontaal vegen handelt js/main.js af */
}
/* rechts ruimte vrijhouden voor de ronde knop. Twee rijen: .boven eindigt op de horizon, .onder begint erop.
   De horizon ligt in .inhoud op 50% - 45px (zie .stage::before; .inhoud begint op 170px en eindigt 100px boven de rand). */
.pagina {
  position: absolute; inset: 0; padding: 0 160px;
  display: grid; grid-template-rows: calc(50% - 45px) 1fr;
  visibility: hidden;
}
.boven { align-self: end; padding-bottom: 34px; }
.onder { align-self: start; padding-top: 40px; color: var(--groen); }
.onder > :first-child { margin-top: 0; }
/* home heeft rechts de grote knop en links geen knop */
.pagina[data-pagina="soeva"] { padding: 0 300px 0 160px; }
/* op contact is de knop links 2x zo groot, dus meer ruimte links */
.pagina[data-pagina="contact"] { padding-left: 230px; }
.pagina.actief, .pagina.weg { visibility: visible; }

/* ---------- Hero ---------- */
h1 {
  font-family: 'Inter Display', 'Inter', sans-serif;
  font-weight: 800; font-size: 64px; line-height: 1.04; letter-spacing: -.025em;
  color: #FFF7EA;
}
h1 span { color: var(--amber); }
.intro {
  margin-top: 26px; font-size: 18px; line-height: 1.6;
  color: rgba(255,239,214,.88);
}
.acties { margin-top: 38px; display: flex; gap: 34px; align-items: center; }
.knop {
  background: var(--creme); color: var(--rood); text-decoration: none;
  font-weight: 700; font-size: 17px;
  padding: 18px 30px; border-radius: 999px;
  display: inline-flex; gap: 12px; align-items: center;
  box-shadow: 0 10px 24px rgba(56,14,14,.35);
}

/* ---------- Overige pagina's ---------- */
.kicker {
  font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 18px;
}
h2 {
  font-family: 'Inter Display', 'Inter', sans-serif;
  font-weight: 800; font-size: 46px; line-height: 1.08; letter-spacing: -.02em;
  color: #FFF7EA; max-width: 900px;
}
h2 span { color: var(--amber); }
.pagina .intro { max-width: 720px; }
.pagina[data-pagina="soeva"] .intro { max-width: 900px; }
h3 { font-size: 19px; font-weight: 700; color: #FFF7EA; }
.noot { margin-top: 30px; font-size: 17px; font-style: italic; color: rgba(255,239,214,.88); }

/* tekst en knoppen op het crème deel */
.onder h3 { color: var(--groen); }
.onder .intro, .onder .noot { color: rgba(25,67,63,.85); }
.onder .knop { background: var(--rood); color: var(--creme); box-shadow: 0 10px 24px rgba(122,36,36,.22); }

/* kaarten: lichte vlakken op het crème deel */
.kaarten { margin-top: 44px; display: grid; gap: 22px; width: 100%; }
.kaarten.vier { grid-template-columns: repeat(4, 1fr); }
.kaarten.twee { grid-template-columns: repeat(2, 1fr); }
.kaart {
  padding: 26px 24px; border-radius: 18px;
  background: #FFF8EC;
  border: 1px solid rgba(25,67,63,.12);
  box-shadow: 0 8px 22px rgba(25,67,63,.06);
}
.kaart p { margin-top: 10px; font-size: 15.5px; line-height: 1.55; color: rgba(25,67,63,.8); }
.label {
  margin-left: 10px; padding: 3px 10px; border-radius: 999px; vertical-align: 3px;
  font-size: 12px; font-style: normal; font-weight: 700; letter-spacing: .04em;
  background: var(--amber); color: var(--rood-donker);
}

/* team: per persoon een kolom met een rond portret (kop los op rood, zie README) */
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; width: 100%; }
.persoon img {
  display: block; width: 132px; height: 132px; margin-bottom: 18px;
  filter: drop-shadow(0 8px 16px rgba(122,36,36,.25));
}
.persoon .rol {
  margin-top: 4px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--rood);
}
.persoon p:not(.rol) { margin-top: 10px; font-size: 15.5px; line-height: 1.55; color: rgba(25,67,63,.8); max-width: 330px; }

/* zes stappen op een lijn, verbonden met een stippellijn */
.stappen {
  margin-top: 48px; width: 100%; list-style: none; counter-reset: stap;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px;
}
.stappen li { position: relative; counter-increment: stap; }
.stappen li:not(:last-child)::after {   /* lijntje naar de volgende stap */
  content: ""; position: absolute; left: 52px; right: -10px; top: 22px;
  border-top: 1.5px dashed rgba(25,67,63,.3);
}
.stappen li::before {
  content: counter(stap); display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%; margin-bottom: 18px;
  background: var(--rood); color: var(--creme); font-weight: 800; font-size: 17px;
  box-shadow: 0 6px 14px rgba(122,36,36,.22);
}
.stappen h3 { font-size: 17px; }
.stappen p { margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: rgba(25,67,63,.8); }

/* ---------- Ronde knoppen (beeldmerk-stip, 1/3 van het oorspronkelijke formaat) ---------- */
/* Op home groot rechts. Op de andere pagina's 3x kleiner, met de buitenrand op 80px (gelijk met het menu),
   en links dezelfde knop terug. Op de laatste pagina verdwijnt de knop rechts. */
.beeld {
  position: absolute; top: calc(360px + (100% - 900px) / 2);   /* midden op de horizon */
  width: 160px; height: 160px; display: block;
  transition: opacity .5s, transform .65s cubic-bezier(.65, 0, .35, 1);
}
.beeld.verder { right: 80px; transform-origin: right center; }
.beeld.terug  { left: 80px;  transform-origin: left center; }
.beeld.klein, .beeld.terug { transform: scale(calc(1 / 3)); }
.beeld.terug.groot { transform: scale(calc(2 / 3)); }   /* op de laatste pagina */
.beeld.verborgen { opacity: 0; transform: scale(.25); pointer-events: none; }
.beeld.terug .kern svg { transform: scaleX(-1); }
/* in de kleine knop zou het pijltje 8px worden; relatief groter maken zodat het leesbaar blijft */
.kern svg { transition: width .65s, height .65s; }
.beeld.klein .kern svg, .beeld.terug .kern svg { width: 42px; height: 42px; }
.zon {
  position: absolute; left: 20px; top: 20px; width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF8EA 0%, var(--creme) 55%, #F1D9B6 100%);
  box-shadow: 0 13px 27px rgba(48,12,12,.45), inset -5px -6px 13px rgba(170,110,60,.18);
}
.zon .ring {
  position: absolute; inset: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #23574F 0%, var(--groen) 60%, #0F2E2B 100%);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.35);
}
.zon .kern {
  position: absolute; inset: 31px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #4A9A92 0%, var(--teal) 45%, #215A55 100%);
  box-shadow: 0 3px 8px rgba(0,0,0,.35);
  display: grid; place-items: center;
}
.zon .glans {
  position: absolute; left: 39px; top: 37px; width: 15px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,.35); filter: blur(2px); transform: rotate(-30deg);
}

/* ---------- Onderrand ---------- */
/* staat op het crème deel, dus groen */
.social { position: absolute; left: 80px; bottom: 50px; display: flex; gap: 26px; align-items: center; opacity: .9; }
.social svg { stroke: var(--groen); }
.social svg [fill] { fill: var(--groen); }
.slogan { position: absolute; right: 80px; bottom: 50px; font-size: 14px; opacity: .75; letter-spacing: .02em; color: var(--groen); }
.pod {
  position: absolute; right: 80px; bottom: 28px; z-index: 3;
  font-size: 10px; letter-spacing: .04em; color: var(--groen);
  opacity: .32; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  pointer-events: none; user-select: none;
}

/* ==========================================================================
   Mobiel en staande tablet: niet meer schalen maar een eigen opmaak.
   Logo bovenaan, menu als scrollbare rij eronder, pagina's scrollen zelf verticaal,
   de ronde knoppen staan onderin naast de iconen. Vegen of tikken wisselt van pagina.
   Geen vaste horizon: per pagina is .boven rood en vult .onder de rest in crème.
   ========================================================================== */
@media (max-width: 899px), (orientation: portrait) and (max-width: 1099px) {
  .stage { width: 100%; height: 100%; height: 100dvh; transform: none; }
  .stage::before { display: none; }
  body {   /* geen vaste horizon: zonder het crème vlak */
    background:
      radial-gradient(ellipse 55% 45% at 50% 30%, #B23C3A 0%, rgba(178,60,58,0) 70%),
      radial-gradient(ellipse at 50% 25%, #A53332 0%, var(--rood) 45%, #681D1D 100%);
  }

  .tag { width: 190px; padding: 14px 14px 17px; border-radius: 0 0 16px 16px; }
  .tag::after { inset: -2px 7px 7px; border-radius: 0 0 11px 11px; }

  nav {
    top: 116px; left: 0; right: 0; padding: 4px 20px 10px;
    justify-content: flex-start; gap: 24px; font-size: 15px;
    overflow-x: auto; scrollbar-width: none;
  }
  nav::-webkit-scrollbar { display: none; }
  nav .links, nav .rechts { display: contents; }
  nav a { white-space: nowrap; flex: none; }
  /* gecentreerd als het menu past; auto-marges vallen weg zodra de rij moet scrollen */
  nav .links a:first-child { margin-left: auto; }
  nav .rechts a:last-child { margin-right: auto; }
  .knop-rand { padding: 7px 15px; gap: 8px; }

  .inhoud { top: 168px; bottom: 0; }   /* tot de onderrand: de inhoud scrolt onder knoppen en iconen door */
  .pagina,
  .pagina[data-pagina="soeva"],
  .pagina[data-pagina="contact"] {
    padding: 0; display: flex; flex-direction: column;
    overflow-y: auto; overscroll-behavior: contain;
    touch-action: pan-y;   /* een pagina is hier zelf een scrollcontainer; anders telt die van .inhoud niet */
  }
  .boven { align-self: stretch; padding: 16px 22px 26px; }
  /* het crème deel loopt door tot onderaan; onderin ruimte zodat de laatste regel boven de knoppen komt */
  .onder { align-self: stretch; flex: 1 0 auto; padding: 26px 22px 140px; background: var(--korrel), linear-gradient(#FFF6E8, var(--creme) 40%, #F1D8B2); }

  h1 { font-size: 40px; line-height: 1.05; }
  h2 { font-size: 30px; line-height: 1.12; }
  .kicker { font-size: 12.5px; margin-bottom: 12px; }
  .intro { margin-top: 18px; font-size: 16px; }
  .acties { margin-top: 26px; }
  .knop { font-size: 16px; padding: 15px 24px; }
  .noot { margin-top: 22px; font-size: 15.5px; }

  .kaarten { margin-top: 26px; gap: 12px; }
  .kaarten.vier, .kaarten.twee { grid-template-columns: 1fr; }
  .kaart { padding: 18px 18px; }
  .kaart p { font-size: 15px; }

  /* team onder elkaar: portret links, tekst rechts */
  .team { grid-template-columns: 1fr; gap: 22px; }
  .persoon { display: grid; grid-template-columns: 84px 1fr; column-gap: 16px; }
  .persoon img { grid-row: span 3; width: 84px; height: 84px; margin: 0; }
  .persoon p:not(.rol) { margin-top: 6px; font-size: 15px; }

  /* stappen onder elkaar: nummer links, lijntje verticaal naar de volgende */
  .stappen { margin-top: 26px; grid-template-columns: 1fr; gap: 16px; }
  .stappen li { display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; }
  .stappen li::before { grid-row: span 2; width: 40px; height: 40px; margin: 0; font-size: 16px; }
  .stappen li:not(:last-child)::after {
    left: 20px; right: auto; top: 46px; bottom: -14px;
    border-top: none; border-left: 1.5px dashed rgba(25,67,63,.3);
  }
  .stappen h3 { align-self: end; }
  .stappen p { margin-top: 2px; }

  /* onderrand: terug-knop, iconen, verder-knop */
  .social { left: 50%; transform: translateX(-50%); bottom: 20px; gap: 22px; }
  .slogan { display: none; }
  .pod { right: 16px; bottom: 8px; max-width: 50vw; opacity: .28; }
  .beeld { top: auto; bottom: -24px; }
  .beeld.verder { right: 12px; }
  .beeld.terug { left: 12px; }
  .beeld.klein, .beeld.terug, .beeld.terug.groot { transform: scale(.4); }
  .beeld.verder:not(.klein) { transform: scale(.48); }
  .beeld.verborgen, .beeld.terug.verborgen { transform: scale(.3); }
  .beeld.klein .kern svg, .beeld.terug .kern svg { width: 36px; height: 36px; }
}

/* liggende telefoon: weinig hoogte, dus alles bovenin compacter */
@media (max-width: 899px) and (max-height: 500px) {
  .tag { width: 130px; padding: 9px 10px 11px; }
  nav { top: 70px; }
  .inhoud { top: 112px; bottom: 0; }
  .onder { padding-bottom: 100px; }
  .social { bottom: 12px; }
  .beeld { bottom: -42px; }
}