/* =========================================================================
   Pin! — website
   Volgt het merkenpakket (augustus 2026).

   - Kers is uitsluitend voor de Pin-handeling en de eigen marker. Gewone
     knoppen zijn zwart, secundaire hebben een dunne rand.
   - Categorieën zijn woorden in kleinletters, nooit icoontjes.
   - Feiten in DM Mono, kapitalen, 0.1em spatiëring.
   - In donkere modus wisselen zwart en room van rol; kers verandert nooit.

   Twee visuals zijn in vaste verhoudingen getekend: de kaart in de hero en de
   telefoonschermen. Beide zijn container queries — hun binnenwerk staat in
   `cqw`, zodat alles meeschaalt met de breedte van de visual zelf en niet met
   het scherm. Daardoor klopt de tekening op 320px net zo goed als op 1440px.
   ========================================================================= */

/* --- Tokens ------------------------------------------------------------ */

:root {
  /* Merkkleuren — vast in beide modi. */
  --kers: #e8305a;
  --zwart: #121212;
  --room: #fff8ee;
  --kobalt: #2c6fd1;
  --limoen: #b8d93c;

  /* Rollen — light. */
  --bg: var(--room);
  --surface: #ffffff;
  --surface-alt: #f3eee4;
  --text: var(--zwart);
  --text-muted: rgba(18, 18, 18, 0.72);
  --text-faint: rgba(18, 18, 18, 0.5);
  --border: rgba(18, 18, 18, 0.1);
  --border-strong: rgba(18, 18, 18, 0.22);
  --primary: var(--zwart);
  --on-primary: var(--room);

  /* Snijrand van elke sticker: room, nooit puur wit. Wisselt niet mee. */
  --snijrand: #fff8ee;

  /* Placeholder voor foto's. Staat altijd op een room kaartje en blijft
     daarom licht, ook in donkere modus. */
  --foto: repeating-linear-gradient(45deg, #e7ddce 0 8px, #f2eadd 8px 16px);

  /* Omgekeerde secties: zwarte vlakken binnen een lichte pagina. */
  --invert-bg: var(--zwart);
  --invert-text: var(--room);
  --invert-muted: rgba(255, 248, 238, 0.75);
  --invert-faint: rgba(255, 248, 238, 0.5);

  /* Typografie. */
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Fluid schaal: 320px → 1440px. */
  --step-display: clamp(2.375rem, 1.05rem + 5.9vw, 4.875rem);
  --step-h2: clamp(1.75rem, 1.05rem + 3.5vw, 3.25rem);
  --step-h3: clamp(1.3125rem, 1.2rem + 0.6vw, 1.5rem);
  --step-lead: clamp(1.0625rem, 0.99rem + 0.35vw, 1.3125rem);
  --step-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);

  /* Ritme. */
  --gutter: clamp(1.25rem, 0.5rem + 3.2vw, 4.5rem);
  --section-y: clamp(3.5rem, 2rem + 6vw, 6rem);
  --maxw: 1440px;

  --radius-card: 20px;
  --radius-sm: 16px;
  --sticker-shadow: 0 8px 20px -10px rgba(18, 18, 18, 0.55);
  --lift: 0 18px 36px -22px rgba(18, 18, 18, 0.55);

  /* Ruimte onder de sticky header bij het springen naar een anker. */
  --header-h: 5.5rem;
}

/* Donkere modus: zwart en room wisselen van rol. Kers blijft kers. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--zwart);
    --surface: #1b1b1b;
    --surface-alt: #242424;
    --text: var(--room);
    --text-muted: rgba(255, 248, 238, 0.72);
    --text-faint: rgba(255, 248, 238, 0.52);
    --border: rgba(255, 248, 238, 0.12);
    --border-strong: rgba(255, 248, 238, 0.26);
    --primary: var(--room);
    --on-primary: var(--zwart);

    --invert-bg: #000000;
  }
}

/* --- Reset en basis ---------------------------------------------------- */

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

/* De browser zet marges en inspringing op deze elementen; die zouden hier
   alleen maar in de weg zitten. */
body,
h1,
h2,
h3,
p,
figure,
blockquote,
ul,
ol,
dl {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Geen grijze flits bij het aantikken; de :active-staten doen dat netter. */
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3 {
  font-weight: 800;
  text-wrap: balance;
}

h1 {
  font-size: var(--step-display);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

h2 {
  font-size: var(--step-h2);
  line-height: 1.04;
  letter-spacing: -0.04em;
}

h3 {
  font-size: var(--step-h3);
  line-height: 1.2;
  letter-spacing: -0.03em;
}

p {
  text-wrap: pretty;
}

img,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--kers);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 100;
  background: var(--primary);
  color: var(--on-primary);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 14px 14px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s ease;
}

.skip-link:focus-visible {
  transform: translate(-50%, 0);
}

/* --- Layout ------------------------------------------------------------ */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  /* De inkeping van een iPhone in liggende stand mag niets afsnijden. */
  padding-left: calc(var(--gutter) + env(safe-area-inset-left));
  padding-right: calc(var(--gutter) + env(safe-area-inset-right));
}

.section {
  padding-block: var(--section-y);
}

.section--tight-top {
  padding-top: 0;
}

/* Kolom met tekst. De maat bepaalt de regellengte. */
.stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: flex-start;
}

.stack > .lead {
  max-width: 44ch;
}

/* --- Tekststijlen ------------------------------------------------------ */

.mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--text-faint);
}

.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.lead {
  font-size: var(--step-lead);
  line-height: 1.55;
  color: var(--text-muted);
}

.link-kers {
  color: var(--kers);
  font-weight: 600;
  text-underline-offset: 0.2em;
}

/* --- Knoppen ----------------------------------------------------------- */

.btn {
  --btn-bg: var(--primary);
  --btn-fg: var(--on-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 1.0625rem 1.625rem;
  font: 700 1rem/1 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--lift);
}

.btn:active {
  transform: translateY(0);
}

/* Eén kers-knop per scherm: de Pin-handeling. */
.btn--pin {
  --btn-bg: var(--kers);
  --btn-fg: var(--room);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  border-color: var(--border-strong);
  font-weight: 600;
}

.btn--room {
  --btn-bg: var(--room);
  --btn-fg: var(--zwart);
}

.btn--sm {
  padding: 0.875rem 1.25rem;
  font-size: 0.9375rem;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

/* Op een smal scherm staan twee halve knoppen naast elkaar lelijk te
   wringen; over de volle breedte zijn ze ook makkelijker te raken. */
@media (max-width: 420px) {
  .btn-row {
    align-self: stretch;
  }

  .btn-row .btn {
    flex: 1 1 100%;
  }
}

/* --- Marker ------------------------------------------------------------
   Druppel volgens de brand guide: vierkant s × s, border-radius
   50% 50% 50% 0, rotatie −45°. Uitstansing 0,16 s breed, stok 0,30 s hoog,
   punt 0,16 s, tussenruimte 0,06 s. De punt van de druppel staat op de
   coördinaat. Een marker wordt nooit gekanteld — dat doet alleen de sticker.
   ------------------------------------------------------------------------ */

.marker {
  --s: 32px;
  --marker-bg: var(--kers);
  --marker-cut: var(--room);
  position: relative;
  width: var(--s);
  height: calc(var(--s) * 1.21);
  flex: none;
}

.marker::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  width: var(--s);
  height: var(--s);
  background: var(--marker-bg);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

/* Stok en punt van het uitroepteken, optisch iets naar onderen. */
.marker__stem,
.marker__dot {
  position: absolute;
  left: 50%;
  width: calc(var(--s) * 0.16);
  background: var(--marker-cut);
  transform: translateX(-50%);
}

.marker__stem {
  top: calc(var(--s) * 0.14);
  height: calc(var(--s) * 0.3);
  border-radius: 999px;
}

.marker__dot {
  top: calc(var(--s) * 0.5);
  height: calc(var(--s) * 0.16);
  border-radius: 50%;
}

/* Kers voor eigen Pins, zwart voor gedeelde, kobalt en limoen voor
   categorieën. De uitstansing is altijd de kleur met het hoogste contrast. */
.marker--zwart {
  --marker-bg: var(--zwart);
}

.marker--kobalt {
  --marker-bg: var(--kobalt);
}

.marker--limoen {
  --marker-bg: var(--limoen);
  --marker-cut: var(--zwart);
}

.marker--wit {
  --marker-bg: var(--room);
  --marker-cut: var(--kers);
}

.marker--drop {
  filter: drop-shadow(0 0.16em 0.21em rgba(0, 0, 0, 0.45));
}

/* --- Sticker -----------------------------------------------------------
   Maten in em, zodat een sticker in zijn geheel meeschaalt met zijn
   lettergrootte — ook binnen de kaart en de telefoonschermen.
   ------------------------------------------------------------------------ */

.sticker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--zwart);
  color: var(--room);
  border: 0.25em solid var(--snijrand);
  box-shadow: var(--sticker-shadow);
  border-radius: 999px;
  padding: 0.8em 1.1em;
  font: 700 1rem/1 var(--font-sans);
  white-space: nowrap;
}

.sticker--kers {
  background: var(--kers);
  color: var(--room);
}

.sticker--kobalt {
  background: var(--kobalt);
  color: var(--room);
}

.sticker--limoen {
  background: var(--limoen);
  color: var(--zwart);
}

.sticker--sm {
  padding: 0.6em 0.9em;
  border-width: 0.22em;
  box-shadow: 0 0.2em 0.45em -0.2em rgba(18, 18, 18, 0.5);
}

/* --- Merk ---------------------------------------------------------------
   Eén merkteken voor de hele site: de marker en het woordmerk samengevoegd.
   "Pin!" staat in de markervorm, zonder snijrand eromheen. De "!" is de
   uitstansing van de marker zelf en geen getypt teken, geschaald tot de
   hoogte van de kapitalen zodat het één woordbeeld vormt.

   Kers en room liggen vast in de SVG en volgen dus niet de licht- of donkere
   modus. Dat is met opzet: de marker ziet er in beide modi hetzelfde uit.

   De SVG staat inline (een sprite met <symbol>) en niet als <img>, omdat het
   woordmerk live tekst is: als los bestand valt dat terug op Arial.
   ------------------------------------------------------------------------ */

.sprite {
  display: none;
}

svg text {
  font-family: var(--font-sans);
  /* De tracking zit al in textLength; extra spatiëring zou dat verstoren. */
  letter-spacing: normal;
}

.logo-link {
  display: inline-flex;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.logo-link:hover {
  opacity: 0.7;
}

/* De lockup is breed (2,30 : 1). De hoogte is de kapitaalhoogte plus het
   stukje dat de marker daarboven uitsteekt, dus 32px hoogte geeft letters
   van ongeveer 27px. */
.logo {
  display: block;
  height: 2rem;
  width: auto;
}

.logo--sm {
  height: 1.75rem;
}

.merkteken {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Header ------------------------------------------------------------ */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Dekkend: half doorschijnend werd troebel zodra een donkere sectie
     eronder doorschoof. */
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.header[data-scrolled="true"] {
  border-bottom-color: var(--border);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.875rem;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.125rem);
  font: 600 0.9375rem/1 var(--font-sans);
}

.nav a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--text);
}

.nav a.btn {
  color: var(--btn-fg);
}

/* --- Menuknop -----------------------------------------------------------
   Alleen zichtbaar op smalle schermen. Gewone knoppen zijn zwart, dus deze
   ook — kers blijft voorbehouden aan de Pin-handeling.
   ------------------------------------------------------------------------ */

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  cursor: pointer;
  flex: none;
  transition: transform 0.15s ease;
}

.nav-toggle:active {
  transform: scale(0.94);
}

.nav-toggle__box {
  position: relative;
  width: 18px;
  height: 12px;
}

.nav-toggle__box i {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.15s ease;
}

.nav-toggle__box i:nth-child(1) {
  top: 0;
}

.nav-toggle__box i:nth-child(2) {
  top: 5px;
}

.nav-toggle__box i:nth-child(3) {
  top: 10px;
}

/* Open: de drie strepen worden een kruis. */
.nav-toggle[aria-expanded="true"] .nav-toggle__box i:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__box i:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__box i:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

/* --- Smal: menu achter de knop -----------------------------------------
   Het inklappen gebeurt alleen als JavaScript draait. Zonder JS zou de knop
   niets doen en was het menu onbereikbaar; dan blijven de links gewoon in
   beeld als een tweede regel.
   ------------------------------------------------------------------------ */

@media (max-width: 860px) {
  .nav-toggle {
    display: inline-flex;
  }

  .nav {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.625rem 1.25rem;
    order: 3;
    width: 100%;
  }

  .js .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 20px 40px -24px rgba(18, 18, 18, 0.6);
    padding: 0.25rem calc(var(--gutter) + env(safe-area-inset-right))
      calc(1.25rem + env(safe-area-inset-bottom))
      calc(var(--gutter) + env(safe-area-inset-left));
  }

  .js .header[data-menu="open"] .nav {
    display: flex;
    animation: menu-in 0.18s ease;
  }

  /* Het paneel heeft dezelfde achtergrond als de pagina en zou anders
     doorlopen in de hero. Deze sluier zet de pagina eronder op afstand —
     en een tik erop sluit het menu. */
  .js .header[data-menu="open"]::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 100vh;
    z-index: -1;
    background: rgba(18, 18, 18, 0.5);
    animation: sluier-in 0.18s ease;
  }

  /* Ruime aanraakvlakken: elke regel is minstens 48px hoog. */
  .nav a {
    font-size: 1.125rem;
    padding-block: 0.9375rem;
    border-bottom: 1px solid var(--border);
  }

  .nav a.btn {
    justify-content: center;
    margin-top: 1.125rem;
    padding-block: 1.0625rem;
    font-size: 1rem;
    border-bottom: 0;
  }
}

@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@keyframes sluier-in {
  from {
    opacity: 0;
  }
}

@media (max-width: 420px) {
  .logo {
    height: 1.75rem;
  }
}

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

.hero {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  padding-block: clamp(2rem, 1rem + 4vw, 3.75rem) clamp(3.5rem, 1rem + 7vw, 5.625rem);
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(1.125rem, 2vw, 1.625rem);
  align-items: flex-start;
}

.hero__copy .lead {
  max-width: 40ch;
}

@media (max-width: 940px) {
  .hero {
    grid-template-columns: 1fr;
  }
}

/* --- Kaartvisual -------------------------------------------------------
   Container query: al het binnenwerk staat in cqw en schaalt dus met de
   breedte van de kaart zelf.
   ------------------------------------------------------------------------ */

.map {
  container-type: inline-size;
  position: relative;
  /* De breedte moet de kolom vullen, anders loopt de rechterrand niet gelijk
     met de header en de footer. Zonder expliciete breedte rekent de browser
     die terug uit `aspect-ratio` zodra `max-height` de hoogte afknijpt, en
     staat de kaart smaller dan zijn kolom. */
  width: 100%;
  aspect-ratio: 5 / 7;
  max-height: 560px;
  min-height: 340px;
  border-radius: var(--radius-card);
  background: var(--zwart);
  /* In donkere modus valt de kaart anders weg tegen de achtergrond. */
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--lift);
}

/* Rasterlijnen, water en groen — een abstracte kaart, geen echte tiles. */
.map__grid {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
      90deg,
      transparent 0 9.3cqw,
      rgba(255, 248, 238, 0.1) 9.3cqw 9.5cqw
    ),
    repeating-linear-gradient(0deg, transparent 0 10.6cqw, rgba(255, 248, 238, 0.1) 10.6cqw 10.8cqw);
}

.map__water {
  position: absolute;
  left: -10%;
  top: 58%;
  width: 130%;
  height: 3.6cqw;
  background: rgba(44, 111, 209, 0.4);
  transform: rotate(-16deg);
}

.map__park {
  position: absolute;
  inset: auto 0 0 0;
  height: 17%;
  background: rgba(184, 217, 60, 0.18);
}

/* Alles op de kaart staat in procenten, zodat het meeschaalt. */
.map__pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -100%);
}

.map__pin--groot {
  --s: clamp(44px, 12.6cqw, 76px);
}

.map__pin--mid {
  --s: clamp(22px, 5.7cqw, 34px);
}

.map__pin--klein {
  --s: clamp(20px, 5cqw, 30px);
}

.map__sticker {
  position: absolute;
  left: var(--x);
  top: var(--y);
  font-size: clamp(0.6875rem, 2.6cqw, 1rem);
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
}

.map__card {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%) rotate(-3deg);
  background: var(--room);
  color: var(--zwart);
  border-radius: 2cqw;
  padding: 1.7cqw;
  width: clamp(150px, 40cqw, 240px);
  box-shadow: 0 3cqw 6cqw -2.6cqw rgba(0, 0, 0, 0.85);
}

.map__photo {
  aspect-ratio: 22 / 13;
  border-radius: 0.9cqw;
  background-image: var(--foto);
  display: grid;
  place-items: center;
  text-align: center;
}

.map__photo .mono {
  font-size: clamp(0.5rem, 1.9cqw, 0.6875rem);
  color: rgba(18, 18, 18, 0.55);
}

.map__card figcaption > * {
  display: block;
}

.map__card-title {
  font: 800 clamp(0.8125rem, 2.9cqw, 1.0625rem) / 1.2 var(--font-sans);
  letter-spacing: -0.02em;
  margin-top: 1.7cqw;
}

.map__card .mono {
  margin-top: 0.7cqw;
  font-size: clamp(0.5rem, 1.9cqw, 0.6875rem);
  color: rgba(18, 18, 18, 0.6);
}

/* --- Marquee ----------------------------------------------------------- */

.marquee {
  background: var(--invert-bg);
  color: var(--invert-text);
  padding-block: 1.375rem;
  overflow: hidden;
  display: flex;
  gap: 2.75rem;
  user-select: none;
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: 2.75rem;
  flex: none;
  /* Elke track vult minstens de breedte, zodat de lus naadloos doorloopt. */
  min-width: 100%;
  justify-content: space-around;
  white-space: nowrap;
  font: 800 clamp(1.25rem, 0.8rem + 2vw, 1.875rem) / 1 var(--font-sans);
  letter-spacing: -0.03em;
  animation: marquee 26s linear infinite;
}

.marquee__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--kers);
  flex: none;
}

@keyframes marquee {
  to {
    transform: translateX(calc(-100% - 2.75rem));
  }
}

/* --- Sectiekop --------------------------------------------------------- */

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.5rem);
  flex-wrap: wrap;
  margin-bottom: clamp(2rem, 3vw, 2.75rem);
}

.section-head h2 {
  max-width: 22ch;
}

.section-head p {
  max-width: 48ch;
  color: var(--text-muted);
}

/* --- Stappen ----------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: 1.375rem;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: clamp(1.5rem, 2.4vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.step__num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 4px solid var(--snijrand);
  box-shadow: 0 6px 14px -6px rgba(18, 18, 18, 0.4);
  display: grid;
  place-items: center;
  font: 800 1.25rem/1 var(--font-sans);
  color: var(--room);
  background: var(--zwart);
  flex: none;
}

.step:nth-child(1) .step__num {
  background: var(--kers);
  transform: rotate(-11deg);
}

.step:nth-child(2) .step__num {
  transform: rotate(7deg);
}

.step:nth-child(3) .step__num {
  background: var(--kobalt);
  transform: rotate(-5deg);
}

.step p {
  color: var(--text-muted);
  margin-top: 0.625rem;
}

/* --- Stickervel -------------------------------------------------------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: clamp(1.5rem, 3.4vw, 3.25rem);
}

.split {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(1.75rem, 3.4vw, 3rem);
  align-items: center;
}

.split .lead {
  max-width: 38ch;
}

@media (max-width: 860px) {
  .split {
    grid-template-columns: 1fr;
  }
}

.sticker-sheet {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  justify-content: center;
}

.sticker-sheet .sticker {
  font-size: clamp(0.875rem, 0.8rem + 0.4vw, 1rem);
  transform: rotate(var(--rot, 0deg));
  transition: transform 0.2s ease;
}

.sticker-sheet .sticker:hover {
  transform: rotate(0deg) scale(1.06);
}

/* --- Omgekeerde sectie ------------------------------------------------- */

.invert {
  background: var(--invert-bg);
  color: var(--invert-text);
}

.invert .lead,
.invert p {
  color: var(--invert-muted);
}

.invert .eyebrow,
.invert .mono {
  color: var(--invert-faint);
}

.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.75rem);
  align-items: center;
}

@media (max-width: 940px) {
  .duo {
    grid-template-columns: 1fr;
  }
}

.checklist {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-top: 0.25rem;
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  font-size: 1.0625rem;
  line-height: 1.5;
}

.checklist li::before {
  content: "";
  width: 12px;
  height: 12px;
  margin-top: 0.42em;
  border-radius: 50%;
  background: var(--punt, var(--kers));
  flex: none;
}

.checklist li:nth-child(2) {
  --punt: var(--limoen);
}

.checklist li:nth-child(3) {
  --punt: var(--kobalt);
}

/* --- Telefoonschermen --------------------------------------------------
   Ook een container query. Het binnenwerk staat in cqw ten opzichte van de
   262px waarop de schermen getekend zijn, dus 1cqw = 2,62px op ware grootte.
   ------------------------------------------------------------------------ */

.phones {
  display: flex;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  justify-content: center;
  align-items: flex-start;
}

/* De slot is de container, niet het scherm zelf: een element kan zijn eigen
   container niet bevragen, dus `cqw` in de regels van .phone zou terugvallen
   op de viewport — en dan worden rand en hoekradius absurd groot. */
.phone-slot {
  container-type: inline-size;
  width: min(262px, 46%);
  flex: none;
}

.phone-slot--detail {
  margin-top: 2.25rem;
}

.phone {
  width: 100%;
  aspect-ratio: 262 / 540;
  border-radius: 13cqw;
  border: 2.7cqw solid #000;
  /* De schermen tonen de app in lichte modus en wisselen dus niet mee. */
  background: #f3eee4;
  color: rgba(18, 18, 18, 0.6);
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
}

.phone-slot--detail .phone {
  background: #fff8ee;
}

.phone h3 {
  color: var(--zwart);
}

/* De schermen staan in een omgekeerde sectie, dus elke tekst op een licht
   vlak moet zijn kleur expliciet terugzetten — anders wint `.invert p` of
   `.invert .mono` en verdwijnt de tekst in de room achtergrond. Alleen de
   lichte vlakken: de donkere onderbalk houdt zijn eigen kleur. */
.phone__detail .mono,
.phone__card .mono,
.invert .phone__detail .mono,
.invert .phone__card .mono {
  color: rgba(18, 18, 18, 0.6);
}

.phone__note,
.invert .phone__note {
  color: rgba(18, 18, 18, 0.8);
}

.phone__status {
  position: absolute;
  top: 5.3cqw;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding-inline: 7.6cqw;
  font-family: var(--font-mono);
  font-size: 3.8cqw;
  letter-spacing: 0.05em;
  color: rgba(18, 18, 18, 0.55);
  z-index: 2;
}

.phone__map {
  position: absolute;
  inset: 0;
  background: #f3eee4;
}

.phone__grid {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
      90deg,
      transparent 0 16cqw,
      rgba(18, 18, 18, 0.1) 16cqw 16.4cqw
    ),
    repeating-linear-gradient(0deg, transparent 0 21.4cqw, rgba(18, 18, 18, 0.1) 21.4cqw 21.8cqw);
}

.phone__water {
  position: absolute;
  left: -15%;
  top: 38%;
  width: 130%;
  height: 7.6cqw;
  background: rgba(44, 111, 209, 0.32);
  transform: rotate(-18deg);
}

.phone__park {
  position: absolute;
  inset: auto 0 13% 0;
  height: 26.7cqw;
  background: rgba(184, 217, 60, 0.28);
}

.phone .map__pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
}

.phone .map__pin--klein {
  --s: 9.2cqw;
}

.phone .map__pin--mid {
  --s: 13.7cqw;
}

.phone__card {
  position: absolute;
  left: var(--x);
  top: var(--y);
  background: #fff8ee;
  color: var(--zwart);
  border-radius: 3.8cqw;
  padding: 3.1cqw;
  transform: translate(-50%, -50%) rotate(-3deg);
  box-shadow: 0 3.8cqw 8.4cqw -3.8cqw rgba(18, 18, 18, 0.6);
  width: 48.9cqw;
}

.phone__card figcaption > * {
  display: block;
}

.phone__card-photo {
  aspect-ratio: 104 / 58;
  border-radius: 1.5cqw;
  background-image: var(--foto);
}

.phone__card-title {
  font: 800 4.6cqw/1.2 var(--font-sans);
  letter-spacing: -0.02em;
  margin-top: 2.7cqw;
  color: var(--zwart);
}

.phone__card .mono {
  font-size: 3.4cqw;
  letter-spacing: 0.05em;
  white-space: nowrap;
  margin-top: 0.8cqw;
}

.phone__bar {
  position: absolute;
  inset: auto 7.6cqw 8.4cqw 7.6cqw;
  background: var(--zwart);
  border-radius: 9.2cqw;
  padding: 5.3cqw 6.1cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2cqw;
  color: var(--room);
}

.phone__bar-plaats {
  font: 800 4.6cqw/1.3 var(--font-sans);
}

.phone__bar .mono {
  font-size: 4.2cqw;
  color: rgba(255, 248, 238, 0.6);
}

.phone__fab {
  width: 16.8cqw;
  height: 16.8cqw;
  border-radius: 50%;
  background: var(--kers);
  display: grid;
  place-items: center;
  flex: none;
}

.phone__fab .marker {
  --s: 6.1cqw;
}

.phone__hero {
  height: 72.5cqw;
  background-image: var(--foto);
  position: relative;
}

/* Alleen de marker, als een pin die in de foto geprikt staat. */
.phone__badge {
  position: absolute;
  right: 7cqw;
  bottom: -7cqw;
  width: 14cqw;
  filter: drop-shadow(0 2cqw 4cqw rgba(18, 18, 18, 0.6));
}

.phone__detail {
  padding: 13cqw 7.6cqw 7.6cqw;
  display: flex;
  flex-direction: column;
  gap: 4cqw;
}

.phone__detail h3 {
  font-size: 8.4cqw;
  letter-spacing: -0.035em;
}

.phone__detail .mono {
  font-size: 4.2cqw;
  margin-top: 2.3cqw;
}

.phone__tags {
  display: flex;
  gap: 2.7cqw;
  flex-wrap: wrap;
}

.phone__tags .sticker {
  font-size: 4.2cqw;
}

.phone__note {
  font-size: 5.7cqw;
  line-height: 1.55;
  border-top: 1px solid rgba(18, 18, 18, 0.12);
  padding-top: 4cqw;
}

.phone__actions {
  position: absolute;
  inset: auto 7.6cqw 7.6cqw 7.6cqw;
  display: flex;
  gap: 3.8cqw;
}

.phone__actions > * {
  flex: 1;
  border-radius: 8.4cqw;
  padding: 5cqw 1cqw;
  text-align: center;
  font: 700 5cqw/1 var(--font-sans);
}

.phone__actions .is-route {
  background: var(--zwart);
  color: var(--room);
}

.phone__actions .is-deel {
  background: var(--kers);
  color: var(--room);
}

/* Twee schermen naast elkaar worden op een telefoon te klein om te lezen.
   Liever één op ware grootte. */
@media (max-width: 700px) {
  .phone-slot {
    width: min(262px, 100%);
  }

  .phone-slot--detail {
    display: none;
  }
}

/* --- Quote ------------------------------------------------------------- */

.quote {
  background: var(--kers);
  color: var(--room);
  border-radius: var(--radius-card);
  padding: clamp(1.75rem, 3.4vw, 2.75rem);
  position: relative;
  overflow: hidden;
}

.quote::before {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 248, 238, 0.12);
}

.quote blockquote {
  position: relative;
  font: 800 clamp(1.375rem, 1rem + 1.6vw, 2rem) / 1.25 var(--font-sans);
  letter-spacing: -0.03em;
}

.quote figcaption {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-top: 1.625rem;
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 248, 238, 0.92);
}

.quote__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex: none;
  background-image: var(--foto);
}

.quote__meta {
  color: rgba(255, 248, 238, 0.65);
}

.pill-row {
  display: flex;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.pill {
  font: 600 0.875rem/1 var(--font-sans);
  border: 1px solid var(--border-strong);
  padding: 0.75rem 1rem;
  border-radius: 999px;
}

/* --- Slot -------------------------------------------------------------- */

.cta {
  background: var(--invert-bg);
  color: var(--invert-text);
  border-radius: var(--radius-card);
  padding: clamp(2rem, 4vw, 4.5rem) clamp(1.5rem, 3.4vw, 3.75rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  flex-wrap: wrap;
}

.cta__copy {
  max-width: 46ch;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  align-items: flex-start;
}

/* Het merkteken tekent zijn eigen vorm; hier alleen het formaat. Niet
   kantelen — de punt moet naar beneden blijven wijzen. */
.cta__seal {
  width: clamp(190px, 24vw, 330px);
  filter: drop-shadow(0 20px 44px rgba(0, 0, 0, 0.9));
  flex: none;
}

/* Op smalle schermen zakt het zegel onder de tekst; rechts uitlijnen leest
   als een bewuste plaatsing in plaats van een losse cirkel. */
@media (max-width: 720px) {
  /* Het zegel valt op een eigen regel; naar rechts duwen leest als een
     bewuste plaatsing in plaats van een losse cirkel. */
  .cta__seal {
    margin-inline-start: auto;
    margin-top: -0.5rem;
  }
}

/* --- Footer ------------------------------------------------------------ */

.footer {
  border-top: 1px solid var(--border);
  padding-block: clamp(2.5rem, 4vw, 2.75rem)
    calc(clamp(2.5rem, 4vw, 3.75rem) + env(safe-area-inset-bottom));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(2rem, 4vw, 2.5rem);
  flex-wrap: wrap;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}

.footer__adres {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

.footer__adres a {
  color: inherit;
}

.footer__adres a:hover {
  color: var(--kers);
}

.footer__cols {
  display: flex;
  gap: clamp(1.75rem, 5vw, 4rem);
  flex-wrap: wrap;
}

.footer__cols h2 {
  font: 700 0.8125rem/1.6 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.footer__cols ul {
  margin-top: 0.375rem;
}

.footer__cols a {
  display: inline-block;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9375rem;
  line-height: 1.9;
}

.footer__cols a:hover {
  color: var(--kers);
}

/* Met de duim zijn regels van 28px te krap. Ruimer zetten, en de drie
   kolommen naast elkaar houden in plaats van ze te laten rafelen. */
@media (max-width: 700px) {
  .footer__cols {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 1.75rem 1.25rem;
  }

  /* 0.625rem boven en onder brengt elke regel op 44px, de ondergrens voor
     een betrouwbaar aanraakvlak. */
  .footer__cols a {
    padding-block: 0.625rem;
    line-height: 1.6;
  }
}

.footer__legal {
  width: 100%;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
}

/* --- Onthullen bij scrollen -------------------------------------------- */

/* Alleen verbergen als JS draait en de observer het weer aanzet. Zonder JS,
   of als de observer nooit afgaat, blijft alle inhoud gewoon zichtbaar. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}

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

  .js-reveal .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .marquee__track {
    animation: none;
  }

  .js .header[data-menu="open"] .nav,
  .js .header[data-menu="open"]::after {
    animation: none;
  }

  .nav-toggle,
  .nav-toggle__box i {
    transition: none;
  }

  .btn:hover,
  .sticker-sheet .sticker:hover {
    transform: none;
  }
}

/* --- Tekstpagina (privacy) --------------------------------------------- */

.prose {
  max-width: 68ch;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.prose h1 {
  font-size: var(--step-h2);
  line-height: 1.04;
  letter-spacing: -0.04em;
}

.prose h2 {
  font-size: clamp(1.375rem, 1.2rem + 1vw, 2rem);
  margin-top: 1.5rem;
}

.prose p,
.prose li {
  color: var(--text-muted);
}

.prose ul {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding-left: 1.125rem;
  list-style: disc;
}

.prose a {
  color: var(--kers);
  text-underline-offset: 0.2em;
}

@media print {
  .header,
  .marquee,
  .cta,
  .footer__cols,
  .skip-link {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}