/*
Theme Name: guifi
Theme URI: https://guifi.nl/
Description: Guifi.nl — Hello Elementor child theme
Author: Guifi
Template: hello-elementor
Version: 2.0.0
Text Domain: guifi
License: GNU General Public License v3 or later.
*/

/* ── FONTS ───────────────────────────────────────────────────────────────── */
@font-face { font-family:'Blauer Nue'; src:url('fonts/blauer-nue/BlauerNue-Light.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Blauer Nue'; src:url('fonts/blauer-nue/BlauerNue-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Blauer Nue'; src:url('fonts/blauer-nue/BlauerNue-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Blauer Nue'; src:url('fonts/blauer-nue/BlauerNue-SemiBold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Blauer Nue'; src:url('fonts/blauer-nue/BlauerNue-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Blauer Nue'; src:url('fonts/blauer-nue/BlauerNue-ExtraBold.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'Montreal'; src:url('fonts/montreal/Montreal Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Montreal'; src:url('fonts/montreal/Montreal Medium.ttf') format('truetype'); font-weight:500; font-display:swap; }

/* ── DESIGN TOKENS (van guifiontwikkelt.nl spec) ─────────────────────────── */
:root{
  --font:"Blauer Nue","Hanken Grotesk",-apple-system,"Segoe UI",Roboto,sans-serif;
  --c-primary-50:#E6F7F2;--c-primary-100:#CDEFE4;--c-primary-200:#9FDFCE;
  --c-primary-300:#6FCFB7;--c-primary-400:#3FBFA1;--c-primary-500:#22B38E;
  --c-primary-600:#1CAC7B;--c-primary-700:#189C6F;--c-primary-800:#138A61;--c-primary-900:#0D6F4D;
  --c-grey-50:#FAFAFA;--c-grey-100:#F4F4F5;--c-grey-200:#E4E4E7;--c-grey-300:#D4D4D8;
  --c-grey-400:#A1A1AA;--c-grey-500:#71717A;--c-grey-600:#52525B;--c-grey-700:#3F3F46;
  --c-grey-800:#27272A;--c-grey-900:#18181B;
  --c-white:#fff;--c-black:#000;--c-brand:var(--c-primary-600);
  --sp-xxs:4px;--sp-xs:8px;--sp-sm:12px;--sp-md:16px;--sp-lg:24px;--sp-xl:32px;
  --sp-xxl:48px;--sp-huge:64px;--sp-massive:96px;--sp-max:128px;
  --r-xs:4px;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-pill:9999px;
  --container-max:1280px;
  --fs-h1:96px;--fs-h2:64px;--fs-lead:40px;--fs-h3:24px;
  --fs-eyebrow:18px;--fs-body:16px;--fs-sm:14px;--fs-xs:13px;
}

/* ── GLOBAL ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
body{font-family:var(--font);color:var(--c-grey-900);margin:0;padding:0;-webkit-font-smoothing:antialiased;background:var(--c-white)}
img{max-width:100%;display:block}
a{text-decoration:none}

/* ── ELEMENTOR OVERRIDES ─────────────────────────────────────── */
/* Container outer mag de hele viewport-breedte gebruiken */
body.elementor-page .e-con.e-flex,
body.elementor-page .e-con-full > .e-con-inner{
  max-width:100%;
}
/* HTML-widgets hoeven geen verticale padding van Elementor */
body.elementor-page .elementor-widget-html > .elementor-widget-container{
  padding:0;
}
/* Image-widgets in onze cards: vul de container */
body.elementor-page .guifi-card .elementor-widget-image,
body.elementor-page .guifi-card .elementor-widget-image .elementor-widget-container,
body.elementor-page .guifi-card .elementor-widget-image img{
  width:100%;height:100%;object-fit:cover;
}
/* Erfgenamen van h1/h2/h3 in headings: laat onze CSS-klasse de styling doen */
body.elementor-page .elementor-widget-heading .elementor-heading-title{
  margin:0;
}

/* ── SITE HEADER (header.php) — logo links / menu CENTER / button rechts ─── */
.guifi-site-header{
  position:absolute;top:0;left:0;right:0;z-index:100;
  padding:32px 80px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:32px;
}
.guifi-site-header .guifi-nav__logo{
  justify-self:start;
  font-family:'Blauer Nue',sans-serif;font-size:24px;font-weight:700;
  color:#fff;letter-spacing:-0.02em;text-decoration:none;
}
.guifi-site-header .guifi-nav{justify-self:center}
.guifi-site-header .guifi-nav__menu{
  display:flex;align-items:center;gap:48px;
  list-style:none;margin:0;padding:0;
}
.guifi-site-header .guifi-nav__menu li{margin:0;padding:0}
.guifi-site-header .guifi-nav__menu a{
  font-family:'Blauer Nue',sans-serif;font-size:16px;font-weight:500;
  color:rgba(255,255,255,0.95);text-decoration:none;transition:color .2s;
}
.guifi-site-header .guifi-nav__menu a:hover{color:#fff}
.guifi-site-header .guifi-nav__menu .current-menu-item > a,
.guifi-site-header .guifi-nav__menu a.active{color:#fff}
.guifi-site-header > .guifi-btn{justify-self:end}

/* ── HAMBURGER (mobile) ─────────────────────────────────────────────────── */
.guifi-menu-toggle{
  display:none;
  position:relative;
  width:44px;height:44px;
  background:transparent;border:none;cursor:pointer;
  padding:0;justify-self:end;z-index:200;
}
.guifi-menu-toggle__bar{
  position:absolute;left:10px;right:10px;height:2px;
  background:#fff;border-radius:2px;
  transition:transform .25s ease, opacity .15s ease, top .25s ease, background-color .2s;
}
.guifi-menu-toggle__bar:nth-child(1){top:14px}
.guifi-menu-toggle__bar:nth-child(2){top:21px}
.guifi-menu-toggle__bar:nth-child(3){top:28px}

body.guifi-menu-open .guifi-menu-toggle__bar{background:#111}
body.guifi-menu-open .guifi-menu-toggle__bar:nth-child(1){top:21px;transform:rotate(45deg)}
body.guifi-menu-open .guifi-menu-toggle__bar:nth-child(2){opacity:0}
body.guifi-menu-open .guifi-menu-toggle__bar:nth-child(3){top:21px;transform:rotate(-45deg)}

/* ≤1024px: hamburger actief (tablet + mobiel), desktop-knop verbergen */
@media(max-width:1024px){
  .guifi-site-header{
    grid-template-columns:1fr auto !important;
    padding:20px 24px;
  }
  .guifi-site-header > .guifi-btn{display:none}
  .guifi-menu-toggle{display:block}
  body.guifi-menu-open{overflow:hidden}
  .guifi-site-header .guifi-nav__menu a{color:#111 !important}
}

/* Tablet (769–1024px): dropdown-paneel dat van bovenaf uitklapt */
@media(min-width:769px) and (max-width:1024px){
  .guifi-site-header .guifi-nav{
    position:fixed;top:0;left:0;right:0;
    background:#fff;
    padding:104px 48px 48px;
    transform:translateY(-100%);
    transition:transform .3s ease;
    z-index:150;pointer-events:none;
    box-shadow:0 18px 44px rgba(0,0,0,.14);
  }
  body.guifi-menu-open .guifi-site-header .guifi-nav{transform:translateY(0);pointer-events:auto}
  .guifi-site-header .guifi-nav__menu{flex-direction:column;gap:24px;align-items:flex-start}
  .guifi-site-header .guifi-nav__menu a{font-size:26px;font-weight:500}
}

/* Mobiel (≤768px): full-screen menu met kruis rechtsboven */
@media(max-width:768px){
  .guifi-site-header .guifi-nav{
    position:fixed;inset:0;
    background:#fff;
    display:flex;align-items:center;justify-content:center;
    z-index:150;opacity:0;pointer-events:none;
    transition:opacity .25s ease;
  }
  body.guifi-menu-open .guifi-site-header .guifi-nav{opacity:1;pointer-events:auto}
  .guifi-site-header .guifi-nav__menu{flex-direction:column;gap:32px;text-align:center}
  .guifi-site-header .guifi-nav__menu a{font-size:28px;font-weight:500}
}

/* (legacy guifi-nav CSS verwijderd — nav komt nu uit header.php / wp_nav_menu) */

/* ── BUTTON V3 — pill + losse circle, diagonale arrow ──────────────────── */
.guifi-btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;text-decoration:none;font-family:'Blauer Nue',sans-serif;font-size:15px;font-weight:400;line-height:1}
.guifi-btn__label{display:inline-flex;align-items:center;padding:0 24px;height:48px;border-radius:9999px;border:1px solid;white-space:nowrap;transition:all .2s ease}
.guifi-btn__circle{width:48px;height:48px;border-radius:50%;border:1px solid;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s ease}
.guifi-btn__circle svg{width:14px;height:14px;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.guifi-btn--dark .guifi-btn__label,
.guifi-btn--dark .guifi-btn__circle{background:#111;border-color:#fff;color:#fff}
.guifi-btn--dark .guifi-btn__circle svg{stroke:#fff}
.guifi-btn--light .guifi-btn__label,
.guifi-btn--light .guifi-btn__circle{background:#fff;border-color:#111;color:#111}
.guifi-btn--light .guifi-btn__circle svg{stroke:#111}
.guifi-btn:hover .guifi-btn__circle{transform:translate(2px,-2px)}

/* ── HERO ────────────────────────────────────────────────────────────────── */
.guifi-hero{
  position:relative;min-height:580px;
  background-color:#111;
  background-size:cover;background-position:center top;
  display:flex;flex-direction:column;
}
.guifi-hero::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(to top, #111 0%, rgba(17,17,17,0.6) 40%, transparent 70%),
    linear-gradient(to bottom, rgba(17,17,17,0.5) 0%, transparent 30%),
    rgba(17,17,17,0.35);
  pointer-events:none;
}
.guifi-hero__content{
  position:relative;z-index:2;
  margin-top:auto;
  max-width:1280px;width:100%;margin-left:auto;margin-right:auto;
  padding:96px 80px 56px;   /* 96px boven (titel nooit achter header), 56px onder (tot logo's) */
}
/* dwing 96px top af; zijkanten = zelfde 1280-uitlijning als de rest (24px gutter) */
body.elementor-page .guifi-hero__content{
  padding-top:96px !important;
  padding-left:max(24px, calc(50vw - 640px)) !important;
  padding-right:max(24px, calc(50vw - 640px)) !important;
}
.guifi-hero__title{
  font-family:'Blauer Nue',sans-serif;font-size:96px;font-weight:600;
  line-height:1.0;color:#fff;margin:0 0 0;
  letter-spacing:-0.02em;
}
.guifi-hero__title .dim{opacity:0.6}
/* Hero vult altijd het volledige scherm op desktop (override Elementor min-height).
   De harde padding-top op de inner-container weghalen: positionering gebeurt via
   flex (margin-top:auto op .guifi-hero__content), zodat titel + logo-marquee samen
   binnen 100vh passen en de logo's onderaan in beeld blijven. */
@media (min-width:1201px){
  body.elementor-page .guifi-hero{min-height:100vh !important;row-gap:0 !important;}
  body.elementor-page .guifi-hero__content > .e-con-inner{padding-top:0 !important;}
}
/* Tablet + mobiel (≤1200 = site-breakpoint): ZELFDE look als desktop — titel +
   logo-banner onderaan, donkere ruimte erboven — alleen het hero/videoblok kleiner
   (70vh). justify-content:flex-end dwingt 'onderaan' af, ook als Elementor's
   tablet-instellingen de flex anders zetten (anders sprong de titel omhoog <1200). */
@media (max-width:1200px){
  body.elementor-page .guifi-hero{
    min-height:70vh !important;row-gap:0 !important;
    display:flex !important;flex-direction:column !important;
    justify-content:flex-end !important;
  }
  body.elementor-page .guifi-hero{padding-bottom:0 !important;}
  /* Elementor zet hier op ≤1200 --padding-top:180px + --padding-bottom:64px op het
     hero-content; beide uit zodat de titel echt onderaan de video staat. */
  body.elementor-page .guifi-hero__content{
    margin-top:0 !important;
    --padding-top:0px !important;--padding-bottom:0px !important;
    padding-top:0 !important;padding-bottom:16px !important;   /* 16px onder de H1 */
  }
  body.elementor-page .guifi-hero__content > .e-con-inner{padding-top:0 !important;padding-bottom:0 !important;}
  body.elementor-page .guifi-hero__title{text-align:left !important}
  /* logo-carousel is (via JS) ONDER het videoblok geplaatst -> eigen donkere band.
     1px overlap met de buren (allemaal #111) zodat er geen witte sub-pixel-naad
     ('lijn') doorschijnt tussen de band en de video/intro op echte toestellen. */
  body.elementor-page .guifi-marquee--below{
    background:#111 !important;width:100% !important;
    padding-top:16px !important;padding-bottom:24px !important;  /* logo's iets hoger */
    margin-top:-6px !important;margin-bottom:-1px !important;     /* overlap onderrand video */
  }
}
/* mobiel: minder ruimte tussen de logo's in de marquee */
@media (max-width:767px){
  body.elementor-page .guifi-marquee .guifi-marquee__track{gap:16px !important;}
}

/* ── LOGO MARQUEE ─────────────────────────────────────────────────────── */
/* Alle logos uniform hoog via CSS — geen per-image sizing in Elementor nodig */
body.elementor-page .guifi-marquee{position:relative;width:100%;overflow:hidden}
body.elementor-page .guifi-marquee .guifi-marquee__track{
  width:max-content !important;
  max-width:none !important;      /* override Elementor max-width:100% -> track = volledige content (2x set) */
  flex:0 0 auto !important;       /* niet laten krimpen, anders klopt -50% niet -> naadloze loop */
  flex-wrap:nowrap !important;
  gap:40px !important;            /* minder ruimte tussen logo's */
  animation:guifi-scroll 40s linear infinite;
  align-items:center !important;
}
body.elementor-page .guifi-marquee .guifi-marquee__img,
body.elementor-page .guifi-marquee .guifi-marquee__img > .elementor-widget-container,
body.elementor-page .guifi-marquee .guifi-marquee__img .elementor-image{
  width:auto !important;
  flex-shrink:0 !important;
  padding:0 !important;
  margin:0 !important;
}
body.elementor-page .guifi-marquee .guifi-marquee__img img{
  height:120px !important;
  width:auto !important;
  max-width:none !important;
  min-width:120px;
  object-fit:contain;
  display:block;
}
body.elementor-page .guifi-marquee{padding:32px 0 !important}
/* hero-marquee: geen top-padding zodat de 56px (uit .guifi-hero__content) exact tussen titel en logo's valt */
body.elementor-page .guifi-marquee--dark{padding-top:0 !important;padding-bottom:32px !important}
body.elementor-page .guifi-marquee--dark .guifi-marquee__img img{filter:brightness(0) invert(1) !important;opacity:0.95 !important}
body.elementor-page .guifi-marquee--light .guifi-marquee__img img{filter:brightness(0) !important;opacity:0.85 !important}

/* Bewezen Resultaten: static logo rijen — zwart op wit, uniform verdeeld over volle breedte */
body.elementor-page .guifi-resultaten > .e-con,
body.elementor-page .guifi-resultaten .e-con-inner{
  max-width:100% !important;
  width:100% !important;
}
body.elementor-page .guifi-resultaten .e-flex[class*="elementor-element"]:has(.guifi-logo-img),
body.elementor-page .guifi-logo-row{
  display:flex !important;
  flex-direction:row !important;
  justify-content:space-around !important;
  align-items:center !important;
  width:100% !important;
  max-width:1280px !important;
  margin:0 auto !important;
  padding:24px 80px !important;
  gap:32px !important;
}
body.elementor-page .guifi-logo-img,
body.elementor-page .guifi-logo-img > .elementor-widget-container{
  width:auto !important;
  flex:0 0 auto !important;
  padding:0 !important;
  margin:0 !important;
}
body.elementor-page .guifi-logo-img img,
body.elementor-page .guifi-resultaten img{
  filter:brightness(0) !important;
  opacity:0.85 !important;
  height:72px !important;
  width:auto !important;
  max-width:none !important;
  object-fit:contain;
  display:block !important;
}
@keyframes guifi-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
/* Pixel-exacte marquee-loop: schuift precies één set + gap, JS zet --marquee-shift + duur.
   JS (logo-marquee.js) dupliceert de unieke logoset zodat de loop naadloos doorloopt. */
@keyframes guifi-marquee-x{from{transform:translateX(0)}to{transform:translateX(calc(var(--marquee-shift,1485px) * -1))}}

/* (legacy MARQUEE CSS verwijderd — Elementor-versie staat hierboven onder ── LOGO MARQUEE ──) */

/* ── INTRO ───────────────────────────────────────────────────────────────── */
.guifi-intro{background:#111;padding:0}
.guifi-intro__inner{max-width:1280px;margin:0 auto;padding:80px 80px 96px}
.guifi-intro__text{
  font-family:'Blauer Nue',sans-serif;font-size:40px;font-weight:400;
  line-height:1.45;color:#fff;margin:0 0 48px;
}
.guifi-intro__text .dim{color:rgba(255,255,255,0.45)}
.guifi-intro__green{background:#f4fbef;height:96px;width:100%}

/* Intro text-editor max-width binnen Elementor — match Figma ~900px */
body.elementor-page .guifi-intro .elementor-widget-text-editor,
body.elementor-page .guifi-intro .elementor-widget-text-editor > .elementor-widget-container,
body.elementor-page .guifi-intro p{
  max-width:920px !important;
}
body.elementor-page .guifi-intro .elementor-widget-text-editor p{
  font-size:36px !important;
  line-height:1.4 !important;
  font-weight:400 !important;
  margin:0 !important;
}
body.elementor-page .guifi-intro .elementor-widget-text-editor p span{font-size:inherit;line-height:inherit}

/* Team h2 mag wat groter & op een regel waar mogelijk */
body.elementor-page .guifi-team .elementor-heading-title{
  white-space:normal;
  max-width:none;
}

/* Diensten items compacter zoals in Figma */
body.elementor-page .guifi-dienst-item{
  padding:20px 0 !important;
}
body.elementor-page .guifi-dienst-item--right{padding-left:40px !important}
body.elementor-page .guifi-dienst-item--left{padding-right:40px !important}
body.elementor-page .guifi-dienst-item .elementor-heading-title{font-size:20px !important;font-weight:500;margin:0 0 6px !important}
body.elementor-page .guifi-dienst-item p{font-size:15px !important;line-height:1.5 !important}
body.elementor-page .guifi-dienst-item .elementor-widget-spacer{height:4px !important}

/* Footer nav-links compacter */
body.elementor-page .guifi-footer__nav-col li{margin-bottom:6px}
body.elementor-page .guifi-footer__nav-col a{font-size:14px}

/* ── DIENSTEN ────────────────────────────────────────────────────────────── */
.guifi-diensten{background:#fff;padding:100px 0}
.guifi-diensten__inner{max-width:1280px;margin:0 auto;padding:0 80px}
.guifi-diensten__header{display:grid;grid-template-columns:1fr 1fr;gap:80px;margin-bottom:64px;align-items:end}
.guifi-diensten__label{font-size:18px;font-weight:500;color:#18181b;margin:0 0 16px}
.guifi-diensten__title{font-size:64px;font-weight:500;color:#111;line-height:1.0;margin:0;letter-spacing:-0.02em}
.guifi-diensten__right{}
.guifi-diensten__subtitle{font-size:24px;font-weight:600;color:#111;margin:0 0 12px}
.guifi-diensten__desc{font-size:16px;font-weight:300;color:#111;line-height:1.65;margin:0 0 32px}
.guifi-diensten__list{}
.guifi-dienst-row{
  display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid #e0e0e0;
}
.guifi-dienst-row:last-child{border-bottom:1px solid #e0e0e0}
.guifi-dienst-item{padding:32px 0 32px}
/* NB: geen vertikale border tussen items — alleen horizontaal op de row */

/* Diensten-rows: borders PER ITEM (niet doorlopend), gap tussen items in het midden */
body.elementor-page .guifi-dienst-row{
  border:none !important;
  display:flex !important;
  flex-direction:row !important;
  gap:64px !important;     /* visuele gap tussen left/right item, ook tussen hun lijnen */
  width:100% !important;
}
body.elementor-page .guifi-dienst-item{
  flex:1 1 0 !important;
  min-width:0 !important;
  padding:24px 0 !important;
  border-bottom:1px solid #d4d4d8 !important;  /* lijn ONDER elk item */
}
/* Bovenkant van de eerste rij krijgt ook een lijn */
body.elementor-page .guifi-diensten__list > .e-con:first-child .guifi-dienst-item,
body.elementor-page .guifi-diensten__list > .guifi-dienst-row:first-child .guifi-dienst-item{
  border-top:1px solid #d4d4d8 !important;
}
body.elementor-page .guifi-dienst-item .elementor-heading-title{font-size:20px !important;font-weight:500 !important;color:#111;margin:0 0 6px !important}
body.elementor-page .guifi-dienst-item p{font-size:15px !important;font-weight:300 !important;color:#111;line-height:1.5 !important;margin:0 !important}
body.elementor-page .guifi-dienst-item .elementor-widget-spacer{display:none !important}

/* Diensten right column: compacte verticale ritmiek */
body.elementor-page .guifi-diensten__right{gap:0 !important}
body.elementor-page .guifi-diensten__right .elementor-widget{margin:0 !important}
body.elementor-page .guifi-diensten__right .elementor-widget-heading{margin-bottom:12px !important}
body.elementor-page .guifi-diensten__right .elementor-widget-text-editor{margin-bottom:20px !important;max-width:520px}
body.elementor-page .guifi-diensten__right .elementor-widget-heading .elementor-heading-title{margin:0 !important}
body.elementor-page .guifi-diensten__right .elementor-widget-text-editor p{margin:0 !important}
.guifi-dienst-item__title{font-size:24px;font-weight:400;color:#111;margin:0 0 12px}
.guifi-dienst-item__desc{font-size:16px;font-weight:300;color:#111;line-height:1.6;margin:0}

/* ── CTA BAR ─────────────────────────────────────────────────────────────── */
.guifi-cta{background:#111;padding:80px 0}
.guifi-cta__inner{max-width:1280px;margin:0 auto;padding:0 80px}
.guifi-cta__text{font-size:32px;font-weight:500;color:#fff;line-height:1.4;margin:0}

/* ── KAART (Werk + Team) ─────────────────────────────────────────────────── */
body.elementor-page a.guifi-card{text-decoration:none;color:inherit;display:flex}
body.elementor-page .guifi-card{
  flex:1 1 0 !important;
  min-width:0 !important;
  min-height:400px !important;
  overflow:hidden !important;
  border-radius:6px !important;
  position:relative !important;
  isolation:isolate;
  transition:transform .25s ease, box-shadow .25s ease;
}
/* Click-trigger op Werk-cards: wit cirkeltje met diagonale arrow ↗ */
body.elementor-page .guifi-werk__grid-top .guifi-card,
body.elementor-page .guifi-werk__grid-bot .guifi-card{
  cursor:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='23' fill='white' stroke='%23111' stroke-width='1'/%3E%3Cpath d='M19 29l10-10m0 0H21m8 0v8' stroke='%23111' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") 24 24, pointer;
}
body.elementor-page .guifi-werk__grid-top .guifi-card:hover,
body.elementor-page .guifi-werk__grid-bot .guifi-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(0,0,0,0.18);
}
/* foto vult de hele kaart als achtergrond */
body.elementor-page .guifi-card .guifi-card__photo{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  z-index:0;
}
body.elementor-page .guifi-card .guifi-card__photo > .elementor-widget-container,
body.elementor-page .guifi-card .guifi-card__photo .elementor-image,
body.elementor-page .guifi-card .guifi-card__photo a{
  width:100% !important;
  height:100% !important;
  padding:0 !important;
  margin:0 !important;
}
body.elementor-page .guifi-card .guifi-card__photo img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block;
}
/* gradient over de hele kaart, aflopend van transparent boven naar donker onder */
body.elementor-page .guifi-card::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(
    to top,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.32) 22%,
    rgba(0,0,0,0.12) 50%,
    rgba(0,0,0,0)    78%
  );
  pointer-events:none;
  z-index:1;
}
/* "Andere projecten" loop-kaarten (Elementor loop-grid, template-element 8961069):
   zelfde donkere onderkant als de archief-kaarten, zodat de witte titel ook op
   lichte foto's leesbaar is. */
.elementor-element-8961069{position:relative !important;overflow:hidden !important}
.elementor-element-8961069::after{
  content:'' !important;position:absolute !important;inset:0 !important;
  background:linear-gradient(
    to top,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.32) 22%,
    rgba(0,0,0,0.12) 50%,
    rgba(0,0,0,0)    78%
  ) !important;
  pointer-events:none !important;z-index:1 !important;
}
.elementor-element-8961069 > *{position:relative;z-index:2}
/* content (heading + text) bovenop, met flex-end binnen kaart */
body.elementor-page .guifi-card .guifi-card__content{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:100% !important;
  z-index:2 !important;
}
body.elementor-page .guifi-card .elementor-heading-title{color:#fff !important;margin:0 0 6px !important}
body.elementor-page .guifi-card p{color:rgba(255,255,255,0.9) !important;margin:0 !important}
/* Dynamische Werk-widget (Guifi Projecten Grid): zelfde content-look als de statische kaarten */
body.elementor-page .guifi-card .guifi-card__content{
  display:flex;flex-direction:column;gap:20px;padding:28px 24px 24px;
}
body.elementor-page .guifi-card .guifi-card__content h3{
  font-family:'Blauer Nue',sans-serif;font-size:22px;font-weight:600;line-height:1.2;
  color:#fff !important;margin:0 !important;
}
body.elementor-page .guifi-card .guifi-card__content p{
  font-size:14px;font-weight:400;line-height:1.4;color:rgba(255,255,255,0.9) !important;margin:0 !important;
}
/* projectkaarten (home + projecten): alleen de titel tonen, geen beschrijving eronder */
body.elementor-page .guifi-card .guifi-card__content p{display:none !important}
/* Team grid: full-width horizontale slider met scroll-snap */
body.elementor-page .guifi-team__grid{
  width:100% !important;
  max-width:100% !important;
  padding:0 !important;
  margin-top:48px;
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  gap:12px !important;             /* kleine marge tussen foto's zoals in Figma */
  overflow-x:auto !important;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
body.elementor-page .guifi-team__grid::-webkit-scrollbar{display:none}
body.elementor-page .guifi-team__grid .guifi-card{
  min-height:474px !important;
  border-radius:6px !important;
  flex:0 0 calc(25% - 9px) !important;   /* 4 zichtbaar, rest scrollt */
  scroll-snap-align:start;
  user-select:none;
}
body.elementor-page .guifi-team__grid.guifi-slider-active{cursor:grab}
body.elementor-page .guifi-team__grid.guifi-slider-active *{pointer-events:none}
body.elementor-page .guifi-team__grid.guifi-slider-active{pointer-events:auto}
@media(max-width:900px){
  body.elementor-page .guifi-team__grid .guifi-card{flex:0 0 calc(50% - 6px) !important}
}
@media(max-width:600px){
  /* 24px inspringen links, niets rechts, en 1,5 kaart zichtbaar -> duidelijk een slider */
  body.elementor-page .guifi-team__grid{
    padding-left:24px !important;padding-right:0 !important;
    scroll-padding-left:24px;
  }
  body.elementor-page .guifi-team__grid .guifi-card{flex:0 0 64% !important}
}

/* Werk onderste rij (2 kolommen): kolommen komen per rij uit de inline-style (patroon 3-2-3-2),
   dus géén !important hier — alleen display + gap forceren. Kaarten wat hoger dan de 3-rij. */
body.elementor-page .guifi-werk__grid-top{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;   /* altijd 3 gelijke kolommen, ook bij wisselende content */
  grid-auto-rows:400px !important;                  /* uniforme rijhoogte -> geen scheve/uitgerekte kaarten */
  gap:8px !important;
}
body.elementor-page .guifi-werk__grid-bot{
  display:grid !important;
  grid-template-columns:repeat(2,1fr) !important;
  grid-auto-rows:560px !important;
  gap:8px !important;
}
/* kaart vult exact zijn cel; geen eigen min-height die de rij kan oprekken */
body.elementor-page .guifi-werk__grid-top .guifi-card,
body.elementor-page .guifi-werk__grid-bot .guifi-card{height:100% !important;min-height:0 !important}
body.elementor-page .guifi-werk__grid-top,
body.elementor-page .guifi-werk__grid-bot{margin-bottom:8px}

/* tablet + mobiel: alle projectkaarten onder elkaar (1 kolom), lager zodat de afbeelding minder wordt bijgesneden */
@media(max-width:1024px){
  body.elementor-page .guifi-werk__grid-top,
  body.elementor-page .guifi-werk__grid-bot{
    grid-template-columns:1fr !important;
    grid-auto-rows:auto !important;                  /* mobiel: geen vaste rijhoogte */
    gap:24px !important;                              /* 24px tussen de kaarten */
    padding-left:24px !important;padding-right:24px !important;  /* 24px van de zijkanten */
    margin-bottom:24px !important;                    /* 24px tussen de twee rijen */
  }
  body.elementor-page .guifi-werk__grid-top .guifi-card,
  body.elementor-page .guifi-werk__grid-bot .guifi-card{height:auto !important;min-height:300px !important}
}
@media(max-width:600px){
  body.elementor-page .guifi-werk__grid-top .guifi-card,
  body.elementor-page .guifi-werk__grid-bot .guifi-card{min-height:240px !important}
}

/* Werk-grids full-bleed: breek uit de 24px section-padding naar volledige schermbreedte */
body.elementor-page .guifi-werk__grid-top,
body.elementor-page .guifi-werk__grid-bot{
  width:100vw !important;max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;margin-right:calc(50% - 50vw) !important;
}

/* ── WERK ────────────────────────────────────────────────────────────────── */
.guifi-werk{background:#fff;padding:100px 0}
.guifi-werk__inner{max-width:1280px;margin:0 auto;padding:0 80px}
.guifi-werk__header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:48px}
.guifi-werk__label{font-size:18px;font-weight:500;color:#18181b;margin:0 0 8px}
.guifi-werk__title{font-size:64px;font-weight:500;color:#18181b;line-height:1.0;margin:0;letter-spacing:-0.02em}
.guifi-werk__grid-top{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:8px}
.guifi-werk__grid-bot{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.guifi-werk-card{position:relative;overflow:hidden;border-radius:4px}
.guifi-werk-card img{width:100%;height:400px;object-fit:cover;display:block}
.guifi-werk__grid-top .guifi-werk-card img{height:400px}
.guifi-werk__grid-bot .guifi-werk-card img{height:340px}
.guifi-werk-card__overlay{
  position:absolute;bottom:0;left:0;right:0;padding:28px 24px;
  background:linear-gradient(to top,rgba(17,17,17,0.9) 0%,rgba(17,17,17,0.4) 60%,transparent 100%);
}
.guifi-werk-card__title{font-size:22px;font-weight:600;color:#fff;margin:0 0 6px}
.guifi-werk-card__desc{font-size:14px;font-weight:400;color:rgba(255,255,255,0.8);margin:0;line-height:1.4}

/* ── TEAM ────────────────────────────────────────────────────────────────── */
.guifi-team{background:#fff;padding:100px 0}
.guifi-team__inner{max-width:1280px;margin:0 auto;padding:0 80px}
.guifi-team__header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:48px}
.guifi-team__label{font-size:18px;font-weight:500;color:#18181b;margin:0 0 8px}
.guifi-team__title{font-size:64px;font-weight:500;color:#18181b;line-height:1.0;margin:0;letter-spacing:-0.02em}
.guifi-team__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.guifi-team-card{position:relative;overflow:hidden}
.guifi-team-card img{width:100%;height:474px;object-fit:cover;display:block}
.guifi-team-card__overlay{
  position:absolute;bottom:0;left:0;right:0;padding:24px 20px;
  background:linear-gradient(to top,rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.2) 60%,transparent 100%);
}
.guifi-team-card__name{font-size:22px;font-weight:500;color:#fff;margin:0 0 4px}
.guifi-team-card__role{font-size:14px;font-weight:300;color:rgba(255,255,255,0.75);margin:0;line-height:1.4}

/* ── RESULTATEN ──────────────────────────────────────────────────────────── */
.guifi-resultaten{background:#fff;padding:120px 0 100px}
.guifi-resultaten__inner{max-width:1280px;margin:0 auto;padding:0 80px;text-align:center;margin-bottom:80px}
.guifi-resultaten__label{font-size:18px;font-weight:500;color:#18181b;margin:0 0 16px}
.guifi-resultaten__title{font-size:80px;font-weight:500;color:#18181b;line-height:1.0;margin:0;letter-spacing:-0.02em}
.guifi-logos-row{
  display:flex;align-items:center;justify-content:space-between;
  max-width:1280px;margin:0 auto;padding:32px 80px;
}
.guifi-logos-row + .guifi-logos-row{padding-top:24px}
.guifi-logos-row img{height:48px;width:auto;max-width:140px;object-fit:contain;opacity:1;flex-shrink:0}

/* ── FOOTER ──────────────────────────────────────────────────────────────── */
.guifi-footer{background:#111;padding:80px 0 0}
.guifi-footer__inner{max-width:1280px;margin:0 auto;padding:0 80px 60px;display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:48px;align-items:start}
.guifi-footer__tagline{font-size:22px;font-weight:500;color:#fff;line-height:1.45;margin:0;letter-spacing:-0.01em}
.guifi-footer__tagline em{font-style:normal;font-weight:300;color:rgba(255,255,255,0.6)}
.guifi-footer__address-label{font-size:12px;font-weight:500;color:rgba(255,255,255,0.5);text-transform:uppercase;letter-spacing:0.08em;margin:0 0 16px}
.guifi-footer__address{font-size:14px;font-weight:400;color:rgba(255,255,255,0.55);line-height:1.7;margin:0}
.guifi-footer__nav-col h4{font-size:12px;font-weight:500;color:rgba(255,255,255,0.5);text-transform:uppercase;letter-spacing:0.08em;margin:0 0 16px}
.guifi-footer__nav-col ul{list-style:none;margin:0;padding:0}
.guifi-footer__nav-col li{margin-bottom:10px}
.guifi-footer__nav-col a{font-size:14px;font-weight:400;color:rgba(255,255,255,0.7)}
.guifi-footer__nav-col a:hover{color:#fff}
.guifi-footer__bottom{max-width:1280px;margin:0 auto;padding:24px 80px;border-top:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:space-between}
.guifi-footer__copy{font-size:13px;color:rgba(255,255,255,0.4);margin:0}
.guifi-footer__legal{display:flex;gap:32px}
.guifi-footer__legal a{font-size:13px;color:rgba(255,255,255,0.4)}
.guifi-footer__legal a:hover{color:#fff}

/* ── 404 + SEARCH templates ──────────────────────────────────────────────── */
.guifi-404,.guifi-search{padding:160px 24px 100px;background:#fff;min-height:80vh}
.guifi-404__inner,.guifi-search__inner{max-width:760px;margin:0 auto}
.guifi-404__eyebrow,.guifi-search__eyebrow{
  font-size:14px;font-weight:500;color:var(--c-grey-500);
  text-transform:uppercase;letter-spacing:0.08em;margin:0 0 16px;
}
.guifi-404__title,.guifi-search__title{
  font-family:'Blauer Nue',sans-serif;font-size:56px;font-weight:500;
  color:var(--c-grey-900);line-height:1.05;letter-spacing:-0.02em;margin:0 0 24px;
}
.guifi-404__title em,.guifi-search__title em{font-style:normal;color:var(--c-grey-600);font-weight:400}
.guifi-404__desc{font-size:18px;line-height:1.55;color:var(--c-grey-700);margin:0 0 32px}
.guifi-404__search,.guifi-search-form{
  display:flex;align-items:center;gap:8px;
  border:1px solid var(--c-grey-300);border-radius:9999px;padding:6px 6px 6px 24px;
  max-width:480px;margin:0 0 32px;
}
.guifi-404__search input,.guifi-search-form input{
  flex:1;border:none;background:transparent;outline:none;
  font-family:'Blauer Nue',sans-serif;font-size:16px;color:var(--c-grey-900);
}
.guifi-404__search button,.guifi-search-form button{
  background:var(--c-grey-900);color:#fff;border:none;border-radius:9999px;
  padding:0 20px;height:40px;font-size:14px;font-weight:500;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
}
.guifi-404__search button:hover,.guifi-search-form button:hover{background:var(--c-grey-700)}
.guifi-search__form-wrap{margin:0 0 48px}
.guifi-search__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.guifi-search__link{
  display:block;padding:24px;border:1px solid var(--c-grey-200);border-radius:12px;
  transition:border-color .2s,background .2s,transform .2s;
}
.guifi-search__link:hover{border-color:var(--c-grey-900);background:var(--c-grey-50);transform:translateY(-1px)}
.guifi-search__item-title{font-size:22px;font-weight:500;color:var(--c-grey-900);margin:0 0 6px}
.guifi-search__item-desc{font-size:15px;color:var(--c-grey-600);line-height:1.5;margin:0 0 8px}
.guifi-search__item-url{font-size:13px;color:var(--c-grey-500)}
.guifi-search__empty{font-size:18px;color:var(--c-grey-600);margin:0}
.guifi-search__empty a{color:var(--c-brand);text-decoration:underline}
.guifi-search__pagination{margin-top:48px}
.guifi-search__pagination .page-numbers{
  display:inline-flex;padding:8px 14px;margin:0 4px;
  border:1px solid var(--c-grey-300);border-radius:8px;
  color:var(--c-grey-700);text-decoration:none;font-size:14px;
}
.guifi-search__pagination .page-numbers.current,
.guifi-search__pagination .page-numbers:hover{background:var(--c-grey-900);color:#fff;border-color:var(--c-grey-900)}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media(max-width:1100px){
  body.elementor-page .guifi-hero__title,.guifi-hero__title{font-size:72px}
  .guifi-diensten__title,.guifi-werk__title,.guifi-team__title,.guifi-resultaten__title{font-size:48px}
  .guifi-diensten__header{grid-template-columns:1fr;gap:40px}
  .guifi-footer__inner{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .guifi-nav{padding:0 24px}
  body.elementor-page .guifi-hero__title,.guifi-hero__title{font-size:48px}
  .guifi-intro__text{font-size:28px}
  .guifi-diensten__title,.guifi-werk__title,.guifi-team__title,.guifi-resultaten__title{font-size:40px}
  body.elementor-page .guifi-werk__grid-top,
  body.elementor-page .guifi-werk__grid-bot{flex-direction:column !important}
  body.elementor-page .guifi-team__grid{flex-direction:row !important;flex-wrap:wrap !important}
  body.elementor-page .guifi-team__grid .guifi-card{flex:1 1 50% !important;max-width:50%}
  body.elementor-page .guifi-footer__inner,
  body.elementor-page .guifi-dienst-row{flex-direction:column !important}
  body.elementor-page .guifi-dienst-item{width:100% !important;padding:24px 0 !important}
}
@media(max-width:600px){
  body.elementor-page .guifi-hero__title,.guifi-hero__title{font-size:36px}
  body.elementor-page .guifi-team__grid .guifi-card{flex:1 1 100% !important;max-width:100%}
}

/* ============================================================
   Guifi Team Carousel — custom Elementor-widget
   Titel + functie overlay, links-onder op de afbeelding
   ============================================================ */
.guifi-team-carousel{position:relative;overflow:hidden}

/* --- Swiper core-layout (gescoped) — Elementor laadt op deze pagina geen
   swiper.css, dus nemen we de essentiële regels zelf mee zodat de slides
   na init een horizontale flex-rij vormen i.p.v. een verticale stapel. --- */
.guifi-team-carousel.swiper{margin:0 auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}
.guifi-team-carousel .swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;align-items:stretch;box-sizing:content-box;transition-property:transform}
.guifi-team-carousel .swiper-slide{flex-shrink:0;width:100%;height:auto;position:relative;transition-property:transform}
.guifi-team-carousel.swiper-horizontal{touch-action:pan-y}
.guifi-team-carousel .swiper-slide-invisible-blank{visibility:hidden}

.guifi-team-carousel__slide{position:relative;margin:0;overflow:hidden;line-height:0;border-radius:24px}
/* Slider-cursor: wit cirkeltje met horizontale ↔ pijlen (sleepbaar heen en weer) */
.guifi-team-carousel__slide{
  cursor:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='23' fill='white' stroke='%23111' stroke-width='1'/%3E%3Cpath d='M15 24H33 M19 20L15 24L19 28 M29 20L33 24L29 28' stroke='%23111' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") 24 24, grab;
}
.guifi-team-carousel.swiper-grabbing .guifi-team-carousel__slide{cursor:grabbing}
.guifi-team-carousel__img{display:block;width:100%;height:auto;aspect-ratio:401/600;object-fit:cover}

/* ── DIENSTEN CAROUSEL (aparte widget) — eigen overrides, raakt de team-carousel
   NIET. Hoogte komt uit de widget-control 'Afbeeldingshoogte'; hieronder een nette
   fallback-hoogte als die leeg is. Beeld vult de slide -> 1 per view, geen peek. */
body .guifi-diensten-carousel .guifi-team-carousel__slide{border-radius:12px;width:auto;max-width:none;margin:0}
body .guifi-diensten-carousel .guifi-team-carousel__img{
  width:100% !important;height:420px;aspect-ratio:auto !important;object-fit:cover;display:block;
}
@media (max-width:767px){
  body .guifi-diensten-carousel .guifi-team-carousel__img{height:360px}
  /* NIET full-bleed zoals de team-carousel: respecteer de boxed container -> de
     carousel krijgt zo dezelfde 24px zijpadding als de andere blokken, blijft een
     slider (1 per view, doorlopend), niet volledige breedte. */
  body .guifi-diensten-carousel.guifi-team-carousel{
    width:100% !important;max-width:100% !important;
    margin-left:0 !important;margin-right:0 !important;
  }
}
/* tablet: 2 per view MET ruimte ertussen + boxed-look (padding binnen de slide,
   box-sizing border-box -> Swiper-breedtes blijven kloppen). */
@media (min-width:768px) and (max-width:1024px){
  body .guifi-diensten-carousel .swiper-slide{padding-left:8px;padding-right:8px;box-sizing:border-box}
}

/* Fallback zolang Swiper (nog) niet geïnitialiseerd is: nette horizontale
   rij i.p.v. een verticale stapel op volledige breedte. */
.guifi-team-carousel:not(.swiper-initialized) .swiper-wrapper{
  display:flex;flex-wrap:nowrap;overflow-x:auto;gap:0;
}
.guifi-team-carousel:not(.swiper-initialized) .swiper-slide{
  flex:0 0 25%;max-width:25%;
}
@media(max-width:1024px){
  .guifi-team-carousel:not(.swiper-initialized) .swiper-slide{flex-basis:50%;max-width:50%}
}
@media(max-width:767px){
  .guifi-team-carousel:not(.swiper-initialized) .swiper-slide{flex-basis:100%;max-width:100%}
}

/* Subtiele gradient zodat de witte tekst leesbaar blijft op lichte foto's */
.guifi-team-carousel__slide::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:45%;
  background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0));
  pointer-events:none;
}

.guifi-team-carousel__caption{
  position:absolute;left:24px;bottom:24px;z-index:2;
  display:flex;flex-direction:column;gap:4px;text-align:left;
}
.guifi-team-carousel__name{
  font-family:'Blauer Nue',sans-serif;font-size:20px;font-weight:600;
  font-style:normal;line-height:1.2;color:#ffffff;
}
.guifi-team-carousel__role{
  font-family:'Blauer Nue',sans-serif;font-size:16px;font-weight:400;
  font-style:normal;line-height:1.2;color:#ffffff;
}
/* Mobiel: namen iets kleiner én de functietitel alleen tonen bij hover/tap
   (geen layout-sprong: opacity i.p.v. display) */
@media(max-width:767px){
  /* full-bleed: carousel loopt tot beide schermranden; de 24px links komt van
     slidesOffsetBefore (JS), rechts snijdt de kaart af -> duidelijk een slider */
  .guifi-team-carousel{
    width:100vw !important;max-width:100vw !important;
    margin-left:calc(50% - 50vw) !important;margin-right:calc(50% - 50vw) !important;
  }
  .guifi-team-carousel__name{font-size:16px}
  /* Naam staat onderin (caption is bottom-anchored). De functietitel is standaard
     ingeklapt (max-height:0) en klapt bij hover/tap onderin uit -> duwt de naam
     omhoog i.p.v. eroverheen. */
  .guifi-team-carousel__role{
    max-height:0;opacity:0;overflow:hidden;
    transition:max-height .3s ease,opacity .3s ease;
  }
  .guifi-team-carousel__slide:hover .guifi-team-carousel__role,
  .guifi-team-carousel__slide:active .guifi-team-carousel__role{max-height:2.5em;opacity:1}
}

/* Pijlen hergebruiken de Elementor-styling (.elementor-swiper-button) */
.guifi-team-carousel .elementor-swiper-button{cursor:pointer}

/* ── HOMEPAGE-DIENSTEN ("Dit is waar wij goed in zijn") op tablet/mobiel ───────
   De diensten staan in 4 groepen van 2; vanaf 1024px naast elkaar én de ruimte
   tussen de groepen (gap 0) verschilde van die binnen een groep (gap 64).
   Hier: alles onder elkaar + overal exact dezelfde tussenruimte. */
@media(max-width:1200px){
  body.elementor-page .elementor-element-jlteiyz{flex-direction:column !important;--flex-direction:column !important;gap:24px !important}
  /* De groep-rij (Strategie→Marketing) blijft flex maar in kolom, met gelijke gap. */
  body.elementor-page .guifi-dienst-row{flex-direction:column !important;--flex-direction:column !important;gap:28px !important}
  /* HET ITEM zelf op block-flow: titel + uitleg stapelen dan GEGARANDEERD, ongeacht
     flex-direction/variabele-quirks op iOS Safari. */
  body.elementor-page .guifi-dienst-item{display:block !important;width:100% !important}
  body.elementor-page .guifi-dienst-item > *{display:block !important;width:100% !important;max-width:100% !important}
  /* gelijke ruimte tussen de groepen onderling */
  body.elementor-page .elementor-element-84u89yj{gap:28px !important}
}

/* ── FOOTER-NAVIGATIE — Elementor Icon List zonder iconen (zelfde look als oude HTML-lijst) ── */
.guifi-footer-nav .elementor-icon-list-items{padding:0 !important;margin:0 !important}
.guifi-footer-nav .elementor-icon-list-item{margin:0 0 10px !important;padding:0 !important;border:0 !important}
.guifi-footer-nav .elementor-icon-list-item:last-child{margin-bottom:0 !important}
.guifi-footer-nav .elementor-icon-list-icon{display:none !important}
.guifi-footer-nav .elementor-icon-list-item > a{padding:0 !important;text-decoration:none;display:inline-flex;align-items:center}
.guifi-footer-nav .elementor-icon-list-text{color:rgba(255,255,255,0.7) !important;font-size:14px;line-height:1.4;transition:color .15s}
.guifi-footer-nav .elementor-icon-list-item:hover .elementor-icon-list-text{color:#fff !important}

/* ── BEWEZEN RESULTATEN — twee rijen client-logo's ─────────────────────────── */
/* container-classes renderen niet betrouwbaar -> ankeren op stabiel element-id reslogos2 */
body.elementor-page .elementor-element-reslogos2{
  display:flex !important;flex-direction:column !important;gap:16px;
  width:100% !important;max-width:1824px !important;margin:40px auto 0;padding:0 48px !important;
}
body.elementor-page .elementor-element-reslogos2 > .e-con{
  display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;
  justify-content:center;align-items:center;gap:16px;
  width:100% !important;max-width:100% !important;padding:0 !important;
}
body.elementor-page .guifi-result-img{
  flex:1 1 0 !important;min-width:0 !important;width:auto !important;
  display:flex;align-items:center;justify-content:center;margin:0 !important;padding:0 !important;
}
body.elementor-page .guifi-result-img .elementor-widget-container{width:100%;display:flex;justify-content:center;align-items:center}
body.elementor-page .guifi-result-img img{
  max-height:130px;max-width:100%;width:auto;object-fit:contain;
  filter:brightness(0);opacity:.9;display:block;
}
@media(max-width:900px){
  body.elementor-page .elementor-element-reslogos2{padding:0 24px !important}
  body.elementor-page .elementor-element-reslogos2 > .e-con{flex-wrap:wrap !important;gap:24px}
  body.elementor-page .guifi-result-img{flex:0 0 calc(33.333% - 16px) !important}
}

/* ── PARTNERS & CERTIFICERINGEN (homepage, grid fc26b65) ─────────────────────
   Geen eigen mobiele override meer: kolommen/raster worden volledig door het
   Elementor-raster (e-grid, kolommen per device) bepaald. */

/* ── BUTTON V3 — Elementor button-widget variant ───────────────────────────
   Echte Elementor button-widget met klasse .guifi-btn op de widget-wrapper
   krijgt dezelfde look als de oude HTML-knop: pill-label + losse 48px cirkel
   met diagonale arrow. Elementor zet _css_classes op .elementor-widget-button,
   dus targeten we de wrapper. Cirkel + pijl komen uit ::after (decoratief). */
.elementor-widget-button.guifi-btn{display:block;}
.elementor-widget-button.guifi-btn .elementor-button{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent!important;border:0!important;box-shadow:none!important;
  padding:0!important;border-radius:0!important;min-height:0;
  font-family:'Blauer Nue',sans-serif;font-size:15px;font-weight:400;line-height:1;
  text-decoration:none;
}
.elementor-widget-button.guifi-btn .elementor-button-content-wrapper{
  display:inline-flex;align-items:center;
  padding:0 24px;height:48px;border-radius:9999px;border:1px solid;
  white-space:nowrap;transition:all .2s ease;
}
.elementor-widget-button.guifi-btn .elementor-button-text{line-height:1;}
.elementor-widget-button.guifi-btn .elementor-button-icon{display:none!important;}
.elementor-widget-button.guifi-btn .elementor-button::after{
  content:"";width:48px;height:48px;border-radius:50%;border:1px solid;flex-shrink:0;
  transition:transform .2s ease,background-color .2s ease,border-color .2s ease;
  background-repeat:no-repeat;background-position:center;background-size:14px 14px;
}
.elementor-widget-button.guifi-btn .elementor-button:hover::after{transform:translate(2px,-2px);}
/* light variant — witte vulling, donkere rand/arrow */
.elementor-widget-button.guifi-btn--light .elementor-button-content-wrapper{background:#fff;border-color:#111;color:#111;}
.elementor-widget-button.guifi-btn--light .elementor-button-text{color:#111;}
.elementor-widget-button.guifi-btn--light .elementor-button::after{
  background-color:#fff;border-color:#111;
  background-image:url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%20fill='none'%20stroke='%23111111'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M7%2017%2017%207M7%207h10v10'/%3E%3C/svg%3E");
}
/* dark variant — donkere vulling, witte rand/arrow */
.elementor-widget-button.guifi-btn--dark .elementor-button-content-wrapper{background:#111;border-color:#fff;color:#fff;}
.elementor-widget-button.guifi-btn--dark .elementor-button-text{color:#fff;}
.elementor-widget-button.guifi-btn--dark .elementor-button::after{
  background-color:#111;border-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%20fill='none'%20stroke='%23ffffff'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M7%2017%2017%207M7%207h10v10'/%3E%3C/svg%3E");
}

/* ── ELEMENTOR THEME BUILDER HEADER (Guifi Header) ───────────────────────────
   Transparant over de hero; nav-menu-widget regelt de responsive (hamburger
   <=1024, full-width dropdown met items onder elkaar). */
.elementor-location-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;width:100%;background:transparent;
  transition:background-color .28s ease, box-shadow .28s ease;
}
.elementor-element-guifielhdr{
  max-width:none !important;width:100% !important;margin:0 !important;
  padding-top:13px !important;padding-bottom:13px !important;
  padding-left:max(24px, calc(50vw - 640px)) !important;
  padding-right:max(24px, calc(50vw - 640px)) !important;
  background:transparent !important;gap:32px;
}
/* de boxed inner-container had 24px verticale padding -> verklein de header verticaal */
.elementor-element-guifielhdr > .e-con-inner{padding-top:0 !important;padding-bottom:0 !important}
/* scroll-state: witte achtergrond, alles zwart */
body.guifi-scrolled .elementor-location-header{background:#fff !important;box-shadow:0 2px 24px rgba(0,0,0,.07)}
body.guifi-scrolled .guifi-elhdr__logo .elementor-heading-title,
body.guifi-scrolled .guifi-elhdr__logo .elementor-heading-title a,
body.guifi-scrolled .guifi-elhdr__logo a{color:#111 !important}
body.guifi-scrolled .guifi-elhdr__nav .elementor-nav-menu .elementor-item{color:#111 !important}
body.guifi-scrolled .guifi-elhdr__nav .elementor-menu-toggle{color:#111 !important}
body.guifi-scrolled .guifi-elhdr__nav .elementor-menu-toggle svg{fill:#111 !important}
/* logo */
.guifi-elhdr__logo .elementor-heading-title{font-family:'Blauer Nue',sans-serif;font-size:24px;font-weight:700;letter-spacing:-0.02em;line-height:1;margin:0}
.guifi-elhdr__logo .elementor-heading-title a,.guifi-elhdr__logo a{color:#fff !important;text-decoration:none}
/* desktop nav items (wit over donkere hero) */
.guifi-elhdr__nav .elementor-nav-menu .elementor-item{
  color:rgba(255,255,255,0.95) !important;font-family:'Blauer Nue',sans-serif;font-size:16px;font-weight:500;
}
.guifi-elhdr__nav .elementor-nav-menu .elementor-item:hover,
.guifi-elhdr__nav .elementor-nav-menu .elementor-item.elementor-item-active{color:#fff !important}
/* hamburger wit */
.guifi-elhdr__nav .elementor-menu-toggle{color:#fff !important}
.guifi-elhdr__nav .elementor-menu-toggle svg{fill:#fff !important}
/* dropdown-paneel (tablet/mobiel): wit, items onder elkaar, full width */
.guifi-elhdr__nav .elementor-nav-menu--dropdown{
  background-color:#fff !important;box-shadow:0 18px 44px rgba(0,0,0,.14) !important;
}
.guifi-elhdr__nav .elementor-nav-menu--dropdown .elementor-item{
  color:#111 !important;font-size:20px !important;padding:18px 32px !important;font-weight:500;
  background-color:transparent !important;
}
/* actief/huidig item óók wit met zwarte tekst (geen donkere balk) — net als de rest */
.guifi-elhdr__nav .elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
.guifi-elhdr__nav .elementor-nav-menu--dropdown .elementor-item.highlighted,
.guifi-elhdr__nav .elementor-nav-menu--dropdown .elementor-item:focus,
.guifi-elhdr__nav .elementor-nav-menu--dropdown .current-menu-item > .elementor-item{
  color:#111 !important;background-color:transparent !important;
}
/* alleen op hover een grijze overlay */
.guifi-elhdr__nav .elementor-nav-menu--dropdown .elementor-item:hover{background-color:rgba(0,0,0,.05) !important;color:#111 !important}
/* tablet/mobiel (<=1200, site-breakpoint): knop verbergen zodat de hamburger/X rechtsboven komt */
@media(max-width:1200px){
  .guifi-elhdr__btn{display:none !important}
  .elementor-element-guifielhdr{padding:20px 24px !important}
}
/* geen horizontale overflow (o.a. door 100vw full-bleed werk-grid).
   clip i.p.v. hidden zodat position:sticky (diensten-stack) blijft werken. */
html,body{overflow-x:clip;max-width:100%}

/* ── DIENSTEN — sticky-stack scroll-effect (titels blijven gestapeld zichtbaar) ── */
/* ruimte ná het laatste blok zodat óók Drukwerk (laatste kind) kan stapelen
   i.p.v. over de rest heen te schuiven; daarna scrollt de hele stack omhoog */
/* ruimte ná het laatste blok = echt spacer-element (door diensten-stack.js toegevoegd) */
body .elementor-element-96d4018 > .e-con-inner > .e-con{
  position:sticky;
  background:#fff;
  min-height:470px;   /* leesvenster per dienst (desktop) */
  justify-content:flex-start !important;  /* titel bovenaan blok -> blijft zichtbaar in de strook */
  padding-top:10px !important;    /* strakke stapeling: woord dicht onder het lijntje */
  padding-bottom:10px !important;
  scroll-margin-top:50px;   /* anchor-links (#marketing) 50px hoger laten landen */
}
body .elementor-element-96d4018 > .e-con-inner > .e-con:nth-child(1){top:88px;z-index:1}
body .elementor-element-96d4018 > .e-con-inner > .e-con:nth-child(2){top:168px;z-index:2}
body .elementor-element-96d4018 > .e-con-inner > .e-con:nth-child(3){top:248px;z-index:3}
body .elementor-element-96d4018 > .e-con-inner > .e-con:nth-child(4){top:328px;z-index:4}
body .elementor-element-96d4018 > .e-con-inner > .e-con:nth-child(5){top:408px;z-index:5}
body .elementor-element-96d4018 > .e-con-inner > .e-con:nth-child(6){top:488px;z-index:6}
body .elementor-element-96d4018 > .e-con-inner > .e-con:nth-child(7){top:568px;z-index:7}
body .elementor-element-96d4018 > .e-con-inner > .e-con:nth-child(8){top:648px;z-index:8}
body .elementor-element-96d4018 > .e-con-inner > .e-con:nth-child(9){top:728px;z-index:9}
/* heading-widgets behielden hun oude marge/padding (van de tekst-versie) -> woord
   zat ~79px onder de blok-top en verdween achter het volgende blok. Strak bovenaan: */
body .elementor-element-96d4018 .elementor-widget-heading{margin:0 !important;padding:0 !important}
/* de divider (lijn) bovenaan elk blok was te hoog en duwde het woord uit de strook;
   compact maken zodat lijn + woord samen zichtbaar blijven in de gestapelde strook */
body .elementor-element-96d4018 .elementor-widget-divider{margin:0 !important;padding:0 !important}
body .elementor-element-96d4018 .elementor-divider{padding-top:0 !important;padding-bottom:12px !important}
/* gestapelde (inactieve) diensten: kleiner woord zodat het leesbaar in de strook past */
body .elementor-element-96d4018 .e-con .elementor-widget-heading .elementor-heading-title{
  font-size:28px !important;line-height:1.15 !important;color:#A1A1AA !important;
  transition:font-size .28s ease, color .3s ease;
}
/* alleen het ACTIEVE woord groot + zwart */
body .elementor-element-96d4018 .guifi-dienst--open .elementor-widget-heading .elementor-heading-title{
  font-size:40px !important;color:#111 !important;
}
/* sub-items (SEO/Branding/…) alleen zichtbaar op het ACTIEVE dienst-blok (JS zet .guifi-dienst--open) */
body .elementor-element-0928563,
body .elementor-element-d6d8cf4,
body .elementor-element-97ab303,
body .elementor-element-07aef58,
body .elementor-element-20c48c0,
body .elementor-element-bcfc253,
body .elementor-element-c26e871{opacity:0;transition:opacity .4s ease;pointer-events:none}
body .guifi-dienst--open .elementor-element-0928563,
body .guifi-dienst--open .elementor-element-d6d8cf4,
body .guifi-dienst--open .elementor-element-97ab303,
body .guifi-dienst--open .elementor-element-07aef58,
body .guifi-dienst--open .elementor-element-20c48c0,
body .guifi-dienst--open .elementor-element-bcfc253,
body .guifi-dienst--open .elementor-element-c26e871{opacity:1;pointer-events:auto}

/* ── DIENSTEN op tablet + mobiel: geen sticky-stack, gewone leesbare lijst ──── */
@media(max-width:1024px){
  body .elementor-element-96d4018 > .e-con-inner > .e-con{
    position:static !important;min-height:0 !important;margin-bottom:0 !important;
    scroll-margin-top:50px;   /* mobiel: zelfde 50px hoger */
  }
  /* reset alle vaste min-hoogtes (desktop-uitlijning) -> geen lege gaten */
  body .elementor-element-96d4018 .e-con{min-height:0 !important}
  body .guifi-dienst-spacer{display:none !important}
  /* geen groei-effect: het actieve woord blijft klein (alleen desktop groeit) */
  body .elementor-element-96d4018 .guifi-dienst--open .elementor-widget-heading .elementor-heading-title{
    font-size:28px !important;
  }
  /* sub-items altijd tonen (geen actief/inactief gedoe zonder stapel) */
  body .elementor-element-0928563,body .elementor-element-d6d8cf4,body .elementor-element-97ab303,
  body .elementor-element-07aef58,body .elementor-element-20c48c0,body .elementor-element-bcfc253,
  body .elementor-element-c26e871{
    opacity:1 !important;pointer-events:auto !important;transition:none !important;
  }
}
@media(max-width:768px){
  /* dienst-rij: nummer, titel+tekst en sub-items netjes onder elkaar */
  body .elementor-element-96d4018 > .e-con-inner > .e-con > .e-con{
    flex-direction:column !important;align-items:flex-start !important;gap:10px !important;
  }
  /* sub-items links uitlijnen i.p.v. rechts */
  body .elementor-element-0928563,body .elementor-element-d6d8cf4,body .elementor-element-97ab303,
  body .elementor-element-07aef58,body .elementor-element-20c48c0,body .elementor-element-bcfc253,body .elementor-element-c26e871{
    align-items:flex-start !important;text-align:left !important;width:100% !important;
  }
  body .elementor-element-0928563 *,body .elementor-element-d6d8cf4 *,body .elementor-element-97ab303 *,
  body .elementor-element-07aef58 *,body .elementor-element-20c48c0 *,body .elementor-element-bcfc253 *,body .elementor-element-c26e871 *{text-align:left !important}
  body .elementor-element-0928563 .e-con,body .elementor-element-d6d8cf4 .e-con,body .elementor-element-97ab303 .e-con,
  body .elementor-element-07aef58 .e-con,body .elementor-element-20c48c0 .e-con,body .elementor-element-bcfc253 .e-con,body .elementor-element-c26e871 .e-con{align-items:flex-start !important}
  body .elementor-element-0928563 .elementor-widget,body .elementor-element-d6d8cf4 .elementor-widget,body .elementor-element-97ab303 .elementor-widget,
  body .elementor-element-07aef58 .elementor-widget,body .elementor-element-20c48c0 .elementor-widget,body .elementor-element-bcfc253 .elementor-widget,body .elementor-element-c26e871 .elementor-widget{width:100% !important;align-self:flex-start !important;margin-left:0 !important}
}

/* ── STAPPEN-STAPEL — Werkwijze "Onze aanpak" (wrapper 86a3419) +
   Groeiprogramma "Hoe werkt het" (wrapper 0132208). Sticky-stack, compact.
   diensten-stack.js zet de top-offsets (op gefilterde stappen) + .guifi-stap--open
   op de actieve stap. Inactieve stappen: alleen nummer + GRIJZE titel; actieve:
   ZWARTE titel + omschrijving. Robuust voor elk aantal stappen. */
body .elementor-element-86a3419 > .e-con-inner > .e-con,
body .elementor-element-0132208 > .e-con-inner > .e-con{
  position:sticky;
  background:#fff;
  min-height:360px;
  border-top:1px solid #d4d4d8;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  padding-top:14px !important;
  padding-bottom:14px !important;
  scroll-margin-top:50px;
}
body .elementor-element-86a3419 > .e-con-inner > .e-con:first-child,
body .elementor-element-0132208 > .e-con-inner > .e-con:first-child{ border-top:0; }

/* Omschrijving = laatste text-editor in het content-blok (2e kolom): verborgen tot actief */
body .elementor-element-86a3419 > .e-con-inner > .e-con > .e-con:last-child > .elementor-widget-text-editor:last-child,
body .elementor-element-0132208 > .e-con-inner > .e-con > .e-con:last-child > .elementor-widget-text-editor:last-child{
  opacity:0; transition:opacity .35s ease; pointer-events:none;
}
body .elementor-element-86a3419 > .e-con-inner > .e-con.guifi-stap--open > .e-con:last-child > .elementor-widget-text-editor:last-child,
body .elementor-element-0132208 > .e-con-inner > .e-con.guifi-stap--open > .e-con:last-child > .elementor-widget-text-editor:last-child{
  opacity:1; pointer-events:auto;
}

/* Titel = eerste text-editor in het content-blok: GRIJS + KLEINER inactief, ZWART + GROTER actief */
body .elementor-element-86a3419 > .e-con-inner > .e-con > .e-con:last-child > .elementor-widget-text-editor:first-child,
body .elementor-element-86a3419 > .e-con-inner > .e-con > .e-con:last-child > .elementor-widget-text-editor:first-child *,
body .elementor-element-0132208 > .e-con-inner > .e-con > .e-con:last-child > .elementor-widget-text-editor:first-child,
body .elementor-element-0132208 > .e-con-inner > .e-con > .e-con:last-child > .elementor-widget-text-editor:first-child *{
  color:#A1A1AA !important; font-size:24px !important; line-height:1.25 !important;
  transition:color .3s ease, font-size .3s ease;
}
body .elementor-element-86a3419 > .e-con-inner > .e-con.guifi-stap--open > .e-con:last-child > .elementor-widget-text-editor:first-child,
body .elementor-element-86a3419 > .e-con-inner > .e-con.guifi-stap--open > .e-con:last-child > .elementor-widget-text-editor:first-child *,
body .elementor-element-0132208 > .e-con-inner > .e-con.guifi-stap--open > .e-con:last-child > .elementor-widget-text-editor:first-child,
body .elementor-element-0132208 > .e-con-inner > .e-con.guifi-stap--open > .e-con:last-child > .elementor-widget-text-editor:first-child *{
  color:#111 !important; font-size:34px !important;
}

/* Losse dividers binnen de stappen weg — de border-top is de lijn */
body .elementor-element-86a3419 .elementor-widget-divider,
body .elementor-element-0132208 .elementor-widget-divider{ display:none !important }

/* Tablet + mobiel (t/m 1200px, ook iPad landscape): GEEN stapel/min-hoogte —
   gewone compacte lijst; alle inhoud tonen, titels zwart + uniforme grootte. */
@media(max-width:1200px){
  body .elementor-element-86a3419 > .e-con-inner > .e-con,
  body .elementor-element-0132208 > .e-con-inner > .e-con{
    position:static !important; min-height:0 !important;
    flex-direction:column !important; gap:8px !important;
    padding-top:16px !important; padding-bottom:22px !important;
  }
  /* binnen-containers (nummer-blok + content-blok) hebben een desktop-min-hoogte
     van 220px voor kolom-uitlijning -> op tablet/mobiel weg (anders grote gaten) */
  body .elementor-element-86a3419 > .e-con-inner > .e-con .e-con,
  body .elementor-element-0132208 > .e-con-inner > .e-con .e-con{ min-height:0 !important; }
  body .elementor-element-86a3419 > .e-con-inner > .e-con > .e-con:last-child > .elementor-widget-text-editor:last-child,
  body .elementor-element-0132208 > .e-con-inner > .e-con > .e-con:last-child > .elementor-widget-text-editor:last-child{
    opacity:1 !important; pointer-events:auto !important;
  }
  /* titel uniform, ook op de ACTIEVE stap NIET groter (.guifi-stap--open expliciet
     mee overrulen, anders wint de desktop-regel met hogere specificity) */
  body .elementor-element-86a3419 > .e-con-inner > .e-con > .e-con:last-child > .elementor-widget-text-editor:first-child,
  body .elementor-element-86a3419 > .e-con-inner > .e-con > .e-con:last-child > .elementor-widget-text-editor:first-child *,
  body .elementor-element-86a3419 > .e-con-inner > .e-con.guifi-stap--open > .e-con:last-child > .elementor-widget-text-editor:first-child,
  body .elementor-element-86a3419 > .e-con-inner > .e-con.guifi-stap--open > .e-con:last-child > .elementor-widget-text-editor:first-child *,
  body .elementor-element-0132208 > .e-con-inner > .e-con > .e-con:last-child > .elementor-widget-text-editor:first-child,
  body .elementor-element-0132208 > .e-con-inner > .e-con > .e-con:last-child > .elementor-widget-text-editor:first-child *,
  body .elementor-element-0132208 > .e-con-inner > .e-con.guifi-stap--open > .e-con:last-child > .elementor-widget-text-editor:first-child,
  body .elementor-element-0132208 > .e-con-inner > .e-con.guifi-stap--open > .e-con:last-child > .elementor-widget-text-editor:first-child *{
    color:#111 !important; font-size:26px !important; line-height:1.25 !important;
  }
  body .guifi-stap-spacer{ display:none !important }
}

/* "Contact" weglaten uit het DESKTOP-hoofdmenu (de knop 'Samen groeien?' → #contact
   dekt dat al). Alleen in de horizontale --main lijst verbergen, zodat het item
   in het mobiele hamburgermenu (--dropdown) blijft staan. */
.elementor-location-header .elementor-nav-menu--main .menu-item-2187{ display:none !important; }

/* ── SCROLL-HINT (projectpagina's) — animerend pijltje onderaan-midden ───────── */
.guifi-scrollhint{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  z-index:60; width:46px; height:46px; padding:0; margin:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; cursor:pointer; color:#fff;
  background:rgba(0,0,0,0.32); border:1px solid rgba(255,255,255,0.55);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  animation:guifi-scrollhint-bounce 1.7s ease-in-out infinite;
  transition:opacity .4s ease, visibility .4s ease;
}
.guifi-scrollhint svg{display:block}
.guifi-scrollhint:hover{background:rgba(0,0,0,0.5)}
.guifi-scrollhint--hidden{opacity:0; visibility:hidden; pointer-events:none}
@keyframes guifi-scrollhint-bounce{
  0%,100%{transform:translate(-50%,0)}
  50%{transform:translate(-50%,7px)}
}
@media(prefers-reduced-motion:reduce){ .guifi-scrollhint{animation:none} }
@media(max-width:768px){ .guifi-scrollhint{bottom:16px;width:40px;height:40px} }

/* ── VIDEO aspect-ratio per device ───────────────────────────────────────────
   Elementor's video-widget heeft maar één (niet-responsieve) ratio. De 21:9
   hero-video's op projectpagina's zijn op mobiel te breed/laag; daar tonen we
   ze als 16:9. Tablet/desktop blijven de ingestelde ratio (21:9). */
@media(max-width:767px){
  body.single-projecten .elementor-widget-video .elementor-wrapper,
  body.single-projecten .elementor-widget-video .e-hosted-video{
    aspect-ratio:16 / 9 !important;
  }
  /* Herbruikbaar: voeg de klasse 'guifi-vid-mobiel-169' toe aan een video
     (tab Geavanceerd → CSS-klassen) om die video op mobiel 16:9 te maken. */
  .guifi-vid-mobiel-169 .elementor-wrapper,
  .guifi-vid-mobiel-169 .e-hosted-video{aspect-ratio:16 / 9 !important}
}

/* Header-knop = ghost (transparant, witte rand + tekst + pijl) — op scroll zwart */
.guifi-elhdr__btn .elementor-button-content-wrapper{background:transparent !important;border-color:rgba(255,255,255,0.5) !important;color:#fff !important}
.guifi-elhdr__btn .elementor-button-text{color:#fff !important}
.guifi-elhdr__btn .elementor-button::after{
  background-color:transparent !important;border-color:rgba(255,255,255,0.5) !important;
  background-image:url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%20fill='none'%20stroke='%23ffffff'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M7%2017%2017%207M7%207h10v10'/%3E%3C/svg%3E") !important;
}
body.guifi-scrolled .guifi-elhdr__btn .elementor-button-content-wrapper{border-color:#111 !important;color:#111 !important}
body.guifi-scrolled .guifi-elhdr__btn .elementor-button-text{color:#111 !important}
body.guifi-scrolled .guifi-elhdr__btn .elementor-button::after{
  border-color:#111 !important;
  background-image:url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%20fill='none'%20stroke='%23111111'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M7%2017%2017%207M7%207h10v10'/%3E%3C/svg%3E") !important;
}

/* ── SOLIDE HEADER (alle pagina's behalve transparante) ──────────────────────
   Witte achtergrond, zwarte tekst/logo/knop, en de header neemt ruimte in
   (content begint eronder). Homepage + opt-in pagina's blijven transparant. */
body.guifi-header-solid{padding-top:74px}
body.guifi-header-solid .elementor-location-header{background:#fff !important;box-shadow:0 2px 24px rgba(0,0,0,.07)}
body.guifi-header-solid .guifi-elhdr__logo .elementor-heading-title,
body.guifi-header-solid .guifi-elhdr__logo a{color:#111 !important}
body.guifi-header-solid .guifi-elhdr__nav .elementor-nav-menu .elementor-item{color:#111 !important}
body.guifi-header-solid .guifi-elhdr__nav .elementor-menu-toggle{color:#111 !important}
body.guifi-header-solid .guifi-elhdr__nav .elementor-menu-toggle svg{fill:#111 !important}
body.guifi-header-solid .guifi-elhdr__btn .elementor-button-content-wrapper{border-color:#111 !important;color:#111 !important}
body.guifi-header-solid .guifi-elhdr__btn .elementor-button-text{color:#111 !important}
body.guifi-header-solid .guifi-elhdr__btn .elementor-button::after{
  border-color:#111 !important;
  background-image:url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%20fill='none'%20stroke='%23111111'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M7%2017%2017%207M7%207h10v10'/%3E%3C/svg%3E") !important;
}
@media(max-width:768px){ body.guifi-header-solid{padding-top:58px} }

/* In de Elementor-editor: header niet fixed + zwarte tekst op witte canvas (anders 'raar'/onzichtbaar) */
body.elementor-editor-active .elementor-location-header{position:relative !important;background:transparent !important;box-shadow:none !important}
body.elementor-editor-active.guifi-header-solid,
body.elementor-editor-active.guifi-header-transparent{padding-top:0 !important}
body.elementor-editor-active .guifi-elhdr__logo .elementor-heading-title,
body.elementor-editor-active .guifi-elhdr__logo a,
body.elementor-editor-active .guifi-elhdr__nav .elementor-nav-menu .elementor-item,
body.elementor-editor-active .guifi-elhdr__nav .elementor-menu-toggle{color:#111 !important}
body.elementor-editor-active .guifi-elhdr__btn .elementor-button-content-wrapper{border-color:#111 !important;color:#111 !important}
body.elementor-editor-active .guifi-elhdr__btn .elementor-button-text{color:#111 !important}
body.elementor-editor-active .guifi-elhdr__btn .elementor-button::after{border-color:#111 !important}

/* logo-afbeelding zwart op solide header / na scroll (witte SVG -> zwart) */
body.guifi-header-solid .elementor-element-guifielhdr .elementor-widget-image img,
body.guifi-scrolled .elementor-element-guifielhdr .elementor-widget-image img{filter:brightness(0)}

/* ── GRAVITY FORMS submit-knop = exact de Guifi-knop (pill + losse cirkel/pijl) ── */
.gform_wrapper .guifi-gfbtn,
button.guifi-gfbtn{
  display:inline-flex !important;align-items:center !important;gap:8px !important;
  background:transparent !important;border:0 !important;box-shadow:none !important;outline:none !important;
  padding:0 !important;height:auto !important;min-height:0 !important;width:auto !important;max-width:none !important;
  font-family:'Blauer Nue',sans-serif !important;cursor:pointer !important;
}
.gform_wrapper .guifi-gfbtn .guifi-gfbtn__label,
button.guifi-gfbtn .guifi-gfbtn__label{
  display:inline-flex !important;align-items:center !important;height:48px !important;padding:0 24px !important;
  border-radius:9999px !important;border:1px solid #111 !important;background:#fff !important;color:#111 !important;
  font-size:15px !important;font-weight:400 !important;white-space:nowrap !important;line-height:1 !important;
}
.gform_wrapper .guifi-gfbtn::after,
button.guifi-gfbtn::after{
  content:"" !important;width:48px !important;height:48px !important;border-radius:50% !important;
  border:1px solid #111 !important;flex-shrink:0 !important;background-color:#fff !important;
  background-repeat:no-repeat !important;background-position:center !important;background-size:14px 14px !important;
  background-image:url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%20fill='none'%20stroke='%23111111'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M7%2017%2017%207M7%207h10v10'/%3E%3C/svg%3E") !important;
  transition:transform .2s ease !important;
}
.gform_wrapper .guifi-gfbtn:hover::after,
button.guifi-gfbtn:hover::after{transform:translate(2px,-2px) !important}

/* ── GUIFI FAQ-widget (herbruikbaar: intro links, accordeon rechts) ─────────── */
/* full-width zodat het blok niet meekrimpt/verbreedt met de open/dichte content */
.elementor-widget-guifi-faq{width:100% !important}
.guifi-faq{display:flex;gap:72px;align-items:flex-start;width:100%}
.guifi-faq__intro{flex:0 0 420px;max-width:420px}
.guifi-faq__title{font-family:'Blauer Nue',sans-serif;font-size:52px !important;font-weight:400 !important;line-height:58px !important;color:#111 !important;margin:0 0 24px;letter-spacing:-0.55px}
.guifi-faq__text,.guifi-faq__text p{font-size:16px;line-height:1.6;color:#7a7a7a;margin:0}
.guifi-faq__list{flex:1 1 0;min-width:0}
.guifi-faq__item{border:0}
/* gesloten vraag (+ icoon) staat gedimd (opacity .5); geopende vraag vol zwart */
.guifi-faq__q{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;cursor:pointer;list-style:none;
  padding:24px 0;font-family:'Blauer Nue',sans-serif;font-size:24px;font-weight:400;line-height:32px;color:#111;
  opacity:.5;transition:opacity .2s}
.guifi-faq__q::-webkit-details-marker{display:none}
.guifi-faq__q::marker{content:""}
.guifi-faq__q:hover{opacity:1}
.guifi-faq__item[open] .guifi-faq__q{opacity:1}
/* icoon: + (gesloten) -> − (open); dunne lijnen, dimt mee met de vraag */
.guifi-faq__icon{position:relative;width:16px;height:32px;flex-shrink:0}
.guifi-faq__icon::before,.guifi-faq__icon::after{content:"";position:absolute;background:#111;transition:opacity .25s ease}
.guifi-faq__icon::before{left:0;right:0;top:15px;height:1.5px}      /* horizontale lijn (−) */
.guifi-faq__icon::after{top:8px;bottom:8px;left:7px;width:1.5px}    /* verticale lijn (samen met − = +) */
.guifi-faq__item[open] .guifi-faq__icon::after{opacity:0}           /* open -> alleen − */
.guifi-faq__a{padding:0 0 12px 0;margin-top:-6px;max-width:601px}
.guifi-faq__a,.guifi-faq__a p{font-size:18px;line-height:32px;color:#111}
.guifi-faq__a p{margin:0 0 12px}
.guifi-faq__a p:last-child{margin-bottom:0}
@media(max-width:900px){
  .guifi-faq{flex-direction:column;gap:28px}
  .guifi-faq__intro{flex:none;max-width:none}
  .guifi-faq__title{font-size:32px !important;line-height:1.2em !important}
  .guifi-faq__q{font-size:20px;padding:18px 0;line-height:1.3}
  .guifi-faq__a,.guifi-faq__a p{font-size:16px;line-height:1.6}
}

/* Breadcrumbs: kleiner lettertype op mobiel (tablet/desktop ongewijzigd) */
@media(max-width:767px){
  .rank-math-breadcrumb,
  .rank-math-breadcrumb p,
  .rank-math-breadcrumb a,
  .rank-math-breadcrumb span{font-size:14px !important}
}