/* Vettica — multi-module chroom dat niet native kan. Bewust minimaal:
   alles wat via Divi-opties in een preset/variabele kan, hoort dáár.

   0. Body-weight: Divi zet zelf `body{font-weight:500}` (Medium) in zijn
   font-CSS; de comps zijn Open Sans Regular. Medium rendert ±2,5% breder,
   waardoor de regelval niet op de comp-woorden valt. Geen Divi-optie voor —
   dus hier. Presets met een eigen weight (300/600/700) blijven ongemoeid.

   1. TB-header/footer-uitlijning — de Theme Builder rendert layouts als
   legacy block-layout (et_block_row, geen flex-classes); de native
   layout-attrs op rows/kolommen komen daar niet door (zelfde beperking
   als bij BP/KK). Haken = eigen classes, geen index-classes. */

body{font-weight:400}

/* topbar: telefoon + beeldmerk + e-mail rechts naast elkaar (gap fluid,
   comp: ±18px @1920 rond het icoon) */
.vt-topbar-row .et_pb_column{display:flex;justify-content:flex-end;align-items:center;gap:clamp(0.5rem,0.94vw,1.15rem)}
.vt-topbar-row .et_pb_column .et_pb_module{margin-bottom:0}
/* beeldmerk (vt-mark.svg) tussen telefoon en e-mail: Divi centreert images met
   auto-marges (slokken in de flex-rij alle ruimte op) en geeft ze 44px
   bodem-marge (duwt het icoon boven de tekstas) — beide uitzetten */
.vt-topbar-row .et_pb_image{margin:0!important}

/* hoofdbalk: logo links, menu rechts — bodem-uitgelijnd (PSD: menu-baseline
   ligt op de onderkant van het logo). Item-gap fluid: 41px @1920 = 2,13vw. */
.vt-nav-row{display:flex;align-items:flex-end}
.vt-nav-row .et_pb_column{margin-bottom:0}
/* logo-kolom naar eigen breedte (anders knijpt de 1_4-kolom het logo klein);
   bodemruimte onder het logo = dezelfde 36px @1920 als onder de menu-links
   (native image-margin komt in de TB-render niet door — computed 0px) */
.vt-nav-row .et_pb_column_1_4{display:flex;align-items:flex-end;flex:0 0 auto;width:auto!important}
.vt-nav-row .et_pb_column_1_4 .et_pb_image{margin-bottom:clamp(0.7rem,1.88vw,2.25rem)!important}
.vt-nav-row .et_pb_column_3_4{display:flex;justify-content:flex-end;align-items:flex-end;flex:1 1 auto;width:auto!important}
.vt-nav-row .et_pb_menu .et_pb_menu__menu>nav>ul{justify-content:flex-end;align-items:flex-end;column-gap:clamp(1.1rem,2.13vw,2.6rem)}

/* dropdown (WHAT WE DO) — PSD: naadloos wit paneel onder de balk, afgeronde
   ONDERhoeken, geen rand/lijn (de blauwe 3px-lijn is een Divi-default en zit
   native al op wit via menuDropdown.lineColor; hier de geometrie).
   Comp @1920: paneel 236px breed, items 22,5px met 56px pitch, tekst 42px
   vanaf de paneelrand. */
.vt-nav-row .et_pb_menu .nav li ul.sub-menu{
  padding:clamp(0.7rem,1.15vw,1.4rem) 0 clamp(0.9rem,1.45vw,1.75rem);
  border-radius:0 0 clamp(14px,1.25vw,24px) clamp(14px,1.25vw,24px);
  box-shadow:0 12px 24px rgba(0,5,74,.08);
  width:clamp(205px,13.7vw,263px)
}
.vt-nav-row .et_pb_menu .nav li ul.sub-menu li{width:100%}
.vt-nav-row .et_pb_menu .nav li ul.sub-menu li a{
  padding:clamp(0.35rem,0.86vw,1rem) 1rem clamp(0.35rem,0.86vw,1rem) clamp(1.2rem,2.19vw,2.6rem);
  width:100%;white-space:nowrap
}

/* mobiel (≤980px): logo links, hamburger rechts op één regel (Divi stapelt de
   TB-kolommen standaard) + uitklap-paneel in huisstijl i.p.v. Divi-blauw. */
@media (max-width:980px){
  /* Divi stapelt de TB-kolommen (flex-direction:column) — !important, want die
     module-regel is specifieker dan een class-haak */
  .vt-nav-row{flex-direction:row!important;align-items:center!important;flex-wrap:nowrap;justify-content:space-between}
  .vt-nav-row .et_pb_column{width:auto!important;margin:0!important;float:none}
  .vt-nav-row .et_pb_column_1_4{flex:0 1 auto;min-width:0;align-items:center!important}
  .vt-nav-row .et_pb_column_3_4{flex:1 0 auto;justify-content:flex-end;align-items:center!important}
  .vt-nav-row .et_pb_column_1_4 .et_pb_image{margin-bottom:0!important}
  .vt-nav-row .et_pb_menu{width:100%}
  .vt-nav-row .et_pb_menu .et_pb_menu_inner_container{display:flex;justify-content:flex-end}
  .vt-nav-row .et_pb_menu .et_mobile_nav_menu{margin:0;float:none;display:flex;align-items:center}
  .vt-nav-row .et_pb_menu .mobile_menu_bar{padding:0;line-height:1}
  /* uitklap-paneel: wit, geen blauwe randlijn, afgeronde hoeken */
  .vt-nav-row .et_pb_menu .et_mobile_menu{
    border-top:none;border-radius:0 0 16px 16px;
    box-shadow:0 12px 24px rgba(0,5,74,.10);padding:0.6rem 0
  }
  .vt-nav-row .et_pb_menu .et_mobile_menu li a{border-bottom:none;padding:0.7rem 1.4rem;background:transparent}
  .vt-nav-row .et_pb_menu .et_mobile_menu .sub-menu li a{padding-left:2.4rem}
  /* sub-items zijn anchors op /what-we-do/ zelf → WP zet ze allemaal op
     'current'; net als op desktop blijven ze ink, lime is de actieve pagina */
  .vt-nav-row .et_pb_menu .et_mobile_menu .sub-menu .current-menu-item>a{color:var(--gcid-vt-text,#1e1e1c)!important}
  .vt-topbar-row .et_pb_column{gap:0.6rem}
}

/* footer: modules zonder extra block-marge */
.vt-footer .et_pb_column .et_pb_module{margin-bottom:0}

/* footer: LinkedIn-icoon (4e kolom) — links onder "Follow us" i.p.v. gecentreerd,
   en ruimer bemeten dan de DB-sizing (clamp 20-26px) zodat hij optisch meetelt. */
.vt-footer .et_pb_column:last-child .et_pb_image{
  width:clamp(26px,1.75vw,34px)!important;
  margin-left:0!important;margin-right:auto!important;text-align:left
}

/* 2. Hero: gebogen witte onderrand (organische curve uit de PSD's) —
   SVG in het child theme (relatieve url = go-live-veilig, KK-les).
   Geometrie uit de 1920px-comps: sectie 871px hoog (45.365vw, proportioneel
   mee-schalend, floor 300px). De pill-ONDERKANT ligt in alle comps op een
   vaste lijn: ±416/871 = 47,8% van de hero-hoogte (home 47,2%, who/what
   48,3%); meerregelige pills groeien omhoog. De row krijgt die hoogte en
   ankert de pill onderin. Overschrijft de row-padding uit de DB-layouts. */
.vt-hero{position:relative;overflow:hidden;height:min(45.365vw,871px);min-height:300px}
.vt-hero .et_pb_row.et_pb_row{width:100%;margin:0 auto;height:47.8%;display:flex;flex-direction:column!important;justify-content:flex-end;padding:0!important}
.vt-hero .et_pb_row .et_pb_column{width:100%}
.vt-hero::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:clamp(60px,11.5vw,220px);background:url('vt-curve.svg') bottom center/100% 100% no-repeat;pointer-events:none}

/* 3. Logo-carousel (global 73): grayscale logo's + structurele carousel-
   fixes en dots-styling (KK-lessen, kk-bridge.css it.4/22/24/25 — front-end
   emit geen layout-attrs, dus gaps/kolomrichting hier). */
.vt-logo-carousel.et_pb_group_carousel{display:flex;flex-direction:column;row-gap:20px}
/* LET OP: géén flex-basis 100% zoals KK (daar row-context) — in de flex-column
   duwt dat de dots buiten de modulebox (geverifieerd 2026-07-14) */
.vt-logo-carousel>.et_pb_group_carousel_container{width:100%;min-width:0;flex:0 0 auto}
.vt-logo-carousel .et_pb_group_carousel_track{width:100%}
.vt-logo-carousel .et_pb_group_carousel_slide{min-width:0}
.vt-logo-slide{min-width:0;display:flex;align-items:center;justify-content:center;height:100%}
.vt-logo-carousel .et_pb_image{display:flex;align-items:center;justify-content:center;margin-bottom:0}
.vt-logo-carousel .et_pb_image img{filter:grayscale(1);opacity:.72}
/* dots: grijze bolletjes, actief = navy pill (KK-patroon) */
.vt-logo-carousel .et_pb_group_carousel_dots{display:flex;justify-content:center;align-items:center;gap:.6rem;margin-top:2rem;height:auto!important;width:100%;flex:0 0 auto}
/* dot-kleur komt native uit dotNav (navy, inactief 30% opacity); hier alleen vorm */
.vt-logo-carousel .et_pb_group_carousel_dots>*{width:8px;height:8px;border-radius:50%;border:none;padding:0;font-size:0;line-height:0;transition:all .3s;cursor:pointer}
.vt-logo-carousel .et_pb_group_carousel_dots>.active,
.vt-logo-carousel .et_pb_group_carousel_dots>[class*="active"]{width:24px;border-radius:4px}

/* 4. Navy content-cards (What we do / Who we are) — PSD-geometrie.

   De kaart-row IS de gewone content-container (1600px + gutter, gecentreerd —
   die maten komen uit de divi-row--default preset). Daardoor staat de tekst in
   de navy balk op exact dezelfde lijn als de intro-tekst erboven, en houdt de
   foto aan de andere kant dezelfde buitenmarge als de rest van de pagina. Klopt
   met de comps: de tekst begint daar op x=157 @1920 ≈ (1920-1600)/2.

   De navy balk bloedt door tot de vensterrand: ::before steekt met -100vw buiten
   de row en de sectie clipt dat af. De binnenrand van het paneel eindigt ónder de
   foto (PSD: die rand is nooit zichtbaar — de foto is exact even hoog als de balk
   en dekt hem af). Gap tekst↔foto is in beide comps 99px @1920. */
:root{--vt-gutter:clamp(1.25rem,4vw,2.5rem);--vt-card-gap:clamp(1.6rem,5.16vw,99px)}
.vt-card-sectie{overflow:hidden;scroll-margin-top:120px}
.vt-card-sectie .et_pb_row.vt-card.et_pb_row{
  display:flex;align-items:center;position:relative;
  width:100%!important;margin:0 auto!important;
  padding:0 var(--vt-gutter)!important
}
.vt-card::before{content:'';position:absolute;top:0;bottom:0;background:var(--gcid-vt-navy,#00054a);z-index:0}
.vt-card>.et_pb_column{position:relative;z-index:1;margin:0!important;float:none}
.vt-card .et_pb_module{margin-bottom:0}
.vt-card .vt-card-tekst .et_pb_text{margin-bottom:1.6rem}
.vt-card .vt-card-tekst .et_pb_heading{margin-bottom:1.4rem}
/* foto rechts: navy bloedt links weg — foto links: navy bloedt rechts weg */
.vt-card-foto-rechts::before{left:-100vw;right:23%}
.vt-card-foto-links::before{left:23%;right:-100vw}
/* tekst: buitenrand valt samen met de content-rand (0), gap naar de foto gelijk */
.vt-card .vt-card-tekst{padding-block:3.2rem}
.vt-card-foto-rechts .vt-card-tekst{padding-left:0;padding-right:var(--vt-card-gap)}
.vt-card-foto-links .vt-card-tekst{padding-left:var(--vt-card-gap);padding-right:0}
/* team-maten. PSD @1920 (vector-masks gemeten): foto = 604×604 VIERKANT met radius
   94px (= 15,5% van de fotobreedte); de navy balk is exact even hoog als de foto
   (601 vs 604 — flush boven én onder). Kolommen: tekst 61,4% / foto 38,6%.

   Vierkant is de ondergrens, geen bovengrens: zodra de tekstkolom hoger wordt dan
   de foto (smallere schermen, lange bio's) rekt de foto mee met de balk in plaats
   van dat de panelrand erboven/onder uitsteekt. Vandaar aspect-ratio + min-height
   i.p.v. een vaste vierkante box, en een radius in vw (94px @1920) i.p.v. in %
   — een %-radius zou op een niet-vierkante foto ovale hoeken geven. */
.vt-card .vt-card-foto{align-self:stretch;display:flex;padding:0}
.vt-card .vt-card-foto .et_pb_image{display:flex;width:100%;margin:0;line-height:0}
.vt-card .vt-card-foto .et_pb_image_wrap{
  display:block;position:relative;width:100%;
  min-height:100%;
  border-radius:clamp(20px,4.9vw,94px)!important;overflow:hidden
}
.vt-card .vt-card-foto img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center top
}
.vt-card-team .vt-card-tekst{width:61.4%!important}
.vt-card-team .vt-card-foto{width:38.6%!important}
.vt-card-team .vt-card-foto .et_pb_image_wrap{aspect-ratio:1/1}
/* what-we-do-maten (PSD: tekst 51% / foto 49% / panel tot 65%; foto-box 1056×601,
   dezelfde 94px-radius, en ook daar is het paneel exact even hoog als de foto) */
.vt-card-wwd .vt-card-tekst{width:51%!important}
.vt-card-wwd .vt-card-foto{width:49%!important}
.vt-card-wwd .vt-card-foto .et_pb_image_wrap{aspect-ratio:1056/601}
.vt-card-wwd.vt-card-foto-rechts::before{right:35%}
.vt-card-wwd.vt-card-foto-links::before{left:35%}
/* mobiel: stapelen, panel volledig */
@media (max-width:980px){
  .vt-card-sectie .et_pb_row.vt-card.et_pb_row{flex-direction:column;width:calc(100% - 2.5rem)!important;margin:0 auto!important;padding:0!important}
  .vt-card::before{inset:0!important;border-radius:40px!important}
  .vt-card>.et_pb_column{width:100%!important}
  .vt-card .vt-card-foto{order:2}
  .vt-card .vt-card-tekst{padding:2.2rem 1.8rem!important}
  .vt-card .vt-card-foto{padding:0 1.8rem 1.8rem!important}
}
.vt-card-tekst .et_pb_image{margin-left:0;margin-right:auto}

/* 5. Contact: follow-card + gegevens-kolom.
   De follow-card werkt als de navy cards: het paneel loopt rechts door tot de
   vensterrand (PSD: shape van x=1356 tot 2085, dus de rechterhoeken vallen buiten
   het canvas) en alleen de linkerhoeken hebben radius — dezelfde 94px @1920.
   De navy komt uit een ::before die met -100vw buiten de kolom steekt (zelfde
   mechanisme als .vt-card-foto-links::before); de sectie clipt dat af. De
   kolom-achtergrond uit Divi wordt uitgezet. */
.et_pb_section:has(>.et_pb_row.vt-contact-row){overflow:hidden}
.vt-follow-card{
  position:relative;background-color:transparent!important;
  padding:clamp(1.6rem,2.5vw,3rem) clamp(1.2rem,2.08vw,2.5rem)!important
}
.vt-follow-card::before{
  content:'';position:absolute;top:0;bottom:0;left:0;right:-100vw;
  background:var(--gcid-vt-navy,#00054a);
  border-radius:clamp(20px,4.9vw,94px) 0 0 clamp(20px,4.9vw,94px);
  z-index:0
}
.vt-follow-card>*{position:relative;z-index:1}
.vt-follow-card .et_pb_module{margin-bottom:clamp(0.5rem,0.83vw,1rem)}
.vt-follow-card .et_pb_image{width:clamp(36px,2.92vw,56px)!important;margin:0.5rem auto 0;text-align:center}
.vt-contact-row{display:flex;align-items:flex-start;column-gap:clamp(1.5rem,3.33vw,4rem)}
/* Divi's clearfix-::after telt in een flex-row als flex-item mee: die vangt de
   column-gap ná de laatste kolom op, waardoor de follow-card 64px vóór de
   content-rand eindigde. Zelfde geldt voor de navy cards (daar 0px, maar weg ermee). */
.vt-contact-row::after,.vt-card::after{content:none}
.vt-contact-row .et_pb_column{margin:0!important;float:none}
.vt-contact-row .vt-contact-gegevens{width:58%!important}
.vt-contact-row .vt-follow-card{flex:0 0 auto;width:34%!important;margin-left:auto!important}
.vt-contact-gegevens .et_pb_heading{margin-bottom:clamp(1rem,1.67vw,2rem)}
@media (max-width:980px){
  .vt-contact-row{flex-direction:column;row-gap:2rem}
  .vt-contact-row .vt-contact-gegevens,.vt-contact-row .vt-follow-card{width:100%!important}
  /* gestapeld weer een gewone afgeronde kaart */
  .vt-follow-card::before{right:0;border-radius:40px}
}

/* 6. Woorden-per-regel volgen de comp via fluid font-sizing (vw-proportioneel,
   zie de tekst-presets in layer23.php): de tekst-container-verhouding blijft
   constant over 981→~1680px, dus de natuurlijke regelafbreking valt overal op
   dezelfde woorden — géén harde <br> nodig. ≤980px hervloeit alles vrij. */
/* navy-band: flex-kolommen krimpen niet voor columnGap, dus de tekst zelf een
   fluid max-width geven (gecentreerd) = comp-kolombreedte → juiste afbreking.
   Comp @1920: 396px = 24,75% van de 1600-row (schaalt mee met de row: die is
   min(1600, 100vw - 2×gutter)). */
.vt-band-txt{max-width:min(396px,calc(24.75vw - 19.8px));margin-inline:auto}
@media (max-width:980px){.vt-band-txt{max-width:100%}}

/* card-tekst (who-bio's, what-we-do-cards): de tekstKOLOM is breder dan het
   comp-tekstframe (de foto staat op de site flush tegen de contentrand, in de
   comp 200px naar binnen). Zonder correctie breken de regels te laat. De tekst
   krijgt daarom de comp-framebreedte: 695px @1920 = 43,44% van de 1600-row. */
.vt-card .vt-card-tekst .et_pb_text:not(.preset--module--divi-text--vt-pill-label),
.vt-card .vt-card-tekst .et_pb_heading{max-width:min(695px,calc(43.44vw - 34.75px))}
@media (max-width:980px){
  .vt-card .vt-card-tekst .et_pb_text,
  .vt-card .vt-card-tekst .et_pb_heading{max-width:100%}
}

/* contact/follow-card: de comp zet "Connect to our team / on LinkedIn" op twee
   regels — de kaartkolom is breder dan dat tekstframe (comp: ±280px @1920). */
.vt-follow-card .et_pb_text{max-width:min(285px,calc(17.8vw - 14.25px));margin-inline:auto}
@media (max-width:980px){.vt-follow-card .et_pb_text{max-width:100%}}