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

/* Archivo staat lokaal in fonts/ — geen verzoek naar Google, dus geen
   IP-adres van de bezoeker naar een derde vóór toestemming, en geen
   render-blokkerend stijlblad van buitenaf. Variabel lettertype: één
   bestand per subset dekt 400 tot 800. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/archivo-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: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/archivo-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;
}

:root {
  --bg:          #fbfbfb;
  --text:        #1c1c1c;
  --muted:       #3a3a3a;
  --teal:        #00707f;
  --teal-bright: #00b2c9;   /* vlakken en randen, nooit als letter op papier */
  --teal-hover:  #7bd9e6;
  --divider:     #c9c7c5;
  --vlak:        #f2f1f0;
  /* Vier rollen voor tekst: inkt, gedempt, accent en gedempt-op-donker.
     Meer tinten maken kleur betekenisloos. */
  --op-donker:   #d2d0ce;
}

::selection { background: var(--teal-bright); color: var(--text); }

body {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

a { color: var(--teal); text-decoration: none; }
.proza a, .band-intro a, .kaart p a, .hero-sub a, .akkoord a, .kleine-noot a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Toetsenbordbediening moet zichtbaar zijn — anders is de site met
   tab niet te volgen. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--text);
  color: var(--bg);
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 700;
}
.skip:focus { left: 0; }

/* NAV */
header {
  background: var(--bg);
  border-bottom: 2px solid var(--teal-bright);
  padding: 16px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  position: relative;
}

.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.logo img { height: 32px; width: auto; display: block; flex-shrink: 0; }
.logo-word { font-size: 16px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text); }

header nav { display: flex; align-items: center; gap: 24px; }
header nav a {
  font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text); text-decoration: none; transition: color 0.15s;
}
header nav a:hover { color: var(--teal); }
header nav a.active { color: var(--teal); border-bottom: 2px solid var(--teal-bright); padding-bottom: 2px; }
header nav a.btn-contact {
  background: var(--teal-bright); color: var(--text);
  padding: 12px 16px; font-weight: 700;
}
header nav a.btn-contact:hover { background: var(--teal-hover); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
  padding: 8px;
  line-height: 0;
  touch-action: manipulation;
}

/* Bereikbaarheid bovenaan: telefoon en mail zonder scrollen. */
.topbalk {
  background: var(--text);
  color: var(--bg);
  padding: 0 40px;
  font-size: 12px;
  line-height: 1.5;
  display: flex;
  justify-content: flex-end;
}
.topbalk .top-links {
  display: flex;
  align-items: center;      /* zonder dit rekt de losse tekst mee tot de
                               volle hoogte en staat ze hoger dan de links */
  flex-wrap: wrap;
  gap: 0 28px;
}
/* Elk item even hoog en even ver van de rand: op een telefoon is dit de
   snelste weg naar bellen en mailen, dus de links moeten aantikbaar zijn
   zonder dat de rest scheef komt te staan. */
.topbalk a,
.topbalk .top-uren {
  display: inline-block;
  padding: 8px 0;
  color: var(--bg);
  text-decoration: none;
}
.topbalk a:hover { color: var(--teal-bright); }
.topbalk strong {
  color: var(--teal-bright);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-right: 4px;
}
.topbalk .top-uren { color: var(--op-donker); }

/* MAIN */
main { flex: 1; display: flex; flex-direction: column; }

/* HERO */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  border-bottom: 2px solid var(--divider);
}

.hero-left {
  padding: clamp(28px, 4vh, 48px) 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 16px;
}
/* Alleen op de startpagina duwt het label naar de onderrand; daar is de
   hoogte een keuze, elders is het dode ruimte. */
.hero-home .hero-left { justify-content: space-between; }

.hero-right {
  padding: clamp(28px, 4vh, 48px) 40px;
  border-left: 2px solid var(--divider);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}

h1 {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.025em;
}
.hero-home h1 { font-size: 200px; line-height: 0.82; letter-spacing: -0.035em; }
.hero-home { min-height: 38vh; }

/* Zichtbaar voor zoekmachines en schermlezers, niet op het scherm. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero-tagline { display: flex; align-items: center; gap: 16px; }
.hero-tagline-line { width: 56px; height: 2px; background: var(--teal-bright); flex-shrink: 0; }
.hero-tagline-text {
  font-size: 12px; font-weight: 700; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--teal);
}

.hero-body, .hero-sub {
  font-size: 18px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 44ch;
}

.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }

.btn-teal, .btn-outline {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  min-height: 44px;
}

.btn-teal {
  background: var(--teal-bright);
  color: var(--text);
  padding: 16px 24px;
  transition: background 0.15s;
}
.btn-teal:hover { background: var(--teal-hover); }

.btn-outline {
  border: 2px solid var(--text);
  color: var(--text);
  padding: 12px 20px;
  transition: border-color 0.15s, color 0.15s;
}
.btn-outline:hover { border-color: var(--teal); color: var(--teal); }

/* BANDEN — de bouwsteen voor alle inhoud onder de hero */
.band { padding: clamp(32px, 4vw, 52px) 40px; border-bottom: 2px solid var(--divider); }
.band:last-child { border-bottom: none; }
.band-donker { background: var(--text); color: var(--bg); border-bottom-color: var(--text); }
/* Enkel tekstlinks worden cyaan. Zonder deze uitzondering kleurt de
   regel hierboven ook de knoppen, en dan staat er cyaan op cyaan. */
.band-donker a:not([class^="btn-"]) { color: var(--teal-bright); }
.band-donker .btn-teal { color: var(--text); }
.band-donker .btn-outline { border-color: var(--bg); color: var(--bg); }
.band-donker .btn-outline:hover { border-color: var(--teal-bright); color: var(--teal-bright); }
.band-donker .band-intro { color: var(--op-donker); }
.band-vlak { background: var(--vlak); }

.band-kop { max-width: 62ch; margin-bottom: 28px; }
.band-kop h2, .band > h2 {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.band-kop .oplabel, .oplabel {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 8px;
}
.band-donker .oplabel { color: var(--teal-bright); }
.band-intro { margin-top: 16px; font-size: 16px; color: var(--muted); }

h3 { font-size: 18px; font-weight: 700; line-height: 1.25; }

/* KAARTEN
   De scheidingslijnen komen van een schaduw rond elke kaart, niet van een
   gekleurde ondergrond die door de tussenruimte schijnt. Bij een oneven
   aantal kaarten bleef anders een grijs vlak achter op de laatste rij. */
/* Drie kolommen, niet "zoveel als passen": elk raster op de site telt
   drie of zes kaarten, dus zo komt elke rij vol. */
.kaarten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
}
@media (max-width: 1000px) { .kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .kaarten { grid-template-columns: 1fr; } }
.kaart {
  background: var(--bg);
  box-shadow: 0 0 0 2px var(--divider);
  padding: 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.band-vlak .kaart { background: var(--vlak); }
.kaart .kaart-nr {
  font-size: 12px; font-weight: 700; letter-spacing: 0.2em; color: var(--teal);
}
.kaart p { color: var(--muted); }
.kaart p a { display: inline-block; padding: 4px 0; font-weight: 600; }

/* LIJSTEN */
.vinklijst { list-style: none; display: grid; gap: 12px; }
.vinklijst li { position: relative; padding-left: 32px; color: var(--muted); }
.vinklijst li::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 14px; height: 8px;
  border-left: 3px solid var(--teal-bright);
  border-bottom: 3px solid var(--teal-bright);
  transform: rotate(-45deg);
}
.vinklijst strong { color: var(--text); font-weight: 700; }
/* Twee doorlopende kolommen in plaats van een raster: een raster maakt
   elke rij zo hoog als het langste item en laat daardoor gaten vallen. */
.kolommen-2 { display: block; columns: 2; column-gap: 48px; }
.kolommen-2 li { break-inside: avoid; margin-bottom: 12px; }
.kolommen-2 li:last-child { margin-bottom: 0; }

/* PRIJZEN */
.prijzen { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.prijskaart { border: 2px solid var(--text); padding: 28px 24px; display: flex; flex-direction: column; gap: 16px; }
.prijskaart.uitgelicht { border-color: var(--teal-bright); box-shadow: 6px 6px 0 var(--teal-bright); }
.prijskaart .bedrag { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.prijskaart .bedrag span { font-size: 16px; font-weight: 600; letter-spacing: 0; }
.prijskaart .voetnoot { font-size: 14px; color: var(--muted); margin-top: auto; }

/* BEWIJSSTROOK */
.cijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 28px; }
.cijfer .waarde { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; color: var(--teal-bright); }
.cijfer .omschrijving { font-size: 14px; color: var(--op-donker); margin-top: 4px; }

/* FAQ */
details {
  border-bottom: 2px solid var(--divider);
  padding: 16px 0;
}
details:first-of-type { border-top: 2px solid var(--divider); }
summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  min-height: 28px;
  align-items: center;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; color: var(--teal); font-size: 24px; font-weight: 400; line-height: 1; }
details[open] summary::after { content: '–'; }
details p { margin-top: 12px; color: var(--muted); max-width: 72ch; }

/* PROZA (juridische pagina's en casestudy) */
.proza { max-width: 74ch; }
.proza p, .proza li { color: var(--muted); margin-bottom: 16px; }
.proza h2 { font-size: 24px; font-weight: 800; margin: 32px 0 12px; color: var(--text); }
.proza h3 { margin: 24px 0 8px; }
.proza ul, .proza ol { margin: 0 0 14px 20px; }
.proza dl { display: grid; grid-template-columns: 54px 1fr; gap: 8px 14px; margin-bottom: 16px; }
.proza dt { font-weight: 700; color: var(--teal); }
.proza dd { color: var(--muted); }
.proza strong { color: var(--text); }
.proza .laatst { font-size: 14px; color: var(--muted); letter-spacing: 0.04em; }

/* KRUIMELPAD */
.kruimels { padding: 12px 40px; font-size: 12px; color: var(--muted); border-bottom: 2px solid var(--divider); }
.kruimels a { color: var(--teal); }

/* PORTFOLIO */
.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 2px; border-bottom: 2px solid var(--divider); }
.project { background: var(--bg); box-shadow: 0 0 0 2px var(--divider); padding: 32px 40px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.project-beeld { width: 100%; height: auto; display: block; border: 2px solid var(--divider); }
.project-beeld-leeg {
  width: 100%;
  aspect-ratio: 8 / 5;
  border: 2px solid var(--divider);
  background:
    repeating-linear-gradient(135deg, var(--vlak) 0 12px, #ebeae9 12px 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  font-size: 14px;
  color: var(--muted);
}
.tag { font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal); }
.project-title { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.project-desc { color: var(--muted); max-width: 46ch; }
.project-url { font-size: 14px; color: var(--muted); }

.cta-strip {
  padding: clamp(28px, 4vw, 44px) 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--divider);
}
.cta-strip h2 { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; }

/* STAPPEN (aanpak) */
.stappen { display: grid; gap: 2px; }
.stap { background: var(--bg); box-shadow: 0 0 0 2px var(--divider); padding: 24px; display: grid; grid-template-columns: 58px 1fr; gap: 16px; }
.stap .nr { font-size: 24px; font-weight: 800; color: var(--teal); line-height: 1; }
.stap p { color: var(--muted); margin-top: 8px; }

/* FORMULIER */
.content-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); flex: 1; }
.form-col { padding: 40px 40px; border-right: 2px solid var(--divider); }
.info-col { padding: 40px 40px; display: flex; flex-direction: column; }

form { display: flex; flex-direction: column; gap: 24px; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.field { display: flex; flex-direction: column; gap: 8px; }

label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--text);
}

input, select, textarea {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 16px;
  color: var(--text);
  background: var(--bg);
  border: 2px solid var(--text);
  border-radius: 0;
  padding: 12px 16px;
  width: 100%;
  outline: none;
  transition: border-color 0.15s;
  appearance: none;
  -webkit-appearance: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--teal-bright); box-shadow: 0 0 0 2px var(--teal-bright); }
textarea { resize: vertical; min-height: 120px; }

.select-wrap { position: relative; }
.select-wrap::after {
  content: '▾';
  position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%);
  pointer-events: none; color: var(--text); font-size: 14px;
}

.akkoord { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
.akkoord input[type="checkbox"] {
  width: 24px; height: 24px; margin-top: 2px; padding: 0;
  accent-color: var(--teal-bright);
  appearance: auto; -webkit-appearance: auto;
}
.akkoord label {
  font-size: 14px; font-weight: 400; letter-spacing: 0;
  text-transform: none; color: var(--muted); line-height: 1.5;
}

.form-footer { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

button[type="submit"] {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  background: var(--teal-bright); color: var(--text);
  border: none; border-radius: 0;
  padding: 16px 24px; min-height: 44px;
  cursor: pointer; transition: background 0.15s;
}
button[type="submit"]:hover { background: var(--teal-hover); }
button[type="submit"]:disabled { opacity: 0.6; cursor: default; }

.form-thanks { font-size: 14px; color: var(--muted); display: none; }
.form-thanks.visible { display: block; }

.contact-item { padding: 16px 0; border-bottom: 2px solid var(--divider); }
.contact-item:first-child { padding-top: 0; }
.contact-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 4px;
}
.contact-value { font-size: 18px; color: var(--text); }
.contact-value a { display: inline-block; padding: 3px 0; }
.contact-value small { display: block; font-size: 14px; color: var(--muted); letter-spacing: 0; }

.wa-knop {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px;
  background: var(--text); color: var(--bg);
  padding: 12px 20px; min-height: 44px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
}
.wa-knop:hover { background: #000; color: var(--bg); }
.wa-knop svg { flex-shrink: 0; }

/* TYPEWRITER STRIP (startpagina) */
.typewriter-strip {
  border-bottom: 2px solid var(--divider);
  padding: 40px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 120px;
}
.typewriter-ghost {
  position: absolute; right: 40px; top: 50%;
  transform: translateY(-50%);
  font-size: 176px;
  font-weight: 800; line-height: 1; letter-spacing: -0.02em;
  opacity: 0.10; pointer-events: none; user-select: none;
}
.typewriter-ghost .bracket { color: var(--teal); }
.typewriter-ghost .j-flip { display: inline-block; transform: rotate(180deg); }
.typewriter-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 24px;
  line-height: 1.4; position: relative; z-index: 1;
}
.tw-word { font-weight: 700; color: var(--text); }
.tw-phonetic { color: var(--teal); }
.tw-pos { font-style: italic; color: var(--muted); }
.tw-def { color: var(--text); }
.tw-cursor {
  display: inline-block; width: 0.55em; height: 1.05em;
  background: var(--teal-bright); vertical-align: text-bottom;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* FOOTER */
footer { border-top: 2px solid var(--divider); display: grid; grid-template-columns: repeat(3, 1fr); }
footer > div {
  padding: 20px 40px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--muted);
  display: flex;
  align-items: center;
}
footer > div + div { border-left: 2px solid var(--divider); }
footer .footer-tagline { color: var(--teal); }

/* De onderste band: drie korte regels in plaats van één blok met losse
   regeleindes, zodat de tussenafstanden overal gelijk zijn. */
footer > .footer-legal {
  grid-column: 1 / -1;
  border-top: 2px solid var(--divider);
  border-left: none;
  display: block;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
}
.voet-regel { margin: 0; }
.voet-regel + .voet-regel { margin-top: 8px; }
.voet-klein { font-size: 12px; color: var(--muted); }
footer > .footer-legal a {
  color: inherit;
  display: inline-block;
  padding: 8px 0;            /* anders zijn deze links op een telefoon
                                kleiner dan 40 x 32 px — ook de kleinere
                                regel met de juridische links */
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--divider);
}
footer > .footer-legal a:hover { color: var(--teal); text-decoration-color: var(--teal); }

.spamval { display: none; }

/* HULPKLASSEN — kleine uitzonderingen, in plaats van style-attributen */
.punt { color: var(--teal); }
.zacht { color: var(--muted); }
.smal { max-width: 46ch; }
.kolom-smal { max-width: 60ch; }
.mt-s { margin-top: 12px; }
.mt-m { margin-top: 20px; }
.mt-l { margin-top: 24px; }
.kleine-noot { margin-top: 24px; font-size: 14px; color: var(--muted); }
.optioneel { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); }
.werk { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; align-items: start; }
.werk-titel { font-size: 24px; margin: 8px 0 12px; }
.band-donker .breed { margin-top: 28px; max-width: 70ch; }

@media (max-width: 1100px) and (min-width: 769px) {
  .hero-home h1 { font-size: 144px; }
}

/* RESPONSIVE */
@media (max-width: 768px) {
  header { padding: 16px 20px; }
  .topbalk { padding: 1px 20px; justify-content: flex-start; gap: 16px; font-size: 12px; }
  /* Op een telefoon telt enkel wat aantikbaar is; de openingsuren staan
     op de contactpagina. */
  .top-uren { display: none; }
  .nav-toggle { display: block; }
  header nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg);
    border-bottom: 2px solid var(--teal-bright);
    flex-direction: column;
    align-items: stretch;
    padding: 8px 20px 16px;
    gap: 0; z-index: 50;
  }
  header nav.open { display: flex; }
  header nav a { font-size: 16px; padding: 16px 0; border-bottom: 1px solid var(--divider); letter-spacing: 0.15em; }
  header nav a:last-child { border-bottom: none; }
  header nav a.btn-contact { background: none; color: var(--teal); padding: 16px 0; }
  header nav a.btn-contact:hover { background: none; color: var(--teal-bright); }
  .hero { grid-template-columns: 1fr; }
  /* Op een telefoon moet de uitleg én de knop in het eerste scherm passen;
     het wordmerk mag daar niet het hele beeld voor opeisen. */
  .hero-home { min-height: auto; }
  .hero-home h1 { font-size: 88px; }
  h1 { font-size: 32px; }
  .band-kop h2, .band > h2, .cta-strip h2 { font-size: 24px; }
  .typewriter-text { font-size: 18px; }
  .typewriter-ghost { font-size: 120px; }
  .hero-right { border-left: none; border-top: 2px solid var(--divider); }
  .hero-left, .hero-right { padding: 28px 20px; }
  .band { padding: 32px 20px; }
  .kruimels { padding: 12px 20px; }
  .typewriter-strip { padding: 28px 20px; }
  .typewriter-ghost { display: none; }
  .kolommen-2 { columns: 1; }
  .content-grid { grid-template-columns: 1fr; }
  .form-col { border-right: none; border-bottom: 2px solid var(--divider); padding: 28px 20px; }
  .info-col { padding: 28px 20px; }
  .field-row { grid-template-columns: 1fr; }
  .project { padding: 28px 20px; }
  .cta-strip { padding: 32px 20px; }
  .stap { grid-template-columns: 44px 1fr; gap: 12px; padding: 20px; }
  footer { grid-template-columns: 1fr; }
  footer > div:not(.footer-tagline):not(.footer-legal) { display: none; }
  footer > div { padding: 16px 20px; }
}

/* Wie beweging liever beperkt houdt, krijgt geen knipperende cursor. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .tw-cursor { animation: none; opacity: 1; }
}

/* Vangnet zonder JavaScript: menu en kerninfo blijven bereikbaar. */
.noscript-bar { background: var(--text); color: var(--bg); padding: 12px 40px; font-size: 14px; line-height: 1.6; }
.noscript-bar a { color: var(--teal-bright); text-decoration: underline; }
@media (max-width: 720px) { .noscript-bar { padding: 12px 20px; } }