@font-face { font-family: "Juturu"; src: url("fonts/juturu-900.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --canvas: #00013b;
  --surface: #0c0e4a;
  --surface-2: #151862;
  --line: #262966;
  --ink: #ffffff;
  --ink-soft: #a9aecb;
  --action: #f74471;
  --groen: #2a9d8c; /* Growetic-groen, lichter gezet voor navy (5,9:1) */
  --groen-balk: #126e63;
  --on-action: #ffffff;
  --action-fill: #d92657;
  --action-fill-hover: #c81f4d;
  --form-bg: #00002e; --placeholder: #8f95bd; --ink-uit: #7d83ad; --fout: #f74471; --wit-rand: transparent;
  --ease: cubic-bezier(.455,.03,.515,.955);
  --ease-out: cubic-bezier(.165,.84,.44,1);
  --container: 1440px;
  --gutter: 32px;
  --section: 80px;
  --sc-canvas: #00013b; --sc-surface: #0c0e4a; --sc-ink: #ffffff; --sc-ink-soft: #a9aecb; --sc-accent: #f74471; --sc-accent-ink: #00013b;
  --sc-font-display: "Geist", system-ui, sans-serif; --sc-font-text: "Geist", system-ui, sans-serif; --sc-font-mono: "Geist Mono", ui-monospace, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; overflow-x: clip; letter-spacing: normal; background: var(--canvas); color: var(--ink); font: 400 16px/1.6 "Geist", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--action); outline-offset: 3px; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--action-fill); color: var(--on-action); padding: 10px 16px; border-radius: 4px; font-weight: 500; text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.sec { padding: var(--section) 0; }

h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
.h1, .h2, .h2s, .aank__groot, .mk__cijfer, .case__cijfer { font-family: "Juturu", "Geist", sans-serif; font-weight: 900; letter-spacing: -0.005em; }
.h1 { font-size: 88px; line-height: 1; }
.h2 { font-size: 60px; line-height: 1.02; }
.h2s { font-size: 44px; line-height: 1.04; }
.h3 { font-size: 32px; line-height: 1.15; }
.lead { font-size: 20px; line-height: 1.4; font-weight: 500; }
.soft { color: var(--ink-soft); }
.small { font-size: 14px; line-height: 1.4; }
p { margin: 0; }

/* knoppen */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 51px; padding: 16px 24px; border: 0; border-radius: 4px; font: 500 16px/1.2 "Geist", sans-serif; letter-spacing: -0.01em; text-decoration: none; cursor: pointer; transition: box-shadow .3s var(--ease-out), background-color .3s var(--ease); }
.btn--action { background: var(--action-fill); color: var(--on-action); }
.btn--action:hover { background: var(--action-fill-hover); box-shadow: 0 0 0 4px rgba(217,38,87,.25); }
.btn--dark { background: var(--surface); color: var(--ink); }
.btn--dark:hover { background: var(--surface-2); }
.btn--sm { min-height: 40px; padding: 10px 18px; }
.tlink { font-weight: 500; text-underline-offset: 4px; }
.tlink:hover { color: var(--action); }

/* aankondiging */
.bar { display: block; background: var(--groen-balk); color: rgba(255,255,255,.86); text-align: center; font-size: 13px; font-weight: 400; padding: 9px var(--gutter); text-decoration: none; border-bottom: 0; }
.bar b { color: #fff; font-weight: 500; }
.bar span { color: #fff; margin-left: 6px; }
.bar:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* nav */
.nav { position: sticky; top: 0; z-index: 50; background: var(--canvas); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; height: 67px; gap: 32px; }
.nav__logo img { height: 34px; width: auto; filter: brightness(0) invert(1); }
.nav__links { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav__links a, .nav__right a:not(.btn) { text-decoration: none; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); transition: color .3s var(--ease); }
.nav__links a:hover, .nav__right a:not(.btn):hover { color: var(--ink-soft); }
.nav__right { margin-left: auto; display: flex; align-items: center; gap: 24px; }
.nav__taal { font-size: 14px; }
.nav__taal span { color: var(--ink-soft); }
.nav__menu { display: none; background: none; border: 0; color: var(--ink); padding: 8px; margin-left: 4px; cursor: pointer; }

/* hero */
.hero { padding: 80px 0 0; }
.hero__grid { display: grid; grid-template-columns: 9fr 3fr; align-items: end; gap: 32px; }
.hero__kicker { margin: 0 0 14px; font-family: "Juturu", "Geist", sans-serif; font-weight: 900; font-size: 40px; line-height: 1.05; letter-spacing: -0.005em; color: var(--groen); word-spacing: .18em; }
.groen { font-style: normal; color: var(--groen); }
/* typemachine: woorden van de kicker een voor een, dan de kop letter voor letter (zoals de huidige growetic.nl) */
.tm .tm-w, .tm .tm-l { opacity: 0; animation: tmIn .01s linear forwards; animation-delay: var(--d); }
.tm .tm-woord { white-space: nowrap; }
.tm-cursor { display: inline-block; width: .06em; height: .9em; margin-left: .04em; vertical-align: -.08em; background: currentColor; animation: tmKnip .8s steps(1) infinite; animation-delay: var(--d); opacity: 0; }
@keyframes tmIn { to { opacity: 1; } }
@keyframes tmKnip { 0% { opacity: 1; } 50% { opacity: 0; } }
@media (max-width: 767px) { .hero__kicker { font-size: 28px; } }
.hero h1 { animation: inschaal 1.2s var(--ease) both; padding-bottom: .12em; }
.hero__sub { max-width: 40ch; margin-top: 24px; animation: infade 1.2s var(--ease) .15s both; }
.hero__knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; animation: infade 1.2s var(--ease) .3s both; }
.hero__zij { justify-self: end; text-align: right; max-width: 30ch; animation: infade 1.2s var(--ease) .45s both; }
@keyframes inschaal { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: none; } }
@keyframes infade { from { opacity: 0; } to { opacity: 1; } }

.marquee { position: relative; margin-top: 64px; overflow: hidden; animation: infade 1.2s var(--ease) .6s both; }
.marquee::before, .marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 18%; z-index: 2; pointer-events: none; }
.marquee::before { left: 0; background: linear-gradient(90deg, var(--canvas), transparent); }
.marquee::after { right: 0; background: linear-gradient(-90deg, var(--canvas), transparent); }
.marquee__rij { display: flex; gap: 32px; width: max-content; align-items: flex-start; padding: 8px 0 64px; animation: loop 70s linear infinite; }
.marquee:hover .marquee__rij, .marquee:focus-within .marquee__rij { animation-play-state: paused; }
@keyframes loop { to { transform: translateX(-50%); } }
.mk { width: 260px; flex: none; }
.mk__vlak { border-radius: 8px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.mk__onder { margin-top: 14px; text-align: center; font-size: 14px; font-weight: 500; line-height: 1.4; }
.mk--hoog .mk__vlak { height: 340px; position: relative; }
.mk--hoog img { width: 100%; height: 100%; object-fit: cover; }
.mk--hoog .mk__over { color: #fff; position: absolute; inset: auto 0 0 0; padding: 20px; background: linear-gradient(transparent, rgba(0,0,0,.72)); }
.mk__cijfer { font-size: 48px; line-height: 1; }
.mk--shot .mk__vlak { height: 200px; }
.mk--shot img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.mk--wit .mk__vlak { background: #fff; color: #00013b; border-color: var(--wit-rand); }

/* quickscan mini-tabel (ook in het formulier) */
.scan { font-size: 14px; font-variant-numeric: tabular-nums; padding: 16px; }
.scan__rij { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.scan__rij:last-child { border-bottom: 0; }
.scan__balk { grid-column: 1 / -1; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.scan__balk i { display: block; height: 100%; background: var(--ink-soft); }
.scan__balk i.lo { background: var(--action); }
.prijs { padding: 20px; }
.prijs__r { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #e3e5ee; font-size: 14px; }
.prijs__r:last-child { border-bottom: 0; }
.prijs__r b { font-weight: 600; }
.bel { padding: 20px; display: grid; gap: 12px; }
.bel__r { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.bel__ic { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; }

/* feitenband (op de plek van de logo-rail) */
.feiten { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* USP-balk variant A (iconen-bibliotheek/componenten), iconen: Lucide (ISC) */
.feiten { --usp-kleur: var(--action); --usp-tint: rgba(247, 68, 113, .14); }
:root[data-thema="licht"] .feiten { --usp-kleur: #d92657; --usp-tint: #fde9ef; }
.feiten ul { list-style: none; margin: 0; padding: 28px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 32px; }
.feiten li { display: flex; align-items: center; gap: 14px; color: var(--ink-soft); font-size: 14px; line-height: 1.4; }
.feiten__icoon { flex: none; width: 44px; height: 44px; border-radius: 10px; background: var(--usp-tint); color: var(--usp-kleur); display: flex; align-items: center; justify-content: center; }
.feiten b { display: block; color: var(--ink); font-size: 18px; font-weight: 500; line-height: 1.3; margin-bottom: 2px; }

/* aankondiging + browserkader */
.aank { text-align: center; }
.aank__klein { font-size: 20px; font-weight: 500; color: var(--ink-soft); }
.aank__groot { font-size: 88px; line-height: 1; margin: 8px 0; }
.kader { margin-top: 48px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
.kader__scherm { position: relative; height: min(62vw, 640px); background: var(--surface); display: grid; place-items: center; padding: 48px 48px 0; }
.browser { width: min(100%, 980px); height: 100%; border-radius: 8px 8px 0 0; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.browser__top { flex: none; height: 36px; padding-block: 7px; background: #eef0f6; display: flex; align-items: center; gap: 6px; padding: 0 14px; }
.browser__top i { width: 10px; height: 10px; border-radius: 50%; background: #c9cddb; }
.browser__url { margin-left: 14px; flex: 1; max-width: 340px; height: 22px; border-radius: 4px; background: #fff; color: #5b6180; font-size: 13px; line-height: 22px; padding: 0 10px; }
.browser__view { flex: 1; overflow: hidden; }
.browser__view img { width: 100%; animation: pan 26s var(--ease) infinite alternate; }
@keyframes pan { 0%, 8% { transform: translateY(0); } 92%, 100% { transform: translateY(calc(-100% + 560px)); } }
.kader__balk { display: flex; justify-content: center; padding: 18px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 500; }

/* split */
.split { display: grid; grid-template-columns: 5fr 1fr 6fr; gap: 0; padding-top: 48px; }
.split__icoon { width: 56px; height: 56px; border-radius: 12px; background: #fff; border: 1px solid var(--wit-rand); display: grid; place-items: center; margin-bottom: 24px; }
.split__links .h3 { max-width: 16ch; }
.split__links p { margin-top: 16px; max-width: 42ch; }
.split__links .btn { margin-top: 28px; }
.stappen { grid-column: 3; list-style: none; margin: 0; padding: 0; }
.stappen li { display: flex; gap: 14px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); }
.stappen li span { flex: none; width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 4px; font-size: 13px; display: grid; place-items: center; color: var(--ink-soft); transform: translateY(4px); }

/* klanten-carrousel */
.kop-rij { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.kop-rij .h2 { max-width: 24ch; }
.pijlen { display: flex; gap: 8px; }
.rond { width: 36px; height: 36px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: #fff; color: #00013b; transition: opacity .3s var(--ease); }
.rond:disabled { background: var(--line); color: var(--ink-soft); cursor: default; }
.carrousel { margin-top: 48px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.carrousel::-webkit-scrollbar { display: none; }
.carrousel__rij { display: flex; gap: 16px; padding-right: 30vw; }
.case { color: #fff; position: relative; flex: none; width: min(80vw, 464px); height: 696px; border-radius: 4px; overflow: hidden; scroll-snap-align: start; background: var(--surface); }
.case > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case--shot > img { object-position: top; }
.case::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.45), transparent 22%, transparent 42%, rgba(0,0,0,.85)); }
.case__top { position: absolute; z-index: 1; top: 24px; left: 0; right: 0; text-align: center; font-weight: 600; font-size: 20px; }
.case__onder { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 28px 28px 32px; }
.case__cijfer { font-size: 52px; line-height: 1; }
.case__regel { font-weight: 500; margin-top: 6px; }
.case__citaat { margin-top: 18px; max-width: 36ch; }
.case__wie { margin-top: 18px; font-size: 14px; font-weight: 500; }
.case__wie small { display: block; font-weight: 400; color: rgba(255,255,255,.78); font-size: 13px; }
.case--jouw { background: var(--action-fill); color: var(--on-action); display: flex; flex-direction: column; justify-content: space-between; padding: 32px; }
.case--jouw::after { display: none; }
.case--jouw .h3 { max-width: 12ch; }
.case--jouw .btn { background: #fff; color: #00013b; align-self: flex-start; }
.onder-regel { text-align: center; margin-top: 40px; font-size: 14px; }

/* formulier + voorbeeld */
.fp { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; margin-top: 48px; }
.fp__kop .h2 { max-width: 14ch; }
.fp__kop p { margin-top: 20px; max-width: 46ch; }
.form { margin-top: 40px; background: var(--form-bg); border: 1px solid var(--line); border-radius: 8px; padding: 32px; }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
.veld label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 8px; }
.veld input { width: 100%; height: 56px; border-radius: 4px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 400 16px "Geist", sans-serif; padding: 0 16px; }
.veld input::placeholder { color: var(--placeholder); }
.veld input:focus { outline: none; border-color: var(--action); }
.veld .fout { display: none; color: var(--fout); font-size: 13px; margin-top: 6px; }
.veld[data-fout] .fout { display: block; }
.form .btn { margin-top: 28px; }
.form__onder { margin-top: 20px; font-size: 14px; color: var(--ink-soft); max-width: 52ch; }
.stap[hidden] { display: none; }
.kiezen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.kiezen label { cursor: pointer; }
.kiezen input { position: absolute; opacity: 0; pointer-events: none; }
.kiezen span { display: inline-block; padding: 10px 14px; border: 1px solid var(--line); border-radius: 4px; font-size: 14px; font-weight: 500; transition: background-color .2s var(--ease), border-color .2s var(--ease); }
.kiezen input:checked + span { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
.kiezen input:focus-visible + span { outline: 2px solid var(--action); outline-offset: 2px; }
.stap h3 { font-size: 20px; font-weight: 500; }
.stap h3 + .kiezen + h3 { margin-top: 28px; }
.knoppen-rij { display: flex; gap: 12px; align-items: center; margin-top: 28px; }
.knoppen-rij .btn { margin: 0; }
.bedankt { font-size: 20px; font-weight: 500; line-height: 1.4; }
.app { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; color: #00013b; }
.app__top { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: #eef0f6; font-size: 14px; font-weight: 500; }
.app__top span { color: #5b6180; font-weight: 400; }
.app .scan { padding: 12px 24px 4px; font-size: 14px; }
.app .scan__rij { border-color: #e3e5ee; padding: 14px 0; }
.app .scan__balk { background: #e3e5ee; height: 6px; }
.app .scan__balk i { background: #00013b; }
.app .scan__balk i.lo { background: var(--action); }
.app__punt { margin: 8px 24px 24px; padding: 16px; border-radius: 4px; background: #fff0f4; color: #7a1030; font-size: 15px; line-height: 1.5; }
.app__label { padding: 0 24px 20px; font-size: 13px; color: #5b6180; }

/* prijzen (op de plek van Recent updates) */
/* prijzen: tabs per dienst, kaarten met wat er inbegrepen is (inhoud van growetic.nl/pricing) */
.pk-kop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.pk-tabs { display: inline-flex; padding: 4px; gap: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.pk-tab { appearance: none; border: 0; background: transparent; color: var(--ink-soft); font: 500 15px/1 "Geist", sans-serif; padding: 12px 20px; border-radius: 999px; cursor: pointer; transition: background-color .25s var(--ease), color .25s var(--ease); }
.pk-tab:hover { color: var(--ink); }
.pk-tab[aria-selected="true"] { background: var(--ink); color: var(--canvas); }
.pk-tab:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.pk-panelen { margin-top: 40px; }
.pk-paneel { display: grid; gap: 16px; align-items: stretch; }
.pk-paneel--4 { grid-template-columns: repeat(4, 1fr); }
.pk-paneel--3 { grid-template-columns: repeat(3, 1fr); }
.pk-paneel[hidden] { display: none; }
.pk-paneel:not([hidden]) .pk { animation: pkIn .5s var(--ease-out) both; }
.pk-paneel:not([hidden]) .pk:nth-child(2) { animation-delay: .05s; } .pk-paneel:not([hidden]) .pk:nth-child(3) { animation-delay: .1s; } .pk-paneel:not([hidden]) .pk:nth-child(4) { animation-delay: .15s; }
@keyframes pkIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pk { position: relative; display: flex; flex-direction: column; padding: 28px 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.pk--pop { border-color: var(--groen); box-shadow: 0 0 0 1px var(--groen); }
.pk__kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; }
.pk__naam { font-size: 20px; font-weight: 600; line-height: 1.2; }
.pk__tag { line-height: 1; font-size: 12px; font-weight: 600; letter-spacing: .02em; padding: 5px 10px; border-radius: 999px; background: var(--groen); color: #fff; }
:root:not([data-thema="licht"]) .pk__tag { color: #00013b; }
.pk__oms { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); min-height: 3em; }
.pk__prijs { margin: 24px 0 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; }
.pk__prijs small { flex-basis: 100%; font-size: 13px; color: var(--ink-soft); margin-bottom: 2px; }
.pk__prijs b { font-family: "Juturu", "Geist", sans-serif; font-weight: 900; font-size: 46px; line-height: 1; letter-spacing: -0.005em; }
.pk__prijs span { font-size: 14px; color: var(--ink-soft); }
.pk__knop { margin-top: 24px; width: 100%; }
.pk .btn--dark { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.pk .btn--dark:hover { background: var(--canvas); box-shadow: inset 0 0 0 1px var(--ink-soft); }
.pk__plus { margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink); }
.pk__lijst { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.pk__lijst li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.pk__lijst svg { flex: none; margin-top: 2px; color: var(--groen); }
.pk-paneel__noot { grid-column: 1 / -1; margin: 8px 0 0; font-size: 14px; color: var(--ink-soft); }
.pk-eerst { margin-top: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; padding: 24px 28px; border: 1px dashed var(--line); border-radius: 12px; }
.pk-eerst__kop { margin: 0; font-size: 18px; }
.pk-eerst ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 32px; flex: 1; }
.pk-eerst li { display: flex; gap: 8px; font-size: 15px; color: var(--ink-soft); }
.pk-eerst li b { color: var(--ink); font-weight: 600; }
.prijzen__onder { margin-top: 20px; font-size: 13px; color: var(--ink-soft); }

/* 3D-rij */
.gebouwd { overflow: visible; }
.gebouwd .aank__groot { margin: 0; }
.gebouwd p { margin-top: 16px; }
.podium { height: 620px; perspective: 1800px; perspective-origin: 50% 30%; margin-top: 24px; position: relative; }
.podium__rij { position: absolute; left: 50%; top: 90px; display: flex; gap: 40px; transform-style: preserve-3d; transform: translateX(calc(-50% + var(--x, 0px))) rotateX(14deg) rotateY(-18deg) rotateZ(4deg); will-change: transform; }
.blad { width: 300px; height: 440px; flex: none; border-radius: 6px; overflow: hidden; background: #fff; box-shadow: 0 40px 60px rgba(0,0,0,.35); }
.blad img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.blad--jouw { background: var(--action-fill); color: var(--on-action); padding: 28px; display: flex; flex-direction: column; justify-content: flex-end; }
.blad--jouw b { display: block; font-size: 32px; line-height: 1.15; font-weight: 600; }

/* footer */
.foot { position: relative; padding: 96px 0 40px; overflow: hidden; }
.foot__kol { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; position: relative; z-index: 1; }
.foot h2 { font-size: 16px; font-weight: 500; margin-bottom: 16px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin: 0 0 8px; font-size: 14px; }
.foot li a, .foot li span { color: var(--ink-soft); text-decoration: none; }
.foot li a:hover { color: var(--ink); }
.foot__logo img { height: 30px; width: auto; filter: brightness(0) invert(1); }
.foot__onder { position: relative; z-index: 1; margin-top: 200px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; font-size: 13px; color: var(--ink-soft); }
.foot__onder a { color: var(--ink-soft); }
.foot__soc { display: flex; gap: 12px; }
.foot__soc span { display: inline-grid; place-items: center; width: 20px; height: 20px; color: var(--ink-soft); }
.foot__teken { position: absolute; right: max(-40px, calc((100vw - var(--container)) / 2 - 40px)); bottom: -120px; width: 560px; height: auto; color: var(--action); z-index: 0; }

/* ---- scène: Eerst zien. (scroll-craft pin) ---- */
.zien__stage { display: flex; align-items: center; }
.zien__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; width: 100%; }
.zien__stappen { list-style: none; margin: 48px 0 0; padding: 0; }
.zien__stappen li { display: grid; grid-template-columns: 28px 1fr; column-gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); color: var(--ink-uit); transition: color .5s var(--ease); }
.zien__stappen li span { color: var(--ink-uit); transition: color .5s var(--ease); }
.zien__stappen li::before { content: attr(data-i); grid-row: span 2; width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 4px; font-size: 13px; display: grid; place-items: center; transform: translateY(3px); transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease); }
.zien__stappen b { font-size: 20px; font-weight: 500; line-height: 1.4; }
.zien__stappen span { grid-column: 2; }
.zien[data-stap="1"] li[data-i="1"], .zien[data-stap="2"] li[data-i="2"], .zien[data-stap="3"] li[data-i="3"], .zien[data-stap="4"] li[data-i="4"] { color: var(--ink); }
.zien[data-stap="1"] li[data-i="1"] span, .zien[data-stap="2"] li[data-i="2"] span, .zien[data-stap="3"] li[data-i="3"] span, .zien[data-stap="4"] li[data-i="4"] span { color: var(--ink-soft); }
.zien[data-stap="1"] li[data-i="1"]::before, .zien[data-stap="2"] li[data-i="2"]::before, .zien[data-stap="3"] li[data-i="3"]::before, .zien[data-stap="4"] li[data-i="4"]::before { background: var(--action-fill); color: #fff; border-color: var(--action-fill); }
.zien__browser { height: auto; border-radius: 8px; border: 1px solid var(--line); }
.zien__view { flex: none; aspect-ratio: 16 / 10; max-height: calc(70svh - 36px); }
.zien__view { position: relative; background: #fff; color: #00013b; }
.laag { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s linear .6s; }
.zien[data-stap="1"] .laag--scan, .zien[data-stap="2"] .laag--bel, .zien[data-stap="3"] .laag--schets, .zien[data-stap="3"] .laag--site, .zien[data-stap="4"] .laag--site, .zien[data-stap="4"] .laag--teken { opacity: 1; visibility: visible; transition: opacity .6s var(--ease), visibility 0s; }
.laag--scan { padding: 32px 40px; }
.laag__kop { font-size: 24px; font-weight: 600; }
.laag--scan .scan { font-size: 14px; padding: 16px 0 0; }
.laag--scan .scan__rij { border-color: #e3e5ee; padding: 14px 0; }
.laag--scan .scan__balk { background: #e3e5ee; height: 6px; }
.laag--scan .scan__balk i { background: #00013b; }
.laag--scan .scan__balk i.lo { background: var(--action); }
.laag__punt { margin-top: 20px; padding: 16px; border-radius: 4px; background: #fff0f4; color: #7a1030; font-size: 16px; line-height: 1.5; }
.laag--bel { display: grid; place-items: center; background: #f4f5fa; }
.bel__kaart { text-align: center; }
.bel__ring { width: 88px; height: 88px; margin: 0 auto 20px; border-radius: 50%; background: #00013b; color: #fff; display: grid; place-items: center; }
.zien[data-stap="2"] .bel__ring { animation: ring 1.6s var(--ease) 2; }
@keyframes ring { 0%,100% { box-shadow: 0 0 0 0 rgba(247,68,113,.5); } 70% { box-shadow: 0 0 0 22px rgba(247,68,113,0); } }
.bel__naam { font-size: 32px; font-weight: 600; line-height: 1.2; }
.bel__rol { color: #5b6180; }
.bel__noot { margin-top: 18px; font-size: 14px; color: #5b6180; }
.laag--schets { background: #f4f5fa; padding: 28px; }
.schets { position: relative; height: 100%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 28px 1fr 22px 22px 40px 110px; gap: 14px; }
.schets i { border: 2px dashed #c3c7d8; border-radius: 4px; }
.s-nav, .s-hero, .s-kop, .s-tekst { grid-column: 1 / -1; }
.s-kop { width: 70%; } .s-kop--2 { width: 45%; } .s-tekst { width: 60%; }
.laag--site { overflow: hidden; clip-path: inset(0 0 calc((1 - var(--onthul, 0)) * 100%) 0); transition: none; }
.laag--site canvas { display: block; width: 100%; height: 100%; }
.laag--teken { display: flex; align-items: flex-end; justify-content: center; padding: 24px; }
.teken { width: min(100%, 440px); background: #fff; border-radius: 8px; padding: 24px 28px; box-shadow: 0 20px 50px rgba(0,0,0,.25); transform: translateY(calc((1 - var(--teken, 0)) * 40px)); }
.teken__kop { font-size: 20px; font-weight: 600; }
.teken__lijn { margin-top: 10px; border-bottom: 1px solid #c3c7d8; color: #00013b; }
.teken__lijn svg { width: 100%; height: 60px; }
.teken__pad { stroke-dasharray: 520; stroke-dashoffset: calc(520 - var(--teken, 0) * 520); }
.teken__onder { margin-top: 8px; font-size: 13px; color: #5b6180; }
.zien__label { margin-top: 14px; min-height: 1.4em; }
/* diensten + waarom (teksten van de huidige growetic.nl) */
.diensten__kop { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px 64px; align-items: end; }
.diensten__kop .lead { margin: 0; }
.diensten__rij { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
/* scroll: de kaarten draaien een voor een open, als een kaart die je omdraait (--d = 0 → 1, gezet door JS) */
.diensten__rij { perspective: 1400px; }
.dienst { --d: 1; transform-origin: 50% 100%; transform: translateY(calc((1 - var(--d)) * 60px)) rotateX(calc((1 - var(--d)) * 58deg)) rotateY(calc((1 - var(--d)) * -24deg)) scale(calc(.9 + var(--d) * .1)); opacity: calc(var(--d) * 1.4 - .2); will-change: transform; }
.dienst .feiten__icoon svg { transform: rotate(calc((1 - var(--d)) * -180deg)); }
@media (prefers-reduced-motion: reduce) { .dienst { transform: none; opacity: 1; } .dienst .feiten__icoon svg { transform: none; } }
.dienst { display: flex; flex-direction: column; gap: 12px; padding: 28px 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.dienst h3 { font-size: 20px; font-weight: 600; line-height: 1.3; margin-top: 8px; }
.dienst p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.55; flex: 1; }
.dienst__prijs { font-size: 14px; font-weight: 500; color: var(--ink); padding-top: 12px; border-top: 1px solid var(--line); }
.dienst .feiten__icoon, .waarom .feiten__icoon { --usp-kleur: var(--action); --usp-tint: rgba(247, 68, 113, .14); }
:root[data-thema="licht"] :is(.dienst, .waarom) .feiten__icoon { --usp-kleur: #d92657; --usp-tint: #fde9ef; }
.waarom { margin-top: 96px; display: grid; grid-template-columns: 1fr 2fr; gap: 32px 64px; }
.waarom__lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.waarom__lijst li { display: flex; gap: 14px; align-items: flex-start; color: var(--ink-soft); font-size: 15px; line-height: 1.55; }
.waarom__lijst b { display: block; color: var(--ink); font-size: 18px; font-weight: 500; margin-bottom: 4px; }
@media (max-width: 991px) { .diensten__kop, .waarom { grid-template-columns: 1fr; } .diensten__rij { grid-template-columns: 1fr 1fr; } .waarom { margin-top: 64px; } }
@media (max-width: 767px) { .diensten__rij, .waarom__lijst { grid-template-columns: 1fr; } }
.na-zien { padding-top: 40px; }
.na-zien__rij { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 32px; }

/* ---- scène: Gebouwd door Growetic (scroll-craft pin) ---- */
.gebouwd__stage { display: flex; flex-direction: column; justify-content: center; padding-top: 40px; }
.gebouwd .podium { flex: none; }
.podium__rij { transform: translateX(calc(-50% + 900px - var(--sc-p, 0) * 1780px)) rotateX(14deg) rotateY(-18deg) rotateZ(4deg); }
.blad--jouw { gap: 18px; }
.blad--jouw .btn { background: #fff; color: #00013b; align-self: flex-start; }

@media (max-width: 860px) {
  .zien__grid { grid-template-columns: 1fr; gap: 20px; }
  .zien__tekst .h2 { font-size: 34px; }
  .zien__stappen { margin-top: 16px; }
  .zien__stappen li { display: none; padding: 12px 0; }
  .zien[data-stap="1"] li[data-i="1"], .zien[data-stap="2"] li[data-i="2"], .zien[data-stap="3"] li[data-i="3"], .zien[data-stap="4"] li[data-i="4"] { display: grid; }
  .zien__view { max-height: none; aspect-ratio: 4 / 3.4; }
  .laag--scan { padding: 16px; }
  .laag--scan .scan__rij { padding: 9px 0; }
  .laag__kop { font-size: 18px; }
  .laag__punt { display: none; }
  .bel__ring { width: 64px; height: 64px; margin-bottom: 12px; }
  .bel__naam { font-size: 24px; }
  .teken { padding: 16px 18px; }
  .teken__kop { font-size: 16px; }
  .laag--scan { padding: 20px; }
  .podium__rij { transform: translateX(calc(-50% + 640px - var(--sc-p, 0) * 1170px)) rotateX(14deg) rotateY(-18deg) rotateZ(4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .laag--site { clip-path: none; }
}

.blad { width: 440px; height: auto; aspect-ratio: auto; background: transparent; box-shadow: none; overflow: visible; }
.blad video { display: block; width: 440px; height: 275px; object-fit: cover; border-radius: 6px; background: #0c0e4a; }
.blad figcaption { margin-top: 12px; font-size: 14px; font-weight: 500; color: var(--ink-soft); }
.blad figure, figure.blad { margin: 0; }
.blad.blad--jouw { width: 440px; height: 275px; border-radius: 6px; background: var(--action-fill); color: var(--on-action); padding: 28px; display: flex; flex-direction: column; justify-content: flex-end; }
.podium { height: 520px; }
@media (max-width: 860px) { .blad, .blad video, .blad.blad--jouw { width: 300px; } .blad video, .blad.blad--jouw { height: 188px; padding: 20px; } .blad--jouw b { font-size: 22px; } .podium { height: 400px; } }

/* ---- licht thema (overdag, zoals webflow.com): navy wordt de inkt, wit het canvas ---- */
:root[data-thema="licht"] {
  --canvas: #ffffff; --surface: #f2f3f8; --surface-2: #e7e9f2; --line: #dcdfec;
  --groen: #126e63;
  --ink: #00013b; --ink-soft: #4a5472; --ink-uit: #6b7194; --placeholder: #61678a; --fout: #d92657;
  --form-bg: #f7f8fb; --wit-rand: #dcdfec;
  --sc-canvas: #ffffff; --sc-surface: #f2f3f8; --sc-ink: #00013b; --sc-ink-soft: #4a5472;
}
:root[data-thema="licht"] .nav__logo img, :root[data-thema="licht"] .foot__logo img { filter: none; }
:root[data-thema="licht"] .zien__browser, :root[data-thema="licht"] .app { border-color: var(--line); }
:root[data-thema="licht"] .rond:disabled { background: var(--surface-2); }
:root[data-thema="licht"] .rond { background: var(--ink); color: #fff; }
:root.thema-wissel, :root.thema-wissel body, :root.thema-wissel :is(.nav, .bar, .btn, .form, .veld input, .pk, .pk-tabs, .mk__vlak, .zien__stappen li, .feiten, .foot) { transition: background-color .9s var(--ease), color .9s var(--ease), border-color .9s var(--ease) !important; }
.thema-knop { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 4px; border: 1px solid var(--line); background: none; color: var(--ink); cursor: pointer; }
.thema-knop:hover { background: var(--surface); }
.thema-knop .zon { display: none; } :root[data-thema="donker"] .thema-knop .zon { display: block; } :root[data-thema="donker"] .thema-knop .maan { display: none; }

/* ---- Gebouwd door Growetic: waaier zoals #MadeinWebflow ----
   Elke kaart is een liggend scherm (blijft liggend), licht geknepen en scheef gezet; de kaarten overlappen sterk en de hele
   rij schuift van rechts naar links zolang de sectie in beeld is (--sc-p van een flow-act, 0 → 1). */
.gebouwd { padding: var(--section) 0; overflow: clip; --u: max(1vw, 9.3px); }
/* basis gemeten op webflow.com (helling 27°, om de 12vw een kaart); op verzoek vlakker (18°) en ruimer (om de 15vw) */
.waaier { position: relative; height: calc(22 * var(--u)); margin-top: calc(4 * var(--u)); }
.waaier__rij { position: absolute; left: 50%; top: 0; display: flex; transform: translate3d(calc(-50% + 38 * var(--u) - var(--sc-p, .5) * 76 * var(--u)), 0, 0); will-change: transform; }
.kaart { position: relative; flex: none; width: calc(15 * var(--u)); height: calc(21 * var(--u)); margin: 0; }
.kaart__vlak { position: absolute; left: 0; top: 0; width: calc(22.4 * var(--u)); height: calc(14 * var(--u)); transform-origin: 0 0; transform: skewY(18deg) scaleX(.93); overflow: hidden; background: var(--surface); outline: 1px solid var(--line); }
.kaart__vlak img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.gebouwd__onder { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: center; text-align: center; margin-top: 8px; }

/* hover zoals webflow: de andere kaarten worden doorzichtig, deze komt iets omhoog en speelt zijn demo af */
.kaart__vlak { transition: opacity .35s var(--ease), transform .45s var(--ease-out); }
.kaart__vlak video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; opacity: 0; transition: opacity .3s var(--ease); }
.kaart.speelt .kaart__vlak video { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .kaart { cursor: pointer; }
  .waaier__rij:has(.kaart:hover) .kaart__vlak { opacity: .32; }
  .waaier__rij .kaart:hover { z-index: 200 !important; }
  .waaier__rij .kaart:hover .kaart__vlak { opacity: 1; transform: translateY(-14px) skewY(18deg) scaleX(.93); }
}
@media (prefers-reduced-motion: reduce) { .pk-paneel:not([hidden]) .pk { animation: none; } }
@media (prefers-reduced-motion: reduce) { .waaier__rij .kaart:hover .kaart__vlak { transform: skewY(18deg) scaleX(.93); } }

.op { opacity: 0; transition: opacity 1.2s var(--ease); }
.op.in { opacity: 1; }

@media (max-width: 991px) {
  .h1, .aank__groot { font-size: 64px; }
  .h2 { font-size: 48px; }
  .nav__links { display: none; }
  .nav__links.open { display: flex; position: absolute; top: 67px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--canvas); border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 16px; }
  .nav__links.open a { display: block; padding: 12px 0; }
  .nav__menu { display: block; }
  .hero__grid, .fp { grid-template-columns: 1fr; }
  .hero__zij { justify-self: start; text-align: left; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .stappen { grid-column: 1; }
  .pk-paneel--4, .pk-paneel--3 { grid-template-columns: 1fr 1fr; }
  .feiten ul { grid-template-columns: 1fr 1fr; }
  .foot__kol { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .feiten ul { grid-template-columns: 1fr; gap: 18px; }
  :root { --gutter: 20px; --section: 64px; }
  .h1, .aank__groot { font-size: 46px; }
  .h2 { font-size: 36px; }
  .h2s { font-size: 34px; }
  .h3 { font-size: 26px; }
  .nav__right .tlink, .nav__taal { display: none; }
  .nav__right { gap: 10px; }
  .nav .wrap { gap: 16px; }
  .nav__right .btn { white-space: nowrap; padding-inline: 14px; }
  .form__grid, .pk-paneel--4, .pk-paneel--3 { grid-template-columns: 1fr; }
  .pk-tabs { width: 100%; } .pk-tab { flex: 1; padding: 12px 8px; }
  .form { padding: 24px; }
  .case { height: 600px; }
  .kop-rij { align-items: flex-start; flex-direction: column; }
  .kader__scherm { padding: 20px 16px 0; height: 460px; }
  .podium { height: 460px; }
  .blad { width: 220px; height: 320px; }
  .foot { padding-bottom: 200px; }
  .foot__teken { width: 300px; bottom: -70px; }
  .foot__onder { margin-top: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .marquee__rij { width: auto; flex-wrap: nowrap; overflow-x: auto; }
  .op { opacity: 1; }
}
.dienst__a { color: inherit; text-decoration: none; }
.dienst__a::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }
.dienst { position: relative; transition: border-color .2s var(--ease); }
.dienst:hover { border-color: var(--groen); }
.dienst:hover .dienst__a { color: var(--groen); }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ---- menu met submenu's (zoals de oude site, naar echte pagina's) ---- */
.nav__links { gap: 4px; align-items: center; }
.nav__links > li > a, .nav__sub-knop { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 6px; font: 500 16px/1.2 "Geist", sans-serif; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; background: none; border: 0; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease); }
.nav__links > li > a:hover, .nav__sub-knop:hover, .nav__sub-knop[aria-expanded="true"] { background: var(--surface); color: var(--ink); }
.nav__links a[aria-current="page"], .nav__sub-knop.is-actief { color: var(--groen); }
.nav__sub { position: relative; }
.nav__sub-knop svg { transition: transform .2s var(--ease); }
.nav__sub-knop[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__paneel { position: absolute; top: calc(100% + 10px); left: -8px; min-width: 320px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); box-shadow: 0 18px 40px -18px rgba(0, 1, 59, .35); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s .18s; z-index: 60; }
.nav__paneel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav__sub-knop[aria-expanded="true"] + .nav__paneel { opacity: 1; visibility: visible; transform: none; transition: opacity .18s var(--ease), transform .18s var(--ease); }
.nav__paneel ul { list-style: none; margin: 0; padding: 0; }
.nav__paneel a { display: block; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--ink); }
.nav__paneel a:hover, .nav__paneel a:focus-visible { background: var(--surface); }
.nav__paneel b { display: block; font-weight: 600; font-size: 15px; }
.nav__paneel span { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-soft); }
.nav__paneel a[aria-current="page"] b { color: var(--groen); }
@media (max-width: 1180px) {
  .nav__links { display: none; }
  .nav__menu { display: block; }
  .nav__links.open { display: flex; position: absolute; top: 67px; left: 0; right: 0; max-height: calc(100vh - 67px); overflow-y: auto; flex-direction: column; align-items: stretch; gap: 0; background: var(--canvas); border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 20px; }
  .nav__links.open > li > a, .nav__links.open .nav__sub-knop { width: 100%; justify-content: space-between; padding: 14px 0; border-radius: 0; border-bottom: 1px solid var(--line); background: none; }
  .nav__paneel { position: static; min-width: 0; padding: 0 0 8px; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; display: none; background: none; }
  .nav__sub-knop[aria-expanded="true"] + .nav__paneel { display: block; }
  .nav__paneel a { padding: 10px 0 10px 12px; }
}

/* ---- mobiel menu: volledig scherm, cirkel-onthulling vanaf de menuknop ---- */
.nav__menu { display: none; align-items: center; gap: 10px; height: 40px; padding: 0 6px 0 14px; margin-left: 4px; border: 1px solid color-mix(in oklab, var(--ink) 28%, transparent); border-radius: 999px; background: none; color: var(--ink); font: 500 12px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: border-color .3s var(--ease), color .3s var(--ease); }
.nav__menuLab { position: relative; display: block; height: 1em; overflow: hidden; }
.nav__menuLab span { display: block; transition: transform .6s cubic-bezier(.76, 0, .24, 1); }
.nav__menuIco { position: relative; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); transition: background-color .3s var(--ease), transform .6s cubic-bezier(.76, 0, .24, 1); }
.nav__menuIco i { position: absolute; width: 12px; height: 1.5px; border-radius: 2px; background: var(--canvas); transition: transform .5s cubic-bezier(.76, 0, .24, 1); }
.nav__menuIco i:first-child { transform: translateY(-2.5px); }
.nav__menuIco i:last-child { transform: translateY(2.5px); }
html.mm-open .nav__menuLab span { transform: translateY(-100%); }
html.mm-open .nav__menuIco { background: #fff; transform: rotate(180deg); }
html.mm-open .nav__menuIco i { background: #00013b; }
html.mm-open .nav__menuIco i:first-child { transform: rotate(45deg); }
html.mm-open .nav__menuIco i:last-child { transform: rotate(-45deg); }
/* header boven de laag: doorzichtig en wit zolang het menu open is */
html.mm-open .nav { background: transparent; border-bottom-color: transparent; }
html.mm-open .nav .wrap { position: relative; z-index: 2; }
html.mm-open .nav__menu { color: #fff; border-color: rgba(255, 255, 255, .3); }
html.mm-open .nav__logo img, html.mm-open[data-thema] .nav__logo img { filter: brightness(0) invert(1); }
html.mm-open :is(.nav__right > a, .nav__taal, .thema-knop) { visibility: hidden; }
html.mm-open, html.mm-open body { overflow: hidden; }

.mm { position: fixed; inset: 0; z-index: 1; display: none; color: #fff; background: #00013b; clip-path: circle(0px at var(--mx, calc(100% - 40px)) var(--my, 34px)); visibility: hidden; transition: clip-path .7s cubic-bezier(.76, 0, .24, 1), visibility 0s .7s; }
.mm.is-open { clip-path: circle(150% at var(--mx, calc(100% - 40px)) var(--my, 34px)); visibility: visible; transition: clip-path .9s cubic-bezier(.76, 0, .24, 1), visibility 0s; }
.mm__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; transform: scale(1.12); opacity: 0; transition: transform 1.6s cubic-bezier(.2, .7, .2, 1), opacity 1s; }
.mm__bg::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(60% 45% at 85% 8%, rgba(42, 157, 140, .45), transparent 70%), radial-gradient(50% 40% at 0% 100%, rgba(247, 68, 113, .22), transparent 70%); }
.mm__teken { position: absolute; right: -90px; bottom: -60px; width: 440px; height: auto; color: #2a9d8c; opacity: .14; }
.mm__grid { position: absolute; inset: 0; pointer-events: none; opacity: 0; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(90% 70% at 70% 30%, #000, transparent 75%); mask-image: radial-gradient(90% 70% at 70% 30%, #000, transparent 75%); transition: opacity 1.2s .3s; }
.mm.is-open .mm__bg { transform: none; opacity: 1; }
.mm.is-open .mm__grid { opacity: 1; }
.mm__in { position: relative; height: 100%; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; padding: calc(var(--mm-top, 67px) + 20px) var(--gutter) max(28px, env(safe-area-inset-bottom)); }
.mm__kicker { display: flex; justify-content: space-between; margin: 0 0 10px; font: 500 11px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .5); opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s; }
.mm.is-open .mm__kicker { opacity: 1; transform: none; transition: opacity .5s .35s, transform .5s cubic-bezier(.23, 1, .32, 1) .35s; }
.mm__lijst { list-style: none; margin: 0; padding: 0; }
.mm__lijst > li { border-bottom: 1px solid rgba(255, 255, 255, .12); opacity: 0; transform: translateY(54px); transition: opacity .25s, transform .3s; }
.mm.is-open .mm__lijst > li { opacity: 1; transform: none; transition: transform .85s cubic-bezier(.16, 1, .3, 1) calc(.22s + var(--i) * 55ms), opacity .5s calc(.22s + var(--i) * 55ms); }
.mm__item { display: flex; align-items: center; gap: 16px; width: 100%; padding: 12px 0; border: 0; background: none; color: #fff; text-align: left; text-decoration: none; cursor: pointer; font: inherit; }
.mm__n { width: 22px; flex: 0 0 auto; font: 500 11px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .08em; color: #5fc4b4; }
.mm__t { flex: 1; font: 900 clamp(32px, 9vw, 44px)/1.05 "Juturu", "Geist", sans-serif; letter-spacing: -0.005em; padding-bottom: .06em; transition: transform .4s cubic-bezier(.23, 1, .32, 1), color .25s; }
.mm__item:hover .mm__t, .mm__item:focus-visible .mm__t { transform: translateX(8px); color: #5fc4b4; }
.mm__item[aria-current="page"] .mm__t { color: #5fc4b4; }
.mm__arr { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); transition: transform .4s cubic-bezier(.23, 1, .32, 1), background-color .25s, border-color .25s; }
.mm__item:hover .mm__arr { background: #fff; color: #00013b; border-color: #fff; }
.mm__item[aria-expanded="true"] .mm__arr { transform: rotate(45deg); background: #fff; color: #00013b; border-color: #fff; }
.mm__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.76, 0, .24, 1); }
.mm__item[aria-expanded="true"] + .mm__sub { grid-template-rows: 1fr; }
.mm__sub ul { overflow: hidden; list-style: none; margin: 0; padding: 0 0 0 38px; }
.mm__sub li:last-child { padding-bottom: 14px; }
.mm__sub a { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; color: rgba(255, 255, 255, .78); text-decoration: none; font-size: 17px; transition: color .2s; }
.mm__sub a span { font-size: 13px; color: rgba(255, 255, 255, .45); text-align: right; }
.mm__sub a:hover { color: #fff; }
.mm__sub a[aria-current="page"] { color: #5fc4b4; }
.mm__onder { margin-top: auto; padding-top: 28px; opacity: 0; transform: translateY(24px); transition: opacity .25s, transform .3s; }
.mm.is-open .mm__onder { opacity: 1; transform: none; transition: opacity .6s .6s, transform .8s cubic-bezier(.16, 1, .3, 1) .6s; }
.mm__cta { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 56px; padding: 0 20px; border-radius: 6px; background: #d92657; color: #fff; text-decoration: none; font: 600 15px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; }
.mm__cta:hover { background: #f74471; }
.mm__links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 0; padding: 0; list-style: none; font: 500 12px/1.2 "Geist Mono", ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; }
.mm__links a { color: rgba(255, 255, 255, .75); text-decoration: none; }
.mm__links a:hover { color: #fff; }
.mm__wie { margin: 14px 0 0; font-size: 14px; color: rgba(255, 255, 255, .5); }
@media (max-width: 1180px) { .nav__menu { display: inline-flex; } .mm { display: block; } }
@media (prefers-reduced-motion: reduce) {
  .mm, .mm.is-open { clip-path: none; transition: opacity .2s, visibility 0s; opacity: 0; }
  .mm.is-open { opacity: 1; }
  .mm *, .mm.is-open * { transition: none !important; transform: none !important; opacity: 1 !important; }
}

/* ================= losse pagina's (p-*) ================= */
.p-body .bar { display: block; }
.p-hero { padding: 56px 0 72px; border-bottom: 1px solid var(--line); }
.p-kruimel ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--ink-soft); }
.p-kruimel li + li::before { content: "/"; margin-right: 6px; color: var(--line); }
.p-kruimel a { color: var(--ink-soft); text-decoration: none; }
.p-kruimel a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.p-kicker { margin: 40px 0 14px; font: 900 22px/1 "Juturu", "Geist", sans-serif; color: var(--groen); letter-spacing: -0.005em; }
.p-h1 { max-width: 18ch; padding-bottom: .1em; animation: inschaal 1.2s var(--ease) both; }
.p-intro { margin: 24px 0 0; max-width: 62ch; font-size: 20px; line-height: 1.5; color: var(--ink-soft); animation: infade 1.2s var(--ease) .15s both; }
.p-intro a, .p-prose a, .p-kaarten a, .p-stappen a, .p-faq a, .p-lead a, .p-tabel a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--groen); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.p-intro a:hover, .p-prose a:hover, .p-kaarten a:hover, .p-stappen a:hover, .p-faq a:hover { color: var(--groen); }
.p-toc { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; }
.p-toc p { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; }
.p-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.p-toc a { font-size: 15px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.p-toc a:hover { border-color: var(--groen); color: var(--groen); }

.p-sec { padding: 88px 0; border-bottom: 1px solid var(--line); }
.p-h2 { font-family: "Juturu", "Geist", sans-serif; font-weight: 900; font-size: 44px; line-height: 1.04; letter-spacing: -0.005em; max-width: 20ch; scroll-margin-top: 96px; }
.p-lead { margin: 18px 0 0; max-width: 62ch; font-size: 18px; line-height: 1.55; color: var(--ink-soft); }
.p-twee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: 32px 80px; align-items: start; }
.p-twee > div:first-child { position: sticky; top: 100px; }
.p-prose { font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.p-prose p { margin: 0 0 18px; }
.p-prose p:last-child { margin-bottom: 0; }
.p-prose strong { color: var(--ink); font-weight: 600; }
.p-vink { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.p-vink li { position: relative; padding-left: 32px; color: var(--ink); font-size: 17px; line-height: 1.55; }
.p-vink li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 6px; background: color-mix(in srgb, var(--groen) 16%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23126e63' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat; }
:root:not([data-thema="licht"]) .p-vink li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a9d8c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }

.p-kaarten { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 16px; }
.p-kaarten--2 { grid-template-columns: repeat(2, 1fr); }
.p-kaarten--3 { grid-template-columns: repeat(3, 1fr); }
.p-kaarten--4 { grid-template-columns: repeat(4, 1fr); }
.p-kaarten li { padding: 28px 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.p-kaarten h3 { font-size: 20px; font-weight: 600; line-height: 1.3; }
.p-kaarten p { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }

.p-stappen { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; counter-reset: s; }
.p-stappen li { padding: 28px 24px; border-top: 2px solid var(--groen); background: linear-gradient(var(--surface), transparent); border-radius: 0 0 12px 12px; }
.p-stappen__n { display: block; font: 900 40px/1 "Juturu", "Geist", sans-serif; color: var(--groen); }
.p-stappen h3 { margin-top: 18px; font-size: 19px; font-weight: 600; line-height: 1.3; }
.p-stappen p { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }

.p-tabel { margin-top: 40px; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.p-tabel table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
.p-tabel th, .p-tabel td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.p-tabel thead th { background: var(--surface); font-weight: 600; }
.p-tabel tbody th { font-weight: 600; color: var(--ink); }
.p-tabel td { color: var(--ink-soft); }
.p-tabel tr:last-child > * { border-bottom: 0; }

.p-sec .pk-panelen { margin-top: 40px; }
.p-sec .pk-paneel { animation: none; }

.p-bewijs { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 464px)); gap: 16px; }
.p-bewijs .case { width: auto; height: 620px; }

.p-raster { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.p-raster figure { margin: 0; }
.p-raster img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); transition: transform .4s var(--ease-out); }
.p-raster li:hover img { transform: translateY(-4px); }
.p-raster a { color: inherit; text-decoration: none; display: block; }
.p-raster a:hover b { color: var(--groen); }
.p-raster__meer { margin: 32px 0 0; }
.p-raster figcaption { margin-top: 12px; display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.p-raster figcaption span { color: var(--ink-soft); }

.p-faq__lijst details { border-bottom: 1px solid var(--line); }
.p-faq__lijst details:first-child { border-top: 1px solid var(--line); }
.p-faq__lijst summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 22px 0; font-size: 19px; font-weight: 600; line-height: 1.35; }
.p-faq__lijst summary::-webkit-details-marker { display: none; }
.p-faq__lijst summary::after { content: "+"; flex: none; font: 400 26px/1 "Geist", sans-serif; color: var(--groen); transition: transform .25s var(--ease); }
.p-faq__lijst details[open] summary::after { transform: rotate(45deg); }
.p-faq__lijst details > div { padding: 0 0 24px; font-size: 17px; line-height: 1.65; color: var(--ink-soft); max-width: 64ch; }
.p-faq__lijst details > div p { margin: 0; }

.p-rel { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.p-rel a { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 24px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink); transition: border-color .2s var(--ease), transform .3s var(--ease-out); }
.p-rel a:hover { border-color: var(--groen); transform: translateY(-3px); }
.p-rel__k { font-size: 13px; font-weight: 600; color: var(--groen); }
.p-rel b { font-size: 19px; line-height: 1.3; }
.p-rel span:last-child { font-size: 14px; line-height: 1.55; color: var(--ink-soft); }

.p-cta { border-bottom: 0; padding-bottom: 0; }
.p-cta__vlak { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; padding: 48px; border-radius: 16px; background: var(--groen-balk); color: #fff; }
.p-cta__vlak .p-h2 { color: #fff; }
.p-cta__vlak p { margin: 14px 0 0; max-width: 54ch; font-size: 18px; line-height: 1.55; color: rgba(255,255,255,.88); }
.p-cta__knoppen { display: flex; flex-wrap: wrap; gap: 12px; }
.p-cta__vlak .btn--dark { background: rgba(255,255,255,.14); color: #fff; }
.p-cta__vlak .btn--dark:hover { background: rgba(255,255,255,.24); }
.foot__pitch { margin: 18px 0 0; max-width: 30ch; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }

@media (max-width: 991px) {
  .p-twee { grid-template-columns: 1fr; }
  .p-twee > div:first-child { position: static; }
  .p-kaarten--3, .p-kaarten--4 { grid-template-columns: 1fr 1fr; }
  .p-bewijs { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .p-hero { padding: 32px 0 56px; }
  .p-kicker { margin-top: 28px; font-size: 18px; }
  .p-intro { font-size: 18px; }
  .p-sec { padding: 64px 0; }
  .p-h2 { font-size: 32px; }
  .p-prose { font-size: 17px; }
  .p-kaarten--2, .p-kaarten--3, .p-kaarten--4, .p-bewijs { grid-template-columns: 1fr; }
  .p-bewijs .case { height: 560px; }
  .p-cta__vlak { padding: 32px 24px; }
  .p-faq__lijst summary { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .p-h1, .p-intro { animation: none; } }

/* ---- variatie: split met beeld, uitspraak, lijst, cijferband ---- */
.p-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 96px; align-items: center; }
.p-split--om .p-split__tekst { order: 2; }
.p-split__tekst .p-prose { margin-top: 24px; }
.p-split__beeld { position: relative; }
.p-split__beeld::before { content: ""; position: absolute; inset: -32px -32px -32px 40px; border-radius: 20px; background: color-mix(in srgb, var(--groen) 10%, transparent); z-index: -1; }
.p-split--om .p-split__beeld::before { inset: -32px 40px -32px -32px; }
.p-beeld__app, .p-serp, .p-bel { box-shadow: 0 30px 60px -30px rgba(0, 1, 59, .35); }
.p-serp { font-size: 14px; }
.p-serp__balk { margin: 16px 20px 4px; padding: 10px 16px; border: 1px solid #e3e5ee; border-radius: 999px; color: #00013b; }
.p-serp__r { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 16px 20px; border-top: 1px solid #eef0f6; color: #00013b; }
.p-serp__r:first-of-type { border-top: 0; }
.p-serp__r small { color: #5b6180; }
.p-serp__r b { display: block; margin-top: 2px; color: #1a33b8; font-size: 16px; font-weight: 500; }
.p-serp__r p { margin: 4px 0 0; color: #5b6180; line-height: 1.45; }
.p-serp__r--jij { background: #effaf7; box-shadow: inset 3px 0 0 #126e63; }
.p-serp__n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #eef0f6; color: #00013b; font-weight: 600; font-size: 13px; }
.p-serp__r--jij .p-serp__n { background: #126e63; color: #fff; }
.p-serp__ad { align-self: start; font-size: 11px; font-weight: 700; color: #00013b; padding: 3px 6px; border-radius: 4px; background: #eef0f6; }
.p-serp__links { display: block; margin-top: 6px; color: #1a33b8; font-size: 13px; }
.p-serp__kpi { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 14px 20px 18px; border-top: 1px solid #eef0f6; color: #5b6180; font-size: 13px; }
.p-serp__kpi b { color: #126e63; }
.p-bel__in { padding: 36px 24px 32px; text-align: center; color: #00013b; }
.p-bel__in .bel__ring { width: 76px; height: 76px; margin: 0 auto 16px; border-radius: 50%; background: #00013b; color: #fff; display: grid; place-items: center; }
.p-bel__in .bel__naam { margin: 0; font-size: 28px; font-weight: 600; }
.p-bel__in .bel__rol { margin: 2px 0 18px; color: #5b6180; }
.p-bel__r { margin: 6px 0 0; font-size: 15px; }
.p-browser { margin: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: 0 30px 60px -30px rgba(0, 1, 59, .35); }
.p-browser .browser__top { height: 34px; }
.p-browser img { display: block; width: 100%; height: auto; }
.p-browser figcaption { padding: 10px 14px; font-size: 13px; color: #5b6180; border-top: 1px solid #eef0f6; }

.p-uitspraak .p-h2--groot { font-size: 64px; max-width: 18ch; }
.p-uitspraak__lead { margin: 32px 0 0; max-width: 34ch; font-size: 30px; line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.p-uitspraak__lead a { color: inherit; }
.p-kolommen { margin-top: 40px; columns: 2; column-gap: 64px; }
.p-kolommen p { break-inside: avoid; }
.p-kolommen .p-vink { column-span: all; margin-top: 8px; grid-template-columns: 1fr 1fr; column-gap: 32px; }

.p-lijst { list-style: none; margin: 0; padding: 0; }
.p-lijst li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 24px 0; border-top: 1px solid var(--line); }
.p-lijst li:last-child { border-bottom: 1px solid var(--line); }
.p-lijst__n { font: 900 22px/1.2 "Juturu", "Geist", sans-serif; color: var(--groen); }
.p-lijst h3 { font-size: 20px; font-weight: 600; line-height: 1.3; }
.p-lijst p { margin: 6px 0 0; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }

.p-band { background: var(--groen-balk); color: #fff; padding: 72px 0; }
.p-band__kop { margin: 0; font-size: 15px; font-weight: 500; color: rgba(255,255,255,.8); }
.p-band__rij { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.p-band__rij li { border-top: 1px solid rgba(255,255,255,.3); padding-top: 20px; }
.p-band__rij b { display: block; font: 900 88px/1 "Juturu", "Geist", sans-serif; letter-spacing: -0.01em; }
.p-band__rij span { display: block; margin-top: 10px; max-width: 26ch; font-size: 17px; line-height: 1.45; color: rgba(255,255,255,.88); }

.p-plat__in { max-width: 760px; }
.p-plat .p-prose { margin-top: 20px; }
.p-plat { padding: 48px 0; }

@media (max-width: 991px) {
  .p-split { grid-template-columns: 1fr; }
  .p-split--om .p-split__tekst { order: 0; }
  .p-split__beeld { max-width: 560px; }
  .p-uitspraak .p-h2--groot { font-size: 48px; }
  .p-band__rij b { font-size: 64px; }
}
@media (max-width: 767px) {
  .p-split__beeld::before { inset: -16px; }
  .p-uitspraak .p-h2--groot { font-size: 34px; }
  .p-uitspraak__lead { font-size: 22px; }
  .p-kolommen { columns: 1; }
  .p-kolommen .p-vink { grid-template-columns: 1fr; }
  .p-band { padding: 56px 0; }
  .p-band__rij { grid-template-columns: 1fr; gap: 20px; }
  .p-band__rij b { font-size: 56px; }
}

/* ---- hero zoals de oude site: kleine H1 als label, grote zin met typemachine ---- */
.p-h1-klein { display: inline-block; margin: 36px 0 0; padding: 8px 14px; border-radius: 8px; background: var(--surface); font: 600 15px/1.3 "Geist", sans-serif; letter-spacing: .01em; text-transform: uppercase; color: var(--ink); max-width: 100%; }
.p-h1-klein .groen { color: var(--groen); }
.p-slogan { margin: 24px 0 0; max-width: 17ch; min-height: 2.1em; font: 900 80px/1.04 "Juturu", "Geist", sans-serif; letter-spacing: -0.005em; color: var(--ink); }
.p-slogan__woord { color: var(--groen); }
.p-slogan__cursor { display: inline-block; width: .06em; height: .82em; margin-left: .05em; vertical-align: -.06em; background: var(--groen); animation: tmKnip .8s steps(1) infinite; }
@media (max-width: 991px) { .p-slogan { font-size: 60px; } }
@media (max-width: 767px) { .p-h1-klein { margin-top: 24px; font-size: 13px; } .p-slogan { font-size: 40px; min-height: 3.2em; } }
@media (prefers-reduced-motion: reduce) { .p-slogan__cursor { display: none; } }