/* ==========================================================================
   Home — Hero
   ========================================================================== */
.s-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(2.75rem, 1.5rem + 4.5vw, 6rem) clamp(3.5rem, 2rem + 5vw, 7rem);
}

.s-hero__grid {
  /* Geen z-index: tekst, foto, swoosh en persoon delen zo één stapelvolgorde
     binnen de sectie (foto 1 → swoosh 2 → persoon en tekst 3). */
  position: relative;
  display: grid;
  gap: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  align-items: center;
}
@media (min-width: 1024px) {
  /* Tekstkolom breed genoeg voor "100% emissievrije" op één regel (h1 in drie
     regels vanaf 1100px, zonder "100%" als weesregel) */
  .s-hero__grid { grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr); gap: clamp(3rem, 1rem + 4vw, 5.5rem); }
}

.s-hero__tekst { position: relative; z-index: 3; }

.s-hero__titel {
  max-width: 13.5ch;
  font-size: var(--fs-display);
  line-height: 1.04;
  color: var(--wit);
}
.s-hero__lead { margin-top: 1.5rem; max-width: 54ch; }
.s-hero__knoppen { margin-top: 2.25rem; }

/* Kerncijfers */
.s-hero__cijfers {
  display: grid;
  gap: 1rem;
  margin: clamp(2.25rem, 1.5rem + 2vw, 3.25rem) 0 0;
  padding: 1.75rem 0 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.s-hero__cijfer { display: flex; align-items: baseline; gap: 1rem; }
.s-hero__cijfer .cijfer__getal { flex: none; min-width: 3.4ch; color: var(--roze); }
.s-hero__cijfer .cijfer__label { margin-top: 0; max-width: 24ch; }
@media (min-width: 640px) {
  .s-hero__cijfers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .s-hero__cijfer { display: block; }
  .s-hero__cijfer .cijfer__label { margin-top: .55rem; }
}

/* Beeld: kader met twee lagen (foto en uitgesneden persoon); de swoosh valt
   ertussen, zodat hij áchter de persoon langs door het beeld loopt. */
.s-hero__beeld { position: relative; }
.s-hero__fotokader {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-op-donker);
}
@media (min-width: 1024px) {
  .s-hero__fotokader { aspect-ratio: 4 / 5; max-height: min(78vh, 720px); margin-left: auto; }
}
.s-hero__foto,
.s-hero__persoon {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
}
.s-hero__foto { z-index: 1; }
.s-hero__persoon { z-index: 3; pointer-events: none; }
.s-hero__persoon picture,
.s-hero__persoon img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Swoosh: lus links-onder het beeld, lint loopt achter de foto naar rechtsboven */
.s-hero__swoosh {
  width: 190vw;
  max-width: none;
  left: -52vw;
  bottom: 1.5%;
  z-index: 2;
  /* Gedraaid om de krul (transform-origin uit .swoosh): het lint loopt achter
     de carrosserie langs en komt rechts uit beeld, niet achter de persoon. */
  rotate: var(--hero-swoosh-draai, 9.5deg);
}
/* Desktop: de lus ligt links-onder de foto, rechts van de kerncijfers. De extra
   verschuiving (min(5vw, 4.5rem)) houdt de felle lus weg van het derde
   cijferlabel, ook tussen 1024 en 1100px waar de labels over drie regels lopen. */
@media (min-width: 1024px) {
  .s-hero__swoosh { --hero-swoosh-draai: 6deg; width: min(98vw, 1700px); left: calc(max(22vw, 50vw - 380px) + min(5vw, 4.5rem)); bottom: 3%; }
}

/* Notitie met getekend pijltje onder de groene knop (brandbook p.18).
   Pijl 3 begint rechts onder (tekst ernaast) en wijst met lucht omhoog naar de knop. */
.s-hero__notitie { --pijl-b: 2.4rem; --pijl-h: 3.1rem; --staart-y: .66; margin: 1.1rem 0 0 clamp(4.5rem, 3.5rem + 3vw, 6.5rem); }