/* ZZP Vacatures – breekpunten zoals op de live site: tablet t/m 1024px, mobiel t/m 767px. */
.zzp-page { --zzp-yellow: #ffe605; --zzp-line: #f0f0f0; --zzp-serif: "PT Serif", Georgia, serif; --zzp-sans: "Montserrat", var(--up-font-body); }

.zzp-title { color: var(--up-button); font-family: var(--zzp-serif); font-size: 5vw; font-weight: 700; letter-spacing: -.28px; line-height: 1.1; margin: 0; }
.zzp-copy { color: var(--up-button); font-family: var(--zzp-sans); font-size: 20px; font-weight: 500; letter-spacing: -.13px; line-height: 1.3; margin: 0; }
.zzp-copy a, .zzp-copy a:hover { color: inherit; }
.zzp-copy a:hover, .zzp-copy a:focus-visible { text-decoration: underline; }
.zzp-btn { --bs-btn-color: var(--zzp-yellow); --bs-btn-border-color: var(--zzp-line); --bs-btn-border-radius: 0; --bs-btn-font-size: 18px; --bs-btn-font-weight: 600; --bs-btn-padding-x: 40px; --bs-btn-padding-y: 20px; --bs-btn-hover-bg: var(--zzp-yellow); --bs-btn-hover-border-color: var(--zzp-line); --bs-btn-hover-color: var(--up-button); --bs-btn-active-bg: var(--zzp-yellow); --bs-btn-active-border-color: var(--zzp-line); --bs-btn-active-color: var(--up-button); font-family: var(--zzp-sans); letter-spacing: 1.02px; transition: all .3s; }

/* Hero: tekst en knop links, portret rechts over de volle hoogte. */
.zzp-hero__inner { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; min-height: 100vh; padding: 5% 0 5% 5%; }
.zzp-hero__content { display: flex; flex-direction: column; gap: 30px; justify-content: space-between; padding: 5% 10% 0 0; width: 55%; }
.zzp-hero__text { flex: 0 0 auto; width: 113.237%; }
.zzp-hero__title { color: var(--up-button); font-family: var(--zzp-serif); font-size: 110px; font-weight: 700; letter-spacing: .3px; line-height: 1.1; margin: 0; }
.zzp-hero__intro { color: var(--up-primary); font-family: var(--up-font-heading); font-size: 19px; font-weight: 500; letter-spacing: 1px; line-height: 1.3; margin: 56px 25% 21px 0; }
.zzp-hero__photo { position: relative; width: 42%; }
.zzp-hero__photo img { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }

/* Werken als zzp'er */
.zzp-about { display: flex; padding: 3% 0; }
.zzp-about__heading { border: solid var(--zzp-line); border-width: 1px 1px 1px 0; padding: 10% 15% 10% 5%; width: 60%; }
.zzp-about__body { border: solid var(--zzp-line); border-width: 1px 0; display: flex; flex-direction: column; justify-content: space-evenly; padding: 0 5%; width: 40%; }
.zzp-about__image { display: block; width: 100%; }

/* Wet DBA */
.zzp-dba { display: flex; margin: 0 auto; padding: 3% 0; width: 95%; }
.zzp-dba__text { border: solid var(--zzp-line); border-width: 1px 1px 1px 0; flex: 0 0 auto; padding: 10% 15% calc(10% + 50px) 5%; width: 67.553%; }
.zzp-dba__title { flex: 1 1 0; min-width: 0; }

/* Opdrachtgevers: de gedeelde logocarrousel, op de maat van de live site (logo's 70px uit elkaar, pijlen binnen de rand).
   Elk logo krijgt het vak van het hoogste logo (216:233), zodat de hoogte vaststaat voordat de afbeeldingen geladen zijn. */
.zzp-clients__inner { display: flex; flex-direction: column; gap: 20px; padding: 10px 10px 4px; }
.zzp-clients__title { align-self: center; color: var(--up-primary); font-size: 39px; line-height: 1; margin: 0; }
.zzp-clients__carousel { overflow: hidden; width: 97.833%; }
.zzp-clients .client-logos { margin: 0 -35px; }
.zzp-clients .client-logos .scroller__item { padding: 0 35px; }
.zzp-clients .client-logos .scroller__item img { aspect-ratio: 216 / 233; max-height: none; object-fit: contain; }
.zzp-clients .client-logos .scroller__arrow--prev { left: 43px; }
.zzp-clients .client-logos .scroller__arrow--next { right: 43px; }

@media (max-width: 1024.98px) {
  .zzp-title { font-size: 40px; letter-spacing: 0; }
  .zzp-hero__inner { padding: 10% 5%; }
  .zzp-hero__content { margin-bottom: 10%; padding: 0; width: 100%; }
  .zzp-hero__text { padding: 0 10%; text-align: center; width: 100%; }
  .zzp-hero__title { font-size: 50px; }
  .zzp-hero__intro { margin-right: 0; }
  .zzp-hero__actions { text-align: center; }
  .zzp-hero__photo { min-height: 70vh; width: 100%; }
  .zzp-about, .zzp-dba { padding: 5% 0; }
  .zzp-about__heading { padding: 10% 3%; width: 50%; }
  .zzp-about__body { padding: 0 3%; width: 50%; }
  .zzp-dba__text { padding: 10% 3% calc(10% + 50px); width: 50%; }
  .zzp-clients__carousel { width: 60%; }
}

@media (max-width: 767.98px) {
  .zzp-title { font-size: 35px; text-align: center; }
  .zzp-copy { text-align: center; }
  .zzp-btn { --bs-btn-font-size: 16px; display: block; }
  .zzp-hero__text { padding: 0; }
  .zzp-hero__title { font-size: 40px; }
  .zzp-hero__photo { min-height: 45vh; }
  .zzp-about, .zzp-dba { flex-wrap: wrap; padding: 10% 5%; width: 100%; }
  .zzp-about__heading { border-width: 1px 1px 0; padding: 10% 5% 0; width: 100%; }
  .zzp-about__body { border-width: 0 1px 1px; gap: 35px; padding: 10% 5%; width: 100%; }
  .zzp-dba__text { border-width: 1px 1px 0; padding: 10% 5% 50px; width: 100%; }
  .zzp-dba__title { flex-basis: 100%; }
  .zzp-clients__carousel { width: auto; }
}