@import './variables.css';
@import './typography.css';
@import './components.css';

/* ─── Video modal ────────────────────────────────────────── */
#video-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background-color: rgba(0, 0, 0, 0.85);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#video-modal.is-open {
  display: flex;
}

#video-modal video {
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  border-radius: 0.694vw;
  cursor: default;
  display: block;
}

#video-modal iframe {
  width: min(90vw, calc(90vh * 16 / 9));
  aspect-ratio: 16 / 9;
  border: none;
  border-radius: 0.694vw;
  display: block;
}

/* ─── Preloader ──────────────────────────────────────────── */
#preloader {
  position: fixed;
  inset: 0;
  background-color: var(--color-red);
  z-index: 1000;
  pointer-events: all;
}

#preloader-circle,
#preloader-circle-left,
#preloader-circle-right {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3vw;
  height: 3vw;
  background-color: var(--color-yellow);
  border-radius: 50%;
  overflow: hidden;
}

#preloader-circle::before,
#preloader-circle-left::before,
#preloader-circle-right::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.37;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.50' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  mix-blend-mode: multiply;
}

body {
  overflow-x: hidden;
}


/* ─── Page wrapper ───────────────────────────────────────── */
.page-wrapper {
  padding: var(--page-padding) var(--page-padding) 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-x: clip;
}

/* ════════════════════════════════════════════════════════════
   HERO SECTION
═══════════════════════════════════════════════════════════ */
.hero {
  background-color: var(--color-yellow);
  border-radius: var(--card-radius);
  padding: 2.778vw var(--section-padding-x) 4.167vw;  /* bottom 60px op 1440 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: relative;
}


@media (min-width: 851px) {
  .hero {
    overflow: hidden;
  }
}

/* ─── Grain in hero ─────────────────────────────────────── */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.37;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.50' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  mix-blend-mode: multiply;
}

/* ─── Ellipse achtergrond ────────────────────────────────── */
.hero__ellipse {
  position: absolute;
  width: 100%;
  height: 37.986vw;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(60%);  /* 60% buiten onderkant */
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(231, 46, 27, 0.15) 0%, rgba(231, 46, 27, 0) 50%);
  border-radius: 50%;
  z-index: 0;
}

/* ─── Nav ────────────────────────────────────────────────── */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  position: relative;
  z-index: 1;
}

.nav__left {
  display: flex;
  align-items: center;
  gap: 0.556vw;  /* 8px op 1440 */
}

.nav__color {
  color: var(--color-red);
}

.nav__contact {
  display: flex;
  align-items: center;
  gap: 0.417vw;  /* 6px op 1440 */
  text-decoration: none;
  color: var(--color-red);
}

.nav__contact-label {
  display: inline-block;
  overflow: hidden;
  position: relative;
  padding-bottom: 0.15em;
  margin-bottom: -0.15em;
}

.nav__contact-label > span {
  display: inline-block;
  transition: transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
  white-space: nowrap;
}

.nav__contact-label::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  transform: translateY(130%);
  transition: transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
}

.nav__contact:hover .nav__contact-label > span {
  transform: translateY(-130%);
}

.nav__contact:hover .nav__contact-label::after {
  transform: translateY(0);
}

.nav__arrow img {
  transition: transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
}

.nav__contact:hover .nav__arrow img {
  transform: rotate(45deg);
}

.nav__arrow {
  width: 1.389vw;  /* 20px op 1440 */
  height: 1.389vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav__arrow img {
  width: 100%;
  height: 100%;
}

/* ─── Hero headline ──────────────────────────────────────── */
.hero__headline-wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 2.778vw;  /* 40px links/rechts op 1440 */
  margin-top: 4.167vw;  /* 60px op 1440 */
}

.hero__headline {
  max-width: 100%;
}

.hero__headline .word {
  display: inline-block;
  white-space: nowrap;
}

.hero__headline .char {
  display: inline-block;
}

/* ─── Hero foto ──────────────────────────────────────────── */
.hero__card-wrapper {
  position: relative;
  z-index: 1;
  margin-top: var(--hero-gap);  /* 80px op 1440 */
}

/* ─── Heart badge positie ────────────────────────────────── */
.hero__heart {
  position: absolute;
  top: 50%;
  right: -4.167vw;
  transform: translateY(-50%);
  z-index: 2;
}

/* ─── Heartbeat animatie (elke 5s) ──────────────────────── */
@keyframes heartbeat {
  0%   { transform: scale(1); }
  3%   { transform: scale(1.25); }
  6%   { transform: scale(1); }
  9%   { transform: scale(1.18); }
  12%  { transform: scale(1); }
  100% { transform: scale(1); }
}

.hero__heart-badge img {
  animation: heartbeat 5s linear infinite;
}

/* ════════════════════════════════════════════════════════════
   SECTIE 2 — TAGS RIJ
═══════════════════════════════════════════════════════════ */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.tags-row {
  padding: 2.778vw 0 0;
  overflow: hidden;
  margin-left: calc(-1 * var(--page-padding));
  margin-right: calc(-1 * var(--page-padding));
}

.tags-track {
  display: flex;
  align-items: center;
  gap: 1.389vw;
  width: max-content;
  animation: marquee 18s linear infinite;
}


/* ════════════════════════════════════════════════════════════
   SECTIE 3 — OVER MIJ
═══════════════════════════════════════════════════════════ */
.about {
  border-radius: var(--card-radius);
  padding: 9.722vw var(--section-padding-x);  /* 140px top/bottom op 1440 */
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  align-items: flex-end;
  overflow: hidden;
}

.about__header {
  display: flex;
  flex-direction: column;
  gap: 1.667vw;  /* 24px op 1440 */
  width: 100%;
  padding-right: 22.431vw;  /* 323px op 1440 */
}

.about__headline {
  color: var(--color-white);
}

.about__headline em {
  color: var(--color-yellow);
}

.about__body {
  width: 51.25vw;   /* 738px op 1440 */
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}

/* ════════════════════════════════════════════════════════════
   SECTIE 4 — FOTO FULLWIDTH
═══════════════════════════════════════════════════════════ */
.fullwidth-image {
  margin-left: calc(-1 * var(--page-padding));
  margin-right: calc(-1 * var(--page-padding));
  height: 45vw;  /* 648px op 1440 */
  overflow: hidden;
  position: relative;
}

.fullwidth-image::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 6.944vw;   /* 100px op 1440 */
  height: 6.944vw;
  background-color: var(--color-yellow);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.50' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='0.37'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  z-index: 1;
}

.fullwidth-image::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 6.944vw;   /* 100px op 1440 */
  height: 6.944vw;
  background-color: var(--color-red);
  z-index: 1;
}

.fullwidth-image img {
  width: 100%;
  height: 120%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: grayscale(100%) brightness(1.15);
}

/* ─── Sticky container secties 5–8 ──────────────────────── */
.work-block {
  background-color: var(--color-yellow);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.50' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='0.37'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  margin-left: calc(-1 * var(--page-padding));
  margin-right: calc(-1 * var(--page-padding));
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
}

/* ─── Grain — alleen secties 5–8 en test-spacer ─────────── */
.work::before,
.reel::before,
.outro::before,
.reel2::before,
.reel3::before,
.edu-section::before,
.footer::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.37;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.50' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  mix-blend-mode: multiply;
}

/* Content boven grain houden */
.work__header,
.work__carousel-wrapper {
  position: relative;
  z-index: 1;
}

.reel__video,
.outro__video,
.reel2__video,
.reel3__video {
  z-index: 1;
}

/* ════════════════════════════════════════════════════════════
   SECTIE 5 — MIJN WERK
═══════════════════════════════════════════════════════════ */
.work {
  background-color: var(--color-yellow);
  margin-left: calc(-1 * var(--page-padding));
  margin-right: calc(-1 * var(--page-padding));
  padding: 6.944vw calc(var(--section-padding-x) + var(--page-padding));  /* 100px top/bottom op 1440 */
  display: flex;
  flex-direction: column;
  gap: 2.778vw;  /* 40px op 1440 */
  position: sticky;
  top: 0;
  isolation: isolate;
}

.work__header {
  display: flex;
  flex-direction: column;
  gap: 1.667vw;  /* 24px op 1440 */
}

.work__headline {
  color: var(--color-dark);
  font-size: 4.167vw;  /* 60px op 1440 */
}

.work__headline em {
  color: var(--color-red);
}

.work .tag {
  color: var(--color-red);
}

.work__carousel-wrapper {
  overflow: hidden;
  margin-left: calc(-1 * (var(--section-padding-x) + var(--page-padding)));
  margin-right: calc(-1 * (var(--section-padding-x) + var(--page-padding)));
}

.work__carousel {
  display: flex;
  gap: 1.042vw;  /* 15px op 1440 */
  width: max-content;
  animation: marquee 18s linear infinite;
}

.work__slide {
  width: 18.75vw;    /* 270px op 1440 */
  height: 33.84vw;  /* 443px × 1.1 op 1440 */
  border-radius: 1.389vw;  /* 20px op 1440 */
  background-color: var(--color-white);
  overflow: hidden;
  position: relative;
}

.work__slide-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4.167vw;   /* 60px op 1440 */
  height: 4.167vw;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  cursor: pointer;
  border: none;
  padding: 0;
}

/* Driehoek play-icoon in rood */
.work__slide-play::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.625vw 0 0.625vw 1.111vw;  /* 9 0 9 16px op 1440 */
  border-color: transparent transparent transparent var(--color-red);
  margin-left: 0.139vw;  /* visueel centreren */
}

/* Grotere play-button voor de brede videoboxen in secties 6–8 — alleen desktop */
@media (min-width: 401px) {
  .reel__video .work__slide-play,
  .outro__video .work__slide-play,
  .reel2__video .work__slide-play {
    width: 5.208vw;   /* 75px op 1440 */
    height: 5.208vw;
  }

  .reel__video .work__slide-play::after,
  .outro__video .work__slide-play::after,
  .reel2__video .work__slide-play::after {
    border-width: 0.781vw 0 0.781vw 1.389vw;  /* 11 0 11 20px op 1440 */
    margin-left: 0.174vw;
  }
}

.work__slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 0;
}

.work__slide-item {
  display: flex;
  flex-direction: column;
  gap: 0.694vw;  /* 10px op 1440 */
  flex-shrink: 0;
}

.video-label.video-label--slide {
  padding: 0.556vw 0.833vw;  /* 8px 12px op 1440 */
  width: auto;
  left: 50%;
  transform: translateX(-50%) translateZ(0);
  white-space: nowrap;
}

.work__slide-item:nth-child(even) {
  margin-top: 2.083vw;  /* 30px op 1440 */
}

/* ════════════════════════════════════════════════════════════
   SECTIE 6 — REEL
═══════════════════════════════════════════════════════════ */
.reel {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--color-yellow);
  margin-left: calc(-1 * var(--page-padding));
  margin-right: calc(-1 * var(--page-padding));
  padding: 0 0 6.944vw;
  display: flex;
  flex-direction: column;
}

.reel__video {
  width: 100%;
  height: 36.13vw;
  border-radius: 0;
  background-color: var(--color-dark);
  overflow: hidden;
  position: relative;
}

.video-label p {
  font-family: 'Space Mono', monospace;
  font-weight: 300;
  font-size: 0.972vw;   /* 14px op 1440 */
  line-height: 0.9;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-dark);
}

.video-label {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: var(--color-yellow);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.50' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='0.37'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  padding: 1.042vw 1.389vw 1.042vw calc(var(--section-padding-x) + var(--page-padding));
  color: var(--color-dark);
  z-index: 2;
}

/* ════════════════════════════════════════════════════════════
   SECTIE 7 — OUTRO
═══════════════════════════════════════════════════════════ */
.outro {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--color-yellow);
  margin-left: calc(-1 * var(--page-padding));
  margin-right: calc(-1 * var(--page-padding));
  padding: 0 0 6.944vw;
  display: flex;
  flex-direction: column;
}

/* ════════════════════════════════════════════════════════════
   SECTIE 8 — REEL 2
═══════════════════════════════════════════════════════════ */
.reel2 {
  position: sticky;
  top: 0;
  z-index: 3;
  background-color: var(--color-yellow);
  margin-left: calc(-1 * var(--page-padding));
  margin-right: calc(-1 * var(--page-padding));
  padding: 0 0 6.944vw;
  display: flex;
  flex-direction: column;
}

.reel2__video {
  width: 100%;
  height: 36.13vw;  /* 473px op 1440 */
  border-radius: 0;
  background-color: var(--color-dark);
  overflow: hidden;
  position: relative;
}

/* ════════════════════════════════════════════════════════════
   SECTIE 9 — REEL 3
═══════════════════════════════════════════════════════════ */
.reel3 {
  position: sticky;
  top: 0;
  z-index: 4;
  background-color: var(--color-yellow);
  margin-left: calc(-1 * var(--page-padding));
  margin-right: calc(-1 * var(--page-padding));
  padding: 0 0 6.944vw;
  display: flex;
  flex-direction: column;
}

.reel3__video {
  width: 100%;
  height: 36.13vw;
  border-radius: 0;
  background-color: var(--color-dark);
  overflow: hidden;
  position: relative;
}

/* ════════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════ */
.footer {
  background-color: var(--color-yellow);
  position: relative;
  margin-left: calc(-1 * var(--page-padding));
  margin-right: calc(-1 * var(--page-padding));
  padding: var(--page-padding);
}

.footer__inner {
  background-color: var(--color-red);
  border-radius: 1.389vw;   /* 20px op 1440 */
  padding: 5.556vw 4.167vw 4.167vw;  /* 80px top, 60px sides/bottom */
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 5.556vw;             /* 80px tussen kaart en content */
  position: relative;
  z-index: 1;
}

.footer__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.083vw;             /* 30px op 1440 */
  flex: 1;
}

@keyframes float-right {
  0%, 100% { transform: rotate(5deg) translateY(0); }
  50%       { transform: rotate(5deg) translateY(-0.833vw); }
}

@media (max-width: 600px) {
  @keyframes float-right {
    0%, 100% { transform: rotate(5deg) translateY(0); }
    50%       { transform: rotate(5deg) translateY(-2vw); }
  }
}

/* Geïnverteerde kaart kleuren in footer */
.footer__card.vera-card {
  animation-name: float-right;
  background-color: var(--color-yellow);
  flex-shrink: 0;
  margin-left: auto;
  align-self: flex-end;
  width: 26.389vw;    /* 380px op 1440 */
  padding: 1.042vw;   /* 15px op 1440 */
}

.footer__card .text-card-name {
  color: var(--color-yellow);
  font-size: 1.389vw;   /* 20px op 1440 */
}

.footer__card .text-card-meta {
  color: var(--color-yellow);
  font-size: 1.25vw;    /* 18px op 1440 */
}

.footer__card .vera-card__dot {
  background-color: var(--color-yellow);
}

.footer__card .vera-card__info {
  padding: 1.736vw;     /* 25px op 1440 */
}

.footer__heading {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 5.556vw;       /* 80px op 1440 */
  line-height: 1.0;
  letter-spacing: var(--tracking-section);
  color: var(--color-yellow);
  max-width: 45vw;
  margin: 0;
}

.footer__contact {
  display: flex;
  align-items: center;
  gap: 1.042vw;             /* 15px op 1440 */
  text-decoration: none;
  color: var(--color-yellow);
}

.footer__contact-label {
  display: inline-block;
  overflow: hidden;
  position: relative;
  padding-bottom: 0.15em;
  margin-bottom: -0.15em;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 2.778vw;       /* 40px op 1440 */
  line-height: 0.9;
  letter-spacing: var(--tracking-nav);
  white-space: nowrap;
}

.footer__contact-label > span {
  display: inline-block;
  transition: transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
}

.footer__contact-label::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(130%);
  transition: transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
}

.footer__contact:hover .footer__contact-label > span {
  transform: translateY(-130%);
}

.footer__contact:hover .footer__contact-label::after {
  transform: translateY(0);
}

.footer__arrow {
  width: 3.472vw;           /* 50px op 1440 */
  height: 3.472vw;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer__arrow img {
  width: 100%;
  height: 100%;
  filter: brightness(0) invert(1) sepia(0.15) saturate(3) hue-rotate(340deg);
  transition: transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
}

.footer__contact:hover .footer__arrow img {
  transform: rotate(45deg);
}

/* ════════════════════════════════════════════════════════════
   SECTIE 10 — OPLEIDING & CARRIÈRE
═══════════════════════════════════════════════════════════ */
.edu-section {
  background-color: var(--color-yellow);
  margin-left: calc(-1 * var(--page-padding));
  margin-right: calc(-1 * var(--page-padding));
  position: relative;
  padding: 8.333vw calc(var(--section-padding-x) + var(--page-padding));  /* 120px top/bottom, 80px sides */
}

.edu-header {
  display: flex;
  flex-direction: column;
  gap: 1.389vw;           /* 20px op 1440 */
  margin-bottom: 4.167vw; /* 60px op 1440 */
  padding-right: 41.667vw; /* 600px op 1440 */
}

.edu-main-heading {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 4.167vw;    /* 60px op 1440 */
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--color-dark);
  margin: 0;
}

.edu-main-heading em {
  color: var(--color-red);
  letter-spacing: -0.05em;
}

.edu-content {
  display: flex;
  flex-direction: column;
  gap: 2.778vw;  /* 40px tussen elk element */
  position: relative;
  z-index: 1;
}

.edu-heading {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 3.125vw;       /* 45px op 1440 */
  line-height: 1.1;
  letter-spacing: var(--tracking-section);
  color: var(--color-dark);
  margin: 0;
}

.edu-divider {
  height: 1px;
  background-color: var(--color-dark);
  opacity: 0.25;
}


.edu-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4.167vw;  /* 60px */
}

.edu-row .edu-heading {
  flex: 1;
}

.edu-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.25vw;   /* 18px op 1440 */
  line-height: 1.6;
  color: var(--color-dark);
  flex-shrink: 0;
  max-width: 32%;
  padding-top: 0.347vw;  /* kleine optische uitlijning */
}

.outro__video {
  width: 100%;
  height: 36.13vw;  /* 473px op 1440 */  /* hoogte slide-range sectie 5 op 1440 */
  border-radius: 0;
  background-color: var(--color-dark);
  overflow: hidden;
  position: relative;
}


/* ─── Responsive aanpassingen ────────────────────────────── */
@media (max-width: 850px) {
  .nav__arrow {
    width: 2.353vw;
    height: 2.353vw;
  }

  .nav__contact {
    gap: 0.706vw;
  }

  .tags-row {
    gap: 1.176vw;
    padding: 3.529vw var(--section-padding-x);
  }

  .about__header {
    padding-right: 0;
  }

  .about__body {
    width: 100%;
  }

  /* Sectie 5 — werk */
  .work__header {
    gap: 2vw;
    padding-right: 45%;
  }

  .work__headline {
    font-size: 3.8vw;
  }

  .work__slide {
    width: 26vw;
    height: 44.13vw;  /* 341px × 1.1 op 850 */
  }

  .work__slide-item:nth-child(even) {
    margin-top: 2.5vw;
  }

  /* Sectie 6 / 7 / 8 — video's */
  .reel__video,
  .outro__video,
  .reel2__video {
    height: 46.33vw;  /* 358px × 1.1 op 850 */
  }

  /* Sectie 10 — datums */
  .edu-body {
    font-size: 16px;
  }

  /* Video labels sectie 5 t/m 9 — zelfde als tag op tablet */
  .video-label p {
    font-size: 1.647vw;  /* 14px op 850 */
  }
}

@media (max-width: 600px) {
  .video-label {
    padding-top: 3vw;    /* 12px op 400px basis */
    padding-bottom: 3vw;
    padding-left: 3vw;
    padding-right: 3vw;
  }

  .video-label p {
    font-size: 3.5vw;  /* zelfde als .tag op mobile */
  }

  /* Nowrap alleen op mobile: 'wat vandaag' op één regel */
  .nowrap {
    white-space: nowrap;
  }

  /* Play-knop 60×60px op mobile */
  .work__slide-play {
    width: 18vw;
    height: 18vw;
  }

  .work__slide-play::after {
    border-width: 2.25vw 0 2.25vw 3.75vw;
    margin-left: 0.5vw;
  }


  /* Sectie 4 — foto */
  .fullwidth-image {
    height: 137.5vw;  /* 550px op 400 */
  }

  .fullwidth-image::before,
  .fullwidth-image::after {
    width: 10vw;   /* iets groter dan desktop 6.944vw */
    height: 10vw;
  }

  /* Hero padding: 30px alle kanten */
  .hero {
    padding: 7.5vw;
  }

  /* Verberg ©2026 + Portfolio, toon alleen mailbutton */
  .nav__left {
    display: none;
  }

  .nav__arrow {
    width: 5vw;
    height: 5vw;
  }

  /* Mailbutton gecentreerd */
  .nav {
    justify-content: center;
  }

  /* Gap mailbutton → heading: 50px */
  .hero__headline-wrapper {
    margin-top: 12.5vw;
    padding: 0;
  }

  /* Gap heading → card: 70px */
  .hero__card-wrapper {
    margin-top: 17.5vw;
  }

  /* Hartje: 45×45px */
  .hero__heart-badge {
    width: 11.25vw;
    height: 11.25vw;
    margin-left: 2vw;
  }

  /* Ellipse: perfect rond, rand-tot-rand, 50% binnen / 50% buiten */
  .hero__ellipse {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    transform: translateX(-50%) translateY(50%);
  }

  .tags-row {
    gap: 3vw;
    padding: 7.5vw 0 0;
  }

  /* Sectie 3 — over mij */
  .about {
    padding: 25vw 5vw;
    gap: 10vw;
  }

  .about__header {
    padding-right: 0;
    gap: 6.25vw;  /* 25px op 400 */
  }

  .about__headline {
    font-size: 8.5vw;
  }

  .about__body {
    width: 100%;
  }

  /* Sectie 5 — werk */
  .work {
    padding: 20vw calc(var(--section-padding-x) + var(--page-padding));
  }

  .work__header {
    gap: 6.25vw;  /* 25px op 400 */
    padding-right: 0;
  }

  .work__headline {
    font-size: 9.5vw;   /* 38px op 400 */
    padding-right: 15vw;   /* 60px op 400 */
  }

  .work__carousel-wrapper {
    margin-top: 7.5vw;  /* 30px gap h2→slides op 400 */
  }

  .work__carousel {
    gap: 3vw;  /* 12px op 400 */
  }

  .work__slide {
    width: 62.5vw;   /* 250px op 400 */
    height: 112.75vw; /* 410px × 1.1 op 400 */
    border-radius: 5vw;  /* 20px op 400 */
  }

  .work__slide-item:nth-child(even) {
    margin-top: 5vw;  /* 20px op 400 */
  }

  /* Sectie 10 — opleiding & carrière */
  .edu-header {
    gap: 5vw;             /* 20px op 400 */
    margin-bottom: 15vw;  /* 60px op 400 */
    padding-right: 0;
  }

  .edu-main-heading {
    font-size: 7.5vw;     /* 30px op 400 */
    max-width: 100%;
  }

  .edu-section {
    padding-top: 25vw;     /* 100px op 400 */
    padding-bottom: 25vw;
    padding-left: 8vw;     /* 5vw eigen + 3vw page-wrapper die we terugvoegen */
    padding-right: 8vw;
  }

  .edu-content {
    gap: 8.75vw;  /* 35px op 400 */
  }

  .edu-heading {
    font-size: 7.5vw;  /* 30px op 400 */
  }

  .edu-row {
    flex-direction: column;
    gap: 5vw;  /* 20px op 400 */
  }

  .edu-body {
    font-size: 4.5vw;  /* 18px op 400 */
    max-width: 100%;
    padding-top: 0;
  }

  /* Sectie 6 / 7 / 8 / 9 — zelfde bottom padding als sectie 5 op mobile */
  .reel,
  .outro,
  .reel2,
  .reel3 {
    padding-bottom: 20vw;
  }

  /* Sectie 6 / 7 / 8 / 9 — video's */
  .reel__video,
  .outro__video,
  .reel2__video,
  .reel3__video {
    height: 112.75vw; /* 410px × 1.1 op 400 */
    border-radius: 0;
  }

  /* Footer mobile */
  .footer__inner {
    flex-direction: column;
    align-items: flex-start;
    border-radius: 5vw;   /* 20px op 400 */
    padding: 8.75vw;      /* 35px op 400 */
    gap: 17.5vw;          /* 70px content → kaart */
  }

  .footer__content {
    gap: 6vw;             /* 24px tussen tag, h2, email */
    width: 100%;
  }

  .footer__heading {
    font-size: 10.25vw;   /* 41px op 400 */
    max-width: 100%;
  }

  .footer__contact-label {
    font-size: 5vw;       /* 20px op 400 */
    white-space: normal;
  }

  .footer__arrow {
    width: 7vw;           /* 28px op 400 */
    height: 7vw;
  }

  .footer__card.vera-card {
    width: 65vw;          /* zelfde als hero mobile */
    padding: 3vw;
    margin-left: 0;
    align-self: center;
  }

  .footer__card .vera-card__info {
    padding: 5vw;
  }

  .footer__card .text-card-name {
    font-size: 4.5vw;     /* zelfde als hero mobile */
  }

  .footer__card .text-card-meta {
    font-size: 3vw;       /* zelfde als hero mobile */
  }
}