/* foxis.be — richting A "Oranje veld"
   Merk: oranje #E94E1B, Bariol, driehoek-vos. */

@font-face { font-family: "Bariol"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/bariol-light.woff2") format("woff2"); }
@font-face { font-family: "Bariol"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/bariol-regular.woff2") format("woff2"); }
@font-face { font-family: "Bariol"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/bariol-bold.woff2") format("woff2"); }

:root {
  --orange: #E94E1B;
  --orange-dark: #C63F13;
  --ink: #1F1D1B;
  --muted: #6B6560;
  --paper: #FFFFFF;
  --band: #FAF7F4;
  --band-hover: #F3EDE7;
  --tint: #FFF3EE;
  --line: #E6E1DB;
  --font: "Bariol", "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --pad: 64px;
  --wrap: 1200px;
  --fox-dock-scale: 0.5;   /* grootte van de vos als hij meeloopt aan de zijkant van het scherm */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 1.5; }
h1, h2, h3, p { margin: 0; }
a { color: var(--orange); }
a:hover { color: var(--orange-dark); }
svg { display: block; }
button { font-family: inherit; }

/* language */
.lang-nl .en, .lang-nl .fr { display: none !important; }
.lang-en .nl, .lang-en .fr { display: none !important; }
.lang-fr .nl, .lang-fr .en { display: none !important; }

.skip { position: absolute; left: -9999px; top: 12px; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; z-index: 100; }
.skip:focus { left: 12px; }

.wrap { max-width: var(--wrap); margin: 0 auto; }
.section { padding: 0 var(--pad); }
.eyebrow { font-size: 15px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); margin-bottom: 12px; }
.eyebrow--light { color: rgba(255,255,255,0.8); }
.h2 { font-size: 44px; font-weight: 700; line-height: 1.08; letter-spacing: -0.01em; text-wrap: balance; }
.h2--big { font-size: 52px; line-height: 1.05; }
.lede { font-size: 24px; line-height: 1.5; font-weight: 300; text-wrap: pretty; }

/* ---------- header / hero ---------- */
.hero { background: var(--orange); color: #fff; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px var(--pad); }
.nav__logo { display: block; }
.logo { width: 125px; height: 34px; fill: #fff; }
.nav__links { display: flex; align-items: center; gap: 20px; }
.nav__pages { display: contents; }
.nav__link { color: #fff; text-decoration: none; font-size: 17px; font-weight: 700; white-space: nowrap; }
.nav__link:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.lang-toggle { display: flex; align-items: center; border: 1.5px solid rgba(255,255,255,0.55); border-radius: 999px; padding: 3px; }
.tgl { border: 0; border-radius: 999px; padding: 6px 12px; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; background: transparent; color: #fff; opacity: 0.6; min-height: 32px; cursor: pointer; }
.lang-nl .tgl-nl, .lang-en .tgl-en, .lang-fr .tgl-fr { background: #fff; color: var(--orange); opacity: 1; }
.hero__body { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 36px; padding: 36px var(--pad) 104px; }
.hero__title { font-size: 88px; font-weight: 700; line-height: 0.98; letter-spacing: -0.02em; max-width: 900px; text-wrap: balance; }
.hero__sub { font-size: 24px; line-height: 1.4; font-weight: 300; max-width: 720px; color: rgba(255,255,255,0.92); text-wrap: pretty; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 32px; border-radius: 999px; border: 0; font-size: 20px; font-weight: 700; text-decoration: none; cursor: pointer; transition: background 160ms ease, color 160ms ease, border-color 160ms ease; }
.btn svg { stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.btn--ghost { min-height: 52px; padding: 0 24px; font-size: 18px; border: 1.5px solid rgba(255,255,255,0.7); color: #fff; background: transparent; }
.btn--ghost:hover { background: rgba(255,255,255,0.12); color: #fff; }
.btn--white { min-height: 60px; padding: 0 36px; font-size: 22px; background: #fff; color: var(--orange); }
.btn--white:hover { background: var(--tint); color: var(--orange); }
.btn--orange { background: var(--orange); color: #fff; }
.btn--orange:hover { background: var(--orange-dark); color: #fff; }
.btn--outline { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn--outline:hover { border-color: var(--ink); color: var(--ink); }
.btn:focus-visible, .tgl:focus-visible, .pick:focus-visible, .nav__link:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.hero .btn:focus-visible, .hero .tgl:focus-visible, .hero .nav__link:focus-visible, .contact .btn:focus-visible { outline-color: #fff; }

/* ---------- fox ---------- */
/* .fox-slot houdt de plaats in de hero vrij; .fox-dock is de wagen die de vos naar een hoek van het scherm brengt
   zodra je voorbij de hero scrolt (position: fixed + kleiner). De vos zelf (.fox) merkt daar niets van. */
.fox-slot { display: block; width: 300px; height: 252px; }
.fox-dock { display: block; width: 300px; height: 252px; }
.fox-dock.is-docked { position: fixed; top: calc(50% - 126px); z-index: 40; transform: scale(var(--fox-dock-scale)); }   /* halverwege het scherm; 126 = halve hoogte */
.fox-dock.dock-left { left: 20px; transform-origin: 0 50%; }
.fox-dock.dock-right { right: 20px; transform-origin: 100% 50%; }
.fox { perspective: 700px; width: 300px; height: 252px; cursor: pointer; user-select: none; -webkit-user-select: none; position: relative; touch-action: manipulation; transform: translate(var(--dx, 0px), var(--dy, 0px)); transition: transform 700ms cubic-bezier(.34, 1.56, .64, 1); }
.fox.is-dragging { transition: none; cursor: grabbing; }
.fox__zzz { position: absolute; left: 68%; top: 6%; width: 60px; height: 70px; pointer-events: none; opacity: 0; transition: opacity 600ms ease; }
.fox.is-sleeping .fox__zzz { opacity: 1; }
.fox__zzz svg { position: absolute; left: 0; bottom: 0; fill: #fff; opacity: 0; animation: fox-zzz 3.2s ease-in-out infinite; }
.fox__zzz svg:nth-child(1) { width: 12px; height: 12px; animation-delay: 0s; }
.fox__zzz svg:nth-child(2) { width: 17px; height: 17px; animation-delay: 1.05s; }
.fox__zzz svg:nth-child(3) { width: 22px; height: 22px; animation-delay: 2.1s; }
.fox.is-sleeping .fox__zzz svg { animation-play-state: running; }
@keyframes fox-zzz {
  0% { transform: translate(0, 0) rotate(-20deg); opacity: 0; }
  15% { opacity: 0.9; }
  100% { transform: translate(34px, -58px) rotate(25deg); opacity: 0; }
}
.hero { position: relative; overflow: hidden; }
.fox-fx { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 41; }   /* laag voor confetti en druppels, volgt het scherm */
.confetti { position: absolute; top: 0; pointer-events: none; will-change: transform; }
.confetti svg { display: block; }
.droplet { position: absolute; pointer-events: none; will-change: transform, opacity; }
.droplet svg { display: block; }
.fox__head { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; will-change: transform; }
.fox__layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: #fff; transition: fill 450ms ease; }
.fox__zzz svg { transition: fill 450ms ease; }
.fox-dock.is-away .fox__layer, .fox-dock.is-away .fox__zzz svg { fill: var(--orange); }   /* onder de hero is de pagina wit: oranje vos */
.fox-dock.is-away.on-orange .fox__layer, .fox-dock.is-away.on-orange .fox__zzz svg { fill: #fff; }   /* ...behalve boven de oranje contactband */
.fox__ears { transform: translateZ(-40px); }
.fox__face { transform: translateZ(30px); }

/* ---------- sections ---------- */
.who { padding-top: 112px; padding-bottom: 96px; }
.row { display: flex; gap: 64px; align-items: flex-start; }
.row__lead { flex: 0 0 360px; }
.row .lede { padding-top: 34px; }
.what { padding-top: 24px; padding-bottom: 112px; }
.section__head { display: flex; gap: 48px; align-items: flex-end; justify-content: space-between; margin-bottom: 36px; }
.section__head > div { max-width: 640px; }
.hint { font-size: 17px; line-height: 1.45; color: var(--muted); font-weight: 300; max-width: 360px; text-wrap: pretty; }
.grid { display: grid; gap: 16px; }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* cards (selectable) */
.card { background: var(--band); border-radius: 4px; padding: 28px 28px 32px; display: flex; flex-direction: column; gap: 12px; min-height: 236px; color: var(--ink); }
.card__top { display: flex; justify-content: space-between; align-items: center; }
.card__mark { width: 18px; height: 18px; fill: var(--orange); }
.card__num { font-size: 15px; font-weight: 700; color: var(--orange); letter-spacing: 0.08em; }
.card__title { font-size: 23px; font-weight: 700; line-height: 1.15; text-wrap: balance; }
.card__text { font-size: 16px; line-height: 1.5; color: var(--muted); font-weight: 300; text-wrap: pretty; }
.pick { cursor: pointer; user-select: none; -webkit-user-select: none; transition: box-shadow 160ms ease, background 160ms ease; }
.pick:hover { background: var(--band-hover); }
.pick.is-on { background: var(--tint); box-shadow: inset 0 0 0 2px var(--orange); }
.pick-box { width: 24px; height: 24px; border-radius: 50%; border: 2px solid currentColor; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 24px; opacity: 0.35; transition: opacity 160ms ease, background 160ms ease, border-color 160ms ease; }
.pick-box svg { width: 12px; height: 12px; opacity: 0; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; transition: opacity 120ms ease; }
.pick:hover .pick-box { opacity: 0.7; }
.pick.is-on .pick-box { background: var(--orange); border-color: var(--orange); color: #fff; opacity: 1; }
.pick.is-on .pick-box svg { opacity: 1; }

.how { background: var(--band); padding-top: 96px; padding-bottom: 96px; }
.grid--ways .card { background: #fff; padding: 32px; min-height: 0; gap: 14px; }
.grid--ways .card__title { font-size: 28px; line-height: 1.1; }
.grid--ways .card__text { font-size: 17px; }
.grid--ways .pick:hover { background: #fff; }
.grid--ways .pick.is-on { background: #fff; }

.contact { background: var(--orange); color: #fff; padding-top: 104px; padding-bottom: 104px; }
.contact__inner { max-width: 900px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.contact__p { font-size: 22px; font-weight: 300; line-height: 1.4; color: rgba(255,255,255,0.92); }
.contact__cta { display: flex; align-items: center; gap: 20px; margin-top: 12px; flex-wrap: wrap; justify-content: center; }
.sel-count { font-size: 16px; font-weight: 700; letter-spacing: 0.02em; }
.sel-count:empty { display: none; }
.contact .sel-count { color: rgba(255,255,255,0.9); }

.footer { padding: 28px var(--pad); font-size: 14px; color: var(--muted); }
.footer__inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.footer a { color: var(--muted); text-decoration: none; }
.footer a:hover { color: var(--orange); }

/* ---------- interest modal ---------- */
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(23,21,15,0.55); display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 24px; }
.modal[hidden] { display: none; }
.modal__panel { background: #fff; color: var(--ink); width: min(820px, 100%); border-radius: 8px; box-shadow: 0 24px 80px rgba(0,0,0,0.35); padding: 40px 44px 36px; margin: auto; }
.modal__form { display: flex; flex-direction: column; gap: 24px; }
.modal__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.modal__title { font-size: 34px; font-weight: 700; line-height: 1.08; letter-spacing: -0.015em; }
.modal__intro { font-size: 17px; line-height: 1.45; font-weight: 300; color: var(--muted); margin-top: 8px; }
.modal__close { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.modal__close svg { stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; }
.modal__close:hover { border-color: var(--ink); }
.modal__label { font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--orange); margin-bottom: -14px; }
.modal__label--rule { border-top: 1px solid var(--line); padding-top: 20px; }
.mgrid { display: grid; gap: 4px 40px; }
.mgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }
.mgrid--fields { gap: 16px 24px; border-top: 1px solid var(--line); padding-top: 24px; }
.mrow { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; cursor: pointer; font-size: 17px; line-height: 1.35; }
.mrow input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--orange); flex: 0 0 18px; cursor: pointer; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea { font-family: inherit; font-size: 17px; padding: 12px 14px; border-radius: 4px; border: 1.5px solid var(--ink); background: transparent; color: inherit; min-height: 48px; width: 100%; }
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--orange); outline-offset: 1px; border-color: var(--orange); }
.field input.is-invalid { border-color: var(--orange-dark); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.modal__error { font-size: 15px; font-weight: 700; color: var(--orange-dark); }
.modal__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.modal__actions .btn { min-height: 52px; padding: 0 28px; font-size: 18px; }
.modal__actions .sel-count { margin-left: auto; color: var(--muted); font-size: 15px; }
.modal__thanks { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 12px 0; }
.modal__thanks[hidden] { display: none; }
.modal__thanks .btn { margin-top: 12px; min-height: 52px; padding: 0 28px; font-size: 18px; }
.btn.is-busy { opacity: 0.6; pointer-events: none; }
body.modal-open { overflow: hidden; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .hero__title { font-size: 72px; }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  :root { --pad: 24px; }
  .nav { padding-top: 20px; padding-bottom: 8px; flex-wrap: wrap; }
  /* de drie links links, de taalkeuze rechts, op één lijn; op heel smalle schermen zakt de taalkeuze eronder */
  .nav__links { gap: 8px 10px; flex-wrap: wrap; justify-content: space-between; width: 100%; }
  .nav__pages { display: flex; align-items: center; gap: 10px; order: -1; }
  .nav__link { font-size: 15px; }
  .tgl { padding: 5px 9px; font-size: 13px; min-height: 30px; }
  .logo { width: 110px; height: 30px; }
  .hero__body { padding-top: 24px; padding-bottom: 64px; gap: 28px; }
  .fox-slot { margin: -32px 0 -36px; }
  .fox { transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(0.72); transform-origin: center; }
  /* op mobiel loopt de vos niet mee (site.js kijkt naar dezelfde breekpunt) */
  .hero__title { font-size: 48px; line-height: 1.02; }
  .hero__sub { font-size: 19px; }
  .h2 { font-size: 32px; }
  .h2--big { font-size: 36px; }
  .lede { font-size: 20px; }
  .who { padding-top: 64px; padding-bottom: 56px; }
  .row { flex-direction: column; gap: 20px; }
  .row__lead { flex: 0 0 auto; }
  .row .lede { padding-top: 0; }
  .section__head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .grid--3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .card { min-height: 0; padding: 22px 22px 24px; }
  .what { padding-bottom: 64px; }
  .how { padding-top: 64px; padding-bottom: 64px; }
  .contact { padding-top: 64px; padding-bottom: 64px; }
  .footer__inner { flex-direction: column; align-items: flex-start; gap: 8px; }
  .modal { padding: 12px; }
  .modal__panel { padding: 28px 22px 24px; }
  .modal__title { font-size: 28px; }
  .mgrid--2, .mgrid--3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .modal__actions .sel-count { margin-left: 0; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pick, .btn, .pick-box, .fox { transition: none; }
  .fox__zzz svg { animation: none; opacity: 0.8; }
}