/* Fidel Agency · site.css
   Waarden uit /Users/user/ondernemingen/fidel/fidel.brand.json, versie 0.6.14.
   Pas een kleur, maat of letter eerst in de bron aan, dan hier. */

/* Lettertypen staan in de site zelf (assets/fonts), niet bij Google. Alle vier onder de SIL Open Font License 1.1. */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; src: url("/assets/fonts/bricolage-grotesque-200_800-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; src: url("/assets/fonts/bricolage-grotesque-200_800-latin.woff2") format('woff2'); 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; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-400-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-400-latin.woff2") format('woff2'); 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; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-500-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-500-latin.woff2") format('woff2'); 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; }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/public-sans-400_700-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/public-sans-400_700-latin.woff2") format('woff2'); 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 {
  --papier: #FAFAF8;
  --wit: #FFFFFF;
  --g200: #E7E7E5;
  --g300: #D2D2D0;
  --g400: #A8A8A6;
  --g500: #7C7C7A;
  --g600: #5A5A58;
  --inkt: #121214;
  --nacht: #0B0B0C;
  --creme: #F4F0E8;
  --cremeGedempt: #9C988F;
  --accent: #0040FF;
  --accentZacht: #ECF1FF;
  --lijnNacht: rgba(244, 240, 232, .16);
  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --tekst: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --uit: cubic-bezier(.22, 1, .36, 1);
  --standaard: cubic-bezier(.4, 0, .2, 1);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px;
  --s12: 48px; --s16: 64px; --s24: 96px; --s32: 128px;
  --radiusPil: 999px;
  --radiusKaart: 20px;
  --radiusKlein: 12px;
  --marge: 24px;
  --breed: 1120px;
  --blok: clamp(64px, 8vw, 96px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--papier); color: var(--inkt);
  font-family: var(--tekst); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, figure, blockquote, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
[id] { scroll-margin-top: 24px; }

.breed { width: min(100% - 2 * var(--marge), var(--breed)); margin-inline: auto; }
.onzichtbaar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Met .knop erbij in de selector: .knop zet verderop position: relative en won daardoor, waardoor deze link
   onzichtbaar 44px ruimte boven de balk innam. */
.knop.sla-over { position: absolute; left: 16px; top: -64px; z-index: 30; }
.knop.sla-over:focus { top: 16px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.opdonker :focus-visible { outline-color: var(--creme); }

/* ── Letters ─────────────────────────────────────────── */
h1, h2 { font-family: var(--display); font-weight: 500; text-transform: uppercase; }
h1 {
  font-size: clamp(3rem, 14vw, 10rem); line-height: .88; letter-spacing: -.045em;
  font-variation-settings: "opsz" 96;
}
h2 { font-size: clamp(1.875rem, 3.5vw, 2.75rem); line-height: 1.1; letter-spacing: -.025em; max-width: 22ch; }
h3 { font-family: var(--display); font-weight: 500; font-size: 1.3125rem; line-height: 1.25; letter-spacing: -.015em; }
.klein { font-size: .9375rem; line-height: 1.5; }
.heel { white-space: nowrap; }
.gedempt { color: var(--g600); }
.label {
  font-family: var(--mono); font-weight: 500; font-size: .8125rem; line-height: 1.4;
  letter-spacing: .06em; text-transform: uppercase; color: var(--g600);
}
.regel { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.regel > span { display: inline-block; }

/* ── Knop en link ────────────────────────────────────── */
.knop {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 24px; border: 0; border-radius: var(--radiusPil);
  background: var(--accent); color: var(--wit);
  font-family: var(--tekst); font-size: .9375rem; font-weight: 500; line-height: 1.2; text-align: center;
  cursor: pointer;
  transition: background-color .22s var(--uit), color .22s var(--uit), border-color .12s var(--standaard);
}
.knop::after { content: ""; position: absolute; inset: -2px 0; } /* 44 zichtbaar, 48 aanraakbaar */
.knop-tweede { background: transparent; color: var(--inkt); border: 1px solid var(--g500); }
.knop-inkt { background: var(--inkt); color: var(--papier); }
.opdonker .knop-tweede { color: var(--creme); border-color: rgba(244, 240, 232, .4); }
.knop[disabled] { background: var(--g200); color: var(--g500); cursor: default; }
.link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.opdonker .link { color: var(--creme); }
.link-rij { display: inline-flex; align-items: center; min-height: 44px; }
@media (hover: hover) and (pointer: fine) {
  .knop:hover { background: var(--inkt); }
  .knop-tweede:hover { background: transparent; border-color: var(--inkt); }
  .knop-inkt:hover { background: var(--accent); color: var(--wit); }
  .opdonker .knop:hover { background: var(--creme); color: var(--nacht); }
  .opdonker .knop-tweede:hover { background: transparent; color: var(--creme); border-color: var(--creme); }
  .link:hover { text-decoration-thickness: 2px; }
}

/* ── Balk ────────────────────────────────────────────── */
.balk { position: relative; z-index: 3; border-bottom: 1px solid var(--g200); background: var(--papier); }
.balk .breed { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; }
.logo { display: block; height: 34px; width: auto; fill: currentColor; }
.balk-logo { display: inline-flex; align-items: center; min-height: 44px; }
.balk nav { display: flex; align-items: center; gap: 4px; font-size: .9375rem; }
.balk nav a:not(.knop) { position: relative; display: none; align-items: center; min-height: 44px; padding: 0 12px; }
.balk nav a:not(.knop)::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 10px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .32s var(--uit);
}
.balk nav a[aria-current]:not(.knop)::after { transform: none; }
.balk .knop { margin-left: 8px; }
.balk .menu-knop { display: none; margin-left: 0; }
.js .balk .menu-knop { display: inline-flex; }
html:has(.menu[open]) { overflow: hidden; }
@media (min-width: 720px) {
  .balk nav a:not(.knop) { display: inline-flex; }
  .js .balk .menu-knop { display: none; }
}
@media (hover: hover) and (pointer: fine) { .balk nav a:not(.knop):hover::after { transform: none; } }
/* Op de telefoon blijft de balk bovenaan staan en is hij lager. */
@media (max-width: 719px) {
  html { scroll-padding-top: 76px; }
  .balk { position: sticky; top: 0; z-index: 20; }
  .balk .breed { min-height: 60px; }
  .balk .logo { height: 30px; }
}

/* ── Menu op de telefoon: donker, schermvullend, reusachtige woorden ── */
.menu {
  width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--nacht); color: var(--creme); overflow-y: auto;
}
.menu::backdrop { background: var(--nacht); }
.menu-in { display: flex; flex-direction: column; min-height: 100%; }
.menu-kop { display: flex; align-items: center; justify-content: space-between; min-height: 76px; border-bottom: 1px solid var(--lijnNacht); }
.menu-woorden { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: 32px; }
.menu-woorden a {
  display: block; font-family: var(--display); font-weight: 500; text-transform: uppercase;
  font-size: clamp(2.75rem, min(15vw, 11svh), 6rem); line-height: .96; letter-spacing: -.045em;
  font-variation-settings: "opsz" 96; padding-block: .06em;
}
.menu-voet { display: grid; gap: 16px; padding-block: 24px 32px; border-top: 1px solid var(--lijnNacht); justify-items: start; }
.menu-voet .rij { display: flex; flex-wrap: wrap; gap: 4px 24px; }
@media (prefers-reduced-motion: no-preference) {
  .menu[open] .regel > span { animation: omhoog .9s var(--uit) both; }
  .menu[open] .menu-woorden a:nth-child(2) .regel > span { animation-delay: .06s; }
  .menu[open] .menu-woorden a:nth-child(3) .regel > span { animation-delay: .12s; }
  .menu[open] .menu-woorden a:nth-child(4) .regel > span { animation-delay: .18s; }
  .menu[open] .menu-voet { animation: in .8s var(--uit) .3s both; }
}

/* ── Opening ─────────────────────────────────────────── */
.raster { background-image: radial-gradient(rgba(18, 18, 20, .16) 1px, transparent 1.2px); background-size: 20px 20px; }
.opening { position: relative; overflow: hidden; padding-block: clamp(32px, 4vw, 56px) clamp(48px, 6vw, 80px); }
/* Onder 900 breed staat de tekst onder de kop en wordt hij langer dan drie regels.
   Het raster ligt daar alleen achter label en kop en loopt uit vóór de tekst (regel uit de bron). */
@media (max-width: 899px) {
  .opening.raster { isolation: isolate; background-image: none; }
  .opening.raster::before {
    content: ""; position: absolute; inset: 0 0 auto 0; z-index: -1; height: calc(80px + 62vw);
    background-image: radial-gradient(rgba(18, 18, 20, .16) 1px, transparent 1.2px); background-size: 20px 20px;
    -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent);
  }
}
.opening .label { margin-bottom: clamp(16px, 2vw, 28px); }
.twee { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px 24px; align-items: center; }
.onder {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 32px; align-items: start;
  margin-top: clamp(24px, 3vw, 32px); padding-top: 20px; border-top: 1px solid var(--g300);
}
.onder > p { max-width: 40ch; color: var(--g600); }
.actie { display: grid; gap: 8px; justify-items: start; }
.actie .micro { font-size: .9375rem; line-height: 1.5; color: var(--g600); }
.toneel { position: relative; aspect-ratio: 1 / .98; width: 100%; max-width: 520px; margin-inline: auto; }
.toneel figure { position: absolute; transition: transform .42s var(--uit); }
.toneel img { width: 100%; }
.toneel .a { width: 100%; left: 0; top: 6%; transform: rotate(-3deg); }
.toneel .b { width: 30%; right: 3%; bottom: 0; transform: rotate(4deg); z-index: 1; }
.bij { display: block; margin-top: 8px; font: 500 .75rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--g600); }
.toneel .b .bij { text-align: right; }
@media (min-width: 560px) {
  .onder { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (min-width: 900px) {
  .twee { grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); }
  .toneel { max-width: none; }
  /* De kop past in de linkerkolom en blijft met de knop boven de vouw op een laag scherm. */
  .opening h1 { font-size: clamp(3rem, min(11.2vw, 15.5svh), 10rem); }
  /* Een regel van 9 tot 12 tekens naast een beeld: kleiner, anders breekt hij. */
  .twee h1.ruim { font-size: clamp(3rem, min(7.4vw, 15.5svh), 10rem); }
}
@media (hover: hover) and (pointer: fine) {
  .toneel figure:hover { transform: rotate(0deg) translateY(-8px); }
}

/* ── Blokken ─────────────────────────────────────────── */
.blok { padding-block: var(--blok); }
.blok > .breed > .label { margin-bottom: 12px; }
.inleiding { margin-top: 16px; max-width: 52ch; color: var(--g600); }

/* Kaart: kantelt licht mee met de muis, met een kleurloze glans */
.kaarten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 40px; }
.kantel { display: flex; min-width: 0; perspective: 900px; }
.kantel > * { --mx: 0; --my: 0; --px: 50%; --py: 50%; } /* het script zet deze vier bij een muisbeweging */
.kaart {
  position: relative; isolation: isolate; flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--wit); border: 1px solid var(--g200); border-radius: var(--radiusKaart);
  transition: transform .42s var(--uit), border-color .12s var(--standaard);
}
.kaart::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(440px circle at var(--px, 50%) var(--py, 50%), rgba(18, 18, 20, .10), transparent 68%);
  transition: opacity .42s var(--uit);
}
.kaart-beeld { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.kaart picture { display: block; }
.teken {
  width: 100%; height: auto; aspect-ratio: 4 / 3; color: var(--inkt);
  background: var(--papier) radial-gradient(rgba(18, 18, 20, .16) 1px, transparent 1.2px) 0 0 / 20px 20px;
}
.kaart-tekst { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 24px 32px 32px; }
.kaart-tekst p { color: var(--g600); }
.kaart-tekst .prijs { font: 500 .8125rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding-bottom: 16px; }
.kaart-tekst .knop { margin-top: auto; align-self: flex-start; }
/* Dienstenblok: de knoppen in blauw, zodat je ziet waar je kunt klikken. Blauw als tekst en rand, niet als vlak. */
#diensten .kaart .knop-tweede { color: var(--accent); border-color: var(--accent); }
@media (hover: hover) and (pointer: fine) { #diensten .kaart .knop-tweede:hover { background: var(--accent); color: var(--wit); border-color: var(--accent); } }
@media (min-width: 600px) and (max-width: 899px) {
  .kaart { flex-direction: row; }
  .kaart > picture, .kaart > .teken { flex: 0 0 42%; width: 42%; }
  .kaart-beeld, .teken { height: 100%; aspect-ratio: auto; min-height: 220px; }
}
@media (min-width: 900px) {
  .kaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (hover: hover) and (pointer: fine) {
  .kantel:hover .kaart {
    transform: rotateX(calc(var(--my, 0) * -4deg)) rotateY(calc(var(--mx, 0) * 4deg));
    transition: transform .22s var(--uit), border-color .12s var(--standaard);
    border-color: var(--g300);
  }
  .kantel:hover .kaart::before { opacity: 1; }
}

/* Werk */
.collage { display: flex; flex-direction: column; align-items: center; gap: 28px; margin-top: 40px; }
.collage figure {
  width: min(94%, 440px); background: var(--wit); border: 1px solid var(--g200); border-radius: var(--radiusKaart);
  overflow: hidden; transition: transform .42s var(--uit);
}
.collage figure:nth-child(1) { transform: rotate(-3deg); }
.collage figure:nth-child(2) { transform: rotate(2.5deg); }
.collage img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; width: 100%; }
.js .prent.r { transition: opacity .9s var(--uit), translate .9s var(--uit), transform .42s var(--uit); }
.js .collage figure.r { transition: opacity .9s var(--uit), translate .9s var(--uit), transform .42s var(--uit); }
.collage figcaption { display: grid; gap: 2px; padding: 14px 18px 12px; }
.collage figcaption span { font: 500 .75rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--g600); }
.collage figcaption strong { font-family: var(--display); font-weight: 500; font-size: 1.125rem; line-height: 1.25; }
.collage figcaption .link { font-size: .9375rem; justify-self: start; }
.citaat { margin-top: 56px; max-width: 44ch; }
.citaat blockquote { margin-bottom: 10px; font-family: var(--display); font-weight: 500; font-size: 1.3125rem; line-height: 1.25; letter-spacing: -.015em; }
/* Twee citaten naast elkaar vanaf 900 breed, daaronder onder elkaar */
.citaten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px clamp(32px, 6vw, 96px); margin-top: 56px; align-items: start; }
.citaten .citaat { margin-top: 0; }
@media (min-width: 900px) { .citaten { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 88px; } }
/* Blauwe aanhalingstekens; het openingsteken hangt in de marge, zodat de tekst links uitlijnt met het bijschrift. */
.citaat blockquote { text-indent: -.46em; }
.citaat blockquote::before { content: "\201C"; color: var(--accent); }
.citaat blockquote::after { content: "\201D"; color: var(--accent); }
.citaat figcaption, .maak { font: 500 .8125rem/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--g600); }
.maak { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--g300); }
@media (min-width: 900px) {
  .collage { flex-direction: row; justify-content: center; align-items: flex-start; gap: 0; }
  .collage figure { margin: 0 1%; width: min(46%, 500px); }
  .collage figure:nth-child(2) { transform: rotate(2.5deg) translateY(36px); }
  .citaat { margin-top: 88px; }
}
@media (hover: hover) and (pointer: fine) {
  .collage figure:hover { transform: rotate(0deg) translateY(-8px); }
}

/* Waarom: de foto van Amsterdam, schermvullend met een donkere waas. Het ene donkere blok. */
.waarom { position: relative; isolation: isolate; overflow: hidden; background: var(--nacht); color: var(--creme); padding-block: clamp(72px, 10vw, 144px); }
.waarom-foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.waarom::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(11, 11, 12, .8); }
.waarom .breed { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px clamp(32px, 6vw, 96px); align-items: start; }
.waarom .label { color: var(--creme); margin-bottom: 20px; }
.waarom .label::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 10px; vertical-align: middle; }
.waarom h2 { max-width: none; }
.waarom h2 .zacht { color: var(--cremeGedempt); }
.waarom .t { margin: 24px 0 32px; max-width: 52ch; color: rgba(244, 240, 232, .88); }
.punten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 24px; margin-bottom: 40px; font-size: .9375rem; }
.punten li { display: flex; align-items: center; gap: 14px; }
.punten li::before { content: ""; width: 24px; height: 1px; background: var(--creme); opacity: .6; flex: none; }
.acties { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 12px; }
.tegels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tegel {
  position: relative; isolation: isolate; flex: 1; min-width: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: 16px; min-height: 148px; padding: 22px 20px;
  border-radius: var(--radiusKaart); border: 1px solid var(--lijnNacht);
  background: rgba(244, 240, 232, .08); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: transform .42s var(--uit), border-color .12s var(--standaard);
}
.tegel::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none;
  background: radial-gradient(420px circle at var(--px, 50%) var(--py, 50%), rgba(244, 240, 232, .14), transparent 45%);
  transition: opacity .42s var(--uit);
}
.tegel b { font-family: var(--display); font-weight: 500; font-size: clamp(1.75rem, 3.4vw, 2.75rem); line-height: 1; letter-spacing: -.025em; }
.tegel b.woord { font-size: clamp(1.375rem, 2.3vw, 2rem); padding-top: .2em; }
.tegel span { font-size: .9375rem; line-height: 1.4; max-width: 15ch; color: rgba(244, 240, 232, .86); }
.bron { margin-top: 24px; font: 400 .75rem/1.5 var(--mono); color: rgba(244, 240, 232, .8); }
.bron a { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 560px) {
  .punten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tegel { min-height: 176px; padding: 26px 28px; }
}
@media (min-width: 900px) {
  .waarom .breed { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
@media (hover: hover) and (pointer: fine) {
  .kantel:hover .tegel {
    transform: rotateX(calc(var(--my, 0) * -4deg)) rotateY(calc(var(--mx, 0) * 4deg));
    transition: transform .22s var(--uit), border-color .12s var(--standaard);
    border-color: rgba(244, 240, 232, .28);
  }
  .kantel:hover .tegel::before { opacity: 1; }
}

/* Wat je krijgt: het ene donkere blok op een dienstpagina. Tegels van matglas met een groot nummer;
   het blauw is alleen de streep onder het nummer (ADR-029, kiesronde 9B). */
.wat { position: relative; isolation: isolate; overflow: hidden; background: var(--nacht); color: var(--creme); padding-block: clamp(72px, 10vw, 128px); }
.wat::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(rgba(244, 240, 232, .16) 1px, transparent 1.2px) 0 0 / 20px 20px;
  -webkit-mask-image: linear-gradient(120deg, #000, transparent 70%); mask-image: linear-gradient(120deg, #000, transparent 70%);
}
.wat .breed { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px clamp(32px, 6vw, 96px); align-items: start; }
.wat .label { color: var(--creme); margin-bottom: 20px; }
.wat .label::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 10px; vertical-align: middle; }
.wat h2 { max-width: 12ch; font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1; letter-spacing: -.035em; }
.wat h2 .zacht { color: var(--cremeGedempt); }
.wat .prijsregel { margin-top: 32px; max-width: 44ch; font-size: .9375rem; color: rgba(244, 240, 232, .8); }
.rijtegels { display: grid; gap: 10px; }
.wat .tegel { flex-direction: row; align-items: flex-start; gap: 22px; min-height: 0; padding: 24px 22px; }
.wat .tegel b { flex: 0 0 auto; min-width: 2.2ch; font-size: clamp(2rem, 3.4vw, 2.75rem); }
.wat .tegel b::after { content: ""; display: block; width: 28px; height: 3px; margin-top: 14px; background: var(--accent); }
.wat .tegel > div { display: grid; gap: 6px; min-width: 0; }
.wat .tegel p { font-size: .9375rem; line-height: 1.5; color: rgba(244, 240, 232, .86); max-width: 38ch; }
@media (min-width: 560px) { .wat .tegel { padding: 26px 28px; } }
@media (min-width: 900px) { .wat .breed { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }

/* Contact */
.contact { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px clamp(32px, 6vw, 96px); align-items: start; }
.contact .label { margin-bottom: 12px; }
.contact .t { margin: 16px 0 28px; max-width: 38ch; color: var(--g600); }
.contact .t a { white-space: nowrap; }
.formulier { display: grid; gap: 14px; padding: 24px; background: var(--wit); border: 1px solid var(--g200); border-radius: var(--radiusKaart); }
.formulier .label { margin-bottom: 2px; }
.veld { display: grid; gap: 6px; font-size: .9375rem; }
.veld input, .veld textarea {
  width: 100%; font: inherit; font-size: 1.0625rem; color: var(--inkt); background: var(--wit);
  border: 1px solid var(--g500); border-radius: var(--radiusKlein); min-height: 48px; padding: 11px 14px;
  transition: border-color .12s var(--standaard);
}
.veld textarea { min-height: 112px; resize: vertical; }
.veld input:focus-visible, .veld textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radiusKlein); }
.veld [aria-invalid="true"] { border-color: var(--inkt); border-width: 2px; }
.veld .fout { color: var(--inkt); font-weight: 500; }
.veld .fout::before { content: "Let op: "; }
.pot { position: absolute; left: -9999px; }
.formulier .knop { justify-self: start; }
.status { font-size: .9375rem; line-height: 1.5; color: var(--g600); }
.status.goed, .status.mis { color: var(--inkt); font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .veld input:hover, .veld textarea:hover { border-color: var(--inkt); } }
@media (min-width: 560px) { .formulier { padding: 32px; } }
@media (min-width: 900px) { .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ── Onderdelen van de andere pagina's ───────────────── */
/* Eén beeld naast de kop, schuin zoals de kaarten met werk */
.prent { width: 100%; max-width: 520px; margin-inline: auto; transform: rotate(2.5deg); transition: transform .42s var(--uit); }
.prent.kader { background: var(--wit); border: 1px solid var(--g200); border-radius: var(--radiusKaart); overflow: hidden; }
.prent.links { transform: rotate(-3deg); }
.prent img { width: 100%; }
/* Dienstbeelden (ADR-030): de bron is 1024 breed, dus nooit breder tonen dan 512 css-pixels. */
.prent.dienstbeeld { max-width: 512px; }
.prent.dienstbeeld img { aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 599px) { .kaarten { max-width: 512px; margin-inline: auto; } }
@media (min-width: 900px) { .prent { max-width: none; } }
@media (hover: hover) and (pointer: fine) { .prent:hover { transform: rotate(0deg) translateY(-8px); } }

/* Kop links, tekst rechts */
.duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px clamp(32px, 6vw, 96px); align-items: start; }
.duo .label { margin-bottom: 12px; }
.duo .t { max-width: 52ch; color: var(--g600); }
.duo .t + .link-rij, .duo .t + .acties { margin-top: 16px; }
@media (min-width: 900px) { .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .duo .t { padding-top: 30px; } }

/* Rijen: een genummerde lijst als grote regels, met lijnen en een kruisje aan beide einden (ADR-031, kiesronde 10A) */
.tel { font: 500 .8125rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--g600); }
.rijen { margin-top: 40px; border-top: 1px solid var(--g300); }
.rijen > li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 32px; padding: 26px 0 28px; border-bottom: 1px solid var(--g300); }
.rijen > li::before, .rijen > li::after { content: "+"; position: absolute; bottom: -.72em; font: 400 1rem/1 var(--mono); color: var(--g500); background: var(--papier); padding: 0 6px; }
.rijen > li::before { left: -6px; padding-left: 0; }
.rijen > li::after { right: -6px; padding-right: 0; }
.rijen > li .tel { padding-top: .5em; color: var(--accent); }
.rijen > li h3 { font-family: var(--display); font-weight: 500; text-transform: uppercase; font-size: clamp(1.875rem, 4.6vw, 3.75rem); line-height: 1; letter-spacing: -.035em; transition: transform .42s var(--uit); }
.rijen > li p { color: var(--g600); max-width: 40ch; align-self: end; }
@media (min-width: 900px) { .rijen > li { grid-template-columns: 4.5rem minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } }
@media (hover: hover) and (pointer: fine) { .rijen > li:hover h3 { transform: translateX(14px); } }
@media (prefers-reduced-motion: reduce) { .rijen > li h3 { transition: none; } .rijen > li:hover h3 { transform: none; } }

/* Pakketten en extra's */
.kaarten.vier { grid-template-columns: minmax(0, 1fr); }
.pakket .kaart-tekst { gap: 6px; padding: 28px 28px 32px; }
.bedrag { font-family: var(--display); font-weight: 500; font-size: clamp(2.25rem, 3.4vw, 2.75rem); line-height: 1.1; letter-spacing: -.025em; color: var(--inkt); }
.kaart-tekst .bedrag { color: var(--inkt); }
.bedrag small { display: block; margin-top: 4px; font: 500 .8125rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--g600); }
.pakket .bedrag { padding-bottom: 8px; }
#prijzen .pakket .kaart-tekst > p:not(.bedrag) { padding-bottom: 18px; }
/* Het uitgelichte pakket: een blauwe rand en de enige blauwe knop van het blok. */
.kaart.uitgelicht { border: 2px solid var(--accent); }
.kaart.uitgelicht .kaart-tekst { padding: 27px 27px 31px; }
@media (hover: hover) and (pointer: fine) { .kantel:hover .kaart.uitgelicht { border-color: var(--accent); } }
.blauw { color: var(--accent); }
/* Kaart met een groot nummer en een blauwe streep (kiesronde 12C) */
.nrkaart .kaart-tekst { gap: 10px; }
.nrkaart .groot { font-family: var(--display); font-weight: 500; font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1; letter-spacing: -.025em; color: var(--inkt); }
.nrkaart .groot::after { content: ""; display: block; width: 28px; height: 3px; margin: 12px 0 18px; background: var(--accent); }
@media (min-width: 600px) { .kaarten.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .kaarten.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tussenkop { margin-top: 56px; }
.extras { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 48px; margin: 12px 0 40px; }
.extras div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 24px; padding: 14px 0; border-bottom: 1px solid var(--g200); }
.extras dd { margin: 0; color: var(--g600); }
@media (min-width: 600px) { .extras div { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } .extras dd { text-align: right; } }
@media (min-width: 1000px) { .extras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Wie je spreekt */
.wie { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px clamp(32px, 6vw, 96px); align-items: center; }
.wie img { width: 100%; max-width: 420px; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 12%; border-radius: var(--radiusKaart); }
.wie .label { margin-bottom: 12px; }
.wie .t { margin-top: 16px; max-width: 52ch; color: var(--g600); }
@media (min-width: 800px) { .wie { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.slot { margin-top: 32px; max-width: 52ch; }

/* Veelgestelde vragen */
.vragen { margin-top: 32px; border-top: 1px solid var(--g300); max-width: 800px; }
.vraag { border-bottom: 1px solid var(--g300); }
.vraag summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; padding: 16px 0; cursor: pointer; list-style: none; font-family: var(--display); font-weight: 500; font-size: 1.3125rem; line-height: 1.25; letter-spacing: -.015em; }
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary::after { content: ""; flex: none; width: 13px; height: 13px; background: linear-gradient(var(--inkt), var(--inkt)) center / 100% 1px no-repeat, linear-gradient(var(--inkt), var(--inkt)) center / 1px 100% no-repeat; transition: transform .22s var(--uit); }
.vraag[open] summary::after { transform: rotate(45deg); }
.vraag p { padding: 0 0 24px; max-width: 60ch; color: var(--g600); }

/* Lange tekst: privacy en voorwaarden */
.lang { padding-block: clamp(40px, 5vw, 64px) var(--blok); }
.lang .breed { max-width: 760px; }
.lang .label { margin-bottom: 16px; }
.lang h1 { font-size: clamp(2rem, 8vw, 4.5rem); line-height: .95; letter-spacing: -.035em; margin-bottom: 32px; }
.lang h2 { font-size: 1.3125rem; line-height: 1.25; letter-spacing: -.015em; text-transform: none; max-width: none; margin: 40px 0 8px; }
.lang p, .lang ul { max-width: 66ch; }
.lang p + p, .lang ul + p, .lang p + ul { margin-top: 12px; }
.lang ul { padding-left: 20px; list-style: disc; display: grid; gap: 6px; }
.lang a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.lang .inleiding { margin-top: 0; max-width: 60ch; }
.lang .laatste { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--g300); font-size: .9375rem; color: var(--g600); }

/* Voet */
.voet { border-top: 1px solid var(--g200); padding-block: 40px 48px; font-size: .9375rem; color: var(--g600); }
.voet .breed { display: grid; gap: 28px; }
.voet .logo { height: 28px; color: var(--inkt); }
.voet-rij { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; }
.voet-links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.voet a { display: inline-flex; align-items: center; min-height: 44px; color: var(--inkt); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--g400); }
.voet-klein { padding-top: 20px; border-top: 1px solid var(--g200); }
@media (hover: hover) and (pointer: fine) { .voet a:hover { text-decoration-color: currentColor; } }

/* ── Beweging: alleen als de bezoeker dat wil, en alleen als het script draait ── */
@keyframes omhoog { from { transform: translateY(105%); } to { transform: none; } }
@keyframes in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes beeldin { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: no-preference) {
  h1 .regel > span { animation: omhoog .9s var(--uit) both; }
  h1 .regel:nth-child(2) > span { animation-delay: .1s; }
  h1 .regel:nth-child(3) > span { animation-delay: .2s; }
  h1 .regel:nth-child(4) > span { animation-delay: .3s; }
  .opening .label, .opening .onder { animation: in .8s var(--uit) both; }
  .opening .onder { animation-delay: .45s; }
  .toneel .a { animation: beeldin .9s var(--uit) .25s both; }
  .toneel .b { animation: beeldin .9s var(--uit) .45s both; }
  .opening .prent { animation: beeldin .9s var(--uit) .25s both; }

  .js .r { opacity: 0; translate: 0 24px; transition: opacity .9s var(--uit), translate .9s var(--uit); }
  .js .r.on { opacity: 1; translate: 0 0; }
  .js .r[data-d="1"] { transition-delay: .08s; }
  .js .r[data-d="2"] { transition-delay: .16s; }
  .js .r[data-d="3"] { transition-delay: .24s; }
  .js h2.schuif .regel > span { transform: translateY(105%); transition: transform .9s var(--uit); }
  .js h2.schuif .regel:nth-child(2) > span { transition-delay: .1s; }
  .js h2.schuif.on .regel > span { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .toneel figure, .collage figure, .prent, .kaart, .tegel, .kaart::before, .tegel::before, .vraag summary::after { transition: none; }
  .prent:hover { transform: rotate(2.5deg); }
  .prent.links:hover { transform: rotate(-3deg); }
  .kantel:hover .kaart, .kantel:hover .tegel { transform: none; }
  .kantel:hover .kaart::before, .kantel:hover .tegel::before { opacity: 0; }
  .toneel .a:hover { transform: rotate(-3deg); }
  .toneel .b:hover { transform: rotate(4deg); }
  .collage figure:nth-child(1):hover { transform: rotate(-3deg); }
  .collage figure:nth-child(2):hover { transform: rotate(2.5deg); }
  .balk nav a:not(.knop)::after { transition: none; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 900px) {
  .collage figure:nth-child(2):hover { transform: rotate(2.5deg) translateY(36px); }
}

/* Cookiemelding: een mededeling onderaan, geen toestemming. De site plaatst geen volgcookies. */
.melding { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; max-width: 460px; padding: 16px 16px 16px 20px; background: var(--wit); border: 1px solid var(--g300); border-radius: var(--radiusKaart); font-size: .9375rem; line-height: 1.5; }
.melding p { flex: 1 1 220px; color: var(--g600); }
.melding .knop { flex: 0 0 auto; }