/* ABOUT BLOCK (like your screenshot) */
.about-block{
  background: #fff; /* bottom is white */
}

/* shared container */
.about-block__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(44px, 6vw, 80px) 24px;
}

/* TOP area (yellow background) */
.about-block__top{
  /* geel boven, wit eronder – overgang midden in de foto's */
  background: linear-gradient(
    to bottom,
    #FEFFEB 0%,
    #FEFFEB 50%,
    #ffffff 50%,
    #ffffff 100%
  );

  padding-bottom: 0; /* belangrijk */
}

.about-block__title{
  font-family: "Knewave", system-ui, sans-serif;
  color: #ECD57B;
  font-size: clamp(44px, 7vw, 86px);
  line-height: 1;
  text-align: center;
  margin: 0 0 clamp(14px, 2.5vw, 24px);
  font-weight: 400;
}

.about-block__lead{
  font-family: "Outfit", system-ui, sans-serif;
  color: #111;
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1.55;
  max-width: 82ch;
  margin: 0 auto;
  text-align: center;
}

/* two columns that STAY together */
.about-block__columns{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 3vw, 40px);
  margin-top: clamp(20px, 3vw, 36px);
}

/* each column */
.about-block__col{
  display: flex;
  flex-direction: column;
  gap: 18px; /* afstand foto ↔ tekst */
}

/* photo */
.about-block__photo{
  margin: 0;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(0,0,0,.10);
}

.about-block__photo img{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* text */
.about-block__text{
  font-family: "Outfit", system-ui, sans-serif;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.45;
  margin: 0;
}

/* bullets */
.about-block__bullets ul{
  margin: 0;
  padding-left: 1.1em;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.6;
}

.about-block__bullets li{
  margin-bottom: 8px;
}

.about-block__bullets li::marker{
  color: #0077B6;
}

/* mobile */
@media (max-width: 900px){
  .about-block__columns{
    grid-template-columns: 1fr;
  }
}

/* full-width note under both columns */
.about-block__note{
  grid-column: 1 / -1;
  margin: clamp(18px, 3vw, 36px) 0 0;
  text-align: center;
  font-family: "Outfit", system-ui, sans-serif;
  color: #0077B6;
  font-weight: 700;
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1.3;
}