/* ══════════════════════════════════════════════════════════
   Yippie — Gedeelde stijlen
   Ontwerp: "Het klaslokaal" — crèmepapier, schoolbordgroen,
   koraal, handgetekende accenten. Warm, tastbaar, menselijk.
   ══════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  /* papier */
  --paper:        #FBF6EC;
  --paper-2:      #F4ECDC;
  --paper-3:      #EBE0CB;
  --card:         #FFFDF8;
  --rule:         #E2D8C4;
  --blue-rule:    #CBD9EA;
  --pink-margin:  #F0A79E;

  /* inkt */
  --ink:          #1F1A16;
  --ink-2:        #4B423B;
  --ink-3:        #8B7F75;

  /* schoolbord */
  --board:        #24403A;
  --board-2:      #1A2F2A;
  --chalk:        #F3EEE3;
  --chalk-dim:    rgba(243,238,227,.62);
  --chalk-line:   rgba(243,238,227,.32);

  /* merk */
  --coral:        #E8736A;
  --coral-2:      #C9584F;
  --coral-3:      #A9443C;
  --coral-tint:   #FBE3DF;
  --coral-soft:   #F5BFB8;

  /* markeerstift & notitie */
  --marker:       #FFE270;
  --marker-2:     #F4CF3E;
  --note:         #FFF0A3;
  --note-2:       #F7DF7A;

  /* hout (krijtbak) */
  --wood:         #CFA97A;
  --wood-2:       #A87F55;

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Nunito Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-hand:    'Caveat', 'Bradley Hand', 'Segoe Print', cursive;

  --radius:       10px;
  --shadow-paper: 0 1px 0 rgba(31,26,22,.05), 0 14px 32px -18px rgba(31,26,22,.35);
  --shadow-lift:  0 2px 0 rgba(31,26,22,.05), 0 24px 44px -20px rgba(31,26,22,.45);
  --hard:         4px 4px 0 var(--ink);

  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --swash: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'><path d='M3 11c38-7 78-8 118-6 28 1 50 3 76 7' fill='none' stroke='%23E8736A' stroke-width='6' stroke-linecap='round'/></svg>");
  --swash-chalk: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'><path d='M3 11c38-7 78-8 118-6 28 1 50 3 76 7' fill='none' stroke='%23F3EEE3' stroke-width='5' stroke-linecap='round' opacity='.9'/></svg>");
  --stamp-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 3.2 -0.6'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F1A16' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  position: relative;
}
/* papierkorrel over de hele pagina */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: var(--noise);
  opacity: .075;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: multiply;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
strong { font-weight: 800; }
[id] { scroll-margin-top: 96px; }
::selection { background: var(--marker); color: var(--ink); }

/* ── Typografie ─────────────────────────────────────────── */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.018em;
  color: var(--ink);
  font-variation-settings: 'opsz' 144;
}
h1 em, h2 em, h3 em, .display em { font-style: italic; font-weight: 600; color: var(--coral-2); }

h2.sec-title {
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  margin-bottom: 20px;
}
p.sec-desc {
  font-size: 1.05rem; color: var(--ink-2); line-height: 1.75; max-width: 580px;
}
.lead { font-size: 1.15rem; line-height: 1.7; color: var(--ink-2); }
.small { font-size: .875rem; }
.muted { color: var(--ink-3); }

/* handgeschreven aantekening */
.hand {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1.1;
  color: var(--coral-2);
  letter-spacing: 0;
}
.hand.ink { color: var(--ink-2); }
.hand.chalk { color: var(--chalk); }

/* markeerstift */
.mark {
  background-image: linear-gradient(to top, var(--marker) 0 46%, transparent 46%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 .08em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.mark.coral { background-image: linear-gradient(to top, var(--coral-soft) 0 46%, transparent 46%); }
.fade-up .mark { background-size: 0% 100%; transition: background-size .8s cubic-bezier(.22,1,.36,1) .35s; }
.fade-up.visible .mark { background-size: 100% 100%; }

/* getekende onderstreping */
.swash {
  background-image: var(--swash);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% .28em;
  padding-bottom: .12em;
}
.board .swash, .swash.chalk { background-image: var(--swash-chalk); }

/* etiket / sticker (vervangt de oude .pill) */
.pill, .tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body);
  font-size: .72rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--paper);
  background: var(--coral);
  padding: 6px 12px 5px;
  border-radius: 3px;
  transform: rotate(-1.5deg);
  transform-origin: left center;
  box-shadow: 1px 2px 0 rgba(31,26,22,.18);
  white-space: nowrap;
}
.tag.ink    { background: var(--ink); color: var(--chalk); }
.tag.marker { background: var(--marker); color: var(--ink); }
.tag.paper  { background: var(--card); color: var(--ink); border: 1.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.tag.chalk  { background: transparent; color: var(--chalk); border: 1.5px dashed var(--chalk-dim); box-shadow: none; }
.tag.flat   { transform: none; }

/* rubberen stempel */
.stamp {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 900; font-size: .9rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--coral-2);
  border: 3px double var(--coral-2);
  border-radius: 6px;
  padding: 7px 12px 6px;
  transform: rotate(-8deg);
  line-height: 1;
  opacity: .92;
  -webkit-mask-image: var(--stamp-mask); mask-image: var(--stamp-mask);
  -webkit-mask-size: 120px; mask-size: 120px;
}
.stamp.big { font-size: 1.35rem; padding: 12px 18px 10px; border-width: 4px; }

/* ── Utility ────────────────────────────────────────────── */
.container { max-width: 1140px; margin: 0 auto; padding: 0 28px; }
.section { padding: 104px 0; position: relative; }
.section-tight { padding: 72px 0; position: relative; }

.bg-paper   { background: var(--paper); }
.bg-paper-2 { background: var(--paper-2); }
.bg-card    { background: var(--card); }

/* schriftlijntjes */
.ruled {
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, var(--blue-rule) 31px 32px);
  background-attachment: local;
}
.ruled-soft {
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(203,217,234,.55) 31px 32px);
}
/* ruitjespapier */
.grid-paper {
  background-color: var(--paper);
  background-image:
    linear-gradient(to right, rgba(203,217,234,.7) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(203,217,234,.7) 1px, transparent 1px);
  background-size: 28px 28px;
}
/* rode kantlijn zoals in een schrift */
.margin-line::before {
  content: '';
  position: absolute; top: 0; bottom: 0;
  left: clamp(20px, 6vw, 96px);
  width: 2px; background: var(--pink-margin); opacity: .75;
  pointer-events: none;
}

/* schoolbord */
.board {
  background-color: var(--board);
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.06), transparent 55%),
    radial-gradient(ellipse at 90% 100%, rgba(0,0,0,.25), transparent 55%);
  color: var(--chalk);
  position: relative;
}
.board::after {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--noise);
  opacity: .12;
  mix-blend-mode: screen;
  pointer-events: none;
}
.board > * { position: relative; z-index: 1; }
.board h1, .board h2, .board h3 { color: var(--chalk); }
.board h1 em, .board h2 em, .board h3 em { color: var(--coral-soft); }
.board p { color: var(--chalk-dim); }
/* krijtbak onderaan een bord */
.ledge {
  position: relative;
}
.ledge::before {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background: linear-gradient(to bottom, var(--wood), var(--wood-2));
  box-shadow: 0 -2px 0 rgba(0,0,0,.18), 0 3px 0 rgba(0,0,0,.25);
  z-index: 2;
}
.ledge-top::before {
  bottom: auto; top: 0;
  box-shadow: 0 2px 0 rgba(0,0,0,.18), 0 -3px 0 rgba(0,0,0,.25);
}

/* ── Papier-objecten ────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-paper);
  position: relative;
}
.card.ink-border { border-color: var(--ink); box-shadow: var(--hard); border-radius: 8px; }

/* systeemkaartje (index card) */
.index-card {
  background:
    linear-gradient(to bottom, transparent 0 46px, var(--pink-margin) 46px 48px, transparent 48px),
    repeating-linear-gradient(to bottom, transparent 0 31px, rgba(203,217,234,.85) 31px 32px);
  background-color: var(--card);
  border: 1.5px solid var(--rule);
  border-radius: 6px;
  box-shadow: var(--shadow-paper);
  position: relative;
}

/* plaknotitie */
.sticky {
  background: linear-gradient(160deg, var(--note) 0%, var(--note-2) 100%);
  color: var(--ink);
  padding: 26px 26px 28px;
  box-shadow: 0 1px 0 rgba(31,26,22,.06), 0 18px 28px -18px rgba(31,26,22,.5);
  position: relative;
  transform: rotate(-1.4deg);
}
.sticky.coral { background: linear-gradient(160deg, #F6948B 0%, var(--coral) 100%); color: var(--paper); }
.sticky.paper { background: var(--card); }
.sticky.right { transform: rotate(1.2deg); }
.sticky.flat  { transform: none; }
.sticky::after {           /* omgekruld hoekje */
  content: '';
  position: absolute; right: 0; bottom: 0;
  width: 0; height: 0;
  border-style: solid; border-width: 0 0 22px 22px;
  border-color: transparent transparent rgba(31,26,22,.10) transparent;
}
.sticky.coral::after { border-bottom-color: rgba(31,26,22,.18); }

/* plakband */
.tape::before {
  content: '';
  position: absolute; top: -13px; left: 50%;
  width: 104px; height: 28px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(255,244,196,.78);
  border-left: 1px dashed rgba(31,26,22,.12);
  border-right: 1px dashed rgba(31,26,22,.12);
  box-shadow: 0 1px 2px rgba(31,26,22,.10);
  z-index: 2;
}
.tape.tape-r::before { transform: translateX(-50%) rotate(4deg); }

/* punaise */
.pinned::before {
  content: '';
  position: absolute; top: -10px; left: 50%;
  width: 20px; height: 20px; border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle at 35% 32%, #FBB8B0, var(--coral) 52%, var(--coral-3) 100%);
  box-shadow: 0 3px 5px rgba(31,26,22,.32);
  z-index: 3;
}

/* subtiele kanteling */
.tilt-l { transform: rotate(-1.3deg); }
.tilt-r { transform: rotate(1.1deg); }

/* ── Knoppen ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px;
  border-radius: 8px;
  font-family: var(--font-body); font-weight: 800; font-size: .95rem;
  letter-spacing: .005em; line-height: 1.2;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  border: 2px solid var(--ink);
  color: var(--ink); background: var(--card);
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .15s cubic-bezier(.22,1,.36,1), box-shadow .15s cubic-bezier(.22,1,.36,1), background .15s, color .15s;
}
.btn:hover  { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--ink); }
.btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
.btn:focus-visible { outline: 3px solid var(--marker); outline-offset: 3px; }

.btn-coral { background: var(--coral); color: #fff; }
.btn-coral:hover { background: var(--coral-2); }
.btn-dark  { background: var(--ink); color: var(--chalk); }
.btn-dark:hover { background: #000; }
.btn-marker { background: var(--marker); color: var(--ink); }
.btn-outline, .btn-paper { background: var(--card); color: var(--ink); }
.btn-outline:hover, .btn-paper:hover { background: var(--marker); }
/* op het schoolbord */
.btn-ghost, .btn-ghost-white, .btn-chalk {
  background: transparent; color: var(--chalk);
  border-color: var(--chalk); box-shadow: 3px 3px 0 rgba(243,238,227,.35);
}
.btn-ghost:hover, .btn-ghost-white:hover, .btn-chalk:hover { box-shadow: 5px 5px 0 rgba(243,238,227,.35); background: rgba(243,238,227,.08); }
.btn-ghost:active, .btn-ghost-white:active, .btn-chalk:active { box-shadow: 1px 1px 0 rgba(243,238,227,.35); }
.btn-white { background: var(--card); color: var(--ink); }
.btn-white:hover { background: var(--marker); }

.btn-lg   { padding: 16px 30px; font-size: 1.02rem; }
.btn-sm   { padding: 9px 16px; font-size: .84rem; box-shadow: 2px 2px 0 var(--ink); }
.btn-sm:hover { box-shadow: 3px 3px 0 var(--ink); }
.btn-full { width: 100%; }

/* tekstlink met pijl */
.arrow-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 800; color: var(--coral-2); text-decoration: none;
  border-bottom: 2px solid var(--coral-soft);
  transition: border-color .15s, gap .15s;
}
.arrow-link:hover { border-color: var(--coral-2); gap: 12px; }

/* ── Scroll-reveal ──────────────────────────────────────── */
.fade-up { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.fade-up.visible { opacity: 1; transform: none; }
.fade-up.tilt-l.visible { transform: rotate(-1.3deg); }
.fade-up.tilt-r.visible { transform: rotate(1.1deg); }
.fade-up.sticky.visible { transform: rotate(-1.4deg); }
.fade-up.sticky.right.visible { transform: rotate(1.2deg); }
.fade-up.sticky.flat.visible { transform: none; }

@keyframes riseIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rise > * { animation: riseIn .8s cubic-bezier(.22,1,.36,1) both; }
.rise > *:nth-child(1) { animation-delay: .05s; }
.rise > *:nth-child(2) { animation-delay: .15s; }
.rise > *:nth-child(3) { animation-delay: .25s; }
.rise > *:nth-child(4) { animation-delay: .35s; }
.rise > *:nth-child(5) { animation-delay: .45s; }
.rise > *:nth-child(6) { animation-delay: .55s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-up { opacity: 1; transform: none; transition: none; }
  .rise > * { animation: none; }
  .fade-up .mark { background-size: 100% 100%; transition: none; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ══════════════════════════════════════════════════════════
   NAV
   ══════════════════════════════════════════════════════════ */
nav#navbar {
  position: fixed; top: 0; width: 100%; z-index: 200;
  background: rgba(251,246,236,.94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1.5px solid var(--rule);
  transition: box-shadow .25s, border-color .25s;
}
nav#navbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px;
  background: var(--rule); opacity: .6;
}
nav#navbar.scrolled { box-shadow: 0 10px 30px -18px rgba(31,26,22,.35); border-color: var(--pink-margin); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; }

.logo-wrap { display: inline-flex; align-items: center; text-decoration: none; }
.logo-img  { height: 46px; width: auto; display: block; }

.nav-links { display: flex; gap: 30px; list-style: none; }
.nav-links a {
  font-size: .93rem; font-weight: 700; color: var(--ink-2);
  text-decoration: none; position: relative; padding: 2px 4px;
  transition: color .18s;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: .5em;
  background: var(--marker); z-index: -1;
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s cubic-bezier(.22,1,.36,1);
}
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }

.nav-cta { display: flex; gap: 12px; align-items: center; }
.nav-cta .btn { padding: 10px 18px; font-size: .86rem; box-shadow: 2px 2px 0 var(--ink); }
.nav-cta .btn:hover { box-shadow: 3px 3px 0 var(--ink); }

.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.hamburger span { display: block; width: 24px; height: 2.5px; background: var(--ink); border-radius: 2px; }

.mobile-nav {
  display: none; position: fixed; inset: 0;
  background: var(--paper);
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, var(--blue-rule) 31px 32px);
  z-index: 199; flex-direction: column; align-items: center;
  justify-content: center; gap: 26px; padding: 40px 28px;
}
.mobile-nav.open { display: flex; }
.mobile-nav a:not(.btn) {
  font-family: var(--font-display); font-size: 1.9rem; font-weight: 600;
  color: var(--ink); text-decoration: none;
}
.mobile-nav a:not(.btn):hover { color: var(--coral-2); }
.mobile-nav-close { position: absolute; top: 20px; right: 24px; background: none; border: none; font-size: 1.9rem; cursor: pointer; color: var(--ink); }

/* ══════════════════════════════════════════════════════════
   PAGE HERO (interne pagina's)
   ══════════════════════════════════════════════════════════ */
.page-hero {
  padding: 156px 0 72px;
  position: relative; overflow: hidden;
  background-color: var(--paper);
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(203,217,234,.55) 31px 32px);
  border-bottom: 1.5px solid var(--rule);
}
.page-hero::before {
  content: '';
  position: absolute; top: 0; bottom: 0;
  left: clamp(20px, 6vw, 96px);
  width: 2px; background: var(--pink-margin); opacity: .7;
}
.page-hero .container { position: relative; }
.page-hero-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 48px; align-items: center; }
.page-hero .pill, .page-hero .tag { margin-bottom: 22px; }
.page-hero h1 {
  font-size: clamp(2.5rem, 5.6vw, 4.4rem);
  margin-bottom: 20px;
}
.page-hero p {
  font-size: 1.12rem; color: var(--ink-2); line-height: 1.7; max-width: 560px;
}
.page-hero-art { display: flex; justify-content: center; }
.page-hero-art svg { width: 100%; max-width: 360px; height: auto; }

/* ══════════════════════════════════════════════════════════
   FOOTER — schoolbord
   ══════════════════════════════════════════════════════════ */
footer {
  background-color: var(--board);
  background-image: radial-gradient(ellipse at 10% 0%, rgba(255,255,255,.05), transparent 50%);
  color: var(--chalk-dim);
  padding: 92px 0 36px;
  position: relative;
}
footer::before {                       /* krijtbak bovenaan */
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 14px;
  background: linear-gradient(to bottom, var(--wood), var(--wood-2));
  box-shadow: 0 3px 0 rgba(0,0,0,.28);
}
footer::after {
  content: ''; position: absolute; inset: 0;
  background-image: var(--noise); opacity: .1; mix-blend-mode: screen; pointer-events: none;
}
footer .container { position: relative; z-index: 1; }
.footer-top {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px; margin-bottom: 56px;
}
.footer-brand-logo {
  display: inline-block; text-decoration: none; margin-bottom: 20px;
  background: var(--card); padding: 8px 14px; border-radius: 4px;
  transform: rotate(-2deg);
  box-shadow: 0 6px 14px -6px rgba(0,0,0,.5);
  position: relative;
}
.footer-brand-logo::before {
  content: ''; position: absolute; top: -9px; left: 50%; width: 70px; height: 20px;
  transform: translateX(-50%) rotate(2deg);
  background: rgba(255,244,196,.7);
}
.footer-brand-logo img { height: 46px; width: auto; }
.footer-brand p { font-size: .92rem; line-height: 1.7; color: var(--chalk-dim); max-width: 300px; }
.footer-col h4 {
  font-family: var(--font-hand); font-weight: 600;
  font-size: 1.4rem; color: var(--chalk);
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col ul a {
  font-size: .92rem; color: var(--chalk-dim);
  text-decoration: none; transition: color .18s;
  border-bottom: 1px dashed transparent;
}
.footer-col ul a:hover { color: var(--chalk); border-bottom-color: var(--chalk-dim); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 26px; border-top: 1px dashed var(--chalk-line);
  font-size: .82rem; color: var(--chalk-dim);
}
.footer-bottom .hand { font-size: 1.3rem; color: var(--chalk); }
.footer-legal { display: flex; gap: 24px; }
.footer-legal a { color: var(--chalk-dim); text-decoration: none; }
.footer-legal a:hover { color: var(--chalk); }

/* ══════════════════════════════════════════════════════════
   FORMULIER — invulformulier op papier
   ══════════════════════════════════════════════════════════ */
.contact-form-box {
  background: var(--card);
  border: 1.5px solid var(--rule);
  border-radius: 6px;
  padding: 44px 44px 40px;
  box-shadow: var(--shadow-lift);
  position: relative;
}
.form-title {
  font-family: var(--font-hand); font-size: 1.7rem; font-weight: 600;
  color: var(--ink-2); margin-bottom: 22px;
  display: flex; align-items: center; gap: 12px;
}
.form-title::after { content: ''; flex: 1; height: 1.5px; background: var(--rule); }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fg { margin-bottom: 18px; }
.fg label {
  display: block; font-size: .74rem; font-weight: 800; color: var(--ink-3);
  margin-bottom: 4px; letter-spacing: .1em; text-transform: uppercase;
}
.fg input, .fg select, .fg textarea {
  width: 100%; padding: 10px 2px 9px;
  border: 0; border-bottom: 2px solid var(--ink);
  border-radius: 0;
  font-family: var(--font-body); font-size: 1.02rem; font-weight: 600; color: var(--ink);
  background: transparent; outline: none;
  transition: border-color .18s, background .18s, box-shadow .18s;
  appearance: none; -webkit-appearance: none;
}
.fg input::placeholder, .fg textarea::placeholder { color: var(--ink-3); font-weight: 500; }
.fg input:focus, .fg select:focus, .fg textarea:focus {
  border-bottom-color: var(--coral);
  background: linear-gradient(to top, rgba(255,226,112,.45) 0 40%, transparent 40%);
}
.fg select {
  background-image: var(--chevron);
  background-repeat: no-repeat; background-position: right 4px center; background-size: 18px;
  padding-right: 30px; cursor: pointer;
}
.fg textarea {
  resize: vertical; min-height: 128px; line-height: 32px;
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, var(--blue-rule) 31px 32px);
  padding-top: 6px;
}
.fg textarea:focus {
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, var(--blue-rule) 31px 32px);
}
.brochure-check {
  display: flex; align-items: center; gap: 12px;
  margin: 6px 0 26px; font-size: .95rem; color: var(--ink-2); cursor: pointer;
}
.brochure-check input[type="checkbox"] {
  accent-color: var(--coral); width: 20px; height: 20px; cursor: pointer;
  border: 2px solid var(--ink);
}
#formSuccess, #formSuccess2 { display: none; text-align: center; padding: 40px 0; }
#formSuccess h3 { font-size: 1.8rem; margin-bottom: 10px; }
#formSuccess p { color: var(--ink-2); }

/* ══════════════════════════════════════════════════════════
   VAKICOONTJES — handgetekende stijl
   ══════════════════════════════════════════════════════════ */
.ico {
  width: 52px; height: 52px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
}
.ico svg { width: 44px; height: 44px; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }
  .container { padding: 0 24px; }
  .section { padding: 84px 0; }
}
@media (max-width: 860px) {
  .nav-links, .nav-cta { display: none; }
  .hamburger { display: flex; }
  .page-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .page-hero-art svg { max-width: 260px; }
}
@media (max-width: 768px) {
  .form-row-2 { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; gap: 14px; text-align: center; }
  .contact-form-box { padding: 32px 22px; }
  .page-hero { padding: 128px 0 56px; }
  .section { padding: 72px 0; }
  .btn { white-space: normal; text-align: center; }
}
@media (max-width: 480px) {
  .footer-top { grid-template-columns: 1fr; }
  .page-hero { padding-bottom: 48px; }
  .sticky { padding: 20px 20px 22px; }
}