/* ==========================================================================
   VL Retail — landingspagina
   --------------------------------------------------------------------------
   Kleuren, typografie en motion komen uit het Retail Flow design system
   (web/src/design/tokens/). Enkel de tokens die deze pagina echt gebruikt
   staan hier overgenomen, zodat de site zonder buildstap te serveren is.

   Pepper is de hoofdkleur. Ze draagt de kop van de pagina als één vlak
   ("de gevel"), met daaronder een felle randstrip en de bedrijfsgegevens.
   Verder in de pagina komt pepper enkel terug als haarlijn en als link.
   ========================================================================== */

@font-face {
  font-family: 'Hanken Grotesk Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./fonts/hanken-grotesk-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

:root {
  /* Pepper is afgeleid uit de platformkleur #e14b34 = oklch(0.619 0.190 31.5).
     Alle stappen houden die tint aan; enkel lichtheid en chroma verschuiven.
     Wit op pepper-700 haalt 7.16:1, pepper-600 op wit 5.03:1 (beide WCAG AA). */
  --pepper-100: oklch(0.940 0.030 31.5);
  --pepper-200: oklch(0.888 0.056 31.5);
  --pepper-300: oklch(0.812 0.108 31.5);
  --pepper-400: oklch(0.712 0.160 31.5);
  --pepper-500: oklch(0.619 0.190 31.5);
  --pepper-600: oklch(0.560 0.190 31.5);
  --pepper-700: oklch(0.478 0.163 31.5);
  --pepper-800: oklch(0.405 0.133 31.5);
  --pepper-900: oklch(0.338 0.100 31.5);

  --stone-0: oklch(0.995 0.003 70);
  --stone-50: oklch(0.984 0.005 66);
  --stone-150: oklch(0.945 0.008 60);
  --stone-200: oklch(0.918 0.009 58);
  --stone-500: oklch(0.635 0.013 48);
  --stone-600: oklch(0.532 0.013 46);
  --stone-800: oklch(0.342 0.012 42);
  --stone-1000: oklch(0.145 0.010 36);

  /* Eén lettertype voor de hele site. Verschil tussen kop en tekst komt uit
     gewicht, grootte en letterafstand, niet uit een tweede familie. */
  --font: 'Hanken Grotesk Variable', system-ui, -apple-system, sans-serif;

  /* Motion volgt tokens/motion.css: snel, ease-out, niets veert of blijft hangen. */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  --measure: 62ch;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --page: 68rem;
  --label: 0.6875rem;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-y: scroll;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--stone-800);
  background: var(--stone-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font);
  color: var(--stone-1000);
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; max-width: var(--measure); }

a { color: var(--pepper-600); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.15em; }

:focus-visible {
  outline: 2px solid var(--pepper-500);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--pepper-200); color: var(--stone-1000); }

.wrap {
  max-width: var(--page);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* Gedeeld labeltype: eyebrow, dt en footerkoppen. */
.eyebrow,
.identity dt,
.footer-cols h2 {
  font-family: var(--font);
  font-weight: 600;
  font-size: var(--label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--stone-0);
  color: var(--pepper-700);
  padding: 0.75rem 1rem;
  font-weight: 600;
}

.skip:focus { left: 0; }

/* ---- Topbar ------------------------------------------------------------ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--pepper-700);
  color: var(--stone-0);
}

.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.25rem;
}

.wordmark {
  font-family: var(--font);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  color: var(--stone-0);
}

.wordmark:hover { text-decoration: none; }

/* Het merkaccent: een punt achter de naam, hier in een lichtere pepper. */
.wordmark::after {
  content: '.';
  color: var(--pepper-300);
}

.topnav {
  display: flex;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9375rem;
}

.topnav a {
  color: var(--pepper-200);
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}

.topnav a:hover {
  color: var(--stone-0);
  border-bottom-color: var(--pepper-300);
  text-decoration: none;
}

/* Op kleine schermen zakt de navigatie onder de naam en blijft de balk
   niet plakken: een balk van twee regels eet te veel van het scherm. */
@media (max-width: 46rem) {
  .topbar { position: static; }
  .topbar .wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding-block: 0.9rem;
    min-height: 0;
  }
  .topnav { gap: 1.15rem; font-size: 0.875rem; }
}

/* ---- Hero -------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  background: linear-gradient(175deg, var(--pepper-700) 0%, var(--pepper-800) 58%, var(--pepper-900) 100%);
  border-bottom: 3px solid var(--pepper-500);
  color: var(--pepper-100);
  overflow: hidden;
}

/* Zacht licht rechtsboven, zodat het rode vlak diepte krijgt zonder ruis. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60rem 34rem at 78% -12%, oklch(1 0 0 / 0.16), transparent 62%);
}

.hero-inner {
  padding-block: clamp(3rem, 8vw, 5.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.hero-figure { margin: 0; }

.hero-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid oklch(1 0 0 / 0.22);
  box-shadow: 0 1.5rem 3.5rem oklch(0.145 0.010 36 / 0.38);
}

/* Onder deze breedte staat de foto onder de tekst in plaats van ernaast. */
@media (max-width: 54rem) {
  .hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-figure { max-width: 26rem; }
}

.hero .eyebrow { color: var(--pepper-200); margin-bottom: 1.5rem; }

.hero h1 {
  font-size: clamp(2.5rem, 1.8rem + 3.6vw, 4.25rem);
  font-weight: 800;
  letter-spacing: -0.032em;
  color: var(--stone-0);
  margin-bottom: 1.5rem;
  max-width: 18ch;
}

.hero .lead {
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
  line-height: 1.55;
  color: var(--pepper-100);
  max-width: 54ch;
}

/* ---- Identiteitsstrip -------------------------------------------------- */
/* De kern van de pagina: wie deze vennootschap is, meteen onder de kop en
   zonder dat je moet scrollen of klikken. */

.identity {
  background: var(--stone-50);
  border-bottom: 1px solid var(--stone-200);
}

.identity .wrap { padding-block: 1.5rem; }

.identity-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
  gap: 1.25rem 2.5rem;
  margin: 0;
}

.identity dt { color: var(--stone-500); margin-bottom: 0.25rem; }

.identity dd {
  margin: 0;
  color: var(--stone-1000);
  font-weight: 500;
  font-size: 0.9375rem;
}

/* ---- Secties ----------------------------------------------------------- */

.section { padding-block: clamp(3rem, 7vw, 4.75rem); }

.section + .section { border-top: 1px solid var(--stone-150); }

.section h2 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.prose > * + * { margin-top: 1rem; }

/* Lopende tekst in een sectie loopt door tot de sectielijn. Zonder dit stopt
   een alinea op --measure en plakt de tekst links terwijl de lijn doorloopt. */
.prose p,
.section > p { max-width: none; }

/* Merkvlak links, tekst rechts. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: center;
  margin-top: 1.5rem;
}

.brandmark {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: 2rem;
  border-radius: 12px;
  background: var(--stone-50);
  border: 1px solid var(--stone-200);
}

.brandmark img {
  display: block;
  width: clamp(5rem, 11vw, 8.5rem);
  height: auto;
}

@media (max-width: 46rem) {
  .split { grid-template-columns: 1fr; }
  .brandmark { aspect-ratio: 16 / 7; }
}

/* Kaarten met een pepper-icoon: elk blok is een afgebakend geheel. */
/* Twee kolommen in plaats van auto-fit: met vier kaarten zou auto-fit op
   sommige breedtes drie tonen en de vierde alleen laten staan. Twee kolommen
   geven het icoon en de titel bovendien genoeg ruimte om naast elkaar te staan. */
.cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 2.25rem;
}

@media (max-width: 40rem) {
  .cols { grid-template-columns: 1fr; }
}

.col {
  background: var(--stone-50);
  border: 1px solid var(--stone-200);
  border-radius: 12px;
  padding: 1.5rem 1.5rem 1.625rem;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard);
}

.col:hover {
  border-color: var(--pepper-300);
  background: var(--stone-0);
}

/* Icoon en titel staan op één regel; de tekst begint eronder over de volle breedte. */
.col-head {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 0.875rem;
}

.col-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 10px;
  background: var(--pepper-500);
  color: var(--stone-0);
}

.col-icon svg {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
}

.col h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.col p {
  color: var(--stone-600);
  font-size: 0.9375rem;
  max-width: none;
}

/* ---- Contact ----------------------------------------------------------- */

.mailto {
  margin-top: 1.5rem;
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.mailto a { color: var(--pepper-600); }

/* ---- Voettekst --------------------------------------------------------- */

.footer {
  background: var(--stone-1000);
  color: var(--stone-200);
  border-top: 3px solid var(--pepper-500);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  font-size: 0.9375rem;
}

.footer a { color: var(--stone-50); }
.footer strong { color: var(--stone-0); font-weight: 600; }

.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 2rem;
}

.footer-cols h2 { color: var(--stone-500); margin-bottom: 0.75rem; }

.footer-cols p { margin: 0; line-height: 1.7; }

.footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid oklch(1 0 0 / 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  color: var(--stone-500);
  font-size: 0.875rem;
}

/* ---- Juridische pagina ------------------------------------------------- */

/* Smallere, gecentreerde leeskolom: een juridische tekst leest van boven naar
   onder, niet over de volle paginabreedte. */
.legal {
  max-width: 46rem;
  padding-block: clamp(2rem, 5vw, 3.25rem) clamp(3rem, 8vw, 5rem);
}

.back-top {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 2.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.back-top::before {
  content: '←';
  font-size: 1.15em;
  line-height: 1;
  transition: transform var(--dur-fast) var(--ease-standard);
}

.back-top:hover::before { transform: translateX(-0.15rem); }


.legal h1 {
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.legal .updated { color: var(--stone-500); font-size: 0.9375rem; }

.legal h2 {
  font-size: 1.1875rem;
  font-weight: 600;
  margin: 2.5rem 0 0.75rem;
}

.legal p, .legal li { color: var(--stone-800); }
.legal p + p { margin-top: 0.75rem; }

.legal ul { margin: 0.75rem 0 0; padding-left: 1.25rem; max-width: var(--measure); }
.legal li { margin-bottom: 0.35rem; }

.back {
  display: inline-block;
  margin-top: 3rem;
  font-size: 0.9375rem;
}

/* ---- Beweging ---------------------------------------------------------- */
/* Alles hieronder is versiering. Wie beweging uitzet in het systeem krijgt
   dezelfde pagina, maar stil: de regels staan volledig binnen de media query. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero .eyebrow,
  .hero h1,
  .hero .lead,
  .hero-figure,
  .identity-list > * {
    animation: rise var(--dur-slow) var(--ease-out) both;
  }

  .hero .eyebrow { animation-delay: 40ms; }
  .hero h1 { animation-delay: 100ms; }
  .hero .lead { animation-delay: 180ms; }
  .hero-figure { animation-delay: 220ms; }
  .identity-list > * { animation-delay: 300ms; }

  /* Secties komen op bij het scrollen. Dit gebruikt de scroll-timeline van de
     browser, dus zonder JavaScript. Browsers die het niet kennen slaan het
     @supports-blok over en tonen de secties gewoon meteen. */
  @supports (animation-timeline: view()) {
    .section h2,
    .section .prose,
    .col {
      animation: rise auto var(--ease-out) both;
      animation-timeline: view();
      animation-range: entry 5% cover 22%;
    }
  }
}