/* ==========================================================================
   BOVIDS SOLUTIONS — aanvullende CSS voor WordPress + Elementor Free
   --------------------------------------------------------------------------
   Plaatsen: WordPress → Weergave → Aanpassen → Aanvullende CSS → plakken.
   Gebruik:  geef de container in Elementor de genoemde CSS-class onder
             Geavanceerd → CSS-classes (zonder punt, dus: bovids-hero).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HUISSTIJLVARIABELEN — alle kleuren uit het BoVids-logo
   Pas hier een kleur aan en de hele site verandert mee.
   -------------------------------------------------------------------------- */
:root{
  --bv-oranje:        #E9510E;
  --bv-oranje-donker: #C4400A;
  --bv-oranje-tint:   #FDF0E9;
  --bv-blauw:         #0B4E8C;
  --bv-navy:          #0E2340;
  --bv-navy-diep:     #0A1B31;
  --bv-inkt:          #152443;
  --bv-tekst:         #4B5A76;
  --bv-grond:         #F6F8FC;
  --bv-lijn:          #E4E9F2;
  --bv-radius:        12px;
  --bv-schaduw:       0 1px 2px rgba(14,35,64,.04), 0 8px 24px -12px rgba(14,35,64,.16);
}

/* --------------------------------------------------------------------------
   2. BASIS
   -------------------------------------------------------------------------- */
body{ color:var(--bv-tekst); }
h1,h2,h3,h4{ color:var(--bv-inkt); letter-spacing:-.015em; text-wrap:balance; }

/* Accentwoord in een kop: <span class="bv-o">werkt</span> */
.bv-o{ color:var(--bv-oranje); }

/* Label boven een kop — als PARAGRAAF gebruiken, niet als heading (SEO) */
.bv-label{
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  font-size:12.5px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bv-oranje); margin:0 0 14px;
}

/* Zichtbare focus voor toetsenbordgebruikers (toegankelijkheid) */
a:focus-visible, button:focus-visible, .elementor-button:focus-visible{
  outline:3px solid var(--bv-oranje); outline-offset:3px; border-radius:4px;
}

/* --------------------------------------------------------------------------
   3. KNOPPEN   → class: bovids-knop-primair / bovids-knop-lijn / bovids-knop-licht
   -------------------------------------------------------------------------- */
.bovids-knop-primair .elementor-button{
  background:var(--bv-oranje); color:#fff; border:2px solid var(--bv-oranje);
  border-radius:8px; padding:14px 26px; font-weight:600;
  transition:background .18s ease, border-color .18s ease;
}
.bovids-knop-primair .elementor-button:hover{
  background:var(--bv-oranje-donker); border-color:var(--bv-oranje-donker); color:#fff;
}
.bovids-knop-lijn .elementor-button{
  background:transparent; color:var(--bv-oranje); border:2px solid var(--bv-oranje);
  border-radius:8px; padding:14px 26px; font-weight:600; transition:all .18s ease;
}
.bovids-knop-lijn .elementor-button:hover{ background:var(--bv-oranje); color:#fff; }

.bovids-knop-licht .elementor-button{
  background:#fff; color:var(--bv-navy); border:2px solid #fff;
  border-radius:8px; padding:14px 26px; font-weight:600; transition:all .18s ease;
}
.bovids-knop-licht .elementor-button:hover{ background:transparent; color:#fff; }

/* --------------------------------------------------------------------------
   4. HEADER   → class: bovids-header  (container ook op Sticky: Boven zetten)
   Schaduw verschijnt pas zodra de header vastplakt.
   -------------------------------------------------------------------------- */
.bovids-header{ background:#fff; transition:box-shadow .2s ease, border-color .2s ease;
  border-bottom:1px solid transparent; }
.bovids-header.elementor-sticky--effects{
  border-bottom-color:var(--bv-lijn);
  box-shadow:0 6px 22px -18px rgba(14,35,64,.55);
}
/* Menu */
.bovids-header .elementor-nav-menu a:not(.elementor-button){
  color:var(--bv-inkt); font-size:14.5px; font-weight:500;
  border-bottom:2px solid transparent; padding-bottom:4px;
}
.bovids-header .elementor-nav-menu a:not(.elementor-button):hover,
.bovids-header .elementor-nav-menu .current-menu-item a{
  color:var(--bv-oranje); border-bottom-color:var(--bv-oranje);
}

/* --------------------------------------------------------------------------
   5. HERO-BEELD  → class: bovids-hero-beeld
   Zet de foto als ACHTERGROND van deze container (Grootte: Cover).
   Dit maakt de organische vorm links + de oranje boog rechts.
   -------------------------------------------------------------------------- */
.bovids-hero{ background:var(--bv-grond); overflow:hidden; }

.bovids-hero-beeld{
  position:relative;
  min-height:520px;
  background-size:cover;
  background-position:center;
  /* organische linkerrand, zelfde vorm als in het ontwerp */
  clip-path:path("M150 0 C 62 96 202 196 182 288 C 162 386 56 458 136 560 L720 560 L720 0 Z");
}
/* Browsers zonder clip-path:path() vallen terug op een nette ronde hoek */
@supports not (clip-path: path("M0 0 L1 1 Z")){
  .bovids-hero-beeld{ clip-path:none; border-radius:0 0 0 140px; }
}
/* De oranje boog */
.bovids-hero-beeld::after{
  content:"";
  position:absolute; top:26px; bottom:26px; left:46px; right:-66px;
  border:7px solid var(--bv-oranje);
  border-radius:50%;
  /* linkerkant open laten, net als in het ontwerp */
  clip-path:polygon(28% 0, 100% 0, 100% 100%, 22% 100%, 22% 72%, 0 72%, 0 26%, 28% 26%);
  pointer-events:none;
}

/* USP-blokjes onder de heroknoppen */
.bovids-usp .elementor-icon-box-icon{
  width:42px; height:42px; border-radius:10px; background:#fff;
  display:grid; place-items:center; box-shadow:var(--bv-schaduw);
}
.bovids-usp .elementor-icon-box-icon i,
.bovids-usp .elementor-icon-box-icon svg{ color:var(--bv-oranje); fill:var(--bv-oranje); font-size:21px; }
.bovids-usp .elementor-icon-box-title{ font-size:15px; color:var(--bv-inkt); margin:0 0 2px; }
.bovids-usp .elementor-icon-box-description{ font-size:14px; line-height:1.45; }

/* --------------------------------------------------------------------------
   6. DONKERE KAART IN DE INTRO  → class: bovids-kaart-donker
   -------------------------------------------------------------------------- */
.bovids-kaart-donker{
  background:var(--bv-navy); color:#C9D6E8;
  border-radius:var(--bv-radius); padding:34px 34px 30px;
  border-left:5px solid var(--bv-oranje);
}
.bovids-kaart-donker h3,
.bovids-kaart-donker .elementor-heading-title{ color:#fff; }
.bovids-kaart-donker ul{ margin:0; padding:0; list-style:none; }
.bovids-kaart-donker li{
  position:relative; padding-left:30px; margin-bottom:12px; font-size:16px; line-height:1.5;
}
.bovids-kaart-donker li::before{
  content:""; position:absolute; left:0; top:7px; width:17px; height:17px;
  border:2px solid var(--bv-oranje); border-radius:50%;
}

/* --------------------------------------------------------------------------
   7. DIENSTKAARTEN  → class: bovids-dienst  (op elke kaartcontainer)
   -------------------------------------------------------------------------- */
.bovids-dienst{
  background:#fff; border:1px solid var(--bv-lijn); border-radius:var(--bv-radius);
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.bovids-dienst:hover{
  border-color:#F5C0A4; transform:translateY(-3px); box-shadow:var(--bv-schaduw);
}
.bovids-dienst .elementor-icon svg,
.bovids-dienst .elementor-icon i{ color:var(--bv-oranje); fill:var(--bv-oranje); }
/* "Meer informatie →" als tekstlink onderaan de kaart */
.bovids-dienst .bv-meer{
  color:var(--bv-oranje); font-weight:600; font-size:15px; white-space:nowrap;
}
.bovids-dienst .bv-meer::after{ content:" →"; display:inline-block; transition:transform .2s ease; }
.bovids-dienst:hover .bv-meer::after{ transform:translateX(4px); }

/* --------------------------------------------------------------------------
   8. EXPERTISE  → class: bovids-expertise op één Text Editor-widget
   HTML in de widget:
   <div class="bv-exp-grid">
     <span class="bv-exp">AV-installaties</span> … 15 stuks …
   </div>
   <div class="bv-specs"><span class="bv-specs-label">Waar ik dagelijks mee werk</span>
     <span class="bv-spec">SDI</span> … </div>
   -------------------------------------------------------------------------- */
.bv-exp-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(178px, 1fr)); gap:14px;
}
.bv-exp{
  display:flex; align-items:center; gap:12px;
  background:#fff; border:1px solid var(--bv-lijn); border-radius:10px;
  padding:15px 17px; font-size:15px; font-weight:500; color:var(--bv-inkt);
}
.bv-exp::before{
  content:""; flex:none; width:9px; height:9px; border-radius:50%;
  background:var(--bv-oranje);
}
.bv-specs{
  margin-top:34px; border-top:1px dashed var(--bv-lijn); padding-top:26px;
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:center;
}
.bv-specs-label{
  font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--bv-tekst); margin-right:6px;
}
.bv-spec{
  font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--bv-blauw);
  background:#EAF1F9; border-radius:5px; padding:5px 10px;
}

/* --------------------------------------------------------------------------
   9. PROJECTKAARTEN  → class: bovids-project op de kaartcontainer,
      bovids-project-beeld op de afbeeldingscontainer erbinnen
   -------------------------------------------------------------------------- */
.bovids-project{
  background:#fff; border:1px solid var(--bv-lijn);
  border-radius:var(--bv-radius); overflow:hidden;
}
.bovids-project-beeld{
  position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--bv-navy);
  background-size:cover; background-position:center;
}
/* blauwe gradient over de foto — maakt matige foto's alsnog netjes */
.bovids-project-beeld::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(11,78,140,.42), rgba(14,35,64,.72));
}
/* oranje label linksboven: <span class="bv-tag">Live streaming</span> */
.bv-tag{
  position:absolute; left:16px; top:16px; z-index:2;
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; background:var(--bv-oranje); color:#fff;
  padding:5px 10px; border-radius:5px;
}
/* Notitieblok "voorbeeldprojecten" → class: bovids-notitie */
.bovids-notitie{
  margin-top:26px; background:var(--bv-oranje-tint); border:1px dashed #F2B394;
  border-radius:10px; padding:16px 20px; font-size:15px; color:#8A4212;
}

/* --------------------------------------------------------------------------
   10. CTA-SECTIE  → class: bovids-cta
   De grote oranje cirkel is pure CSS: geen afbeelding, geen laadtijd.
   -------------------------------------------------------------------------- */
.bovids-cta{ background:var(--bv-navy); color:#C9D6E8; position:relative; overflow:hidden; }
.bovids-cta::before{
  content:""; position:absolute; right:-160px; top:50%; transform:translateY(-50%);
  width:520px; height:520px; border:8px solid var(--bv-oranje);
  border-radius:50%; opacity:.62; pointer-events:none;
}
.bovids-cta > .e-con-inner{ position:relative; z-index:2; }
.bovids-cta h2, .bovids-cta .elementor-heading-title{ color:#fff; }

/* --------------------------------------------------------------------------
   11. FOOTER  → class: bovids-footer
   -------------------------------------------------------------------------- */
.bovids-footer{ background:var(--bv-navy-diep); color:#93A7C2; font-size:15px; }
.bovids-footer h4, .bovids-footer .elementor-heading-title{
  color:#fff; font-family:"IBM Plex Mono",monospace; font-size:12px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase;
}
.bovids-footer a{ color:#93A7C2; }
.bovids-footer a:hover{ color:var(--bv-oranje); }
.bovids-footer .bv-placeholder{ color:#6F86A6; font-style:italic; }
.bovids-footer-onder{
  border-top:1px solid #2A4260; padding:22px 0 26px;
  font-size:14px; color:#6F86A6;
}

/* --------------------------------------------------------------------------
   12. RESPONSIVE — sluit aan op breakpoints Tablet 1180 / Mobiel 620
   -------------------------------------------------------------------------- */
@media (max-width:1180px){
  .bovids-hero-beeld{ min-height:420px; }
}
@media (max-width:900px){
  /* op mobiel geen blob-uitsnede: foto vol in beeld, dat leest beter */
  .bovids-hero-beeld{ clip-path:none; min-height:320px; height:56vw; max-height:400px; }
  .bovids-hero-beeld::after{ top:16px; bottom:16px; left:-10px; right:-80px; }
}
@media (max-width:620px){
  .bv-exp-grid{ grid-template-columns:1fr 1fr; }
  .bovids-cta::before{ width:340px; height:340px; right:-190px; }
  .bovids-kaart-donker{ padding:26px 24px 22px; }
}

/* Respecteer de systeeminstelling "beperk beweging" */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}

/* --------------------------------------------------------------------------
   13. HULPCLASSES VOOR HET IMPORT-SJABLOON
   Deze classes staan al in het meegeleverde Elementor-sjabloon
   (bovids-homepage-sjabloon.json). Ze regelen de kolomindeling, zodat je
   niet per container breedtes hoeft te klikken.
   -------------------------------------------------------------------------- */

/* Rasters — werken zowel op een 'boxed' als een 'full width' container */
.bv-grid-2, .bv-grid-2 > .e-con-inner,
.bv-grid-3, .bv-grid-3 > .e-con-inner,
.bv-grid-4, .bv-grid-4 > .e-con-inner{ display:grid !important; align-items:stretch; }

.bv-grid-2, .bv-grid-2 > .e-con-inner{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 26px; }
.bv-grid-3, .bv-grid-3 > .e-con-inner{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px 40px; }
.bv-grid-4, .bv-grid-4 > .e-con-inner{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }

@media (max-width:1180px){
  .bv-grid-4, .bv-grid-4 > .e-con-inner,
  .bv-grid-3, .bv-grid-3 > .e-con-inner{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px){
  .bv-grid-2, .bv-grid-2 > .e-con-inner,
  .bv-grid-3, .bv-grid-3 > .e-con-inner,
  .bv-grid-4, .bv-grid-4 > .e-con-inner{ grid-template-columns:1fr; }
}

/* Twee kolommen naast elkaar (hero, intro, CTA) */
.bv-twee-kolommen, .bv-twee-kolommen > .e-con-inner{
  display:flex !important; flex-wrap:wrap; align-items:center; gap:0;
}
.bv-kol-links { flex:1 1 460px; min-width:0; }
.bv-kol-rechts{ flex:1 1 460px; min-width:0; }

/* Gecentreerde sectiekop */
.bv-kop-mid, .bv-kop-mid > .e-con-inner{
  max-width:640px; margin-left:auto; margin-right:auto; text-align:center;
}
.bv-kop-mid p{ margin-left:auto; margin-right:auto; }

/* Hero-tekstkolom netjes op de 1180-grid */
.bv-hero-tekst{ max-width:620px; margin-left:auto; padding:78px 56px 74px 24px; }
@media (max-width:900px){
  .bv-hero-tekst{ max-width:none; margin:0; padding:56px 24px 40px; }
}

/* Knoppenrij in de hero */
.bv-hero-knoppen, .bv-hero-knoppen > .e-con-inner{
  display:flex !important; flex-wrap:wrap; gap:14px;
}
@media (max-width:620px){
  .bv-hero-knoppen .elementor-widget-button{ flex:1 1 100%; }
  .bv-hero-knoppen .elementor-button{ width:100%; justify-content:center; }
}

/* Foto in een projectkaart (image-widget binnen .bovids-project-beeld) */
.bovids-project-beeld .elementor-widget-image,
.bovids-project-beeld .elementor-widget-container,
.bovids-project-beeld figure{ height:100%; margin:0; }
.bovids-project-beeld img{
  width:100%; height:100%; object-fit:cover; display:block; opacity:.82;
}

/* Iconen in de dienstkaarten */
.bovids-dienst .elementor-icon{ font-size:34px; color:var(--bv-oranje); }

/* Placeholdertekst in de footer */
.bv-placeholder{ color:#6F86A6; font-style:italic; }

/* Introtekst / lead */
.bv-lead{ font-size:18px; line-height:1.6; }
@media (max-width:620px){ .bv-lead{ font-size:17px; } }

/* Icon-box in "Waarom Bovids" */
.bovids-waarom .elementor-icon-box-icon .elementor-icon{ font-size:24px; color:var(--bv-oranje); }
.bovids-waarom .elementor-icon-box-title{ font-size:17px; color:var(--bv-inkt); margin:0 0 5px; }
.bovids-waarom .elementor-icon-box-description{ font-size:15px; line-height:1.6; }

/* Zorgt dat kaarten in een raster even hoog worden */
.bv-grid-4 > .bovids-dienst, .bv-grid-4 > .e-con-inner > .bovids-dienst,
.bv-grid-3 > .bovids-project, .bv-grid-3 > .e-con-inner > .bovids-project{ height:100%; }
.bovids-dienst .bv-meer{ margin-top:auto; }

/* ==========================================================================
   14. OVERNAME VAN HET THEMA
   Zorgt dat de opmaak wint van het WordPress-thema en van Elementors
   standaardkleuren, ongeacht welk thema er actief is.
   ========================================================================== */

/* Thema-kop, paginatitel en thema-voettekst weg — de plugin levert die zelf */
body .wp-site-blocks > header,
body header.wp-block-template-part,
body .wp-site-blocks > footer,
body footer.wp-block-template-part,
body .wp-block-site-title,
body .wp-block-site-logo,
body .wp-block-post-title,
body .site-header,
body .site-footer,
body .entry-header,
body .page-header{ display:none !important; }

/* Contentgebied volle breedte maken, ook in blokthema's */
body .wp-site-blocks,
body .wp-site-blocks > main,
body .wp-block-group.has-global-padding,
body .entry-content,
body .site-main,
body #main,
body #content{
  max-width:none !important;
  margin-left:0 !important; margin-right:0 !important;
  padding-left:0 !important; padding-right:0 !important;
}
body :where(.is-layout-constrained) > *{ max-width:none !important; }
body{ margin:0 !important; }

/* Typografie afdwingen */
body, body .elementor-widget-text-editor, body p, body li{
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important;
}
body h1, body h2, body h3, body h4,
body .elementor-heading-title,
body .elementor-icon-box-title{
  font-family:Poppins,"IBM Plex Sans",Arial,sans-serif !important;
}
body .bv-label, body .bv-specs-label, body .bv-spec, body .bv-tag{
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace !important;
}

/* Knoppen: winnen van Elementors standaard groen */
body .bovids-knop-primair .elementor-button{
  background-color:var(--bv-oranje) !important; color:#fff !important;
  border-color:var(--bv-oranje) !important;
}
body .bovids-knop-primair .elementor-button:hover{
  background-color:var(--bv-oranje-donker) !important; border-color:var(--bv-oranje-donker) !important;
}
body .bovids-knop-lijn .elementor-button{
  background-color:transparent !important; color:var(--bv-oranje) !important;
  border-color:var(--bv-oranje) !important;
}
body .bovids-knop-lijn .elementor-button:hover{
  background-color:var(--bv-oranje) !important; color:#fff !important;
}
body .bovids-knop-licht .elementor-button{
  background-color:#fff !important; color:var(--bv-navy) !important; border-color:#fff !important;
}
body .bovids-knop-licht .elementor-button:hover{
  background-color:transparent !important; color:#fff !important;
}

/* Koppen en tekst in de merkkleuren */
body h1, body h2, body h3, body h4{ color:var(--bv-inkt); }
body .bv-o{ color:var(--bv-oranje) !important; }
body .bovids-cta h2, body .bovids-cta .elementor-heading-title{ color:#fff !important; }
body .bovids-kaart-donker .elementor-heading-title{ color:#fff !important; }

/* Hero-tekstkolom netjes op de grid */
body .bv-hero-tekst{ max-width:620px !important; margin-left:auto !important; }

/* ==========================================================================
   15. AFBEELDINGEN — meegeleverde voorbeeldfoto's
   Vervangen? Zet in Elementor een eigen achtergrondafbeelding op de
   container; die wint automatisch van de regels hieronder.
   ========================================================================== */
.bovids-hero-beeld{
  background-image:url('../img/hero.jpg');
  background-size:cover; background-position:center;
}
.bovids-project-beeld{ background-size:cover; background-position:center; }
.bovids-project:nth-of-type(1) .bovids-project-beeld{ background-image:url('../img/project-1.jpg'); }
.bovids-project:nth-of-type(2) .bovids-project-beeld{ background-image:url('../img/project-2.jpg'); }
.bovids-project:nth-of-type(3) .bovids-project-beeld{ background-image:url('../img/project-3.jpg'); }
/* de lege placeholder-afbeelding van Elementor verbergen */
.bovids-project-beeld .elementor-widget-image{ display:none; }

/* ==========================================================================
   16. KOP- EN VOETTEKST DIE DE PLUGIN ZELF PLAATST
   ========================================================================== */
.bv-header{
  position:sticky; top:0; z-index:9999; background:#fff;
  border-bottom:1px solid transparent;
  transition:box-shadow .2s ease, border-color .2s ease;
}
.bv-header.vast{
  border-bottom-color:var(--bv-lijn);
  box-shadow:0 6px 22px -18px rgba(14,35,64,.55);
}
.bv-header-in{
  max-width:1180px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; gap:24px; height:78px;
}
.bv-header-in .bv-logo img{ height:40px; width:auto; display:block; }
.bv-nav{ margin-left:auto; display:flex; align-items:center; gap:18px; flex:none; }
.bv-nav ul{ display:flex; align-items:center; gap:18px; list-style:none; margin:0; padding:0; }
.bv-nav a{
  color:var(--bv-inkt); font-size:14.5px; font-weight:500; text-decoration:none;
  border-bottom:2px solid transparent; padding-bottom:4px; white-space:nowrap;
}
.bv-nav a:hover{ color:var(--bv-oranje); }
.bv-nav .current-menu-item > a, .bv-nav li.actief > a{
  color:var(--bv-oranje); border-bottom-color:var(--bv-oranje);
}
.bv-cta-knop{
  background:var(--bv-oranje); color:#fff !important; text-decoration:none;
  font-size:14.5px; font-weight:600; padding:11px 18px; border-radius:8px;
  white-space:nowrap; flex:none; transition:background .18s ease;
}
.bv-cta-knop:hover{ background:var(--bv-oranje-donker); }
.bv-burger{
  display:none; margin-left:auto; background:none; border:0; padding:10px;
  cursor:pointer; color:var(--bv-inkt); line-height:0;
}
.bv-burger svg{ width:26px; height:26px; }

@media (max-width:1180px){
  .bv-nav{ display:none; }
  .bv-nav.open{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; left:0; right:0; top:78px; background:#fff;
    border-bottom:1px solid var(--bv-lijn); padding:8px 24px 20px;
    box-shadow:0 18px 30px -22px rgba(14,35,64,.6);
  }
  .bv-nav.open ul{ flex-direction:column; align-items:stretch; gap:0; }
  .bv-nav.open a{ display:block; padding:13px 0; border-bottom:1px solid var(--bv-lijn); }
  .bv-nav.open .bv-cta-knop{ margin-top:16px; text-align:center; }
  .bv-burger{ display:block; }
  .bv-header-in{ position:relative; }
}

/* Voettekst */
.bv-footer{
  background:var(--bv-navy-diep); color:#93A7C2; padding:70px 0 0; font-size:15px;
  font-family:"IBM Plex Sans",Arial,sans-serif;
}
.bv-footer-in{ max-width:1180px; margin:0 auto; padding:0 24px; }
.bv-footer-grid{ display:grid; grid-template-columns:1.55fr 1fr 1fr 1.25fr; gap:44px; }
.bv-footer img{ height:46px; width:auto; margin-bottom:20px; }
.bv-footer h4{
  color:#fff; font-family:"IBM Plex Mono",monospace; font-size:12px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; margin:0 0 18px;
}
.bv-footer p{ margin:0; line-height:1.6; }
.bv-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.bv-footer a{ color:#93A7C2; text-decoration:none; }
.bv-footer a:hover{ color:var(--bv-oranje); }
.bv-footer-onder{
  margin-top:54px; border-top:1px solid #2A4260; padding:22px 0 26px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:14px; color:#6F86A6;
}
@media (max-width:1180px){ .bv-footer-grid{ grid-template-columns:1fr 1fr; gap:38px; } }
@media (max-width:620px){ .bv-footer-grid{ grid-template-columns:1fr; } }