/* DHB Hero Banner — alle kleuren/maten via custom properties, instelbaar in Elementor */

/* De starthoek van de lichtboog om het adviesformulier. Alleen een hoek die
   zo geregistreerd is, kan de browser vloeiend doortellen; zonder deze regel
   ziet hij er een tekenreeks in en springt de boog van 0 naar 360. */
.dhb-hero-section{
  --nh-accent:#FF4C00;
  --nh-accent-2:#FF6A2A;
  --nh-accent-3:#E8440A;
  --nh-accent-soft:#FF8A55;
  --nh-dark:#141313;
  --nh-text:#FFFFFF;
  --nh-font:'DHB Elms',ui-sans-serif,system-ui,sans-serif;
  --nh-btn-grad:linear-gradient(135deg,var(--nh-accent-2) 0%,var(--nh-accent) 55%,var(--nh-accent-3) 100%);
  --nh-marquee-dur:36s;
  --nh-anim-dur:.6s;
  --nb-accent:var(--nh-accent);
  --nb-accent-2:var(--nh-accent-2);
  --nb-accent-3:var(--nh-accent-3);
  --nb-dark:var(--nh-dark);
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--nh-dark);
  color:var(--nh-text);
  font-family:var(--nh-font);
  display:flex;
  flex-direction:column;
  width:100%;
  min-height:100vh;
  min-height:100svh;
}

/* Kopkleur vastzetten.
   Koppen hier zetten alleen een lettertype en erven hun kleur van de
   wrapper. Overerving heeft geen specificiteit, dus de Elementor-kit of
   het thema wint daarvan en kleurt de koppen ineens blauw. De wrapper
   staat er dubbel in, zodat deze regel zwaarder weegt dan de kit. De
   eigen kleuren hieronder hebben de wrapper ook gekregen en winnen weer
   van deze regel. */
.dhb-hero-section.dhb-hero-section h1,
.dhb-hero-section.dhb-hero-section h2,
.dhb-hero-section.dhb-hero-section h3,
.dhb-hero-section.dhb-hero-section h4,
.dhb-hero-section.dhb-hero-section h5,
.dhb-hero-section.dhb-hero-section h6 {
	color: inherit;
}



/* Full width: breek uit de Elementor container naar de volledige viewportbreedte.
   Symmetrische marges: de sectie steekt aan beide kanten een halve scrollbar-
   breedte uit, zodat er nooit een kier ontstaat. JS zet overflow-x op clip. */
.dhb-hero-section.nh-full-bleed{
  width:auto;
  max-width:none;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
.dhb-hero-section *{box-sizing:border-box;margin:0;padding:0;}
.dhb-hero-section a{color:inherit;text-decoration:none;}

/* ---------- Foto, wash, grain ---------- */
.dhb-hero-media{
  position:absolute;
  inset:-7% -3%;
  z-index:-4;
  width:106%;
  height:114%;
  /* themes zetten img{max-width:100%} en dat kapt de overscan af: uitschakelen */
  max-width:none!important;
  max-height:none!important;
  object-fit:cover;
  object-position:center 38%;
  will-change:transform;
  animation:dhb-hero-zoom 1.6s ease forwards,dhb-hero-drift 32s ease-in-out 1.6s infinite alternate;
}
@keyframes dhb-hero-drift{from{transform:scale(1);}to{transform:scale(1.06);}}
@keyframes dhb-hero-zoom{from{transform:scale(1.04);}to{transform:scale(1);}}
.dhb-hero-section.nh-no-kenburns .dhb-hero-media{animation:none;}
.dhb-hero-wash{
  position:absolute;
  inset:0;
  z-index:-3;
  background:
    radial-gradient(44% 58% at 80% 46%,color-mix(in srgb,var(--nh-accent) 11%,transparent),transparent 72%),
    linear-gradient(180deg,color-mix(in srgb,var(--nh-dark) 0%,transparent) 50%,color-mix(in srgb,var(--nh-dark) 92%,transparent) 100%),
    linear-gradient(90deg,color-mix(in srgb,var(--nh-dark) 92%,transparent) 0%,color-mix(in srgb,var(--nh-dark) 62%,transparent) 42%,color-mix(in srgb,var(--nh-dark) 24%,transparent) 78%,color-mix(in srgb,var(--nh-dark) 18%,transparent) 100%);
}
.dhb-hero-grain{
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.05;
  pointer-events:none;
  background-image:url("../images/ruis.svg");
}

/* ---------- Content ---------- */
.dhb-hero-inner{
  flex:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(360px,32vw,440px);
  gap:clamp(36px,5vw,88px);
  align-items:center;
  text-align:left;
  padding:clamp(120px,15vh,170px) clamp(28px,4vw,64px) clamp(48px,7vh,88px);
  max-width:none;
  margin:0 auto;
  width:100%;
}
.dhb-hero-section.nh-no-form .dhb-hero-inner{grid-template-columns:1fr;}
.dhb-hero-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0;}
@media (max-width:1024px){
  .dhb-hero-inner{grid-template-columns:1fr;gap:44px;}
}
.dhb-hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:9px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.04em;
  color:rgba(255,255,255,.88);
  opacity:0;
  animation:dhb-hero-fade var(--nh-anim-dur) ease .1s forwards;
}
.dhb-hero-avatars{display:inline-flex;flex:none;}
.dhb-hero-avatar{
  width:26px;height:26px;border-radius:50%;flex:none;
  border:2px solid #1D1D1D;
  background:linear-gradient(135deg,#3D3936,#2F2D2D);
  overflow:hidden;
}
.dhb-hero-avatar + .dhb-hero-avatar{margin-left:-9px;}
.dhb-hero-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
.dhb-hero-eyebrow svg,.dhb-hero-eyebrow .dhb-hero-eyebrow-icon{width:13px;height:13px;color:var(--nh-accent);flex:none;}
.dhb-hero-eyebrow .dhb-hero-eyebrow-icon svg{width:100%;height:100%;display:block;}
.dhb-hero-eyebrow b{font-weight:700;color:#fff;}

/* Headline: regel-voor-regel mask reveal */
.dhb-hero-title{
  font-family:var(--nh-font);
  font-weight:900;
  font-size:clamp(24px,2.9vw,42px);
  line-height:1.18;
  max-width:none;
  letter-spacing:.005em;
  margin-top:clamp(18px,2.6vh,28px);
  color:var(--nh-text);
}
.dhb-hero-line{
  display:block;
  overflow:hidden;
  padding:.06em 0;
}
.dhb-hero-line > span{
  display:block;
  transform:translateY(115%);
  animation:dhb-hero-rise .7s cubic-bezier(.22,.9,.3,1) forwards;
}
.dhb-hero-line:nth-child(1) > span{animation-delay:.15s;}
.dhb-hero-line:nth-child(2) > span{animation-delay:.27s;}
.dhb-hero-line:nth-child(3) > span{animation-delay:.39s;}
.dhb-hero-line:nth-child(4) > span{animation-delay:.51s;}
@keyframes dhb-hero-rise{to{transform:none;}}
.dhb-hero-accent{color:var(--nh-accent);font-style:normal;}

.dhb-hero-sub{
  margin-top:clamp(16px,2.4vh,24px);
  font-size:clamp(15px,1.25vw,18px);
  line-height:1.65;
  color:rgba(255,255,255,.82);
  max-width:52ch;
  text-wrap:pretty;
  opacity:0;
  animation:dhb-hero-fade var(--nh-anim-dur) ease .5s forwards;
}

/* ---------- CTA's ---------- */
.dhb-hero-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:14px;
  margin-top:clamp(26px,4vh,40px);
  opacity:0;
  animation:dhb-hero-fade var(--nh-anim-dur) ease .62s forwards;
}
/* Knoppen: gedeeld DHB buttonsysteem (dhb-buttons.css) */

/* ---------- Proof-strip ---------- */
.dhb-hero-proof{
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px;
  margin-top:clamp(20px,3.2vh,30px);
  list-style:none;
  font-size:13.5px;
  color:rgba(255,255,255,.78);
  opacity:0;
  animation:dhb-hero-fade var(--nh-anim-dur) ease .74s forwards;
}
.dhb-hero-proof li{display:inline-flex;align-items:center;gap:8px;}
.dhb-hero-proof svg,.dhb-hero-proof .dhb-hero-proof-icon{width:16px;height:16px;color:var(--nh-accent);flex:none;}
.dhb-hero-proof .dhb-hero-proof-icon svg{width:100%;height:100%;display:block;}

/* ---------- Strip + logo-marquee ---------- */
.dhb-hero-strip{
  border-top:0;
  background-color:color-mix(in srgb,var(--nh-dark) 40%,transparent);
  background-image:linear-gradient(90deg,transparent 0%,color-mix(in srgb,var(--nh-accent) 40%,transparent) 50%,transparent 100%);
  background-size:100% 1px;
  background-repeat:no-repeat;
  background-position:top;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:0;
  animation:dhb-hero-fade var(--nh-anim-dur) ease .86s forwards;
}
.dhb-hero-strip-label{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  text-align:center;
  padding:20px 24px 0;
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.dhb-hero-strip-label::before,
.dhb-hero-strip-label::after{
  content:"";height:1px;flex:none;
  width:min(110px,12vw);
}
.dhb-hero-strip-label::before{background:linear-gradient(90deg,transparent,rgba(255,255,255,.28));}
.dhb-hero-strip-label::after{background:linear-gradient(90deg,rgba(255,255,255,.28),transparent);}
.dhb-hero-marquee{
  overflow:hidden;
  padding:14px 0 18px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.dhb-hero-marquee-track{
  display:flex;
  width:max-content;
  gap:0;
  animation:dhb-hero-scroll var(--nh-marquee-dur) linear infinite;
}
.dhb-hero-marquee:hover .dhb-hero-marquee-track{animation-play-state:paused;}
@keyframes dhb-hero-scroll{to{transform:translateX(-50%);}}
.dhb-hero-marquee-track ul{
  display:flex;
  align-items:center;
  list-style:none;
  gap:0;
  flex:none;
}
.dhb-hero-marquee-track li{
  display:inline-flex;
  align-items:center;
  padding-right:72px;
}
.dhb-hero-marquee-track img{
  height:var(--nh-logo-h,46px);
  width:auto;
  display:block;
  opacity:.85;
}

/* ---------- Adviesformulier (multi-step) ---------- */
/* De primaire knoppen van de hero houden hun witte tekst, ook als een thema
   of kit er iets anders van wil maken. */
.dhb-hero-section .dhb-btn--primary,
.dhb-hero-section .dhb-btn--primary:hover{color:#fff!important;}

/* ---------- Fades ---------- */
@keyframes dhb-hero-fade{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:none;}
}

/* ---------- Animaties uit (switcher of reduced motion) ---------- */
.dhb-hero-section.nh-no-anim *,
.dhb-hero-section.nh-no-anim .dhb-hero-media{animation:none!important;}
.dhb-hero-section.nh-no-anim .dhb-hero-eyebrow,
.dhb-hero-section.nh-no-anim .dhb-hero-sub,
.dhb-hero-section.nh-no-anim .dhb-hero-actions,
.dhb-hero-section.nh-no-anim .dhb-hero-proof,
.dhb-hero-section.nh-no-anim .dhb-hero-strip,
.dhb-hero-section.nh-no-anim .dhb-form-card{opacity:1;}
.dhb-hero-section.nh-no-anim .dhb-hero-line > span{transform:none;}
.dhb-hero-section.nh-no-anim .dhb-hero-media{transform:none;}
.dhb-hero-section.nh-no-anim .dhb-hero-marquee-track{animation:dhb-hero-scroll var(--nh-marquee-dur) linear infinite!important;}
@media (prefers-reduced-motion:reduce){
  .dhb-hero-section .dhb-hero-media,
  
  .dhb-hero-section *{animation:none!important;transition:none!important;}
  /* De ster hierboven raakt alleen echte elementen, geen pseudo-elementen.
     De lichtboog zit op ::before en moet dus apart genoemd worden, anders
     blijft juist die doordraaien voor wie om beweging heeft gevraagd. */
  .dhb-hero-section .dhb-form-card::before,
  .dhb-hero-section .dhb-form-card::after{animation:none!important;}
  .dhb-hero-section .dhb-hero-eyebrow,
  .dhb-hero-section .dhb-hero-sub,
  .dhb-hero-section .dhb-hero-actions,
  .dhb-hero-section .dhb-hero-proof,
  .dhb-hero-section .dhb-hero-strip,
  .dhb-hero-section .dhb-form-card{opacity:1;}
  .dhb-hero-section .dhb-hero-line > span{transform:none;}
  .dhb-hero-section .dhb-hero-media{transform:none;}
}

/* ---------- Tablet / mobiel ---------- */
@media (max-width:600px){
  .dhb-hero-section{min-height:100svh;}
  .dhb-hero-inner{padding:104px 20px 44px;justify-content:flex-start;}
  .dhb-hero-title{font-size:clamp(23px,6.8vw,30px);}
  .dhb-hero-actions{flex-direction:column;width:100%;max-width:340px;}
  .dhb-hero-actions .dhb-btn{justify-content:space-between;width:100%;}
  .dhb-hero-media{object-position:62% 30%;}
  .dhb-hero-marquee-track li{padding-right:44px;}
  .dhb-hero-section{--nh-logo-h:34px;}
}