/* =========================================================
   Woudenberg Connect — shared stylesheet
   UniFi-inspired, ui.com-style design system
   ========================================================= */

:root {
  --navy-950: #06182e;
  --navy-900: #0a2540;
  --navy-800: #0f3157;
  --navy-700: #163f6c;
  --blue-600: #157dd1;
  --blue-500: #1e9be0;
  --blue-400: #4db4ea;
  --blue-100: #e6f4fc;
  --ink: #0a2540;
  --ink-soft: #45607a;
  --paper: #ffffff;
  --paper-soft: #f4f8fb;
  --line: #e1e9f0;
  --success: #1fae6b;
  --yellow-500: #f2c230;
  --yellow-100: #fdf3d6;

  --container: 1180px;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow-sm: 0 2px 10px rgba(10, 37, 64, 0.06);
  --shadow-md: 0 12px 32px rgba(10, 37, 64, 0.12);
  --shadow-lg: 0 24px 60px rgba(10, 37, 64, 0.18);

  --ease: cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--navy-900); }
p { margin: 0 0 1em; color: var(--ink-soft); text-wrap: pretty; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

section { position: relative; }
.section { padding: 96px 0; }
.section--tight { padding: 64px 0; }
.section--dark {
  background: linear-gradient(180deg, var(--navy-950), var(--navy-900));
  color: #fff;
}
.section--dark h2, .section--dark h3, .section--dark p { color: #fff; }
.section--dark p { color: rgba(255,255,255,.72); }
.section--soft { background: var(--paper-soft); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue-600);
  margin-bottom: 14px;
}
.section--dark .eyebrow { color: var(--blue-400); }
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: currentColor;
  display: inline-block;
}

.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head.center { max-width: 680px; margin-left: auto; margin-right: auto; text-align: center; }
/* particulier.html/zakelijk.html "Diensten"-sectie: de eerste dienstkaart
   staat door grid-2's align-items:center iets lager dan de kaart-rand zelf,
   waardoor de titel/koptekst niet precies in het midden stond tussen het
   einde van de sectie erboven en het begin van de foto — hier gecorrigeerd
   zodat de koptekst wél gecentreerd staat in die ruimte. */
#diensten .section-head { margin-bottom: 59px; }
/* Iets kleiner dan voorheen (was clamp(38px, 5.2vw, 68px)) — de hero-koppen
   oogden te dominant, zeker in combinatie met de nu 2-regelige header erboven. */
h1 { font-size: clamp(30px, 4.2vw, 54px); }
h2 { font-size: clamp(28px, 3.4vw, 42px); }
h3 { font-size: 21px; }
.lede { font-size: 19px; color: var(--ink-soft); }
.section--dark .lede { color: rgba(255,255,255,.75); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--blue-500); color: #fff; box-shadow: 0 10px 24px rgba(30,155,224,.35); }
.btn-primary:hover { background: var(--blue-600); box-shadow: 0 14px 30px rgba(30,155,224,.45); }
.btn-dark { background: var(--navy-900); color: #fff; }
.btn-dark:hover { background: var(--navy-800); }
.btn-outline { background: transparent; border-color: rgba(10,37,64,.18); color: var(--navy-900); }
.btn-outline:hover { border-color: var(--blue-500); color: var(--blue-600); }
.section--dark .btn-outline { border-color: rgba(255,255,255,.3); color: #fff; }
.section--dark .btn-outline:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.page-hero .btn-outline { border-color: rgba(255,255,255,.3); color: #fff; }
.page-hero .btn-outline:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn-ghost { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.28); backdrop-filter: blur(6px); }
.btn-ghost:hover { background: rgba(255,255,255,.18); }
.btn-sm { padding: 10px 20px; font-size: 14px; }
.btn-block { width: 100%; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px 0;
  transition: background .25s var(--ease), box-shadow .25s var(--ease), padding .25s var(--ease);
}
.site-header.is-scrolled,
.site-header.is-solid {
  background: rgba(10, 37, 64, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 24px rgba(6,24,46,.25);
  padding: 12px 0;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

/* Desktop header, gestapeld i.p.v. één samengedrukte rij: met 7 menu-items
   paste alles (logo + volledig menu + telefoon/CTA-knop) niet meer comfortabel
   op één regel. Bovenste regel: logo links, telefoon/CTA rechts (net als
   voorheen). Onderste, volledig nieuwe regel: het hele menu, gecentreerd en
   met de volle breedte om te ademen. Het logo verandert hierdoor niet van
   formaat (.brand-logo height blijft ongewijzigd) — alleen de menu-regel
   krijgt meer ruimte door eronder te staan i.p.v. ernaast.
   Alleen voor >=961px: de mobiele hamburger-menu-opmaak (<=960px) blijft
   volledig ongewijzigd. */
@media (min-width: 961px) {
  /* row-gap 20px: de vaste afstand tussen regel 1 (logo/badge/CTA) en regel 2
     (het menu) eronder. Dit stond eerder (v128-v130) gekoppeld aan de positie
     van de "Ubiquiti UniFi specialist..."-badge in de hero — die badge staat
     sinds deze versie zelf IN regel 1 (zie .header-badge hieronder), dus die
     fragiele koppeling met de hoogte van .hero-content bestaat niet meer. Dit
     is nu gewoon een vaste, visuele regel-afstand. */
  .header-inner { flex-wrap: wrap; row-gap: 20px; }
  .header-inner > .brand { order: 1; }
  .header-inner > .header-badge { order: 2; margin-right: auto; }
  .header-inner > .header-cta { order: 3; }
  .header-inner > nav { order: 4; flex-basis: 100%; }
  /* Uitlijning van de menu-regel t.o.v. regel 1: niet gewoon gecentreerd, maar
     met de "H" van Home op het horizontale midden van het logo en de laatste
     "t" van Contact op het horizontale midden van de "Offerte aanvragen"-knop
     (op een 1180px-container, gemeten met Playwright). padding-left/-right
     op .nav-main plus justify-content:space-between plaatst het eerste en
     laatste menu-item precies op die twee punten; de items ertussen worden
     gelijkmatig over de resterende ruimte verdeeld. */
  .header-inner > nav .nav-main { justify-content: space-between; padding-left: 90.6px; padding-right: 65px; }

  /* De headerversie van de badge (regel 1, naast het logo) aan. De
     hero-versie (.hero-badge) wordt op deze breedte apart uitgezet, vlak bij
     de eigen regel van .hero-badge verderop in dit bestand — niet hier, want
     die basisregel staat later in het bestand en zou een "display:none" op
     dít punt (zelfde specificiteit, eerder in de bronvolgorde) alsnog
     overrulen. Kleuren volgen dezelfde transparant/gescrolde header-logica
     als de nav-links: donkerblauw op een licht pilletje over de
     transparante/onscrolled header (over de lichte hero-achtergrond), wit
     over de donkerblauwe achtergrond zodra .is-scrolled/.is-solid actief is. */
  .header-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(10,37,64,.06);
    border: 1px solid rgba(10,37,64,.12);
    padding: 8px 16px; border-radius: 999px;
    font-size: 13px; font-weight: 700; color: var(--navy-900);
    transition: background .18s, border-color .18s, color .18s;
  }
  .header-badge b { color: var(--blue-600); }
  .site-header.is-scrolled .header-badge,
  .site-header.is-solid .header-badge {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.18);
    color: rgba(255,255,255,.92);
  }
  .site-header.is-scrolled .header-badge b,
  .site-header.is-solid .header-badge b { color: var(--blue-400); }
}

.brand { display: flex; align-items: center; }

/* Real Woudenberg Connect logo (white wordmark, transparent background) —
   used on the dark navy header and footer. */
.brand-logo { height: 120px; width: auto; display: block; }
.site-footer .brand-logo { height: 162px; }

.nav-main { display: flex; align-items: center; gap: 4px; }
.nav-main > li { position: relative; }
.nav-link {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 16px;
  font-size: 14.5px; font-weight: 600;
  color: rgba(255,255,255,.88);
  border-radius: 999px;
  /* De ovale pil-achtergrond staat nu altijd aan (was alleen bij :hover/
     .is-active) — zonder deze subtiele, transparante achtergrond vielen de
     menu-titels soms weg tegen een wisselende achtergrond (foto/gradient).
     Bij hover/actief wordt de achtergrond hieronder nog iets sterker, zodat
     het interactieve verschil voelbaar blijft. */
  background: rgba(255,255,255,.1);
  transition: background .18s, color .18s;
}
.nav-link:hover, .nav-link.is-active { background: rgba(255,255,255,.18); color: #fff; }
.nav-link .chev { width: 10px; height: 10px; transition: transform .2s; opacity: .7; }
.has-dropdown:hover .chev { transform: rotate(180deg); }

/* Transparent header (only the homepage, before scroll) sits over a light
   hero background — white nav text is unreadable there, so darken it. Once
   .is-scrolled/.is-solid adds the dark navy header background, the default
   white nav-link color above takes over again. */
.site-header:not(.is-scrolled):not(.is-solid) .nav-link { color: rgba(10,37,64,.82); background: rgba(10,37,64,.07); }
.site-header:not(.is-scrolled):not(.is-solid) .nav-link:hover,
.site-header:not(.is-scrolled):not(.is-solid) .nav-link.is-active { background: rgba(10,37,64,.13); color: var(--navy-900); }
.site-header:not(.is-scrolled):not(.is-solid) .nav-toggle { background: rgba(10,37,64,.08); }
.site-header:not(.is-scrolled):not(.is-solid) .nav-toggle svg { color: var(--navy-900); }

.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 300px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
@media (min-width: 961px) {
  .has-dropdown:hover .dropdown,
  .has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
}
.dropdown a {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px; border-radius: 10px; color: var(--navy-900);
}
.dropdown a:hover { background: var(--paper-soft); }
.dropdown a .ic { width: 34px; height: 34px; border-radius: 8px; background: var(--blue-100); color: var(--blue-600); display: flex; align-items: center; justify-content: center; flex: none; }
.dropdown a .ic svg { width: 18px; height: 18px; }
.dropdown a b { display: block; font-size: 14.5px; }
.dropdown a small { color: var(--ink-soft); font-size: 12.5px; }

/* "Diensten"-mega-menu: naast de Particulier/Zakelijk-categorietegel ook de
   losse diensten zelf als aparte, aanklikbare links tonen (voorheen stonden
   die dienst-namen alleen als platte tekst in de <small> — niet klikbaar,
   op klantverzoek nu wél). Twee kolommen naast elkaar op desktop. */
.dropdown--mega { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; min-width: 560px; padding: 14px; }
.dropdown-col + .dropdown-col { border-left: 1px solid var(--line); padding-left: 8px; }
a.dropdown-col-head { padding: 10px 10px 12px; margin-bottom: 2px; }
.dropdown-links { list-style: none; margin: 0 0 6px; padding: 0; }
.dropdown-links a { display: block; padding: 9px 10px 9px 56px; border-radius: 8px; color: var(--ink-soft); font-size: 14px; }
.dropdown-links a:hover { background: var(--paper-soft); color: var(--navy-900); }
@media (max-width: 960px) {
  .dropdown--mega { display: block; min-width: 0; padding: 4px 0 10px 12px; }
  .dropdown-col + .dropdown-col { border-left: none; padding-left: 0; margin-top: 6px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.1); }
  .dropdown-links a { padding-left: 56px; }
  /* Het mobiele menu heeft een effen donkere achtergrond (zie het
     .dropdown a { color:#fff }-blok verderop) — expliciet ook hier zetten
     zodat de dienst-sublinks (en hun :hover-status) altijd wit/leesbaar
     blijven, ongeacht cascade-volgorde t.o.v. dat verderop gedefinieerde
     blok. */
  .dropdown-links a,
  .dropdown-links a:hover { color: #fff; }
  .dropdown-links a:hover { background: rgba(255,255,255,.06); }
}

.header-cta { display: flex; align-items: center; gap: 10px; }

/* "Ubiquiti UniFi specialist..."-badge, verplaatst van de hero naar regel 1
   van de header (alleen op de homepage, alleen op desktop — zie de
   @media (min-width:961px)-blok hierboven voor de zichtbare opmaak en positie
   naast het logo). Op mobiel is hier in regel 1 geen ruimte (logo + menu-knop
   vullen de rij al), dus daar blijft dezelfde tekst op de oorspronkelijke
   plek in de hero staan (.hero-badge, zie verderop) — dit element wordt
   daarom pas ≤960px expliciet verborgen (zie die media query hieronder),
   in plaats van hier een ongescopede "display:none" te zetten die qua
   bronvolgorde na het opmaak-blok hierboven zou komen en dat zou overrulen. */
.nav-toggle { display: none; }
.mobile-cta { display: none; }
.mobile-cta .btn-outline { border-color: rgba(255,255,255,.3); color: #fff; }
.mobile-cta .btn-outline:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* The desktop "bel-knop" in the header uses the default dark-navy btn-outline,
   which is invisible once the header itself has a dark navy background —
   i.e. on every page except the unscrolled homepage. Lighten it there. */
.site-header.is-scrolled .header-cta .btn-outline,
.site-header.is-solid .header-cta .btn-outline { border-color: rgba(255,255,255,.35); color: #fff; }
.site-header.is-scrolled .header-cta .btn-outline:hover,
.site-header.is-solid .header-cta .btn-outline:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* Telefoonnummer in de header, alleen op de homepage (via de eigen
   btn-outline--blue-klasse op die ene link): blauw i.p.v. de standaard
   navy/witte kleur — blijft verder transparant/ovaal zoals de knop al was,
   in zowel de transparante als de gescrolde/is-solid headerstaat. */
.btn-outline--blue,
.site-header.is-scrolled .header-cta .btn-outline--blue,
.site-header.is-solid .header-cta .btn-outline--blue {
  border-color: rgba(30,155,224,.45);
  color: var(--blue-500);
}
.btn-outline--blue:hover,
.site-header.is-scrolled .header-cta .btn-outline--blue:hover,
.site-header.is-solid .header-cta .btn-outline--blue:hover {
  border-color: var(--blue-500);
  background: rgba(30,155,224,.12);
}

@media (max-width: 960px) {
  /* Header-versie van de badge alleen op desktop (naast het logo in regel 1) —
     op mobiel is er in de header geen ruimte, dus blijft de tekst daar op de
     oorspronkelijke plek in de hero staan (.hero-badge). */
  .header-badge { display: none; }
  /* position:fixed + height via top/bottom (voorheen "inset:0") lijkt logisch,
     maar .site-header.is-solid/.is-scrolled heeft backdrop-filter — en dat
     maakt de header (niet de viewport) het containing block voor fixed
     kind-elementen. Daardoor werd dit menu vroeger even hoog als de header
     zelf (~144px) i.p.v. het hele scherm, met als gevolg dat alleen "Home"
     zichtbaar was en de rest van het menu (inclusief het nieuwe Diensten-
     mega-menu) onzichtbaar afgekapt werd. "height: 100vh" is (in
     tegenstelling tot bottom:0/inset:0, of height:100%) altijd relatief aan
     de viewport, ongeacht welk element het containing block is — dat lost
     dit op. */
  .nav-main { position: fixed; top: 0; left: 0; right: 0; height: 100vh; background: var(--navy-950); flex-direction: column; padding: 100px 28px 40px; gap: 6px; transform: translateX(100%); transition: transform .3s var(--ease); overflow-y: auto; align-items: stretch; }
  .nav-main.is-open { transform: translateX(0); }
  .nav-main > li { width: 100%; }
  /* De altijd-zichtbare pil-achtergrond (desktop) is hier niet nodig: het
     mobiele menu heeft altijd een effen donkere achtergrond, dus tekst valt
     daar sowieso nooit weg. */
  .nav-link { width: 100%; padding: 14px 6px; font-size: 18px; border-bottom: 1px solid rgba(255,255,255,.08); border-radius: 0; background: transparent; }
  .nav-link:hover, .nav-link.is-active { background: rgba(255,255,255,.06); }
  /* Op de homepage (onscrolled header) maakt de regel bij "Transparent header"
     hierboven (regel ~214) de nav-tekst donkerblauw — prima in de header zelf,
     maar het mobiele menu heeft altijd een effen donkere achtergrond, dus die
     donkerblauwe tekst viel daar bijna volledig weg. Hier expliciet weer wit
     forceren, met dezelfde selector-specificiteit zodat de volgorde in het
     bestand bepaalt (deze staat later, dus wint). */
  .site-header:not(.is-scrolled):not(.is-solid) .nav-link { color: rgba(255,255,255,.88); background: transparent; }
  .site-header:not(.is-scrolled):not(.is-solid) .nav-link:hover,
  .site-header:not(.is-scrolled):not(.is-solid) .nav-link.is-active { color: #fff; background: rgba(255,255,255,.06); }
  .dropdown { position: static; opacity: 1; visibility: visible; transform: none; background: transparent; box-shadow: none; display: none; padding: 4px 0 10px 12px; }
  .has-dropdown.is-open .dropdown { display: block; }
  .dropdown a { color: #fff; }
  .dropdown a:hover { background: rgba(255,255,255,.06); }
  .dropdown a small { color: rgba(255,255,255,.6); }
  .header-cta .btn-outline { display: none; }
  .header-cta .btn-primary { display: none; }
  .mobile-cta { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
  .nav-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 10px;
    background: rgba(255,255,255,.1); border: none; cursor: pointer; z-index: 110;
    flex: none;
  }
  .nav-toggle svg { width: 20px; height: 20px; color: #fff; }
}

/* ---------- Hero (video) ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #fff;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media video, .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,.92) 100%);
}
.hero-content { position: relative; z-index: 1; padding-top: 200px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(10,37,64,.06);
  border: 1px solid rgba(10,37,64,.12);
  padding: 8px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 700; color: var(--navy-900);
  margin-bottom: 22px;
}
.hero-badge b { color: var(--blue-600); }
/* Vanaf 961px staat deze tekst al in regel 1 van de header (.header-badge
   hierboven) — hier dus uit, om dubbele tekst te voorkomen. Deze override
   staat bewust NA de basisregel hierboven (zelfde selector-specificiteit,
   bronvolgorde bepaalt de winnaar). */
@media (min-width: 961px) {
  .hero-badge { display: none; }
}
.hero h1 { max-width: 780px; }
.hero .lede { max-width: 560px; font-size: 20px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.hero-stats { display: flex; gap: 40px; margin-top: 64px; flex-wrap: wrap; }
.hero-stats div b { display: block; font-size: 30px; font-weight: 800; color: var(--navy-900); }
.hero-stats div span { font-size: 13.5px; color: var(--ink-soft); font-weight: 600; }

/* smaller page hero (non-home) */
.page-hero {
  padding: 248px 0 80px;
  background: radial-gradient(1200px 500px at 15% -10%, rgba(30,155,224,.16), transparent 60%), linear-gradient(180deg, var(--navy-950), var(--navy-900));
  color: #fff;
}
.page-hero.page-hero--compact { padding: 170px 0 56px; }
.page-hero .eyebrow { color: var(--blue-400); }
.page-hero h1 { color: #fff; max-width: 760px; }
.page-hero p { color: rgba(255,255,255,.75); max-width: 620px; font-size: 18px; }
.breadcrumb { display: flex; gap: 8px; align-items: center; font-size: 13px; color: rgba(255,255,255,.55); margin-bottom: 20px; }
.breadcrumb a:hover { color: #fff; }

/* page hero with a looping background video (dienst-detailpagina's) */
.page-hero--video { position: relative; overflow: hidden; background: var(--navy-950); }
.page-hero--video .hero-media { position: absolute; inset: 0; z-index: 0; }
.page-hero--video .hero-media video { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.page-hero--video .hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,18,34,.62) 0%, rgba(8,28,50,.72) 55%, rgba(9,33,58,.9) 100%);
}
.page-hero--video .container { position: relative; z-index: 1; }

/* waarom-kiezen-voor-ubiquiti-unifi.html ("Waarom kiezen voor Ubiquiti UniFi?") — op verzoek laten
   lijken op de stijl van de homepage-hero (.hero) in plaats van de donkerdere
   dienst-detailpagina-stijl: volledige viewport-hoogte, dezelfde lichte
   video-wash, donkere (navy) tekst i.p.v. wit. Alles hier scoped aan
   .page-hero--waarom, dus geen invloed op .page-hero--video elders. */
.page-hero--waarom { min-height: 100vh; display: flex; align-items: center; padding: 140px 0 80px; }
.page-hero--waarom .hero-media::after {
  background: linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.85) 45%, rgba(255,255,255,.92) 100%);
}
.page-hero--waarom .breadcrumb { color: rgba(10,37,64,.55); }
.page-hero--waarom .eyebrow { color: var(--blue-600); }
.page-hero--waarom h1 { color: var(--navy-900); }
.page-hero--waarom p { color: var(--ink-soft); max-width: 620px; }
.page-hero--waarom .btn-outline { border-color: rgba(10,37,64,.18); color: var(--navy-900); }
@media (max-width: 700px) {
  .page-hero--waarom { padding-top: 120px; }
}

/* Een lichte hero-achtergrond (homepage en de "Waarom kiezen"-pagina)
   betekent dat het witte wordmark-logo (.brand-logo, ontworpen voor een
   donkere achtergrond) niet overal genoeg contrast heeft zolang de header
   nog transparant is (vóór scroll). Oplossing: op deze pagina's wisselt het
   logo zelf van kleur i.p.v. een pilletje erachter te zetten — de
   donkere-tekst-variant (logo-light-bg.png) in de transparante/lichte
   headerstand, en de witte-tekst-variant (logo-dark-bg.png) zodra de header
   solide donkerblauw wordt (.is-scrolled/.is-solid). Alleen op deze
   pagina's (body.page-waarom, body.page-home); de footer (altijd donker)
   gebruikt gewoon de witte variant. */
body.page-waarom .site-header .brand-logo--dark-text,
body.page-home .site-header .brand-logo--dark-text { display: block; }
body.page-waarom .site-header .brand-logo--white-text,
body.page-home .site-header .brand-logo--white-text { display: none; }
body.page-waarom .site-header.is-scrolled .brand-logo--dark-text,
body.page-waarom .site-header.is-solid .brand-logo--dark-text,
body.page-home .site-header.is-scrolled .brand-logo--dark-text,
body.page-home .site-header.is-solid .brand-logo--dark-text { display: none; }
body.page-waarom .site-header.is-scrolled .brand-logo--white-text,
body.page-waarom .site-header.is-solid .brand-logo--white-text,
body.page-home .site-header.is-scrolled .brand-logo--white-text,
body.page-home .site-header.is-solid .brand-logo--white-text { display: block; }

/* page hero with a right-bleeding product image (zakelijk overzicht) */
.page-hero--product { position: relative; overflow: hidden; }
.page-hero--product .container { position: relative; z-index: 1; }
.page-hero--product .hero-product-img {
  position: absolute;
  top: auto;
  bottom: 69px;
  right: clamp(24px, 5vw, 84px);
  transform: none;
  width: calc(50vw - 280px);
  max-width: 760px;
  min-width: 300px;
  height: auto;
  z-index: 0;
  pointer-events: none;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.35));
}
.page-hero--product .hero-product-img--lg {
  top: auto;
  bottom: 73px;
  right: clamp(0px, 2.5vw, 40px);
  transform: none;
  width: calc(67.2vw - 324px);
  max-width: 1056px;
  min-width: 408px;
}
@media (max-width: 1100px) {
  .page-hero--product .hero-product-img { display: none; }
}

/* page hero with an auto-advancing slideshow of project cover photos
   (projecten.html) */
.page-hero--projects .hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}
.page-hero--projects .hero-slideshow {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
  box-shadow: 0 30px 60px rgba(0,0,0,.35);
}
.page-hero--projects .hero-slideshow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.page-hero--projects .hero-slideshow img.is-active { opacity: 1; }
@media (max-width: 900px) {
  .page-hero--projects .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .page-hero--projects .hero-slideshow { aspect-ratio: 16 / 9; }
}

/* "Een greep uit onze projecten"-sectie (homepage): volledige-breedte
   achtergrond-diashow van projectfoto's, i.p.v. een vlak paneel. Zelfde
   auto-cyclus-aanpak als .hero-slideshow hierboven, maar dan edge-to-edge
   als sectie-achtergrond en met een langzame continue inzoom per foto
   (Ken Burns-effect) i.p.v. alleen een cross-fade. .section--dark zorgt al
   voor de witte tekstkleur (eyebrow/h2/btn-outline); de eigen achtergrond
   van .section--dark wordt volledig overdekt door de diashow + overlay. */
.projecten-preview { position: relative; overflow: hidden; }
.projecten-preview-slideshow { position: absolute; inset: 0; z-index: 0; }
.projecten-preview-slideshow img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1);
  transition: opacity 1.4s ease, transform 6s linear;
}
.projecten-preview-slideshow img.is-active { opacity: 1; transform: scale(1.12); }
/* Donkere overlay boven de foto's, zodat de witte tekst altijd goed leesbaar
   blijft, ongeacht welke foto net actief is. */
.projecten-preview-slideshow::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,24,46,.78), rgba(6,24,46,.85));
}
.projecten-preview .container { position: relative; z-index: 1; }

/* page hero with a static photo on the right (over-ons.html) */
.page-hero--about .hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}
.page-hero--about .hero-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,.35);
}
.page-hero--about .hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 900px) {
  .page-hero--about .hero-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* contact.html hergebruikt .page-hero--about's grid-layout, maar de foto daar
   (sfeer-contact-header.webp) is een staand portret i.p.v. het liggende
   4:3-beeld van over-ons.html — in een 4:3-vak zou "cover" bijna de helft van
   de hoogte wegsnijden en zo het gezicht uit beeld croppen. Een hoger, meer
   staand vak (3:4) laat het hele portret vrijwel volledig zien. */
.page-hero--contact .hero-photo { aspect-ratio: 3 / 4; max-width: 380px; }

/* over-ons.html: de foto (sfeer-over-ons-header.webp) moet gecentreerd in
   het fotovak staan — geen aangepaste object-position (gebruikt de
   standaard center-crop van .page-hero--about .hero-photo img hierboven). */

/* ---------- Cards / Grids ---------- */
.grid { display: grid; gap: 24px; }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) { .grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 980px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2,1fr); } .grid-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-4, .grid-3, .grid-2, .grid-5 { grid-template-columns: 1fr; } }

/* Sfeerfoto's — losse ambiance-gallerij, niet gekoppeld aan een specifieke dienst */
.mood-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.mood-photo { border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 18px 40px rgba(10,37,64,.14); }
.mood-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 700px) { .mood-gallery { grid-template-columns: 1fr; } }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.card .ic {
  width: 52px; height: 52px; border-radius: 12px;
  background: var(--blue-100); color: var(--blue-600);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.card .ic svg { width: 26px; height: 26px; }
/* Kleur-varianten voor losse iconen (over-ons.html, "Drie principes"): zelfde
   opzet als de standaard blauwe .ic (lichte tint als achtergrond, verzadigde
   kleur voor het icoon zelf), op verzoek per kaart een andere kleur. */
.card .ic.ic--green { background: rgba(31,174,107,.12); color: var(--success); }
.card .ic.ic--yellow { background: var(--yellow-100); color: var(--yellow-500); }
/* Fotografische dienst-iconen (Vijf pijlers-sectie op de homepage): een full-bleed
   foto bovenaan de kaart, edge-to-edge en met dezelfde afgeronde bovenhoeken als de
   kaart zelf. Breedte volgt automatisch de kaartbreedte (via de negatieve marge die
   de padding compenseert) en de hoogte volgt de vaste beeldverhouding, dus alle vijf
   foto's blijven t.o.v. elkaar exact even groot, ook op mobiel.
   Beeldverhouding 559:710 komt exact overeen met de brondfoto's zelf (559x710px),
   dus object-fit:cover schaalt hier zonder enige crop — de volledige foto blijft
   zichtbaar. NIET wijzigen naar een andere ratio: dat gaat automatisch inzoomen/
   croppen. Voor een grotere weergave i.p.v. deze ratio: de #diensten .container
   breder maken (zie hieronder), zodat kolommen en dus foto's evenredig (breedte
   én hoogte) groter worden, met behoud van exact dezelfde framing. */
.card:has(.ic--photo) { overflow: hidden; }
.card .ic.ic--photo {
  width: calc(100% + 60px); margin: -30px -30px 20px -30px;
  aspect-ratio: 559 / 710; height: auto;
  border-radius: var(--radius) var(--radius) 0 0;
  background: transparent; padding: 0;
}
.card .ic.ic--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Bredere container, alléén voor de Vijf pijlers-sectie: geeft de 5 kolommen (en dus
   de full-bleed foto's, breedte + hoogte evenredig) 35% meer ruimte t.o.v. de
   standaard --container (1180px), zonder de framing/crop van de foto's te wijzigen
   en zonder de containerbreedte elders op de site te beïnvloeden. De koptekst/lede
   in deze sectie heeft een eigen .section-head.center { max-width:680px }, dus die
   tekst wordt niet breder. Berekening: kolombreedte 207px -> 207 * 1.35 = 279.7px;
   5 kolommen + 4x24px gap + 2x24px containerpadding = 1543px. */
#diensten .container { max-width: 1543px; }
/* 20% minder witruimte boven de kop van deze sectie (was 96px via .section,
   nu 76.8px). Alleen padding-top verlaagd, niet padding-bottom, en alleen
   voor #diensten — de rest van de site behoudt de standaard 96px. */
#diensten { padding-top: 76.8px; }
.card h3 { margin-bottom: 10px; }
.card p { margin-bottom: 0; font-size: 15px; }
.card a.card-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-weight: 700; font-size: 14px; color: var(--blue-600); }
.card a.card-link svg { width: 14px; height: 14px; transition: transform .18s; }
.card a.card-link:hover svg { transform: translateX(3px); }

/* two audience links (particulier / zakelijk) inside a dienst-kaart */
/* margin-top: auto duwt deze rij altijd naar de onderkant van de kaart, ook als de
   tekst erboven (h3 + p) per kaart een ander aantal regels beslaat — zo staan de
   Particulier/Zakelijk-links in alle vier de kaarten precies op dezelfde hoogte. */
.card-cta-row { display: flex; align-items: center; gap: 16px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }

/* "Vijf pijlers"-kaarten (homepage, sectie #diensten): titel en beschrijving
   gecentreerd i.p.v. links uitgelijnd, en de Particulier/Zakelijk-rij als geheel
   gecentreerd (de scheidingsstreep "|" blijft tussen de twee links staan). */
#diensten .card h3,
#diensten .card p { text-align: center; }
#diensten .card-cta-row { justify-content: center; }
.card-cta-row a.card-link { margin-top: 0; }
.card-cta-row .divider { color: var(--line); font-size: 13px; }

.card--dark { background: var(--navy-800); border-color: rgba(255,255,255,.08); }
.card--dark h3, .card--dark p { color: #fff; }
.card--dark p { color: rgba(255,255,255,.7); }
.card--dark .ic { background: rgba(255,255,255,.1); color: var(--blue-400); }

/* feature list rows */
.feature-row { display: flex; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.feature-row:last-child { border-bottom: none; }
.feature-row .ic { width: 44px; height: 44px; border-radius: 10px; background: var(--blue-100); color: var(--blue-600); display:flex; align-items:center; justify-content:center; flex:none; }
.feature-row .ic svg { width: 22px; height: 22px; }
.feature-row h4 { margin: 0 0 4px; font-size: 16.5px; }
.feature-row p { margin: 0; font-size: 14.5px; }

/* split promo (particulier / zakelijk) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 800px) { .split { grid-template-columns: 1fr; } }
.split-card {
  position: relative;
  border-radius: 20px;
  padding: 44px;
  min-height: 320px;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
  color: #fff;
}
.split-card.particulier { background: linear-gradient(135deg, #163f6c, #0a2540); }
.split-card.zakelijk { background: linear-gradient(135deg, #1e9be0, #0f5f9c); }
.split-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(400px 240px at 90% 0%, rgba(255,255,255,.16), transparent 60%);
}
.split-card-photo { position: absolute; inset: 0; z-index: 0; }
.split-card-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split-card.particulier .split-card-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,37,64,.55) 0%, rgba(10,37,64,.35) 40%, rgba(10,37,64,.92) 100%);
}
.split-card.zakelijk .split-card-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(9,66,103,.55) 0%, rgba(9,66,103,.35) 40%, rgba(9,66,103,.92) 100%);
}
.split-card .tag { position: relative; z-index: 1; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .75; margin-bottom: 10px; }
.split-card h3 { position: relative; z-index: 1; color: #fff; font-size: 28px; margin-bottom: 12px; }
.split-card p { position: relative; z-index: 1; color: rgba(255,255,255,.82); margin-bottom: 24px; max-width: 420px; }
.split-card .btn { position: relative; z-index: 1; align-self: flex-start; }

/* logos / trust strip */
.trust-strip { display: flex; flex-wrap: wrap; gap: 14px 34px; align-items: center; justify-content: center; opacity: .9; }
.trust-strip span { font-weight: 800; letter-spacing: .04em; color: var(--ink-soft); font-size: 15px; }

/* steps */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.steps.steps-3 { grid-template-columns: repeat(3,1fr); }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding-top: 8px; }
.step .num {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--blue-500); color: #fff; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px; font-size: 16px;
}

/* Werkwijze: stappen naast een sfeerfoto */
.werkwijze-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.werkwijze-grid .steps { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .werkwijze-grid { grid-template-columns: 1fr; } .werkwijze-photo { order: -1; } }
@media (max-width: 560px) { .werkwijze-grid .steps { grid-template-columns: 1fr; } }
.werkwijze-photo { border-radius: 20px; overflow: hidden; box-shadow: 0 24px 50px rgba(4,16,32,.4); }
.werkwijze-photo img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; }

/* Wegwijzer: uitleg-hoofdstukken over UTP/glasvezel, AI/camera's, wifi, toegangscontrole */
.chapter-grid { gap: 28px; }
.chapter-card { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-sm); transition: transform .22s var(--ease), box-shadow .22s var(--ease); }
.chapter-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.chapter-media { position: relative; height: 200px; background: linear-gradient(135deg, var(--blue-100), #fff); display: flex; align-items: center; justify-content: center; overflow: hidden; }
/* Modifier voor vierkante productfoto's (bv. camera masten) — hoogte volgt de breedte 1:1,
   zodat de volledige (vierkante) foto zichtbaar blijft zonder dat cover-fit iets wegsnijdt */
.chapter-media--tall { height: auto; aspect-ratio: 1 / 1; }
.chapter-media--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chapter-media--product img { max-width: 58%; max-height: 68%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 14px 26px rgba(10,37,64,.18)); }
/* Modifier om alleen de afbeelding zelf (niet het kader/de hoofdstukkaart) groter te
   tonen binnen de standaard 200px-hoge .chapter-media — gebruikt bij "AI en camera's"
   zodat de camera's en het AI-badge groter ogen, terwijl de kaart even groot blijft
   als de andere hoofdstukken in deze sectie. */
.chapter-media--zoom img { max-width: 78%; max-height: 90%; }
/* Pagina "Waarom kiezen voor Ubiquiti UniFi?": de 19 kaarten tonen foto's met
   sterk uiteenlopende beeldverhoudingen (vierkant, staand, breed). Met de
   standaard cover-fit werd een deel van elke foto weggesneden, waardoor het
   onderwerp niet gecentreerd en niet volledig zichtbaar oogde. Op deze pagina
   daarom altijd de VOLLEDIGE foto tonen, gecentreerd, zonder bijsnijden. */
body.page-waarom .chapter-media--photo { padding: 14px; box-sizing: border-box; }
body.page-waarom .chapter-media--photo img { position: static; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.chapter-body { padding: 26px 28px 30px; }
.chapter-body h3 { font-size: 19px; margin-bottom: 10px; }
.chapter-body p { font-size: 14.5px; margin: 0; }

/* Uitklapbare volledige tekst per wegwijzer-kaart ("Lees meer" / "Lees minder") */
.chapter-more { display: none; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.chapter-card.is-expanded .chapter-more { display: block; }
/* Particulier/Zakelijk-links onderaan de uitgeklapte wegwijzer-tekst, zelfde blauwe
   stijl als de card-links in de Vijf pijlers-sectie. Zitten binnen .chapter-more,
   dus zichtbaar zodra de kaart is opengeklapt. */
.chapter-more-links { display: flex; align-items: center; gap: 16px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.chapter-more-links a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--blue-600); }
.chapter-more-links a svg { width: 14px; height: 14px; transition: transform .18s; }
.chapter-more-links a:hover svg { transform: translateX(3px); }
.chapter-more-links .divider { color: var(--line); font-size: 13px; }

/* Losse informatienotitie in een sectie (bv. "heb je al opslag in je gateway?") */
.note-box { background: var(--blue-100); border-left: 4px solid var(--blue-500); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 16px 22px; max-width: 760px; margin: 32px auto 40px; }
.note-box p { margin: 0; font-size: 14.5px; color: var(--blue-600); }
.note-box a { text-decoration: underline; font-weight: 700; }
.chapter-more h4 { font-size: 15.5px; margin: 20px 0 8px; color: var(--navy-900); }
.chapter-more h4:first-child { margin-top: 0; }
.chapter-more p { font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 12px; }
.chapter-more ul { list-style: disc; margin: 0 0 12px; padding-left: 20px; }
.chapter-more li { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 6px; }
.chapter-toggle {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 16px;
  padding: 0; border: none; background: none;
  font-weight: 700; font-size: 14px; color: var(--blue-600); cursor: pointer;
}
.chapter-toggle svg { width: 14px; height: 14px; transition: transform .18s; }
.chapter-card.is-expanded .chapter-toggle svg { transform: rotate(180deg); }

/* Uitklapbare FAQ-onderwerpen (faq.html): elke vraag is een knop die het
   antwoord toont/verbergt, met een pijltje dat meedraait. */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-question {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%; padding: 20px 0; margin: 0; border: none; background: none;
  text-align: left; font-family: inherit; font-weight: 800; font-size: 17px;
  letter-spacing: -0.01em; line-height: 1.35; color: var(--navy-900); cursor: pointer;
}
.faq-question svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--ink-soft); transition: transform .2s ease; }
.faq-item.is-open .faq-question svg { transform: rotate(180deg); }
.faq-answer { display: none; padding: 0 0 24px; }
.faq-item.is-open .faq-answer { display: block; }
.faq-answer p { margin: 0; padding-top: 18px; color: var(--ink-soft); }

/* quote / testimonial */
.quote { border-left: 3px solid var(--blue-500); padding-left: 22px; font-size: 20px; color: var(--navy-900); font-weight: 600; }
.quote p { margin: 0; }
.quote cite { display: block; margin-top: 14px; font-style: normal; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.quote .stars { color: #f5a623; font-size: 16px; letter-spacing: 3px; line-height: 1; margin-bottom: 10px; }

/* Testimonial-slideshow (homepage "Quote"-sectie): cyclet automatisch door de
   klantreviews heen (main.js), met pijl- en dot-navigatie voor handmatige
   bediening. Slides wisselen via display:none/block (i.p.v. gestapeld met
   position:absolute) omdat reviews sterk in lengte verschillen — zo blijft de
   sectie altijd precies zo hoog als de zichtbare review, zonder overlap. */
.testimonial-slide { display: none; }
.testimonial-slide.is-active { display: block; animation: testimonial-fade .45s ease; }
@keyframes testimonial-fade { from { opacity: 0; } to { opacity: 1; } }
.testimonial-nav { display: flex; align-items: center; gap: 16px; margin-top: 28px; padding-left: 25px; }
.testimonial-arrow { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--navy-900); cursor: pointer; transition: border-color .18s, background .18s; flex: none; padding: 0; }
.testimonial-arrow:hover { border-color: var(--blue-500); background: var(--paper-soft); }
.testimonial-arrow svg { width: 15px; height: 15px; }
.testimonial-dots { display: flex; align-items: center; gap: 8px; }
.testimonial-dots button { width: 8px; height: 8px; border-radius: 999px; border: none; padding: 0; background: var(--line); cursor: pointer; transition: background .18s, transform .18s; }
.testimonial-dots button.is-active { background: var(--blue-500); transform: scale(1.3); }

/* CTA band */
.cta-band {
  border-radius: 24px;
  padding: 64px;
  background: radial-gradient(700px 320px at 20% 0%, rgba(30,155,224,.35), transparent 60%), linear-gradient(135deg, var(--navy-950), var(--navy-800));
  color: #fff;
  text-align: center;
}
.cta-band h2 { color: #fff; margin-bottom: 12px; }
.cta-band p { color: rgba(255,255,255,.75); max-width: 520px; margin: 0 auto 28px; }
.cta-band .hero-actions { justify-content: center; }
.cta-band .btn-outline { border-color: rgba(255,255,255,.3); color: #fff; }
.cta-band .btn-outline:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* Forms */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 13.5px; font-weight: 700; color: var(--navy-900); }
.field input, .field select, .field textarea {
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 14px; font-size: 15px; font-family: inherit; color: var(--ink);
  background: #fff; transition: border-color .18s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue-500); }
.field textarea { resize: vertical; min-height: 120px; }
.form-note { font-size: 13px; color: var(--ink-soft); margin-top: 14px; }

/* contact info cards */
.info-card { display: flex; gap: 16px; align-items: flex-start; }
.info-card .ic { width: 46px; height: 46px; border-radius: 10px; background: var(--blue-100); color: var(--blue-600); display: flex; align-items: center; justify-content: center; flex: none; }
.info-card .ic svg { width: 22px; height: 22px; }
.info-card h4 { margin: 0 0 4px; font-size: 15.5px; }
.info-card p { margin: 0; font-size: 14.5px; }

/* Project / reference cards */
.project-card { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #fff; }
.project-card .thumb {
  height: 180px;
  background: linear-gradient(135deg, var(--navy-800), var(--blue-500));
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.project-card .thumb svg { width: 40px; height: 40px; color: rgba(255,255,255,.85); }
.project-card .thumb::after { content: ""; position: absolute; inset:0; background: radial-gradient(200px 120px at 80% 0%, rgba(255,255,255,.25), transparent 60%); }
.project-card .thumb.has-photo { background-size: cover; background-position: center; transition: transform .35s ease; }
.project-card .thumb.has-photo svg, .project-card .thumb.has-photo::after { display: none; }
a.project-card:hover .thumb.has-photo, a.project-card:focus-visible .thumb.has-photo { transform: scale(1.04); }
.project-card .body { padding: 22px; }
.project-card .kicker { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-600); margin-bottom: 8px; }
.project-card h4 { margin: 0 0 8px; font-size: 17px; }
.project-card p { font-size: 14px; margin: 0; }
.badge-soon {
  position: absolute; top: 14px; right: 14px;
  background: rgba(255,255,255,.16); color: #fff; font-size: 11px; font-weight: 700;
  padding: 5px 10px; border-radius: 999px; backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.3);
}

/* Clickable project-kaart (hele kaart is een link naar de projectpagina) */
a.project-card { display: block; text-decoration: none; color: inherit; transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); }
a.project-card:hover, a.project-card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
a.project-card:hover h4, a.project-card:focus-visible h4 { color: var(--blue-600); }
a.project-card .project-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-weight: 700; font-size: 13px; color: var(--blue-600); }
a.project-card .project-more svg { width: 13px; height: 13px; transition: transform .18s; }
a.project-card:hover .project-more svg, a.project-card:focus-visible .project-more svg { transform: translateX(3px); }

/* Projectfoto's op de individuele projectpagina's — zodra er genummerde
   foto's (1.jpg, 2.jpg, ...) in de projectmap staan, verschijnt een grid met
   klikbare miniaturen. Klikken opent de foto groot (de gehele foto, niet
   bijgesneden) in een lightbox waarin je met pijlen/toetsenbord door alle
   foto's van dat project kunt bladeren. Zonder foto's blijft het
   dienst-icoon gewoon staan. */
.project-slideshow {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  min-height: 460px;
  background: linear-gradient(135deg, var(--navy-800), var(--blue-500));
  display: flex; align-items: center; justify-content: center;
}
.project-slideshow::after { content: ""; position: absolute; inset: 0; background: radial-gradient(320px 200px at 82% 0%, rgba(255,255,255,.22), transparent 60%); pointer-events: none; }
.project-slideshow.has-photos::after { display: none; }
.project-slideshow .thumb-icon { width: 84px; height: 84px; color: rgba(255,255,255,.85); position: relative; z-index: 1; }
.project-slideshow.has-photos {
  display: block;
  min-height: 0;
  border-radius: 0;
  overflow: visible;
  background: none;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}
.gallery-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  border: none;
  padding: 0;
  cursor: pointer;
  background: var(--navy-800);
  box-shadow: 0 8px 22px rgba(10,37,64,.14);
}
.gallery-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .35s ease;
}
.gallery-thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(6,15,28,.45));
  opacity: 0; transition: opacity .2s ease;
}
.gallery-thumb:hover img, .gallery-thumb:focus-visible img { transform: scale(1.06); }
.gallery-thumb:hover::after, .gallery-thumb:focus-visible::after { opacity: 1; }
.gallery-thumb .expand-hint {
  position: absolute; right: 10px; bottom: 10px; z-index: 1;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(6,15,28,.55); color: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .2s ease;
}
.gallery-thumb .expand-hint svg { width: 15px; height: 15px; }
.gallery-thumb:hover .expand-hint, .gallery-thumb:focus-visible .expand-hint { opacity: 1; }

/* Lightbox: volledige foto, met vorige/volgende-navigatie */
.gallery-lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(6,15,28,.94);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: gallery-fade-in .15s ease;
}
@keyframes gallery-fade-in { from { opacity: 0; } to { opacity: 1; } }
.gallery-lightbox img {
  max-width: 92vw; max-height: 86vh;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.gallery-close {
  position: fixed; top: 20px; right: 24px; z-index: 1002;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.25);
  font-size: 24px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.gallery-close:hover, .gallery-close:focus-visible { background: rgba(255,255,255,.22); }
.gallery-nav {
  position: fixed; top: 50%; transform: translateY(-50%); z-index: 1001;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.25);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.gallery-nav svg { width: 22px; height: 22px; }
.gallery-nav:hover, .gallery-nav:focus-visible { background: rgba(255,255,255,.22); }
.gallery-nav.prev { left: 20px; }
.gallery-nav.next { right: 20px; }
.gallery-counter {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 1001;
  color: rgba(255,255,255,.85); font-size: 13px; font-weight: 700;
  background: rgba(255,255,255,.1); padding: 7px 16px; border-radius: 999px;
}
@media (max-width: 640px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .gallery-thumb { border-radius: 10px; }
  .gallery-nav { width: 40px; height: 40px; }
  .gallery-nav.prev { left: 8px; }
  .gallery-nav.next { right: 8px; }
}

/* Opgemaakte projecttekst (koppen, vetgedrukt, lijst) — placeholder-structuur
   die de klant later zelf met het eigen projectverhaal kan vullen. */
.project-copy { margin-top: 36px; }
.project-copy h3 { font-size: 19px; margin: 30px 0 10px; }
.project-copy h3:first-child { margin-top: 0; }
.project-copy h4 { font-size: 15.5px; margin: 20px 0 8px; }
.project-copy p { margin: 0 0 14px; line-height: 1.7; color: var(--ink-soft); }
.project-copy ul { list-style: disc; margin: 0 0 14px; padding-left: 22px; }
.project-copy li { list-style: disc; margin-bottom: 8px; line-height: 1.6; color: var(--ink-soft); }
.project-copy strong { color: var(--navy-900); }
.project-copy .copy-placeholder-note { font-size: 13px; font-style: italic; color: var(--ink-soft); opacity: .75; }

/* waarom-kiezen-voor-ubiquiti-unifi.html — "Over deze pagina": product-collage-afbeelding rechts van
   de tekst. Bewust geen kleur/kader eromheen — de producten "zweven" los op
   de witte sectieachtergrond (de bron-PNG heeft een transparante achtergrond).
   shape-outside laat de tekst om de daadwerkelijke silhouetten van de losse
   producten heen vloeien i.p.v. om een rechthoekig kader — daardoor eindigt
   elke regel op een andere plek, afhankelijk van welk product er op die
   hoogte rechts staat. */
.uni-collage-float {
  display: block;
  float: right;
  width: 460px;
  max-width: 46%;
  height: auto;
  margin: 0 0 8px 30px;
  shape-outside: url('../img/locaties-unifi-productoverzicht.png');
  shape-image-threshold: 0.05;
  shape-margin: 14px;
}
@media (max-width: 760px) {
  .uni-collage-float {
    float: none; width: 100%; max-width: 380px; margin: 0 auto 28px;
    shape-outside: none;
  }
}

/* Netwerk bekabeling-pagina's (particulier + zakelijk) — illustratie bij de
   kabelcategorie-sectie, puur op de sectieachtergrond (bron-JPG had een witte
   achtergrond, hiervan getransparant gemaakt zodat hij op elke achtergrond
   past zonder zichtbaar kader). 25% kleiner dan voorheen (820px -> 615px) en
   rechts-uitgelijnd tot helemaal aan de rand van de pagina — niet alleen de
   rand van de (smallere) .container, maar de daadwerkelijke viewportrand.
   "margin-right: calc(50% - 50vw)" trekt de afbeelding voorbij de
   container-marge naar de echte paginarand; de kabels in de bronafbeelding
   lopen zelf al kaal het beeld uit aan de rechterkant, dus het effect is dat
   de kabel rechtstreeks uit de zijkant van het scherm lijkt te komen. */
.kabelcategorien-chart { display: block; width: 100%; max-width: 615px; height: auto; margin: 0 0 40px auto; margin-right: calc(50% - 50vw); }

/* "Wat is UTP?"-uitlegtekst naast de kabelcategorieën-afbeelding
   (.kabelcategorien-row = wrapper om tekst + afbeelding). De afbeelding
   blijft bewust een rechtstreeks kind van diezelfde wrapper, die zelf (net
   als .container) de volle breedte van de sectie inneemt zonder eigen
   padding/marge — zo rekent de rechts-bleed-regel hieronder nog steeds met
   dezelfde breedte als .container zelf, en blijft de afbeelding tot de
   daadwerkelijke paginarand lopen.
   Vanaf 1240px breed (waar we ook zeker weten dat .container zijn max-width
   van 1180px heeft bereikt, dus een vaste content-breedte van 1132px) staat
   de afbeelding met position:absolute rechts, verticaal gecentreerd (top:50%
   + translateY(-50%)) t.o.v. de hoogte van de tekstkolom — de tekstkolom
   krijgt daarom een vaste max-width (480px) zodat samen met de afbeelding
   (615px) + tussenruimte (~37px) precies binnen die 1132px past, zonder
   overlap. Onder 1240px is er te weinig ruimte voor tekst + afbeelding naast
   elkaar; daar valt het terug op het oude, volledig gestapelde gedrag
   (afbeelding eerst, gecentreerd/bled, tekst er los onder). */
.kabelcategorien-row { position: relative; margin-bottom: 88px; }
.kabelcategorien-copy h3 { margin-bottom: 14px; }
.kabelcategorien-copy p { margin-bottom: 16px; }
.kabelcategorien-copy p:last-child { margin-bottom: 0; }
@media (min-width: 1240px) {
  .kabelcategorien-chart--with-copy { position: absolute; top: 50%; right: calc(50% - 50vw); margin: 0; transform: translateY(-50%); }
  .kabelcategorien-copy { max-width: 480px; }
}
/* Onder 1240px staat de afbeelding (net als voorheen) los onder de tekst in
   plaats van ernaast/absoluut gepositioneerd. Omdat .kabelcategorien-copy
   p:last-child hierboven zijn margin-bottom bewust op 0 heeft staan (nodig
   voor de verticaal-gecentreerde desktop-variant), viel de afbeelding zonder
   deze regel direct tegen de laatste tekstregel aan, met name op mobiel. */
@media (max-width: 1239px) {
  .kabelcategorien-chart--with-copy { margin-top: 40px; }
}

/* Zelfde "volgt nog"-stijl, hergebruikt binnen de uitklapbare Wegwijzer-hoofdstukken
   (chapter-more) voor de 27 nieuwe hoofdstukken die nog met foto + tekst gevuld
   moeten worden. */
.chapter-more .copy-placeholder-note { font-size: 13px; font-style: italic; color: var(--ink-soft); opacity: .75; }

/* korte feitenstrip boven/onder de projectomschrijving */
.project-meta { display: flex; flex-wrap: wrap; gap: 32px; margin: 28px 0 0; }

/* De sectie met de fotoslideshow, gevolgd door "Over dit project" — 30% minder
   ruimte ertussen dan de standaard sectie-padding (96px boven wordt 48px). */
.section--tight:has(.project-slideshow) + .section { padding-top: 48px; }
.project-meta div { display: flex; flex-direction: column; gap: 4px; }
.project-meta span { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.project-meta b { font-size: 15px; color: var(--navy-900); }

/* value / about page pieces */
.about-media {
  border-radius: 20px; overflow: hidden; position: relative; min-height: 340px;
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
  display: flex; align-items: center; justify-content: center;
}
.about-media svg { width: 100px; opacity: .9; }

/* Real photo filling the whole card (e.g. the RJ45-kabel foto) */
.about-media--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Transparent-background UniFi productrenders, centered with room to breathe */
.about-media--product img {
  max-width: 62%; max-height: 62%;
  width: auto; height: auto;
  object-fit: contain;
  filter: drop-shadow(0 20px 40px rgba(4,16,32,.45));
}

/* Clickable dienst-kaarten op de particulier/zakelijk overzichtspagina's —
   het hele blok (tekst + afbeelding) is een link naar de volledige
   dienstpagina. Duidelijke hover/focus-feedback laat zien dat het aanklikbaar is. */
a.svc-link { display: grid; text-decoration: none; color: inherit; outline: none; }
a.svc-link h3 { transition: color .18s; }
a.svc-link:hover h3, a.svc-link:focus-visible h3 { color: var(--blue-600); }
a.svc-link .about-media img { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
a.svc-link:hover .about-media--photo img, a.svc-link:focus-visible .about-media--photo img { transform: scale(1.045); }
a.svc-link:hover .about-media--product img, a.svc-link:focus-visible .about-media--product img { transform: scale(1.06); }
a.svc-link:focus-visible { box-shadow: 0 0 0 3px var(--blue-300, #7cc4f0); border-radius: 16px; }
.svc-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-weight: 700; font-size: 14px; color: var(--blue-600); }
.svc-more svg { width: 15px; height: 15px; transition: transform .18s; }
a.svc-link:hover .svc-more svg, a.svc-link:focus-visible .svc-more svg { transform: translateX(4px); }

/* Portrait photo slot on the Over ons page — ready to hold a real <img>
   the moment one is available; the aspect-ratio and rounded frame already
   match what a headshot should use. */
.about-photo-frame {
  position: relative;
  aspect-ratio: 3 / 4;
  max-height: 480px;
  border-radius: 20px;
  overflow: hidden;
  background: radial-gradient(420px 260px at 25% 0%, rgba(30,155,224,.35), transparent 60%), linear-gradient(160deg, var(--navy-900), var(--navy-700));
}
.about-photo-frame img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.about-photo-frame svg { width: 64px; height: 64px; opacity: .55; }
.about-photo-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 32px 24px 20px;
  background: linear-gradient(to top, rgba(6,24,46,.88), rgba(6,24,46,.4) 65%, transparent);
  text-align: left;
}
.about-photo-caption b { display: block; color: #fff; font-size: 17px; }
.about-photo-caption span { display: block; margin-top: 4px; color: rgba(255,255,255,.7); font-size: 13.5px; }
.about-photo-hint { margin-top: 14px; font-size: 12.5px; color: var(--ink-soft); text-align: center; }
.stat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 40px; }
@media (max-width: 700px) { .stat-grid { grid-template-columns: 1fr; } }
.stat-grid .stat b { display: block; font-size: 34px; font-weight: 800; color: var(--navy-900); }
.stat-grid .stat span { font-size: 14px; color: var(--ink-soft); font-weight: 600; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-950); color: rgba(255,255,255,.65); padding: 72px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h5 { color: #fff; font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 18px; }
.footer-grid li { margin-bottom: 10px; font-size: 14.5px; }
.footer-grid a:hover { color: #fff; }
.footer-brand p { color: rgba(255,255,255,.55); font-size: 14.5px; max-width: 300px; margin-top: 14px; }
.footer-bottom {
  margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  font-size: 13px; color: rgba(255,255,255,.45);
}
.footer-social { display: flex; gap: 10px; }
.footer-social a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; }
.footer-social a:hover { background: rgba(255,255,255,.16); }
.footer-social svg { width: 16px; height: 16px; }

/* Utility */
.mt-0 { margin-top: 0; }
.text-center { text-align: center; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }