/* kg-blok-subhero
   Gegenereerd door tools/genereer_css.py — niet met de hand bewerken.
   Gescopet onder .kg */

.kg .subhero {
  position:relative;
  color:#fff;
  background:var(--kg-groen-diep);
  isolation:isolate;
  display:flex;
  align-items:flex-end;
  min-height:clamp(420px,54vh,560px);
  padding:104px 0 50px;
  overflow:hidden;
}
.kg .subhero .wrap {
  width:100%;
}
.kg .subhero-bg {
  position:absolute;
  inset:0;
  z-index:-2;
  background-size:cover;
  background-position:center;
}
.kg .subhero::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,rgba(21,23,15,.36),rgba(21,23,15,.26) 42%,rgba(21,23,15,.87));
}
.kg .subhero h1 {
  color:#fff;
  font-size:clamp(34px,5vw,58px) !important;
  font-weight:800 !important;
  letter-spacing:-.02em;
  max-width:18ch;
  margin-bottom:15px;
  text-wrap:balance;
}
.kg .subhero p.lead {
  max-width:52ch;
  font-size:18px;
  color:rgba(255,255,255,.92);
  margin-bottom:26px;
}
.kg .subhero .hero-cta {
  display:flex;
  gap:13px;
  flex-wrap:wrap;
}
.kg .subhero .btn {
  background:#fff;
  border-color:#fff;
  color:var(--kg-donker);
}
.kg .subhero .btn:hover {
  background:var(--kg-goud-licht);
  border-color:var(--kg-goud-licht);
  color:var(--kg-donker);
}
.kg .subhero .btn.outline {
  background:transparent;
  border-color:rgba(255,255,255,.62);
  color:#fff;
}
.kg .subhero .btn.outline:hover {
  background:rgba(255,255,255,.14);
}
.kg .subhero-bg {
  background-position:center 28%;
}
.kg .subhero {
  position:relative;
  color:#fff;
  background:var(--kg-groen-diep);
  isolation:isolate;
  display:flex;
  align-items:flex-end;
  min-height:clamp(400px,52vh,540px);
  padding:104px 0 46px;
  overflow:hidden;
}
.kg .subhero::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,rgba(21,23,15,.34),rgba(21,23,15,.26) 42%,rgba(21,23,15,.86));
}
.kg .subhero .eyebrow.light {
  color:var(--kg-goud-licht);
}
.kg .subhero .eyebrow.light::before {
  background:var(--kg-goud-licht);
}
.kg .subhero h1 {
  color:#fff;
  font-size:clamp(34px,5vw,56px) !important;
  font-weight:800 !important;
  letter-spacing:-.02em;
  max-width:20ch;
  margin-bottom:15px;
}
.kg .subhero h1 em {
  font-style:normal;
  color:#fff;
}
.kg .subhero p.lead {
  max-width:54ch;
  font-size:18px;
  color:rgba(255,255,255,.92);
  margin-bottom:26px;
}
.kg .subhero h1 {
  max-width:20ch;
}
.kg .subhero .crumbs {
  position:relative;
  z-index:3;
}
.kg .subhero h1 em {
  font-style:normal;
}
