.about-section{
  background: linear-gradient(to bottom, #FFFFF4, #FFFFB5);
  padding: clamp(32px, 4vw, 64px) 24px;
}

.about-wrap{
  max-width: 1200px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

/* LEFT */
.about-title{
  font-family: "Knewave", system-ui, sans-serif;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1;
  margin: 0 0 18px;
}

.about-subtitle{
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(18px, 2.2vw, 28px);
  margin: 0 0 12px;

  /* outline effect */
  color: transparent;
  -webkit-text-stroke: 2px #000;   /* outline kleur */
  text-stroke: 2px #000;           /* fallback (werkt niet overal) */
  letter-spacing: .02em;
}

/* Fallback voor browsers zonder text-stroke */
@supports not (-webkit-text-stroke: 1px #000){
  .about-subtitle{
    color: #FFFFF4; /* “vulling” */
    text-shadow:
      -1px -1px 0 #000,
       1px -1px 0 #000,
      -1px  1px 0 #000,
       1px  1px 0 #000;
  }
}

.about-text{
  margin: 0;
  max-width: 62ch;
  font-size: 18px;
  line-height: 1.55;
}

/* RIGHT */
.photo-card{
  position: relative;
  overflow: visible;              /* ✅ badge mag uitsteken */
}

.photo-media{
  border-radius: 28px;
  overflow: hidden;               /* ✅ ronding alleen op de foto */
}

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

/* Badge blijft hetzelfde */
.photo-badge{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.photo-badge-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 220px;
  padding: 14px 26px;

  border-radius: 16px;
  background: #E6D37C;          /* jouw “zand” kleur */
  color: #fff;
  text-decoration: none;

  font-weight: 800;
  font-style: italic;
  font-size: 22px;

  box-shadow: 0 14px 30px rgba(0,0,0,.14);
}

.photo-badge-btn:hover{
  filter: brightness(0.97);
}

/* Responsive */
@media (max-width: 900px){
  .about-wrap{
    grid-template-columns: 1fr;
  }
  .about-text{
    max-width: 100%;
  }
  .photo-badge-btn{
    min-width: 200px;
    font-size: 20px;
  }
}

/* start state */
.about-left > *,
.about-right .photo-card,
.about-right .photo-badge {
  opacity: 0;
  transform: translate3d(0,0,0); /* start in-flow (niet offscreen) */
  will-change: transform, opacity;
}

/* animaties */
.about-section.is-visible .about-left > * {
  animation: aboutInLeft 900ms cubic-bezier(.2,.9,.2,1) forwards;
}

.about-section.is-visible .about-right .photo-card {
  animation: aboutInRight 900ms cubic-bezier(.2,.9,.2,1) forwards;
}

.about-section.is-visible .about-right .photo-badge {
  animation: aboutBadge 700ms cubic-bezier(.2,.9,.2,1) forwards;
}

/* keyframes: slide + fade */
@keyframes aboutInLeft {
  from { transform: translate3d(-28px, 14px, 0); opacity: 0; }
  to   { transform: translate3d(0, 0, 0); opacity: 1; }
}

@keyframes aboutInRight {
  from { transform: translate3d(28px, 14px, 0); opacity: 0; }
  to   { transform: translate3d(0, 0, 0); opacity: 1; }
}

@keyframes aboutBadge {
  from { transform: translate(-50%, calc(-50% - 10px)); opacity: 0; }
  to   { transform: translate(-50%, -50%); opacity: 1; }
}

/* stagger links (pas aan naar je DOM) */
.about-left .about-title    { animation-delay: 0ms; }
.about-left .about-subtitle { animation-delay: 140ms; }
.about-left .about-text     { animation-delay: 280ms; }

/* rechts */
.about-right .photo-card    { animation-delay: 120ms; }
.about-right .photo-badge   { animation-delay: 260ms; }

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-left > *,
  .about-right .photo-card,
  .about-right .photo-badge{
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}