.elementor-7098 .elementor-element.elementor-element-f3079b5{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-f608daf *//* === USP-bar fix: uitlijning t.o.v. hero + baseline === */

/* 1) Overlap exact en centreren binnen container */
.usp { 
  margin-top: -22px;                 /* minder overlap (geen ‘botsing’ met hero-radius) */
  max-width: calc(var(--container) - 48px);
  margin-left: auto;
  margin-right: auto;
  padding: 18px 20px;                /* gelijke binnenmarge links/rechts */
  border-radius: 16px;
}

/* 2) Grid altijd 4 gelijke kolommen op desktop en mooi centreren op tablet */
@media (min-width: 860px){
  .usp { display:grid; grid-template-columns:repeat(4,1fr); gap: 14px; }
}

/* 3) Icon/tekst-baseline strakker: icon iets naar boven, teksten netjes uitlijnen */
.usp__item{
  align-items: flex-start;           /* titels en subtitels onder elkaar, geen ‘wiebel’ */
  gap: 10px;
}
.usp__icon{ 
  margin-top: 2px;                   /* optische balans met titel */
  width: 28px; height: 28px; flex:0 0 28px;
}
.usp__label{ 
  line-height: 1.2; 
  letter-spacing: -.01em; 
}
.usp small{ 
  display:block; 
  margin-top: 4px; 
}

/* 4) Mobiel variant: compacte wrap en centreren */
@media (max-width: 680px){
  .usp{
    margin-top: 12px;                /* op mobiel niet overlappen; gewoon eronder */
    max-width: 92vw;
    padding: 12px 14px;
  }
}/* End custom CSS */