/* =============================================================
   BOUWHUIS MEDIA — BASIS, COMPONENTEN, HEADER & FOOTER
   ============================================================= */

/* --- RESET ------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

/* --- TYPOGRAFIE -------------------------------------------- */

/* ALLE KOPPEN WORDEN HIER GEZET, EN NERGENS ANDERS.
   Zet je in een sectie opnieuw een font-size, font-weight,
   letter-spacing of line-height op een h1 of h2, dan loopt die
   kop uit de pas zodra de ladder in tokens.css verandert. Wil je
   dat een kop kleiner staat: geef hem dan de klasse van een
   lagere trede, niet zijn eigen maat. */
h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: var(--ls-head);
  line-height: var(--lh-head);
  text-wrap: balance;
}

/* h1 en h2 zijn allebei "grote kop": zelfde gewicht, zelfde
   spatiëring, alleen een andere maat. Daardoor leest een
   sectiekop op /prijzen exact als eentje op de homepage. */
h1, h2 {
  font-weight: 700;
  letter-spacing: var(--ls-groot);
  line-height: var(--lh-groot);
}

h1 {
  font-size: var(--fs-display);
  overflow-wrap: break-word;
}
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

/* DE UITZONDERINGEN, BIJ ELKAAR.
   Op een paar plekken staat er om inhoudelijke redenen een h2 in
   de html waar visueel een kaartkop hoort: de titel van een blok
   bínnen een sectie, niet de kop van de sectie zelf. Die krijgen
   hier de h3-trede terug.

   Ze staan expres in één regel bij elkaar en niet verspreid over
   de pagina-stylesheets: zo zie je in één oogopslag welke koppen
   afwijken, en het zijn er precies vier. */
.hw-pijler__titel,
.case__kop h2,
.aanvraag__kop,
.gelukt h2 {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: var(--ls-head);
  line-height: var(--lh-head);
}


p { margin: 0; }

.lead {
  font-size: var(--fs-lead);
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: var(--measure);
  text-wrap: pretty;
}

/* --- HET KLEURVERLOOP OP EEN KOP ----------------------------
   Eén regel, één plek, en overal hetzelfde. Blauw dat naar een
   groenige tint loopt: blauw is het merk, groen staat voor het
   resultaat.

   Je zet hem aan door in een h1 of h2 het belangrijkste stukje
   in <em> te zetten. Meer dan één stukje per kop, of een verloop
   op elke kop van een pagina, en het valt nergens meer op —
   gebruik hem dus spaarzaam.

   <span class="accent"> doet binnen een kop hetzelfde. Die stond
   er eerder al op een aantal pagina's als plat blauw; door hem
   hier mee te nemen lopen die koppen automatisch mee in plaats
   van dat ze uit de toon vallen.  */
h1 em, h2 em,
h1 .accent, h2 .accent,
.hero2__verloop {
  font-style: normal;
  background: linear-gradient(100deg, #1B4FE0 0%, #2E7CE8 52%, #17A06B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;

  /* HIER ZAT DE AFGEKNIPTE G.
     background-clip: text plakt het verloop op de letters, maar
     alleen bínnen het vlak waar dat verloop bestaat — en dat vlak
     is precies zo hoog als de regel. De staart van de g steekt
     daar zeven pixels onderuit, kreeg dus geen kleur, en was
     onzichtbaar. Het leek een afknipping maar het was een letter
     zonder verf.

     Deze padding rekt het verloopvlak op zonder de tekst te
     verplaatsen. Verander je de regelhoogte of het lettertype,
     controleer dan opnieuw de g van "reserveringen". */
  padding-bottom: .22em;
}

/* Valt het verloop weg in een oude browser, dan blijft de tekst
   gewoon blauw en leesbaar. */
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  h1 em, h2 em,
  h1 .accent, h2 .accent,
  .hero2__verloop { color: var(--brand); -webkit-text-fill-color: currentColor; }
}

/* Buiten een kop blijft .accent gewoon vlak blauw. */
.accent { color: var(--brand); }
.nowrap { white-space: nowrap; }

.eyebrow {
  display: inline-block;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--space-4);
}

.micro {
  font-size: var(--fs-small);
  color: var(--ink-muted);
}

/* --- LAYOUT ------------------------------------------------ */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* De header krijgt meer horizontale ruimte dan de rest van de pagina,
   anders wordt de navigatie gepropt. Content en footer blijven 1200px. */
.header .container { max-width: var(--container-wide); }

.section { padding-block: var(--section-y); position: relative; }
.section--tint { background: var(--surface-2); }
.section--dark { background: var(--dark); color: var(--dark-text); }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--flush-top { padding-top: 0; }

/* Meegegroeid met de kopmaat: op 54px is 640px te smal en breken
   sectiekoppen in drie regels. De lead eronder houdt zijn eigen
   leesbreedte via .lead. */
.section-head { max-width: 780px; margin-bottom: var(--space-8); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--wide { max-width: 780px; }
.section-head h2 + .lead { margin-top: var(--space-4); }

.stack-4 > * + * { margin-top: var(--space-4); }
.stack-5 > * + * { margin-top: var(--space-5); }

/* --- KNOPPEN ----------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .875rem 1.375rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: -.005em;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--brand);
  color: #fff;
  box-shadow: var(--shadow-brand);
}
.btn--primary:hover { background: var(--brand-hover); }

.btn--secondary {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.btn--secondary:hover { border-color: #CFD8E6; background: #FCFDFF; }

.btn--ghost { color: var(--ink); padding-inline: .25rem; }
.btn--ghost:hover { color: var(--brand); }

/* Stille variant: even hoog als een gewone knop, maar zonder vlak.
   Gebruikt voor "Inloggen" naast de primaire actie in de navigatie,
   zodat die twee nooit om dezelfde aandacht vechten. */
.btn--stil {
  background: transparent;
  color: var(--ink);
  border: 1px solid transparent;
  box-shadow: none;
  font-weight: 500;
}
.btn--stil svg { color: var(--ink-muted); transition: color var(--t-fast) var(--ease); }
.btn--stil:hover {
  background: var(--surface-2);
  border-color: var(--line);
}
.btn--stil:hover svg { color: var(--ink-soft); }

/* Compacte maat voor in de navigatiebalk. De doorzichtige rand zorgt
   dat beide knoppen precies even hoog zijn, ook al heeft alleen de
   stille variant er zichtbaar een. */
.btn--nav {
  padding: .65rem 1.05rem;
  border: 1px solid transparent;
}

.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: #F2F5FA; }

.btn--outline-dark {
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
}
.btn--outline-dark:hover { background: rgba(255,255,255,.08); }

.btn--lg { padding: 1.0625rem 1.75rem; font-size: var(--fs-body); }
.btn--sm { padding: .6rem 1rem; font-size: var(--fs-micro); }
.btn--block { width: 100%; }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--brand);
}
.arrow-link svg { transition: transform var(--t-base) var(--ease); }
.arrow-link:hover svg { transform: translateX(4px); }

/* --- KAARTEN ----------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--space-6);
  transition: border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.card h3 { margin-bottom: var(--space-3); }

a.card:hover, .card--hover:hover {
  border-color: #D3DCEA;
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* --- HEADER ------------------------------------------------ */

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  /* Geen randje onderaan. De balk staat op een off-white pagina
     en scheidt zichzelf al met zijn witte vlak; een lijn maakte
     er een kader van. Wil je hem terug: border-bottom: 1px solid
     var(--line) — en dan hoort er in main.js weer een klasse bij
     die hem pas bij het scrollen aanzet. */
  transition: background var(--t-base) var(--ease);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  height: 72px;
}
/* Het logo links en de knoppen rechts krijgen evenveel ruimte,
   waardoor de navigatie precies in het midden van de balk komt te
   staan in plaats van tegen het logo aan. Krijgt de navigatie te
   weinig plek, dan mogen de zijkanten krimpen. */
.header__inner > .logo,
.header__inner > .header__utils { flex: 1 1 0; min-width: 0; }
.header__inner > .header__utils { justify-content: flex-end; }

.logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
/* Het logo is een breed woordmerk. We sturen op hoogte, de breedte
   volgt vanzelf. Wil je hem groter of kleiner: alleen deze regel. */
.logo img {
  height: 26px;
  width: auto;
  display: block;
}
.footer .logo img { height: 28px; }
/* Klein merkteken, gebruikt in de productvisuals. */
.merk { width: 24px; height: 24px; flex-shrink: 0; }

.nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  flex: 0 0 auto;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .5rem .75rem;
  border-radius: var(--r-xs);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink-soft);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav__link:hover { color: var(--ink); background: var(--surface-2); }
.nav__link.is-active { color: var(--ink); font-weight: 600; }
.nav__link .chev { transition: transform var(--t-base) var(--ease); }

/* De twee acties rechts. Extra ruimte links ervan, zodat ze duidelijk
   losstaan van de gewone navigatie. */
.header__utils {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Sectoren-paneel */
.nav__item { position: relative; }

.dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: min(560px, 92vw);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease),
              transform var(--t-base) var(--ease),
              visibility var(--t-base);
  z-index: var(--z-menu);
}
.nav__item:hover .dropdown,
.nav__item:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav__item:hover .nav__link .chev { transform: rotate(180deg); }

.dropdown::before {
  content: "";
  position: absolute;
  inset: -14px 0 auto 0;
  height: 14px;
}

.dropdown__card {
  padding: var(--space-3);
  border-radius: var(--r-md);
  transition: background var(--t-fast) var(--ease);
}
.dropdown__card:hover { background: var(--surface-2); }
.dropdown__thumb {
  aspect-ratio: 16/10;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface-3);
  margin-bottom: var(--space-3);
}
.dropdown__thumb img { width: 100%; height: 100%; object-fit: cover; }
.dropdown__card strong {
  display: block;
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 600;
  margin-bottom: 2px;
}
.dropdown__card span { font-size: var(--fs-micro); color: var(--ink-muted); }

.dropdown__note {
  grid-column: 1 / -1;
  padding: var(--space-3);
  font-size: var(--fs-micro);
  color: var(--ink-muted);
  border-top: 1px solid var(--line-soft);
  margin-top: var(--space-1);
}

/* Mobiel menu */
.burger {
  display: none;
  width: 40px; height: 40px;
  border-radius: var(--r-xs);
  align-items: center; justify-content: center;
}
.burger span {
  display: block; width: 18px; height: 1.5px;
  background: var(--ink); border-radius: 2px;
  position: relative;
  transition: transform var(--t-base) var(--ease), background var(--t-fast);
}
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0;
  width: 18px; height: 1.5px; background: var(--ink); border-radius: 2px;
  transition: transform var(--t-base) var(--ease), top var(--t-base) var(--ease);
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.burger.is-open span { background: transparent; }
.burger.is-open span::before { top: 0; transform: rotate(45deg); }
.burger.is-open span::after  { top: 0; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 72px 0 0 0;
  background: var(--surface);
  z-index: var(--z-menu);
  padding: var(--space-6) var(--gutter) var(--space-8);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--t-base) var(--ease),
              transform var(--t-base) var(--ease),
              visibility var(--t-base);
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; }
/* Alleen de navigatielinks zelf. De knoppen in de voet houden hun
   eigen opmaak, anders wint deze regel van .btn en wordt de blauwe
   knop links uitgelijnd met donkere tekst. */
.mobile-menu > a {
  display: block;
  padding: var(--space-4) 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.02em;
  border-bottom: 1px solid var(--line-soft);
}
.mobile-menu > .sub { padding-left: var(--space-5); font-size: 1.05rem; font-weight: 500; color: var(--ink-soft); }
.mobile-menu__foot { margin-top: var(--space-7); display: grid; gap: var(--space-4); }
.mobile-menu__foot .btn { width: 100%; }

/* Inloggen blijft ook op mobiel duidelijk de stille van de twee. */
.mobile-menu__login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink-soft);
}
.mobile-menu__login svg { color: var(--ink-muted); }
.mobile-menu__login:hover { color: var(--ink); }

/* --- FOOTER ------------------------------------------------ */

.footer {
  background: var(--dark);
  color: var(--dark-text);
  padding-block: var(--space-9) var(--space-6);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--space-7);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--dark-line);
}

.footer__intro p { margin-top: var(--space-4); font-size: var(--fs-small); max-width: 30ch; }
.footer__contact { margin-top: var(--space-5); display: grid; gap: .35rem; font-size: var(--fs-small); }
.footer__contact a:hover { color: #fff; }

.footer h4 {
  color: #fff;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  font-weight: 600;
  margin-bottom: var(--space-4);
}
.footer li + li { margin-top: .6rem; }
.footer li a { font-size: var(--fs-small); transition: color var(--t-fast); }
.footer li a:hover { color: #fff; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-5);
  justify-content: space-between;
  padding-top: var(--space-5);
  font-size: var(--fs-micro);
  color: rgba(255,255,255,.42);
}
.footer__legal { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.footer__legal a:hover { color: #fff; }

/* --- CHATWIDGET -------------------------------------------- */

.chat {
  /* Eén waarde voor rechts én onder, zodat de knop exact
     even ver van beide randen staat. */
  --chat-marge: 1.5rem;

  position: fixed;
  right: var(--chat-marge);
  bottom: var(--chat-marge);
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .75rem;
}

.chat__knop {
  position: relative;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 6px 24px rgba(27,79,224,.34), 0 2px 6px rgba(10,16,32,.14);
  transition: transform var(--t-base) var(--ease), background var(--t-fast) var(--ease);
}
.chat__knop:hover { background: var(--brand-hover); transform: translateY(-2px); }
.chat__knop > span { grid-area: 1 / 1; transition: opacity var(--t-fast) var(--ease), transform var(--t-base) var(--ease); }
.chat__knop-sluit { opacity: 0; transform: rotate(-90deg); }
.chat.is-open .chat__knop-chat  { opacity: 0; transform: rotate(90deg); }
.chat.is-open .chat__knop-sluit { opacity: 1; transform: none; }

.chat__knop-stip {
  position: absolute;
  top: 4px; right: 4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--positive);
  border: 2px solid #fff;
}

/* Het paneel */
.chat__paneel {
  width: min(350px, calc(100vw - 2 * var(--chat-marge)));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 4px 12px rgba(10,16,32,.06), 0 24px 60px rgba(10,16,32,.18);
  overflow: hidden;
  transform-origin: bottom right;
  opacity: 0;
  transform: translateY(10px) scale(.97);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.chat__paneel[hidden] { display: none; }
.chat.is-open .chat__paneel { opacity: 1; transform: none; }

.chat__kop {
  position: relative;
  padding: var(--space-6) var(--space-5) var(--space-5);
  background: var(--dark);
  color: #fff;
  text-align: center;
}
.chat__kop strong { display: block; font-size: var(--fs-small); font-weight: 600; }
.chat__kop > span { font-size: var(--fs-micro); color: rgba(255,255,255,.55); }

.chat__sluit {
  position: absolute;
  top: .6rem; right: .6rem;
  width: 32px; height: 32px;
  border-radius: 50%;
  color: rgba(255,255,255,.6);
  display: grid; place-items: center;
  transition: background var(--t-fast), color var(--t-fast);
}
.chat__sluit:hover { background: rgba(255,255,255,.1); color: #fff; }

.chat__persoon { position: relative; width: 52px; margin: 0 auto var(--space-3); }
.chat__foto {
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.chat__foto--letters {
  display: grid; place-items: center;
  background: var(--brand);
  color: #fff;
  font-weight: 650;
  font-size: 1.05rem;
  letter-spacing: -.02em;
}
.chat__status {
  position: absolute;
  right: -1px; bottom: -1px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #6B7488;
  border: 2px solid var(--dark);
}
.chat__status.is-open { background: var(--positive); }

.chat__body { padding: var(--space-5); }
.chat__groet {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.02em;
  margin-bottom: .3rem;
}
.chat__intro { font-size: var(--fs-micro); color: var(--ink-muted); margin-bottom: var(--space-5); }

.chat__optie {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .8rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.chat__optie + .chat__optie { margin-top: .5rem; }
.chat__optie:hover { border-color: #CFD8E6; background: var(--surface-2); transform: translateX(2px); }
.chat__optie strong {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink);
}
.chat__optie em { font-style: normal; font-size: var(--fs-micro); color: var(--ink-muted); }

.chat__icoon {
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink-soft);
  display: grid; place-items: center;
}
.chat__optie--wa .chat__icoon { background: #E7F8EE; color: #1FA855; }

.chat__voet {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .8rem;
  border-top: 1px solid var(--line-soft);
  background: var(--surface-2);
  font-size: var(--fs-micro);
  color: var(--ink-muted);
}
.chat__stip {
  width: 7px; height: 7px; border-radius: 50%;
  background: #B4BCCA;
}
.chat__stip.is-open { background: var(--positive); }

/* --- SCROLL-REVEAL ----------------------------------------- */

.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* --- RESPONSIVE -------------------------------------------- */

@media (max-width: 1040px) {
  .nav { display: none; }
  .burger { display: flex; }
  .header__inner { justify-content: space-between; gap: var(--space-4); }
  .header__inner > .logo, .header__inner > .header__utils { flex: 0 0 auto; }
  .header__utils { margin-left: auto; padding-left: 0; }
  /* Inloggen zit vanaf hier in het menu, niet meer in de balk. */
  .header__utils .btn--stil { display: none; }
}

@media (max-width: 860px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .footer__intro { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .header__utils .btn { display: none; }
  body { padding-bottom: 0; }

  /* Er staat niets meer onderin het scherm, dus de chatknop mag
     gewoon op zijn eigen plek blijven staan. */
  .chat { --chat-marge: 1.25rem; }
  .chat__knop { width: 58px; height: 58px; }
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}