/* Locatiepagina's (/website-laten-maken/<plaats>).
   Hoort bij assets/js/locatie.js en scripts/locaties/build.py.
   Alleen tokens uit assets/ds/tokens; afgeleiden via color-mix(). */

/* ---------- hero: tekst, gratis ontwerp, de ombouw-animatie ---------- */
.loc-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(90% 70% at 78% 40%, color-mix(in srgb, var(--navy-700) 55%, transparent), transparent 70%),
    var(--surface-inverse-deep);
  padding: var(--space-7) var(--space-5) var(--space-8);
}
.loc-hero__inner {
  max-width: var(--container-xl); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: var(--space-7); align-items: center;
}
.loc-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.loc-hero .crumbs, .loc-hero .crumbs a { color: var(--inverse-55); }
.loc-hero .crumbs a:hover { color: var(--gold-400); }
.loc-hero .crumbs span[aria-current] { color: var(--inverse-86); }
.loc-hero h1 {
  font: var(--type-hero-sub); letter-spacing: var(--tracking-tight);
  color: var(--cream-100); max-width: 16ch;
}
.loc-hero h1 em { font-style: normal; color: var(--gold-400); }
.loc-hero .lead { font: var(--type-body); font-size: var(--text-lg); color: var(--inverse-78); max-width: 52ch; }

/* Prijslabel met de afgesneden hoek uit het logo */
.loc-prijs {
  display: inline-flex; align-items: baseline; gap: var(--space-3);
  padding: var(--space-3) var(--space-6) var(--space-3) var(--space-4);
  background: var(--gold-500); color: var(--navy-900);
  clip-path: var(--clip-chamfer-tr);
}
.loc-prijs > * { white-space: nowrap; }
.loc-prijs span { font: var(--type-mono); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.loc-prijs b { font: var(--weight-bold) var(--text-3xl)/1 var(--font-display); letter-spacing: var(--tracking-tight); }
.loc-prijs small { font: var(--type-mono); }

/* Gratis ontwerp: eerst alleen het webadres, daarna e-mail */
.loc-demo {
  width: 100%; max-width: 560px;
  padding: var(--space-5);
  background: var(--surface-inverse-raised);
  border: 1px solid var(--border-inverse); border-radius: var(--radius-md);
}
.loc-demo form { display: flex; flex-direction: column; gap: var(--space-3); }
.loc-demo__kop { font: var(--type-h4); color: var(--cream-100); }
.loc-demo__uitleg { font: var(--type-body-sm); color: var(--inverse-72); }
.loc-demo__rij { display: flex; gap: var(--space-2); align-items: stretch; }
.loc-demo__veld { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.loc-demo__veld label { font: var(--type-label); color: var(--inverse-78); }
.loc-demo .input { width: 100%; height: var(--control-h-lg); }
.loc-demo__rij .btn { align-self: flex-end; flex: none; }
.loc-demo__stap2 { display: flex; flex-direction: column; gap: var(--space-3); }
.loc-demo__stap2[hidden] { display: none; }
.loc-demo__domein { font: var(--type-body-sm); color: var(--gold-300); }
.loc-demo__fout { font: var(--type-body-sm); font-size: var(--text-xs); color: var(--gold-300); margin: 0; }
.loc-demo__klein { font: var(--type-body-sm); font-size: var(--text-xs); color: var(--inverse-55); }
.loc-demo__klein a { color: var(--inverse-78); }
.loc-demo__klaar { display: flex; flex-direction: column; gap: var(--space-2); }
.loc-demo__klaar h3 { font: var(--type-h4); color: var(--gold-300); }
.loc-demo__klaar p { font: var(--type-body-sm); color: var(--inverse-78); }

.loc-ticks { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.loc-ticks li { display: flex; align-items: center; gap: var(--space-2); font: var(--type-body-sm); color: var(--inverse-78); }
.loc-ticks svg { flex: none; stroke: var(--gold-400); }

/* ---------- de ombouw: een oude site wordt een nieuw ontwerp ----------
   Eén lus van --T. De basisstijl van elk onderdeel is de eindstand (het
   nieuwe ontwerp); de animaties leggen de lus eroverheen. Zo staat er bij
   "minder beweging" gewoon het eindresultaat. Alle maten in em: de
   lettergrootte van .show schaalt het geheel mee met de kolom. */
.show {
  --T: 15s;
  font-size: calc(min(var(--container-xl), 100vw - 48px) * 0.519 / 62);
  position: relative; height: 49em; perspective: 150em;
  user-select: none; -webkit-user-select: none;
}
.show * { box-sizing: border-box; }
.show__zweef { position: absolute; left: 1em; top: 1.5em; width: 56em; height: 37em; transform-style: preserve-3d; animation: show-zweef 7s ease-in-out infinite alternate; }
.show__rig {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateY(calc(-14deg + var(--my, 0deg))) rotateX(calc(6deg + var(--mx, 0deg)));
  transition: transform .5s var(--ease-out);
}
.show__rig > *, .show__view > * { position: absolute; }
.show.is-pauze, .show.is-pauze * { animation-play-state: paused !important; }
@keyframes show-zweef { from { transform: translateY(-.6em); } to { transform: translateY(.8em); } }

.show__schaduw {
  left: 3em; right: -2em; bottom: -5em; height: 7em; transform: translateZ(-8em);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--navy-900) 90%, transparent), transparent);
}
.show__win {
  inset: 0; transform-style: preserve-3d; border-radius: 1em;
  background: var(--ink-100);
  box-shadow: 0 0 0 .08em color-mix(in srgb, var(--cream-100) 25%, transparent), 0 3em 6em -2em color-mix(in srgb, var(--navy-900) 80%, transparent);
}
.show__bar {
  position: absolute; left: 0; right: 0; top: 0; height: 3.6em; padding: 0 1.2em;
  display: flex; align-items: center; gap: 1em;
  background: var(--ink-100); border-radius: 1em 1em 0 0;
}
.show__dots { display: flex; gap: .5em; }
.show__dots i { width: .85em; height: .85em; border-radius: 50%; background: var(--ink-200); }
.show__adres {
  flex: 1; min-width: 0; height: 2.1em; padding: 0 .9em; display: flex; align-items: center; gap: .6em;
  background: var(--paper); border-radius: 1.05em; color: var(--ink-700);
  font: 1em/1 var(--font-mono);
}
.show__adres svg { width: .9em; height: 1em; flex: none; color: var(--ink-300); }
.show__url {
  display: inline-block; overflow: hidden; white-space: nowrap; width: calc(var(--n, 14) * 1ch); line-height: 1.6;
  border-right: .12em solid transparent;
  animation: show-typ var(--T) steps(var(--n, 14)) infinite both, show-caret var(--T) linear infinite both;
}
@keyframes show-typ { 0%, 3% { width: 0; } 12%, 100% { width: calc(var(--n, 14) * 1ch); } }
@keyframes show-caret { 0%, 14% { border-right-color: var(--gold-600); } 15%, 100% { border-right-color: transparent; } }
.show__status { position: relative; width: 11em; height: 2.1em; flex: none; }
.show__status span {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 1.05em;
  font: var(--weight-bold) .85em/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase;
  opacity: 0;
}
.show__status .s1 { background: var(--ink-200); color: var(--ink-700); animation: show-s1 var(--T) linear infinite both; }
.show__status .s2 { background: var(--navy-800); color: var(--cream-100); animation: show-s2 var(--T) linear infinite both; }
.show__status .s3 { background: var(--gold-500); color: var(--navy-900); opacity: 1; animation: show-s3 var(--T) linear infinite both; }
@keyframes show-s1 { 0%, 16% { opacity: 1; } 19%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes show-s2 { 0%, 16% { opacity: 0; } 19%, 44% { opacity: 1; } 47%, 100% { opacity: 0; } }
@keyframes show-s3 { 0%, 44% { opacity: 0; } 47%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }

.show__view { position: absolute; left: 0; right: 0; top: 3.6em; bottom: 0; transform-style: preserve-3d; }

/* -- de oude site: valt in lagen uit elkaar -- */
.o { opacity: 0; animation: show-oud var(--T) var(--ease-standard) infinite both; }
@keyframes show-oud {
  0%, 19% { opacity: 1; transform: none; }
  31% { opacity: 1; transform: translate3d(calc(var(--x, 0em) * 2), calc(var(--y, 0em) * 2), calc(var(--z, 8em) * 1.6)) rotate(var(--r, 0deg)) rotateY(calc(var(--r, 0deg) * 4)); }
  38%, 95% { opacity: 0; transform: translate3d(calc(var(--x, 0em) * 4), calc(var(--y, 0em) * 4 - 3em), calc(var(--z, 8em) * 2.6)) rotate(calc(var(--r, 0deg) * 2)) rotateY(calc(var(--r, 0deg) * 6)); }
  96% { opacity: 0; transform: none; }
  100% { opacity: 1; transform: none; }
}
.o-bg { inset: 0; border-radius: 0 0 1em 1em; background: var(--ink-200); opacity: 0; animation: show-oudbg var(--T) linear infinite both; }
.o-bg::after { content: ""; position: absolute; inset: 0 5em; background: var(--paper); }
@keyframes show-oudbg { 0%, 28% { opacity: 1; } 36%, 92% { opacity: 0; } 93%, 100% { opacity: 1; } }
.o-kop {
  left: 5em; right: 5em; top: 0; height: 6.4em; padding: .7em 1.4em; --z: 13em; --y: -1em; --r: -2deg;
  background: linear-gradient(180deg, var(--navy-400), var(--navy-200));
  border-bottom: .3em ridge var(--navy-600);
  font-family: "Times New Roman", Times, serif; color: var(--paper);
}
.o-kop b { display: block; font-size: 2.5em; line-height: 1.1; font-style: italic; text-shadow: .08em .08em 0 var(--navy-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-kop span { font-size: 1.05em; }
.o-nav {
  left: 5em; right: 5em; top: 6.9em; padding: 0 1.4em; --z: 9em; --x: 1.5em; --r: 1.5deg;
  font: 1em/1.6 "Times New Roman", Times, serif; color: var(--navy-600); text-decoration: underline; white-space: nowrap; overflow: hidden;
}
.o-foto {
  left: 6.4em; top: 10em; width: 13em; height: 9.5em; --z: 11em; --x: -2em; --r: -3deg;
  border: .2em inset var(--ink-200);
  background:
    linear-gradient(to top right, transparent calc(50% - .06em), var(--ink-300) 50%, transparent calc(50% + .06em)),
    linear-gradient(to bottom right, transparent calc(50% - .06em), var(--ink-300) 50%, transparent calc(50% + .06em)),
    var(--ink-100);
  display: grid; place-items: end center; font: .8em/2 var(--font-mono); color: var(--ink-500);
}
.o-tekst {
  left: 20.6em; right: 6.4em; top: 10em; --z: 6em; --x: 2em; --r: 2deg;
  font: 1.05em/1.35 "Times New Roman", Times, serif; color: var(--ink-900);
}
.o-tekst i { display: block; height: .5em; margin-top: .55em; background: var(--ink-200); }
.o-tekst i:nth-child(odd) { width: 92%; } .o-tekst i:nth-child(3n) { width: 78%; } .o-tekst i:last-child { width: 40%; }
.o-voet {
  left: 6.4em; right: 6.4em; bottom: 1.2em; --z: 4em; --y: 2em; --r: -1deg;
  display: flex; align-items: center; justify-content: space-between; gap: 1em;
  padding-top: .7em; border-top: .1em solid var(--ink-200);
  font: .9em/1.2 "Times New Roman", Times, serif; color: var(--ink-500);
}
.o-teller { display: inline-flex; gap: .15em; vertical-align: middle; margin-left: .4em; }
.o-teller b { width: 1.1em; height: 1.5em; display: grid; place-items: center; background: var(--ink-900); color: var(--green-100); font: 1em/1 var(--font-mono); }

/* -- de scanlijn -- */
.show__scan {
  left: -1em; right: -1em; top: 0; height: .35em; opacity: 0;
  background: var(--gold-400); box-shadow: 0 0 2em .5em color-mix(in srgb, var(--gold-400) 60%, transparent), 0 -3em 4em -1em color-mix(in srgb, var(--gold-300) 35%, transparent);
  animation: show-scan var(--T) var(--ease-standard) infinite both;
}
@keyframes show-scan {
  0%, 14% { opacity: 0; transform: translate3d(0, 0, 1.5em); }
  16% { opacity: 1; transform: translate3d(0, 0, 1.5em); }
  27% { opacity: 1; transform: translate3d(0, 33.4em, 1.5em); }
  29%, 100% { opacity: 0; transform: translate3d(0, 33.4em, 1.5em); }
}

/* -- het nieuwe ontwerp: vliegt laag voor laag binnen -- */
.n { animation: show-nieuw var(--T) var(--ease-out) infinite both; animation-delay: var(--d, 0s); }
@keyframes show-nieuw {
  0%, 33% { opacity: 0; transform: translate3d(0, 2.5em, 16em); }
  42%, 86% { opacity: 1; transform: none; }
  90%, 100% { opacity: 0; transform: translate3d(0, -1em, 0); }
}
.n-bg { inset: 0; border-radius: 0 0 1em 1em; background: var(--cream-100); animation: show-nieuwbg var(--T) linear infinite both; }
@keyframes show-nieuwbg { 0%, 30% { opacity: 0; } 37%, 94% { opacity: 1; } 100% { opacity: 0; } }
.n-nav { left: 0; right: 0; top: 0; height: 4.4em; padding: 0 2.2em; display: flex; align-items: center; gap: 1.6em; border-bottom: .08em solid var(--border-hairline); }
.n-logo { display: flex; align-items: center; gap: .7em; margin-right: auto; font: var(--weight-bold) 1.4em/1 var(--font-display); color: var(--navy-800); white-space: nowrap; }
.n-logo::before { content: ""; width: 1.3em; height: 1.3em; flex: none; background: var(--gold-500); clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 100%, 0 100%); }
.n-nav > span:not(.n-logo):not(.n-bel) { font: 1em/1 var(--font-body); color: var(--ink-700); }
.n-nav .n-bel { font: 1em/1 var(--font-body); padding: .7em 1.1em; background: var(--navy-800); color: var(--cream-100); border-radius: .4em; font-weight: var(--weight-semibold); }
.n-tekst { left: 2.2em; top: 6em; width: 28em; display: flex; flex-direction: column; align-items: flex-start; gap: .8em; --d: .25s; }
.n-kick { font: .9em/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-700); }
.n-h { font: var(--weight-bold) 3.9em/1.02 var(--font-display); letter-spacing: -.02em; color: var(--navy-800); }
.n-h em { font-style: normal; color: var(--gold-600); display: block; white-space: nowrap; }
.n-p { font: 1.1em/1.45 var(--font-body); color: var(--ink-700); }
.n-knoppen { display: flex; gap: .8em; }
.n-knop { padding: .95em 1.5em; font: var(--weight-semibold) 1.1em/1 var(--font-body); border-radius: .4em; border: .1em solid var(--navy-800); color: var(--navy-800); white-space: nowrap; }
.n-knop--goud { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-900); clip-path: polygon(0 0, calc(100% - .8em) 0, 100% .8em, 100% 100%, 0 100%); border-radius: 0; animation: show-klik var(--T) linear infinite both; }
@keyframes show-klik { 0%, 61% { transform: none; filter: none; } 62.5% { transform: scale(.93); filter: brightness(1.15); } 64.5%, 100% { transform: none; filter: none; } }
.n-foto {
  right: 2.2em; top: 6.6em; width: 22em; height: 15.5em; --d: .5s; overflow: hidden;
  background: linear-gradient(150deg, var(--navy-600), var(--navy-900));
  clip-path: polygon(0 0, calc(100% - 2.4em) 0, 100% 2.4em, 100% 100%, 0 100%);
}
.n-foto::before { content: ""; position: absolute; right: 3.2em; top: 2.6em; width: 5em; height: 5em; border-radius: 50%; background: var(--gold-400); }
.n-foto i { position: absolute; bottom: 0; background: var(--navy-400); }
.n-foto i:nth-child(1) { left: 1.6em; width: 4.6em; height: 7.6em; background: var(--navy-200); }
.n-foto i:nth-child(2) { left: 6.8em; width: 5.6em; height: 10.4em; }
.n-foto i:nth-child(3) { left: 13em; width: 4em; height: 6em; background: var(--cream-300); }
.n-foto i:nth-child(4) { left: 17.4em; width: 4.6em; height: 8.6em; background: var(--navy-600); }
.n-label { left: 28.6em; top: 18.6em; padding: .8em 1.1em; --d: .75s; background: var(--paper); border-radius: .5em; box-shadow: var(--shadow-md); font: var(--weight-semibold) 1em/1.2 var(--font-body); color: var(--navy-800); white-space: nowrap; }
.n-label small { display: block; font: .8em/1.3 var(--font-body); color: var(--ink-500); }
.n-kaarten { left: 2.2em; right: 2.2em; bottom: 1.4em; height: 6.6em; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2em; transform-style: preserve-3d; }
.n-kaart { position: relative; padding: .9em 1.2em; background: var(--paper); border: .08em solid var(--border-hairline); border-radius: .6em; }
.n-kaart b { display: block; font: var(--weight-semibold) 1.2em/1.2 var(--font-display); color: var(--navy-800); margin-bottom: .6em; }
.n-kaart b::before { content: ""; display: inline-block; width: .7em; height: .7em; margin-right: .5em; background: var(--gold-500); clip-path: polygon(0 0, 60% 0, 100% 40%, 100% 100%, 0 100%); }
.n-kaart i { display: block; height: .5em; margin-top: .5em; background: var(--ink-100); border-radius: .25em; }
.n-kaart i:last-child { width: 60%; }
.n-kaart:nth-child(1) { --d: .8s; } .n-kaart:nth-child(2) { --d: .95s; } .n-kaart:nth-child(3) { --d: 1.1s; }

/* -- muis, telefoon en labels die voor het venster zweven -- */
.show__muis { left: 0; top: 0; width: 2em; height: 2em; opacity: 0; color: var(--navy-900); animation: show-muis var(--T) var(--ease-standard) infinite both; filter: drop-shadow(0 .2em .3em color-mix(in srgb, var(--navy-900) 40%, transparent)); }
@keyframes show-muis {
  0%, 52% { opacity: 0; transform: translate3d(34em, 34em, 4em); }
  55% { opacity: 1; transform: translate3d(30em, 30em, 4em); }
  61%, 65% { opacity: 1; transform: translate3d(7em, 26.6em, 4em); }
  70%, 100% { opacity: 0; transform: translate3d(12em, 31em, 4em); }
}
.show__tel {
  right: -3.5em; top: 9em; width: 13.5em; height: 27em; padding: .6em; transform: translateZ(9em);
  background: var(--ink-900); border-radius: 2em;
  box-shadow: 0 2em 4em -1em color-mix(in srgb, var(--navy-900) 85%, transparent);
  animation: show-tel var(--T) var(--ease-out) infinite both;
}
@keyframes show-tel {
  0%, 60% { opacity: 0; transform: translate3d(7em, 3em, 9em) rotateY(-20deg); }
  69%, 88% { opacity: 1; transform: translate3d(0, 0, 9em); }
  93%, 100% { opacity: 0; transform: translate3d(3em, 2em, 9em); }
}
.show__tel > div { height: 100%; padding: 2.2em 1.1em 1.1em; display: flex; flex-direction: column; gap: .9em; background: var(--cream-100); border-radius: 1.5em; overflow: hidden; }
.show__tel .n-logo { font-size: 1em; margin: 0; overflow: hidden; }
.show__tel .n-h { font-size: 1.9em; }
.show__tel .n-h em { white-space: normal; }
.show__tel .n-knop { font-size: .95em; text-align: center; width: 100%; }
.show__tel .n-knop--goud { animation: none; }
.show__tel .n-foto { position: relative; inset: auto; width: 100%; height: 6.5em; flex: none; }
.show__tel .n-foto i { transform: scale(.55); transform-origin: left bottom; }
.show__tel .n-foto i:nth-child(n+3) { display: none; }
.show__tel .n-foto::before { width: 2.6em; height: 2.6em; right: 1.6em; top: 1.2em; }

.show__chip {
  padding: .75em 1.1em .75em .9em; display: flex; align-items: center; gap: .6em; white-space: nowrap;
  background: var(--navy-800); color: var(--cream-100); border: .08em solid var(--border-inverse); border-radius: 2em;
  font: var(--weight-semibold) 1.05em/1 var(--font-body);
  box-shadow: 0 1em 2em -1em var(--navy-900);
  transform: translateZ(var(--z, 7em));
  animation: show-chip var(--T) var(--ease-out) infinite both; animation-delay: var(--d, 0s);
}
.show__chip svg { width: 1.1em; height: 1.1em; stroke: var(--gold-400); flex: none; }
.show__chip--goud { background: var(--gold-500); color: var(--navy-900); border-color: transparent; font-family: var(--font-display); font-size: 1.3em; }
@keyframes show-chip {
  0%, 46% { opacity: 0; transform: translate3d(0, 1.5em, var(--z, 7em)) scale(.85); }
  52%, 84% { opacity: 1; transform: translate3d(0, 0, var(--z, 7em)); }
  89%, 100% { opacity: 0; transform: translate3d(0, -1em, var(--z, 7em)); }
}
.show__chip.c1 { right: -3em; top: 5em; --z: 8em; }
.show__chip.c2 { left: 13em; top: -1.2em; --z: 5em; --d: .45s; }
.show__chip.c3 { left: -.5em; bottom: -1.6em; --z: 11em; --d: .9s; }
.show__chip.c4 { right: 8em; bottom: -2.2em; --z: 13em; --d: 1.35s; }

/* -- de drie stappen eronder lopen mee -- */
.show__stappen { position: absolute; left: 1em; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2em; list-style: none; margin: 0; padding: 0; }
.show__stappen li { padding-top: .9em; border-top: .2em solid var(--inverse-20); font: var(--type-body-sm); font-size: max(12px, 1.25em); color: var(--inverse-55); }
.show__stappen b { display: block; font: var(--type-mono); font-size: max(11px, .8em); }
.show__stappen li:nth-child(1) { animation: show-st1 var(--T) linear infinite both; }
.show__stappen li:nth-child(2) { animation: show-st2 var(--T) linear infinite both; }
.show__stappen li:nth-child(3) { border-top-color: var(--gold-500); color: var(--cream-100); animation: show-st3 var(--T) linear infinite both; }
@keyframes show-st1 { 0%, 16% { border-top-color: var(--gold-500); color: var(--cream-100); } 19%, 97% { border-top-color: var(--inverse-20); color: var(--inverse-55); } 100% { border-top-color: var(--gold-500); color: var(--cream-100); } }
@keyframes show-st2 { 0%, 16% { border-top-color: var(--inverse-20); color: var(--inverse-55); } 19%, 44% { border-top-color: var(--gold-500); color: var(--cream-100); } 47%, 100% { border-top-color: var(--inverse-20); color: var(--inverse-55); } }
@keyframes show-st3 { 0%, 44% { border-top-color: var(--inverse-20); color: var(--inverse-55); } 47%, 94% { border-top-color: var(--gold-500); color: var(--cream-100); } 98%, 100% { border-top-color: var(--inverse-20); color: var(--inverse-55); } }

/* ---------- feitenband ---------- */
.loc-feiten { background: var(--surface-inverse); padding: 0 var(--space-5); border-top: 1px solid var(--border-inverse); }
.loc-feiten dl {
  max-width: var(--container-xl); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.loc-feiten dl > div { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-5) var(--space-5) var(--space-5) 0; }
.loc-feiten dl > div + div { padding-left: var(--space-5); border-left: 1px solid var(--border-inverse); }
.loc-feiten dt { font: var(--type-mono); letter-spacing: var(--tracking-wide); color: var(--gold-400); }
.loc-feiten dd { margin: 0; font: var(--type-h3); letter-spacing: var(--tracking-tight); color: var(--cream-100); }
.loc-feiten p { font: var(--type-body-sm); color: var(--inverse-65); }

/* ---------- lokaal ---------- */
.loc-lokaal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: var(--space-8); align-items: start; }
.loc-lokaal__kop { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); position: sticky; top: calc(var(--header-h) + var(--space-5)); }
.loc-lokaal h2 { font: var(--type-h1); letter-spacing: var(--tracking-tight); color: var(--text-heading); max-width: 18ch; }
.loc-kernen { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.loc-lokaal__ook { font: var(--type-body-sm); color: var(--text-muted); margin-bottom: calc(var(--space-2) * -1); }
.loc-kernen span {
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
  background: var(--navy-050); color: var(--navy-800); font: var(--type-mono);
}

/* ---------- gratis ontwerp in drie stappen ---------- */
.loc-gratis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--space-8); align-items: start; }
.loc-gratis__kop { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.loc-gratis__kop h2 { font: var(--type-h1); letter-spacing: var(--tracking-tight); color: var(--cream-100); }
.loc-gratis__kop p { font: var(--type-body); color: var(--inverse-78); }

/* ---------- kies je branche: de ontwerpen op een 3D-laptop ---------- */
.loc-werk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--space-7); align-items: center; }
.loc-werk__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); min-width: 0; }
.loc-werk__copy h2 { font: var(--type-h1); letter-spacing: var(--tracking-tight); color: var(--cream-100); }
.loc-werk__copy > p { font: var(--type-body); color: var(--inverse-78); }
.loc-werk__eigen {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); width: 100%;
  padding: var(--space-4) var(--space-5); border-left: 3px solid var(--gold-500);
  background: var(--surface-inverse-raised); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.loc-werk__eigen h3 { font: var(--type-h4); color: var(--cream-100); }
.loc-werk__eigen p { font: var(--type-body-sm); color: var(--inverse-78); }
.loc-werk__eigen a { font: var(--type-body-sm); font-weight: var(--weight-semibold); }
.lap__tag {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%); margin: 0;
  padding: var(--space-1) var(--space-3); background: var(--gold-500); color: var(--navy-900);
  font: var(--type-mono); font-size: 12px; letter-spacing: var(--tracking-wide); text-transform: uppercase;
  clip-path: var(--clip-chamfer-tr); padding-right: var(--space-4);
}
.loc-werk__label { font: var(--type-mono); letter-spacing: var(--tracking-wide); color: var(--gold-400); }
.loc-branches { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.loc-branche {
  padding: var(--space-2) var(--space-4); cursor: pointer;
  background: transparent; color: var(--inverse-86);
  border: 1px solid var(--border-inverse); border-radius: var(--radius-pill);
  font: var(--type-body-sm); font-weight: var(--weight-semibold);
  transition: var(--transition-control);
}
.loc-branche:hover { border-color: var(--gold-400); }
.loc-branche[aria-pressed="true"] { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-900); }
.loc-ontwerpen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3) var(--space-2); width: 100%; }
.loc-ontwerpen[hidden] { display: none; }
.loc-ontwerp {
  display: flex; flex-direction: column; gap: var(--space-1); padding: 0; cursor: pointer; text-align: left;
  background: transparent; border: none; color: var(--inverse-65); min-width: 0;
}
.loc-ontwerp img {
  width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; display: block;
  border-radius: var(--radius-xs); outline: 2px solid transparent; outline-offset: 2px;
  opacity: .65; transition: opacity var(--dur-fast), outline-color var(--dur-fast);
}
.loc-ontwerp span { font: var(--type-mono); font-size: var(--text-2xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loc-ontwerp:hover img { opacity: 1; }
.loc-ontwerp[aria-pressed="true"] img { opacity: 1; outline-color: var(--gold-500); }
.loc-ontwerp[aria-pressed="true"] { color: var(--gold-300); }

.lap { font-size: clamp(6.5px, 1vw, 13px); position: relative; height: 44em; touch-action: pan-y; cursor: grab; }
.lap.is-sleep { cursor: grabbing; }
.lap__scene { position: absolute; left: 50%; top: 27em; perspective: 130em; }
.lap__rig { position: absolute; transform-style: preserve-3d; transform: rotateX(var(--rx, -20deg)) rotateY(var(--ry, -24deg)); }
.lap__rig > * { position: absolute; }
.lap__schaduw {
  left: -22em; top: 0; width: 44em; height: 30em; transform-origin: 50% 0;
  transform: translateY(1.1em) rotateX(90deg) translateY(-3em);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--navy-900) 85%, transparent), transparent);
}
.lap__deck {
  left: -17em; top: 0; width: 34em; height: 23em; transform-origin: 50% 0; transform: rotateX(90deg);
  background: linear-gradient(180deg, var(--ink-200), var(--ink-100));
  border-radius: 0 0 .5em .5em;
}
.lap__toetsen {
  position: absolute; left: 2.2em; right: 2.2em; top: 1.6em; height: 11em; border-radius: .4em;
  background:
    repeating-linear-gradient(90deg, transparent 0 2em, var(--ink-200) 2em 2.3em),
    repeating-linear-gradient(180deg, transparent 0 1.9em, var(--ink-200) 1.9em 2.2em),
    var(--ink-900);
}
.lap__pad { position: absolute; left: 11em; right: 11em; top: 14.4em; height: 7em; border-radius: .5em; background: color-mix(in srgb, var(--ink-300) 45%, var(--ink-100)); }
.lap__voor {
  left: -17em; top: 0; width: 34em; height: 1em; transform: translateZ(23em);
  background: linear-gradient(180deg, var(--ink-200), var(--ink-300)); border-radius: 0 0 .5em .5em;
}
.lap__zij { top: 0; width: 23em; height: 1em; left: -11.5em; background: var(--ink-300); }
.lap__zij--l { transform: translateX(-17em) translateZ(11.5em) rotateY(90deg); }
.lap__zij--r { transform: translateX(17em) translateZ(11.5em) rotateY(90deg); }
.lap__klep {
  left: -17em; top: -22.4em; width: 34em; height: 22.4em;
  transform-origin: 50% 100%; transform-style: preserve-3d;
  transform: rotateX(-90deg);
  transition: transform 1.5s cubic-bezier(.2, .7, .2, 1);
}
.lap.is-open .lap__klep { transform: rotateX(14deg); }
.lap__klep > * { position: absolute; inset: 0; border-radius: 1em 1em 0 0; backface-visibility: hidden; }
.lap__rug { background: linear-gradient(160deg, var(--ink-200), var(--ink-300)); transform: rotateY(180deg) translateZ(.35em); display: grid; place-items: center; }
.lap__rug img { width: 5em; height: auto; opacity: .55; }
.lap__scherm { background: var(--ink-900); padding: .9em .9em 1.3em; transform: translateZ(.01em); }
.lap__beeld { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--navy-900); border-radius: .2em; }
.lap__beeld img, .lap__beeld video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: top; }
.lap__beeld video { opacity: 0; transition: opacity .25s linear; }
.lap.is-spelend .lap__beeld video { opacity: 1; }
.lap__glans {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, color-mix(in srgb, var(--paper) 14%, transparent) 0 22%, transparent 38%);
}
.lap__hint { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font: var(--type-mono); font-size: 13px; color: var(--inverse-55); white-space: nowrap; }

/* ---------- werk uit de buurt ---------- */
.loc-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.loc-case { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.loc-case img { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; object-position: top; display: block; border-bottom: 1px solid var(--border-hairline); }
.loc-case__tekst { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-5) var(--space-6) var(--space-6); }
.loc-case__tekst .mono { color: var(--gold-700); }
.loc-case__tekst h3 { font: var(--type-h3); color: var(--text-heading); }
.loc-case__tekst p { font: var(--type-body-sm); color: var(--text-body); }

/* ---------- in de buurt ---------- */
.loc-buurt { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); }
.loc-buurt a {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-4); background: var(--surface-card);
  border: 1px solid var(--border-hairline); border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast), transform var(--dur-fast);
}
.loc-buurt a:hover { border-color: var(--gold-500); transform: translateY(-2px); }
.loc-buurt b { font: var(--type-h4); font-size: var(--text-md); color: var(--navy-800); }
.loc-buurt span { font: var(--type-mono); color: var(--text-muted); }

/* ---------- smaller ---------- */
@media (max-width: 1000px) {
  .loc-hero__inner, .loc-lokaal, .loc-gratis, .loc-werk { grid-template-columns: minmax(0, 1fr); }
  .loc-hero h1 { max-width: none; }
  .loc-lokaal { gap: var(--space-5); }
  .loc-lokaal__kop { position: static; }
  .show { font-size: calc((100vw - 48px) / 62); }
  .loc-feiten dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .loc-feiten dl > div:nth-child(3) { padding-left: 0; border-left: none; }
  .loc-feiten dl > div:nth-child(n+3) { border-top: 1px solid var(--border-inverse); }
  .loc-buurt { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lap { font-size: clamp(6.5px, 1.75vw, 13px); }
  /* smal: de laptop direct onder de inleiding, de keuzes eronder */
  .loc-werk { display: flex; flex-direction: column; gap: var(--space-4); align-items: stretch; }
  .loc-werk__copy { display: contents; }
  .loc-werk__copy > * { order: 2; }
  .loc-werk__copy > .kicker, .loc-werk__copy > h2, .loc-werk__copy > p { order: 0; }
  .loc-werk .lap { order: 1; }
}
@media (max-width: 640px) {
  .loc-hero { padding-top: var(--space-5); }
  .loc-prijs { gap: var(--space-2); padding-left: var(--space-3); padding-right: var(--space-5); }
  .loc-prijs b { font-size: var(--text-xl); }
  .loc-prijs span, .loc-prijs small { font-size: var(--text-2xs); }
  .loc-demo { padding: var(--space-4); }
  .loc-demo__rij { flex-direction: column; }
  .loc-demo__rij .btn { align-self: stretch; }
  .show { height: 60em; }
  .show__stappen { gap: .8em; }
  .loc-ontwerpen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .loc-cases { grid-template-columns: minmax(0, 1fr); }
  .loc-buurt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .loc-feiten dl > div { padding: var(--space-4) var(--space-3) var(--space-4) 0; }
  .loc-feiten dl > div + div { padding-left: var(--space-3); }
  .loc-feiten dl > div:nth-child(3) { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .show, .show * { animation: none !important; }
  .show__rig { transition: none; }
  .lap__klep { transition: none; }
  .loc-buurt a:hover { transform: none; }
}