/* kg-blok-hero
   Gegenereerd door tools/genereer_css.py — niet met de hand bewerken.
   Gescopet onder .kg */

.kg .hero {
  position:relative;
  min-height:90vh;
  display:flex;
  align-items:flex-end;
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}
.kg .hero .slides {
  position:absolute;
  inset:0;
  z-index:-2;
}
.kg .hero .slide {
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:opacity 2.8s ease;
  transform:scale(1.018);
}
.kg .hero .slide.on {
  opacity:1;
  animation:kb 15s linear forwards;
}
.kg .hero::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,rgba(21,23,15,.32) 0%,rgba(21,23,15,.1) 38%,rgba(21,23,15,.84) 100%);
}
.kg .hero .wrap {
  padding-top:90px;
  padding-bottom:48px;
  width:100%;
}
.kg .hero h1 {
  color:#fff;
  font-size:clamp(42px,6.6vw,76px) !important;
  font-weight:800 !important;
  letter-spacing:-.02em;
  max-width:15ch;
  margin-bottom:22px;
}
.kg .hero p.lead {
  max-width:50ch;
  font-size:19px;
  color:rgba(255,255,255,.92);
  margin-bottom:30px;
}
.kg .hero-cta {
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.kg .hero .btn {
  background:#fff;
  border-color:#fff;
  color:var(--kg-donker);
}
.kg .hero .btn:hover {
  background:var(--kg-goud-licht);
  border-color:var(--kg-goud-licht);
  color:var(--kg-donker);
}
.kg .hero .btn.outline {
  background:transparent;
  border-color:rgba(255,255,255,.65);
  color:#fff;
}
.kg .hero .btn.outline:hover {
  background:rgba(255,255,255,.14);
}
.kg .dots {
  position:absolute;
  right:clamp(20px,4vw,56px);
  bottom:48px;
  display:flex;
  gap:9px;
  z-index:2;
}
.kg .dots button {
  width:9px;
  height:9px;
  border-radius:50%;
  border:0;
  background:rgba(255,255,255,.4);
  cursor:pointer;
  transition:.2s;
  padding:0;
}
.kg .dots button.on {
  background:#fff;
  width:26px;
  border-radius:999px;
}

@media(max-width:980px) {
  .kg .hero {
    min-height:auto;
    padding-bottom:10px;
  }
  .kg .dots {
    display:none;
  }
}

@media(max-width:600px) {
  .kg .hero-cta {
    flex-direction:column;
    align-items:stretch;
  }
  .kg .hero-cta .btn {
    justify-content:center;
  }
}

@media(prefers-reduced-motion:reduce) {
  .kg .hero .slide.on {
    animation:none;
  }
}