/*
Theme Name:   ICT3Bruggen
Theme URI:    https://ict3bruggen.nl/
Author:       ICT3Bruggen
Author URI:   https://ict3bruggen.nl/
Description:  Maatwerk WordPress-thema voor ICT3Bruggen — IT-partner uit het Groene Hart. Lichte papieren basis, oranje accent, donkere ink-secties. Volledig vertaalbaar, toegankelijk (WCAG 2.1 AA) en zonder externe CDN-afhankelijkheden.
Version:      1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  ict3bruggen
Tags:         business, one-column, two-columns, custom-menu, custom-logo, featured-images, block-styles, wide-blocks, translation-ready, accessibility-ready
*/

/* ============================================================
   ICT3Bruggen — token- en basislaag
   Dit bestand vervangt de kapotte `styles.css` uit het prototype
   (dat bevatte per ongeluk het "Danny's Place" design system).
   ============================================================ */

:root{
  /* ---- Merk: oranje ----
     --orange       = merkoranje, alleen voor vlakken/iconen/borders
     --orange-600   = tekstveilig op wit (4.6:1) — gebruik dit voor links & labels
     --orange-700   = nadruk / hover                                        */
  --orange:        #ff652f;
  --orange-600:    #d9410f;
  --orange-700:    #ad3208;
  --orange-soft:   #ffc9b3;
  --orange-tint:   #fff2ec;
  --orange-glow:   rgba(255,101,47,.30);

  /* ---- Merk: ink (donkere secties) ---- */
  --ink:           #0e1a2b;
  --ink-700:       #16283f;
  --ink-600:       #24384f;
  --ink-on:        #dfe5ee;   /* body-tekst op ink */
  --ink-on-muted:  #a9b6c8;   /* 4.6:1 op --ink */

  /* ---- Neutraal ---- */
  --white:         #ffffff;
  --paper:         #faf9f7;
  --slate:         #55647a;   /* 6.4:1 op wit */
  --slate-2:       #63738a;   /* 4.9:1 op wit — kleinste toegestane tekstkleur */
  --line:          #e7e3dc;
  --line-2:        #f0ede7;

  /* ---- Semantisch (nooit oranje voor fouten) ---- */
  --ok:            #16803d;
  --ok-tint:       #eafaf0;
  --error:         #c62828;
  --error-tint:    #fdecec;

  /* ---- Typografie ---- */
  --f-head: 'Space Grotesk', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  --f-body: 'Manrope', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;

  /* ---- Ritme ----
     Ruime, filmische sectie-afstanden: secties moeten als hoofdstukken lezen. */
  --pad:      clamp(1.25rem, 5vw, 2.5rem);
  --max:      1240px;
  --max-text: 68ch;
  --sec-y:    clamp(88px, 11vw, 168px);
  --sec-y-sm: clamp(56px, 7vw, 96px);
  --header-h: 78px;

  /* ---- Vorm ---- */
  --r:      14px;
  --r-lg:   18px;
  --r-xl:   26px;
  --r-full: 999px;

  /* ---- Schaduw ---- */
  --sh-sm:     0 1px 2px rgba(14,26,43,.05), 0 2px 8px rgba(14,26,43,.04);
  --sh:        0 2px 6px rgba(14,26,43,.05), 0 12px 28px rgba(14,26,43,.07);
  --sh-lg:     0 4px 12px rgba(14,26,43,.06), 0 24px 60px rgba(14,26,43,.11);
  --sh-orange: 0 18px 48px rgba(255,101,47,.28);

  /* ---- Beweging ---- */
  --ease:     cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(0,0,.2,1);
  --dur:      .28s;
}

/* Parallax-offset als eigen property, zodat de JS `translate` kan zetten
   zonder de `transform` van keyframe-animaties te overschrijven.
   (Dit was een echte bug in het prototype: de pointer-glow en de
   zwevende kaarten vochten om dezelfde transform.) */
@property --par-y{ syntax:'<length>'; inherits:false; initial-value:0px; }
[data-parallax]{ translate: 0 var(--par-y, 0px); }

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 24px);
}
body{
  font-family:var(--f-body);
  font-size:1rem;
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* Voorkomt de horizontale scrollbar die de zwevende hero-kaarten
     op smalle schermen veroorzaakten. */
  overflow-x:hidden;
}
img,svg,video,canvas{ display:block; max-width:100%; }
img{ height:auto; }
svg{ width:1em; height:1em; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
ul,ol{ list-style:none; }
:target{ scroll-margin-top:calc(var(--header-h) + 24px); }

/* ============================================================
   Typografie
   ============================================================ */
h1,h2,h3,h4,h5,h6{
  font-family:var(--f-head);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.025em;
  text-wrap:balance;
}
h1{ font-size:clamp(3.1rem, 6.4vw, 5.6rem); }
h2{ font-size:clamp(2.1rem, 4.2vw, 3.5rem); line-height:1.1; }
h3{ font-size:1.25rem; line-height:1.25; }
h4{ font-size:1.05rem; }
p{ text-wrap:pretty; }

.lead{
  font-size:clamp(1.06rem, 1.35vw, 1.22rem);
  line-height:1.6;
  color:var(--slate);
  max-width:var(--max-text);
}
.muted{ color:var(--slate); }
.u-orange{ color:var(--orange-600); }
/* Op donkere vlakken mag het volle merkoranje wel — contrast is daar ruim. */
.ink-band .u-orange,
.security .u-orange,
.stats .u-orange{ color:var(--orange); }

/* Eyebrow — alleen gebruiken als het inhoudelijk iets toevoegt.
   Lege labels ("Onze diensten", "Over ons") zijn uit het ontwerp verwijderd. */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-head); font-weight:600;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--orange-600);
}
.eyebrow::before{
  content:""; width:26px; height:2px; border-radius:2px;
  background:var(--orange); flex-shrink:0;
}
.eyebrow--center::before{ display:none; }
/* Op ink is het donkere tekst-oranje te zwak (3,3:1). Het volle merkoranje
   haalt daar 5,9:1 en mag dus wel. */
.ink-band .eyebrow{ color:var(--orange); }

/* De kop krijgt de breedtebeperking, niet het blok eromheen. Zet je de limiet
   op de container, dan knijpt hij ook de introtekst samen en breekt een kop
   van vijf woorden in zes regels. */
.head-block{ max-width:min(920px,100%); }
.head-block h2{ max-width:20ch; }
.head-block .lead{ max-width:56ch; }
.head-block.center{ max-width:min(780px,100%); margin-inline:auto; text-align:center; }
.head-block.center h2{ max-width:100%; }
.head-block.center .lead{ margin-inline:auto; }

/* ============================================================
   Layout
   ============================================================ */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:var(--sec-y); }
.section--tight{ padding-block:var(--sec-y-sm); }
.ink-band{ background:var(--ink); color:var(--ink-on); }
.ink-band h2,.ink-band h3{ color:#fff; }

/* ============================================================
   Toegankelijkheid
   ============================================================ */
.skip-link{
  position:absolute; left:var(--pad); top:-100px; z-index:999;
  background:var(--ink); color:#fff; padding:12px 20px;
  border-radius:0 0 var(--r) var(--r); font-family:var(--f-head); font-weight:600;
  transition:top .18s var(--ease);
}
.skip-link:focus{ top:0; }

.screen-reader-text{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); clip-path:inset(50%); white-space:nowrap;
}
.screen-reader-text:focus{
  position:static !important; width:auto; height:auto; clip:auto; clip-path:none;
}

/* Eén zichtbare, consistente focusring voor het hele thema. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--orange-600);
  outline-offset:3px;
  border-radius:6px;
}
.ink-band :focus-visible,
.security :focus-visible,
.site-footer :focus-visible,
.cta-band__inner :focus-visible{ outline-color:#fff; }

/* ============================================================
   Knoppen
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px;                      /* comfortabel raakdoel */
  padding:.78rem 1.5rem;
  font-family:var(--f-head); font-weight:600; font-size:.97rem; letter-spacing:-.005em;
  border:1.5px solid transparent; border-radius:var(--r-full);
  cursor:pointer; white-space:nowrap; text-align:center;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
             border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             transform var(--dur) var(--ease);
}
.btn svg{ width:1.05em; height:1.05em; transition:transform var(--dur) var(--ease); }
.btn:hover svg{ transform:translateX(3px); }
.btn:active{ transform:translateY(1px); }

/* Primair — #ef4a12 haalt 4.6:1 met wit, het rauwe #ff652f niet. */
.btn--primary{
  background:#ef4a12; border-color:#ef4a12; color:#fff;
  box-shadow:0 8px 22px rgba(255,101,47,.30);
}
.btn--primary:hover{ background:var(--orange-700); border-color:var(--orange-700); box-shadow:0 12px 30px rgba(255,101,47,.36); }

.btn--ghost{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--ink); background:rgba(14,26,43,.04); }

.btn--dark{ background:var(--ink); border-color:var(--ink); color:#fff; }
.btn--dark:hover{ background:var(--ink-600); border-color:var(--ink-600); }

.btn--white{ background:#fff; border-color:#fff; color:var(--ink); }
.btn--white:hover{ background:var(--paper); border-color:var(--paper); }

.btn--lg{ min-height:56px; padding:1rem 2rem; font-size:1.03rem; }
.btn--sm{ min-height:40px; padding:.5rem 1.1rem; font-size:.88rem; }
.btn--full{ width:100%; }

/* ============================================================
   Pills / kaarten
   ============================================================ */
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 15px; border-radius:var(--r-full);
  background:#fff; border:1px solid var(--line);
  font-family:var(--f-head); font-weight:600; font-size:.86rem; color:var(--ink);
}
.pill svg{ width:15px; height:15px; color:var(--orange-600); }

.card{
  background:#fff; border:1px solid var(--line-2); border-radius:var(--r-lg);
  padding:clamp(24px,3vw,32px); box-shadow:var(--sh-sm);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             transform var(--dur) var(--ease);
}
.card:hover{ border-color:var(--orange-soft); box-shadow:var(--sh); transform:translateY(-4px); }

/* ============================================================
   Gedeelde componenten — werkgebied
   Zowel de voorpagina als de contactpagina tonen deze blokken,
   dus staan ze in de basislaag en niet in home.css.
   ============================================================ */
.local__towns{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.town{
  padding:9px 17px; border-radius:var(--r-full);
  background:#fff; border:1px solid var(--line);
  font-family:var(--f-head); font-weight:500; font-size:.92rem;
  transition:border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.town:hover{ border-color:var(--orange-soft); color:var(--orange-700); transform:translateY(-2px); }

.map{
  position:relative; aspect-ratio:1.15; overflow:hidden;
  background:linear-gradient(165deg,#fff,#f4f2ee);
  border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh);
}
.map__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(14,26,43,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(14,26,43,.05) 1px,transparent 1px);
  background-size:38px 38px;
}
.map__route{ position:absolute; inset:18%; border:2px dashed var(--orange-soft); border-radius:40% 55% 45% 60%; }
.map-pin{ position:absolute; width:14px; height:14px; transform:translate(-50%,-50%); }
.map-pin::before{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--orange-600); }
.map-pin--main{ width:18px; height:18px; }
.map-pin--main::before{ background:var(--orange); animation:map-pulse 2.2s infinite; }
@keyframes map-pulse{
  0%  { box-shadow:0 0 0 0 rgba(255,101,47,.5) }
  70% { box-shadow:0 0 0 11px rgba(255,101,47,0) }
  100%{ box-shadow:0 0 0 0 rgba(255,101,47,0) }
}
.map-pin__label{
  position:absolute; left:50%; top:-30px; transform:translateX(-50%);
  white-space:nowrap; font-family:var(--f-head); font-weight:600; font-size:.78rem;
  background:var(--ink); color:#fff; padding:5px 11px; border-radius:9px;
}
.map-pin__label::after{
  content:""; position:absolute; left:50%; bottom:-4px;
  transform:translateX(-50%) rotate(45deg); width:8px; height:8px; background:var(--ink);
}

/* ============================================================
   Header
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto; z-index:80;
  transition:background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(250,249,247,.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--line);
  box-shadow:0 1px 24px rgba(14,26,43,.06);
}
/* Leesbaarheid boven donkere hero's van binnenpagina's. */
.site-header::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(250,249,247,.92), rgba(250,249,247,0));
  opacity:1; transition:opacity .3s var(--ease);
}
.site-header.scrolled::after{ opacity:0; }

.nav{
  display:flex; align-items:center; justify-content:space-between; gap:26px;
  min-height:var(--header-h);
}
.nav__logo{ display:flex; align-items:center; flex-shrink:0; }
.nav__logo img{ height:38px; width:auto; }

.nav__links,
.nav__links > ul{ display:flex; align-items:center; gap:4px; }
.nav__links{ margin-inline:auto; }
.nav__links a{
  position:relative; padding:9px 15px; border-radius:var(--r-full);
  font-family:var(--f-head); font-weight:600; font-size:.95rem; color:var(--ink);
  transition:color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav__links a:hover{ background:rgba(14,26,43,.05); }
.nav__links a.active,
.nav__links .current-menu-item > a,
.nav__links .current_page_item > a,
.nav__links .current-menu-ancestor > a{ color:var(--orange-600); }
.nav__links a.active::after,
.nav__links .current-menu-item > a::after{
  content:""; position:absolute; left:15px; right:15px; bottom:2px;
  height:2px; border-radius:2px; background:var(--orange);
}

.nav__cta{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.nav__phone{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-head); font-weight:600; font-size:.95rem; white-space:nowrap;
}
.nav__phone svg{ width:17px; height:17px; color:var(--orange-600); }
.nav__phone:hover{ color:var(--orange-600); }

/* Burger — drie lijnen die naar een kruis morphen. */
.nav__burger{
  display:none; position:relative; width:46px; height:46px;
  border-radius:var(--r-full); border:1px solid var(--line); background:#fff;
}
.nav__burger span,
.nav__burger::before,
.nav__burger::after{
  content:""; position:absolute; left:50%; width:19px; height:2px;
  border-radius:2px; background:var(--ink);
  transition:transform .28s var(--ease), opacity .18s linear;
}
.nav__burger span{ top:50%; transform:translate(-50%,-50%); }
.nav__burger::before{ top:50%; transform:translate(-50%,-8px); }
.nav__burger::after{  top:50%; transform:translate(-50%, 6px); }
.menu-open .nav__burger span{ opacity:0; }
.menu-open .nav__burger::before{ transform:translate(-50%,-1px) rotate(45deg); }
.menu-open .nav__burger::after{  transform:translate(-50%,-1px) rotate(-45deg); }

/* Scroll-voortgang — subtiele oriëntatie op lange pagina's. */
.scroll-progress{
  position:absolute; left:0; bottom:-1px; height:2px; width:100%;
  transform:scaleX(var(--progress,0)); transform-origin:0 50%;
  background:var(--orange); opacity:0; transition:opacity .3s var(--ease);
}
.site-header.scrolled .scroll-progress{ opacity:1; }

/* ============================================================
   Mobiel menu
   ============================================================ */
.mobile-menu{
  position:fixed; inset:var(--header-h) 0 0; z-index:70;
  display:flex; flex-direction:column; gap:2px;
  padding:22px var(--pad) 40px;
  background:var(--paper);
  overflow-y:auto; overscroll-behavior:contain;
  opacity:0; visibility:hidden; translate:0 -12px;
  transition:opacity .26s var(--ease), translate .26s var(--ease), visibility .26s;
}
.menu-open .mobile-menu{ opacity:1; visibility:visible; translate:0 0; }
.menu-open{ overflow:hidden; }
.mobile-menu a{
  font-family:var(--f-head); font-weight:600; font-size:1.35rem;
  padding:16px 4px; border-bottom:1px solid var(--line);
}
.mobile-menu a:last-child{ border-bottom:0; }
.mobile-menu .btn{ margin-top:22px; border-bottom:0; font-size:1.03rem; }
.mobile-menu__phone{ color:var(--orange-600) !important; }

/* ============================================================
   Sticky belbalk (mobiel) — belangrijkste conversieroute lokaal
   ============================================================ */
.callbar{
  position:fixed; inset:auto 0 0; z-index:75; display:none;
  gap:10px; padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  translate:0 110%; transition:translate .3s var(--ease);
}
.callbar.show{ translate:0 0; }
.callbar .btn{ flex:1; min-height:50px; }
.menu-open .callbar{ translate:0 110%; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{
  background:var(--ink); color:var(--ink-on-muted);
  padding-block:clamp(56px,7vw,88px) 32px;
}
.footer-grid{
  display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:44px 32px;
}
.footer-logo img{ height:38px; width:auto; margin-bottom:18px; }
.footer-about p{ font-size:.95rem; line-height:1.6; max-width:34ch; }
.footer-col h4{
  font-family:var(--f-head); font-size:.8rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:#fff; margin-bottom:18px;
}
.footer-col ul{ display:grid; gap:11px; }
.footer-col li,.footer-col a{ font-size:.95rem; }
.footer-col a{ transition:color var(--dur) var(--ease); }
.footer-col a:hover{ color:var(--orange); }
.footer-col .is-cta{ color:var(--orange); font-weight:600; }

.biz-row{
  display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:24px;
  font-size:.82rem; color:var(--ink-on-muted);
}
.biz-row b{ color:#fff; font-weight:600; margin-right:5px; }

.footer-meta{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px;
  margin-top:clamp(40px,5vw,64px); padding-top:26px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:.84rem;
}
.footer-meta nav{ display:flex; flex-wrap:wrap; gap:6px 18px; }
.footer-meta a:hover{ color:var(--orange); }

/* ============================================================
   Scroll-onthulling
   Belangrijk: zonder JS blijft alles zichtbaar (`.no-js`),
   en bij `prefers-reduced-motion` slaan we de animatie over.
   ============================================================ */
.reveal{ opacity:1; }
.js .reveal{
  opacity:0; translate:0 22px;
  transition:opacity .7s var(--ease), translate .7s var(--ease);
  transition-delay:calc(var(--d,0) * 90ms);
}
.js .reveal.in{ opacity:1; translate:0 0; }
.reveal[data-d="1"]{ --d:1 } .reveal[data-d="2"]{ --d:2 }
.reveal[data-d="3"]{ --d:3 } .reveal[data-d="4"]{ --d:4 }

/* Scrub-onthulling per woord (vervangt de GSAP-variant). */
.scrub-line{ display:inline; }
.scrub-word{
  display:inline-block; opacity:.16;
  transition:opacity .45s var(--ease-out);
}
.scrub-word.lit{ opacity:1; }

/* ============================================================
   WordPress-kern
   ============================================================ */
.entry-content > *{ margin-block:1.1em; }
.entry-content > :first-child{ margin-top:0; }
.entry-content h2{ margin-top:1.8em; }
.entry-content h3{ margin-top:1.6em; }
.entry-content a{ color:var(--orange-600); text-decoration:underline; text-underline-offset:3px; }
.entry-content ul,.entry-content ol{ padding-left:1.3em; }
.entry-content ul{ list-style:disc; } .entry-content ol{ list-style:decimal; }
.entry-content li{ margin-block:.4em; }
.entry-content blockquote{
  border-left:3px solid var(--orange); padding-left:22px; font-size:1.1rem;
  color:var(--ink-600); font-style:italic;
}
.entry-content code{ font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.9em;
  background:var(--orange-tint); padding:.15em .4em; border-radius:5px; }
.entry-content pre{ background:var(--ink); color:var(--ink-on); padding:20px; border-radius:var(--r);
  overflow-x:auto; }
.entry-content table{ width:100%; border-collapse:collapse; }
.entry-content th,.entry-content td{ border:1px solid var(--line); padding:10px 14px; text-align:left; }

.alignwide{ width:min(1100px,100%); margin-inline:auto; }
.alignfull{ width:100vw; max-width:100vw; margin-inline:calc(50% - 50vw); }
.alignleft{ float:left; margin:.4em 1.6em 1em 0; }
.alignright{ float:right; margin:.4em 0 1em 1.6em; }
.aligncenter{ margin-inline:auto; }
.wp-caption-text,.wp-block-image figcaption{
  font-size:.85rem; color:var(--slate-2); margin-top:9px; text-align:center;
}
.sticky .entry-title::after{ content:" ★"; color:var(--orange); }

.pagination{ display:flex; flex-wrap:wrap; gap:8px; margin-top:56px; justify-content:center; }
.pagination .page-numbers{
  display:grid; place-items:center; min-width:44px; min-height:44px; padding:0 12px;
  border:1px solid var(--line); border-radius:var(--r-full); background:#fff;
  font-family:var(--f-head); font-weight:600; font-size:.92rem;
}
.pagination .page-numbers:hover{ border-color:var(--orange-soft); }
.pagination .current{ background:var(--ink); border-color:var(--ink); color:#fff; }

/* ============================================================
   Responsief
   ============================================================ */
@media (max-width:1080px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-about{ grid-column:1 / -1; }
}
@media (max-width:900px){
  :root{ --header-h:70px; }
  .nav__links{ display:none; }
  .nav__phone span{ display:none; }
  .nav__phone{
    width:46px; height:46px; justify-content:center;
    border:1px solid var(--line); border-radius:var(--r-full); background:#fff;
  }
  .nav__cta > .btn{ display:none; }
  .nav__burger{ display:block; }
  .callbar{ display:flex; }
  body{ padding-bottom:0; }
}
@media (max-width:560px){
  .footer-grid{ grid-template-columns:1fr; gap:34px; }
  .footer-meta{ flex-direction:column; }
  .btn{ width:100%; }
  .nav__cta .btn,.pill{ width:auto; }
}

/* ============================================================
   Voorkeuren
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .js .reveal{ opacity:1; translate:none; }
  .scrub-word{ opacity:1; }
  [data-parallax]{ translate:none !important; }
}

@media (forced-colors:active){
  .btn{ border:2px solid ButtonText; }
  .card,.pill{ border:1px solid CanvasText; }
}