:root {
  /*fonts*/
  --heading-font: "Krona One", sans-serif;
  --body-font: "Kulim Park", sans-serif;
  /* Kulim Park weights */
  --weight-regular: 400;
  --weight-semibold: 600;

  /*colors*/
  --color-text1: rgba(0, 0, 0, 0.8);
  --color-background1: white;
  --color-box1: #faf7f7;
  --color-hover1: #ff5a5f;

  /*dark mode?*/

  /*columns*/
  --col1: 0px;
  --col2: 111px;
  --col3: 222px;
  --col4: 333px;
  --col5: 444px;
  --col6: 555px;
  --col7: 666px;
  --col8: 777px;
  --col9: 888px;
  --col10: 999px;
  --col11: 1110px;
  --col12: 1221px;
}

/* beginstatus: onzichtbaar en naar beneden */

.home {
  padding-left: 64px;
  padding-right: 64px;
}

.projecten {
  padding-left: 64px;
  padding-right: 64px;
}

body {
  overflow-x: hidden;
  margin: 0%;
}

html {
  scroll-behavior: smooth;
}

p {
  font-size: 18px;
  color: var(--color-text1);
}

/*BEGIN HEADER*/

header {
  position: fixed;
  z-index: 100;
  padding-left: 64px;
  padding-right: 64px;
}

header img {
  width: 50px;
  height: auto;
}

header nav ul {
  list-style-type: none;
  line-height: 150%;
  padding: 0%;
  padding-top: 15%;
}

header nav ul li a {
  text-decoration: none;
  font-family: var(--body-font);
  color: var(--color-text1);
}

nav ul li a:hover {
  color: var(--color-hover1);
}

/*EIND HEADER*/

h1 {
  font-family: var(--heading-font);
  font-size: 70px;
  padding-left: var(--col4);
  padding-right: 20000px;
  line-height: 90%;
  margin-bottom: 0%;
  padding-top: 200px;
}

h2 {
  font-family: var(--heading-font);
  padding-left: var(--col2);
}

p {
  font-family: var(--body-font);
  font-weight: var(--weight-regular);
}

.design {
  padding-left: var(--col5);
  margin-top: 0%;
  margin-bottom: 0%;
}

.scribble {
  padding-left: var(--col7);
}

/*WORK SECTIE*/

/* GRID LAYOUT */
.work {
  padding-left: var(--col2);
}
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

/* CARD */
.work-card {
  display: flex;
  flex-direction: column;
}

/* IMAGE LINK */
.image-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-box1); /* of transparant */
  border-radius: 10pt;
  aspect-ratio: 2 / 0.9;
  overflow: hidden;
}

/* IMAGE */
.image-link img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
  object-fit: contain;
}

/* OVERLAY */
.overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* OVERLAY TEXT */
.overlay-text {
  font-family: var(--heading-font);
  color: var(--color-box1);
  font-size: 1.2rem;
  text-align: center;
  width: 80%;
}

/* TITLE UNDER IMAGE */
.work-title {
  margin-top: 0.75rem;
  font-family: var(--heading-font);
}

/* HOVER EFFECTS */
.image-link:hover .overlay {
  opacity: 1;
}

/*EIND WORK SECTIE*/

/*BEGIN AOBUT SECTIE*/
.scribble2 {
  padding-left: var(--col5);
  width: 5%;
  height: auto;
  margin: 0%;
}

h3 {
  font-family: var(--heading-font);
  padding-left: var(--col4);
  padding-right: var(--col4);
  line-height: 100%;
  font-size: 50px;
  margin: 0%;
  margin-top: 1%;
}

.aboutimg img {
  width: 15%;
  height: auto;
  padding-left: var(--col6);
  transform: rotate(-6deg);
  margin-top: 24px;
}

.about {
  display: flex;
  gap: 24px;
  padding-left: var(--col4);
  padding-right: var(--col4);
}

.about p {
  border-left: 1.5px solid var(--color-text1);
  padding-left: 16px;
}

.aboutsecond {
  display: flex;
  gap: 24px;
  padding-left: var(--col4);
  padding-right: var(--col4);
}

.aboutsecond p {
  border-left: 1.5px solid var(--color-text1);
  padding-left: 16px;
}

h4 {
  font-family: var(--heading-font);
  font-size: 25px;
  margin: 0%;
  margin-top: 5%;
}

.about2 {
  padding-left: var(--col5);
  display: flex;

  align-items: stretch;
  padding-top: 2em;
  gap: 24px;
}

.about2 img {
  max-width: 5%;
  height: auto;
}

.archiveh2 {
  font-size: 34px;
  margin-top: 120px;
}
.personal-archive {
  margin-left: var(--col2);
  margin-top: 1%;
  margin-bottom: 64px;

  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.personal-item {
  background-color: var(--color-box1);
  border-radius: 10px;
  padding: 2px;
  grid-column: span 2;
}

.personal-item.large {
  grid-column: span 2;
}

.personal-item.small {
  grid-column: span 2;
}

.personal-item img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/*EIND AOBUT SECTIE*/

/*BEGIN footer*/
footer {
  display: flex;
  padding-left: 64px;
  padding-right: 64px;
}

.footerimg {
  width: 100%;
  height: auto;
}

footer nav ul {
  list-style-type: none;
  line-height: 150%;
  padding: 0%;
  padding-left: var(--col2);
}

footer nav ul li a {
  text-decoration: none;
  font-family: var(--body-font);
  color: var(--color-text1);
}

footer nav ul li a:hover {
  color: var(--color-hover1);
}

footer nav ul li p:first-of-type {
  color: rgba(0, 0, 0, 0.52);
}

footer {
  border-top: 1.5px solid var(--color-text1);
}

/*RESPONSIVE*/

@media (max-width: 768px) {
  /* Algemene paddings naar col1/2 */
  h1,
  h2,
  h3,
  .archiveh2 {
    padding-left: var(--col1);
    padding-right: var(--col2);
  }

  .design {
    padding-left: var(--col2);
  }

  .work {
    padding-left: var(--col1);
  }

  .personal-archive {
    margin-left: var(--col1);
  }

  .about,
  .aboutsecond {
    padding-left: var(--col1);
    padding-right: var(--col2);
    flex-direction: column;
    margin-top: 64px;
  }

  .about p,
  .aboutsecond p {
    margin: 0%;
  }

  .aboutimg img {
    padding-left: var(--col2);
    width: 25%;
  }

  .about2 {
    padding-left: var(--col2);
    flex-direction: column;
  }

  .about2 img {
    max-width: 8%; /* eerder 5% */
    height: auto;
  }

  /* Work sectie onder elkaar */
  .work-grid {
    grid-template-columns: 1fr;
  }

  /* Archief onder elkaar */
  .personal-archive {
    grid-template-columns: repeat(2, 1fr);
  }

  .personal-item {
    grid-column: span 2;
  }

  header {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;

    background-color: white;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

  header img {
    width: 40px;
    height: auto;
  }

  header nav ul {
    display: flex;
    flex-direction: row;
    gap: 24px;

    padding: 0;
    margin: 0;
  }

  header nav ul li {
    list-style: none;
  }

  header nav ul li a {
    font-size: 14px;
    white-space: nowrap;
  }

  .scribble,
  .scribble2 {
    padding-left: 0;
  }

  .scribble,
  .scribble2 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 12%;
    height: auto;
    padding-top: 1%;
  }
  .personal-archive {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    .personal-item {
      grid-column: span 1;
    }
    .personal-archive img {
      max-height: 180px; /* kleiner voor tablet */
      padding: 6px;
    }
  }
  .overlay-text {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  /* Compacte paddings */
  h1,
  h2,
  h3,
  h4,
  .archiveh2 {
    padding-left: 2px;
    padding-right: 2px;
  }

  h1 {
    padding-top: 24px;
  }

  .projecten {
    padding-left: 46px;
    padding-right: 46px;
  }
  body,
  .design,
  .work,
  .about,
  .aboutsecond,
  .personal-archive {
    padding-left: 2px;
    padding-right: 2px;
  }

  .about article,
  .aboutsecond article {
    margin-top: 24px;
  }

  .about article p,
  .aboutsecond article p {
    font-size: 16px;
  }

  footer nav ul {
    padding-left: 2px;
  }

  .about {
    margin-top: 16px;
  }
  .scribble2 {
    margin-bottom: 16px;
  }
  /* Headings iets kleiner */
  h1 {
    font-size: 32px;
  }
  h2 {
    font-size: 26px;
  }
  h3 {
    font-size: 22px;
  }
  h4 {
    font-size: 18px;
  }
  .archiveh2 {
    font-size: 22px;
  }

  /* Work sectie onder elkaar */
  .work-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Archief: 1 kaart per rij, afbeelding volledig zichtbaar */
  .personal-archive {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .personal-item {
    grid-column: span 1;
  }

  .personal-archive img {
    width: 100%;
    height: auto; /* hele afbeelding zichtbaar */
    max-height: 200px; /* past op scherm */
    object-fit: contain; /* voorkomt afsnijden */
    padding: 4px;
  }

  /* Skills logo’s groter */
  .about2 img {
    max-width: 20%;
    height: auto;
    margin-bottom: 6px;
  }

  .about2 {
    padding-left: 0%;
    margin-bottom: 0%;
  }

  .archiveh2 {
    margin-top: 46px;
  }

  /* Header sticky */
  header {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: white;
    padding: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

  header img {
    width: 32px;
    height: auto;
  }

  header nav ul {
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding: 0;
    margin: 0;
  }

  header nav ul li {
    list-style: none;
  }

  header nav ul li a {
    font-size: 12px;
    white-space: nowrap;
  }

  /* Scribbles gecentreerd */
  .scribble,
  .scribble2 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 20%;
    height: auto;
    padding-top: 1%;
  }

  /* Footer list items onder elkaar */
  footer nav ul {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  footer {
    flex-direction: column;
  }
  .overlay-text {
    font-size: 0.9rem;
    width: 90%; /* iets meer ruimte */
  }
  .aboutimg img {
    width: 55%; /* dit is een fijne balans */
    max-width: 220px; /* voorkomt dat hij té groot wordt */
    padding-left: 0;
    margin: 16px auto; /* mooi gecentreerd */
    display: block;
    transform: rotate(-4deg); /* iets subtieler dan desktop */
  }
  .about,
  .aboutsecond {
    gap: 0px; /* eerder 24px */
  }
}

/*EIND HOME PAGE/*

/*BEGIN AVIA*/

.avia {
  background-color: var(--color-box1);
  margin-bottom: 24px;
}

.aviaheader {
  padding-top: 47px;
}
.avianav {
  padding-right: 64px;
  position: fixed;
  z-index: 100;
  right: 0;
}

.avianav nav ul {
  list-style-type: none;
  line-height: 150%;
  padding: 0%;
}

.avianav nav ul li a {
  text-decoration: none;
  font-family: var(--body-font);
  color: var(--color-text1);
}

.avianav nav ul li a:hover {
  color: var(--color-hover1);
}

.avia h1 {
  padding-left: var(--col4);
  padding-right: 0;
  line-height: 100%;
  font-size: 20pt;
  padding-top: 0%;
  padding-bottom: 16px;
}

.aviamockup video {
  width: 70%;
  height: auto;
}

.aviamockup {
  display: flex;
  justify-content: center;
}

.aviaprocesh2 {
  font-size: 30px;
  margin-bottom: 0%;
  padding-left: 0%;
}
.aviaproces {
  padding-left: var(--col3);
  padding-right: var(--col3);
  background-color: var(--color-box1);
  margin-left: -64px;
  margin-right: -64px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.aviaproces p {
  border-left: 2px solid var(--color-text1);
  padding: 0%;
  padding-left: 16px;
}

.aviaproces img {
  width: 50%;
  height: auto;
  border: 2px solid var(--color-text1);
  border-radius: 5pt;
  flex: 3;
  margin-top: 16px;
}

.aviaprototype div {
  margin-left: -64px;
  padding-left: var(--col3);
  padding-right: var(--col4);
}

.aviaprototype h2 {
  margin-left: -64px;
  padding-left: var(--col3);
  font-size: 30px;
  margin-bottom: 16px;
  padding-top: 24px;
}

.aviaprototype img {
  width: 100%;
  height: auto;
  border: 2px solid var(--color-text1);
  border-radius: 5pt;
  margin-bottom: 120px;
  margin-top: 16px;
  flex: 2;
}

.aviaprototype p {
  flex: 1;
  border-left: 2px solid var(--color-text1);
  padding: 0%;
  padding-left: 16px;
}

.aviaprototype h4 {
  padding-left: var(--col2);
}

.ui-stack {
  display: flex;
  margin-left: -64px;
  margin-right: -64px;
  margin-bottom: 120px;
  gap: 100px;
}

.ui-stack div {
  padding-left: 0%;
  padding-right: 0%;
}

.ui-stack p {
  border: none;
  font-weight: 900;
}

.uitext {
  margin-left: var(--col2);
  margin-right: var(--col2);
}

.ui-stack img {
  border: none;
  width: 100%;
  height: auto;
  margin-bottom: 0%;
}

.aviareflection h2 {
  font-size: 30px;
  margin: 0%;
  padding-left: 0;
  margin-left: var(--col2);
}
.aviareflection p {
  padding-left: 24px;
  padding-right: var(--col3);
}

.aviareflection div {
  border-left: 2px solid var(--color-text1);
  margin-left: var(--col2);
}

.aviareflection {
  background-color: var(--color-box1);
  margin-left: -64px;
  margin-right: -64px;
  padding-left: 64px;
  padding-right: 64px;
  padding-top: 16px;
  padding-bottom: 16px;
  margin-bottom: 64px;
}

/*responsiveness AVIA*/
@media (max-width: 768px) {
  /* Header + nav zoals homepage */
  .aviaheader {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: white;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .home {
    padding: 0%;
  }

  .avianav {
    position: static;
    padding-right: 0;
  }

  .avianav nav ul {
    display: flex;
    gap: 24px;
  }

  /* Mockup video groter */
  .aviamockup video {
    width: 90%;
  }

  /* Titels & content smaller */
  main .vintageh1 {
    padding-left: var(--col2);
    font-size: 16px;
    margin-left: 0%;
  }

  main .glance {
    padding-left: var(--col2);
    padding-right: var(--col2);
    margin-left: 0%;
  }

  main .glance h2 {
    font-size: 30px;
  }
  /* Proces */
  .aviaproces {
    padding-left: var(--col2);
    padding-right: var(--col2);
    margin-left: 0;
    margin-right: 0;
  }

  .aviaproces img {
    width: 100%;
  }

  /* Prototype */
  .aviaprototype div,
  .aviaprototype h2 {
    margin-left: 0;
    padding-left: var(--col2);
    padding-right: var(--col2);
  }

  .aviaprototype img {
    margin-bottom: 64px;
  }

  /* UI stack onder elkaar */
  .ui-stack {
    flex-direction: column;
    gap: 16px;
    margin: 0%;
  }

  .ui-stack img {
    margin: 0;
  }

  /* Reflectie */
  .aviareflection {
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--col2);
    padding-right: var(--col1);
  }

  .aviareflection div {
    margin-left: 0;
  }

  .aviareflection h2 {
    margin-left: 0%;
  }
}

@media (max-width: 480px) {
  /* Header + nav */
  .aviaheader {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: white;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .avianav {
    position: static;
    padding-right: 0;
  }

  .avianav nav ul {
    display: flex;
    gap: 12px; /* nav-items dichter bij elkaar */
    flex-wrap: wrap; /* kan op meerdere regels */
  }

  .avianav nav ul li a {
    font-size: 12px;
  }

  /* Main padding reset */
  .home {
    padding: 0;
  }

  /* Mockup video full-width */
  .aviamockup video {
    width: 100%;
  }

  /* Titels & content */
  main .vintageh1 {
    padding-left: 12px;
    font-size: 18px;
    margin-left: 0;
  }

  main .glance {
    padding-left: 12px;
    padding-right: 12px;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 24px;
  }

  main .glance h2 {
    font-size: 22px;
  }

  /* Glance tekst & info */
  .glance p {
    font-size: 16px;
    line-height: 1.4;
  }

  .glance .info {
    display: flex;
    flex-direction: column; /* tools/tijdlijn/rol onder elkaar */
    gap: 8px;
    margin-top: 20px;
  }

  .glance .info div p:first-child {
    font-weight: 600;
  }

  /* Proces */
  .aviaproces {
    padding-left: 12px;
    padding-right: 12px;
    margin-left: 0;
    margin-right: 0;
  }

  .aviaproces p {
    font-size: 16px;
  }
  .aviaproces h2 {
    font-size: 20px;
  }
  .aviaproces img {
    width: 100%;
  }

  /* Prototype */
  .aviaprototype div,
  .aviaprototype h2 {
    margin-left: 0;
    padding-left: 12px;
    padding-right: 12px;
  }

  .aviaprototype h2 {
    font-size: 20px;
  }

  .aviaprototype img {
    margin-bottom: 32px;
  }

  .aviaprototype p {
    padding-left: 12px;
    padding-right: 12px;
    font-size: 16px;
    line-height: 1.4;
  }

  /* UI stack onder elkaar */
  .ui-stack {
    flex-direction: column;
    gap: 16px;
    margin: 0;
  }

  .ui-stack div {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* tekst netjes links */
  }

  .ui-stack img {
    width: 100%;
    margin: 0;
  }
  .aviaprototype h4 {
    margin-left: 12px;
    padding-left: 0%;
  }

  .uitext {
    margin-left: 12px;
    margin-right: 12px;
  }

  /* Reflectie */
  .aviareflection {
    margin-left: 0;
    margin-right: 0;
    padding-left: 12px;
    padding-right: 12px;
  }

  .aviareflection h2 {
    font-size: 20px;
  }

  .aviareflection div {
    margin-left: 0;
  }

  .aviareflection h2 {
    margin-left: 0;
    font-size: 22px;
  }

  .aviareflection p {
    font-size: 16px;
    line-height: 1.4;
    padding-right: 0;
    padding-left: 12px;
  }
}

/*EIND AVIA*/

/*BEGIN VINTAGE VAULT*/
.vintagevault {
  background-color: var(--color-box1);
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.vintageh1 {
  padding-right: 0;
  line-height: 100%;
  font-size: 10pt;
  padding-top: 0%;
  padding-left: var(--col3);
  font-weight: 100;
  margin-bottom: 16px;
  color: rgba(0, 0, 0, 0.52);
}

.vintagevault .vaultmockup video {
  padding-left: var(--col6);
  width: 26%;
  height: auto;
}

.vaultmockup img {
  width: 60%;
  height: auto;
  padding-left: var(--col3);
  margin-top: 16px;
  margin-bottom: 16px;
}

.glance h2 {
  margin-left: 0%;
  padding-left: 0%;
  margin-top: 6px;
  font-size: 50px;
  line-height: 120%;
}

.glance {
  padding-left: var(--col2);
  padding-right: var(--col3);
  margin-left: var(--col2);
  margin-right: var(--col1);
  margin-bottom: 120px;
}

.glance p {
  margin-top: 0%;
  margin-bottom: 10px;
}

.glance p:first-of-type {
  font-size: 18px;
  color: var(--color-hover1);
  font-family: var(--heading-font);
}

.info {
  display: flex;
  gap: 100px;
  margin-top: 24px;
}

.info div p:nth-of-type(1) {
  border-left: 2px solid black;
  border-radius: 0.5px;
  font-size: 12px;
}

.info div p {
  padding-left: 10px;
}
.info div p:nth-of-type(2) {
  margin-bottom: 0%;
}

.vaultproces {
  margin-left: -64px;
  margin-right: -64px;
}

.vaultproces div {
  padding-left: var(--col3);
  padding-right: var(--col3);
  margin-bottom: 24px;
}

.vaultproces div:nth-of-type(1) img {
  width: 60%;
  height: auto;
  border: 2px solid var(--color-text1);
  border-radius: 10px;
  margin-top: 16px;
  margin-bottom: 16px;
}

.vaultproces h2 {
  padding-left: var(--col3);
  font-size: 30px;
  margin-bottom: 0%;
}

.vaultproces p {
  padding-left: 16px;
  border-left: 2px solid var(--color-text1);
}

.vaultproces h3 {
  font-size: 20px;
  color: var(--color-text1);
  padding: 0%;
}

.vaultproces div:nth-of-type(2) {
  background-color: var(--color-box1);
  padding-top: 16px;
  padding-bottom: 16px;
  margin-bottom: 64px;
}

.vaultproces div:nth-of-type(2) img {
  width: 70%;
  height: auto;
}

.vaultproces div:nth-of-type(3) img {
  width: 70%;
  height: auto;
  margin-bottom: 24px;
}

.vaultproces div:nth-of-type(4) {
  background-color: var(--color-box1);
  padding-top: 16px;
  padding-bottom: 16px;
}

.vaultproces div:nth-of-type(4) img {
  width: 80%;
  height: auto;
  border: 1px solid var(--color-text1);
  border-radius: 10px;
}

.phone-mockup {
  width: 240px; /* vaste, realistische telefoonbreedte */
  aspect-ratio: 9 / 19.5; /* moderne telefoonverhouding */
  background: #000;
  border: 14px solid #111; /* telefoonframe */
  border-radius: 36px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
  position: relative;
  overflow: hidden;
  margin-left: var(--col4);
}

/* Speaker / notch detail */
.phone-mockup::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 6px;
  background: #222;
  border-radius: 3px;
  z-index: 2;
}

/* Video inside phone */
.phone-mockup video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
  display: block;
}

.vaultproces .prototype-content div {
  padding-left: 0;
  padding-right: 0;
}

/* Tablet: max-width 768px */
@media (max-width: 768px) {
  /* Header + nav */
  .aviaheader {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: white;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .vintagevault .vaultmockup video {
    width: 30%;
    padding-left: 0; /* padding weghalen */
    margin: 0 auto; /* centeren */
    display: block;
  }
  .avianav {
    position: static;
    padding-right: 0;
  }

  .avianav nav ul {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
  }

  .avianav nav ul li a {
    font-size: 14px;
  }

  /* Main padding */
  .home {
    padding: 0;
  }

  /* Mockup video */
  .vaultmockup video {
    width: 60%;
  }

  /* Titel */
  .vintageh1 {
    padding-left: var(--col2);
    font-size: 20px;
    margin-left: 0;
  }

  /* Glance */
  .glance {
    padding-left: var(--col2);
    padding-right: var(--col2);
    margin-left: 0;
    margin-right: 0;
  }

  .glance h2 {
    font-size: 32px;
  }

  .glance .info {
    flex-direction: column;
    gap: 8px;
  }

  /* Vaultproces */
  .vaultproces {
    margin-left: 0;
    margin-right: 0;
  }

  .vaultproces div {
    padding-left: var(--col2);
    padding-right: var(--col2);
  }

  .vaultproces div img {
    width: 100%;
  }

  .vaultproces h2 {
    font-size: 28px;
    padding-left: var(--col2);
  }

  .vaultproces p {
    padding-left: 8px;
    border-left: 2px solid var(--color-text1);
    font-size: 16px;
    line-height: 1.4;
  }

  .vaultproces h3 {
    font-size: 18px;
  }

  /* Prototype content */
  .phone-mockup {
    margin-left: 0;
    margin-top: 16px;
    width: 180px;
  }

  /* Reflectie */
  .aviareflection {
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--col2);
    padding-right: var(--col2);
  }

  .aviareflection h2 {
    font-size: 28px;
  }

  .aviareflection p {
    font-size: 16px;
    line-height: 1.4;
    padding-left: 8px;
    padding-right: 0;
  }
}

/* Mobiel: max-width 480px */
@media (max-width: 480px) {
  /* Header + nav */
  .aviaheader {
    padding: 8px 12px;
  }

  .avianav nav ul {
    gap: 12px;
    flex-wrap: wrap;
  }

  .avianav nav ul li a {
    font-size: 12px;
  }

  /* Mockup video */
  .vaultmockup video {
    width: 100%;
  }

  /* Titel */
  .vintageh1 {
    font-size: 16px;
    padding-left: 10px;
  }

  /* Glance */
  .glance {
    padding-left: 10px;
    padding-right: 10px;
  }

  .glance h2 {
    font-size: 22px;
  }

  .glance p {
    font-size: 14px;
  }

  .glance .info {
    flex-direction: column;
    gap: 6px;
  }

  /* Vaultproces */
  .vaultproces {
    padding-left: 10px;
    padding-right: 10px;
  }
  .vaultproces h2 {
    padding-left: 0%;
  }
  .vaultproces div {
    padding: 0;
  }

  .vaultproces div img {
    width: 100%;
    height: auto;
  }

  .vaultproces h2 {
    font-size: 22px;
  }

  .vaultproces p {
    font-size: 16px;
    line-height: 1.3;
    padding-left: 6px;
  }

  .vaultproces h3 {
    font-size: 16px;
  }

  /* Prototype content */
  .phone-mockup {
    width: 140px;
    margin-left: 0;
    margin-top: 12px;
  }

  .phone-mockup {
    width: 180px; /* kleiner dan desktop/tablet */
    border: 10px solid #111; /* dunner frame */
    border-radius: 24px; /* iets kleinere radius */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); /* aangepaste schaduw */
  }

  .phone-mockup video {
    border-radius: 18px; /* aangepast naar frame radius */
  }

  /* Reflectie */
  .aviareflection {
    padding-left: 10px;
    padding-right: 10px;
  }

  .aviareflection h2 {
    font-size: 22px;
  }

  .aviareflection p {
    font-size: 16px;
    line-height: 1.3;
  }
}

/*EIND VINTAGE VAULT*/

/*BEGIN PUBLIC CITY JAZZ*/
.publicproces {
  padding-top: 16px;
  padding-bottom: 16px;
}

.publicproces div {
  padding-left: var(--col2);
  padding-right: var(--col3);
}

.publicproces h3 {
  font-size: 25px;
  padding: 0%;
  padding-top: 24px;
}

.publicproces p {
  border-left: 2px solid var(--color-text1);
  padding: 0%;
  padding-left: 16px;
}

.publicproces img {
  width: 50%;
  height: auto;
  border: 2px solid var(--color-text1);
  border-radius: 5pt;
  margin-bottom: 24px;
  margin-left: var(--col2);
}

.publicvariaties img {
  width: 70%;
  height: auto;
  margin-top: 16px;
  border: none;
  margin-left: var(--col2);
  padding-left: var(--col1);
}

.publicvariaties p {
  margin-left: var(--col2);
}

.publicvariaties h3 {
  margin-left: var(--col2);
  font-size: 20px;
  color: var(--color-text1);
}

.publicvariaties {
  margin-left: -64px;
  margin-right: -64px;
  background-color: var(--color-box1);
  padding-bottom: 16px;
}

.publicfinaldesign {
  margin-top: 24px;
  padding-left: var(--col3);
  padding-right: var(--col3);
}

.publicfinaldesign img {
  width: 90%;
  height: auto;
  margin-top: 16px;
  border: none;
  margin-left: 0%;
  padding-left: var(--col1);
  margin-bottom: 0%;
}

.publicprototypeh2 {
  font-size: 30px;
  padding-left: var(--col2);
}

.publicfinaldesign h3 {
  font-size: 20px;
  margin-top: 0%;
  color: var(--color-text1);
}

.gif video {
  width: 40%;
  height: auto;
  border: 2px solid var(--color-text1);
  border-radius: 5px;
  margin-top: 16px;
}

.gif {
  margin-bottom: 24px;
}

.gif h3 {
  color: var(--color-text1);
}

/* Tablet: max-width 768px */
@media (max-width: 768px) {
  /* Header + nav */
  .aviaheader {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: white;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .avianav {
    position: static;
    padding-right: 0;
  }
  .avianav nav ul {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
  }
  .avianav nav ul li a {
    font-size: 14px;
  }

  /* Main content padding */
  .home {
    padding: 0;
    margin-left: 0%;
    margin-right: 0%;
  }
  .glance {
    margin-bottom: 16px;
  }

  .publicproces div h2 {
    padding-left: 0%;
  }
  /* Mockup video */
  .vaultmockup video {
    width: 60%;
    display: block;
    margin: 0 auto;
    padding-left: 0;
  }

  /* Titels */
  .vintageh1 {
    font-size: 20px;
    padding-left: var(--col2);
    margin-left: 0;
  }

  /* Glance */
  .glance {
    padding-left: var(--col2);
    padding-right: var(--col2);
    margin-left: 0;
    margin-right: 0;
  }
  .glance h2 {
    font-size: 32px;
  }
  .glance .info {
    flex-direction: column;
    gap: 8px;
  }

  /* Publicproces */
  .publicproces {
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--col2);
    padding-right: var(--col2);
  }
  .publicproces div {
    padding-left: 0;
    padding-right: 0;
  }
  .publicproces img {
    width: 100%;
    margin-left: 0;
  }
  .publicproces h2,
  .publicprototypeh2 {
    font-size: 28px;
    padding-left: var(--col2);
  }
  .publicproces h3 {
    font-size: 18px;
  }
  .publicproces p {
    font-size: 16px;
    line-height: 1.4;
    padding-left: 8px;
  }

  /* Publicvariaties */
  .publicvariaties img {
    width: 100%;
    margin-left: 0;
    padding-left: 0;
  }
  .publicvariaties p,
  .publicvariaties h3 {
    margin-left: 0;
    padding-left: 0;
  }

  /* Publicfinaldesign */
  .publicfinaldesign {
    padding-left: var(--col2);
    padding-right: var(--col2);
  }
  .publicfinaldesign img {
    width: 100%;
    margin-left: 0;
    padding-left: 0;
  }
  .publicfinaldesign h3 {
    font-size: 18px;
  }

  /* GIF/video */
  .gif video {
    width: 100%;
    margin-left: 0;
  }

  /* Reflectie */
  .aviareflection {
    padding-left: var(--col2);
    padding-right: var(--col2);
    margin-left: 0;
    margin-right: 0;
  }
  .aviareflection h2 {
    font-size: 28px;
  }
  .aviareflection p {
    font-size: 16px;
    line-height: 1.4;
    padding-left: 8px;
    padding-right: 0;
  }
}

/* Mobiel: max-width 480px */
/* Mobiel: max-width 480px */
@media (max-width: 480px) {
  /* Header + nav */
  .aviaheader {
    padding: 8px 12px;
  }

  .avianav nav ul {
    gap: 12px;
    flex-wrap: wrap;
  }

  .avianav nav ul li a {
    font-size: 12px;
  }

  /* Main wrapper */

  .glance,
  .publicproces,
  .publicvariaties,
  .publicfinaldesign,
  .aviareflection {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Titel */
  .vintageh1 {
    font-size: 16px;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .glance h2,
  .publicproces h2,
  .publicprototypeh2,
  .publicproces h3,
  .publicfinaldesign h3,
  .aviareflection h2 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Glance content */
  .glance p {
    font-size: 14px;
    padding-left: 6px !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .glance .info {
    flex-direction: column;
    gap: 6px;
  }

  /* Publicproces */
  .publicproces div {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .publicproces p {
    font-size: 16px;
    line-height: 1.3;
    padding-left: 6px !important;
  }

  .publicproces img {
    width: 100% !important;
    height: auto !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  /* Publicvariaties */
  .publicvariaties img {
    width: 100% !important;
    height: auto !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  .publicvariaties p {
    margin-left: 0 !important;
  }

  /* Publicfinaldesign */
  .publicfinaldesign img {
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    margin-top: 16px;
    margin-bottom: 0 !important;
  }

  .publicfinaldesign h3 {
    font-size: 16px;
  }

  /* GIF */
  .gif video {
    width: 100% !important;
    height: auto !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  .gif h3 {
    font-size: 16px;
  }

  /* Phone mockup */
  .phone-mockup {
    width: 140px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 12px !important;
    border: 10px solid #111 !important;
    border-radius: 24px !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3) !important;
  }

  .phone-mockup video {
    width: 100% !important;
    height: 100% !important;
    border-radius: 18px !important;
  }

  /* Reflectie */
  .aviareflection p {
    font-size: 16px;
    line-height: 1.3;
    padding-left: 6px !important;
    padding-right: 0 !important;
  }
}

/*EIND PUBLIC CITY JAZZ*/

/*BEGIN BOEKENZOEKER*/

.ipad-mockup {
  width: 600px; /* iPad breedte */
  max-width: 90vw; /* responsief */
  border: 10px solid #333; /* iPad frame kleur */
  border-radius: 40px; /* afgeronde hoeken iPad */
  padding: 20px; /* ruimte tussen frame en video */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); /* schaduw voor diepte */
  background: #000; /* achtergrond voor iPad bezel */
  overflow: hidden; /* video past in ronde hoeken */
  margin: 2rem auto; /* centeren op pagina */
  position: relative;
}

/* video zelf */
.ipad-mockup video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px; /* optioneel: video past in frame */
}

.zoekerproces {
  margin-left: -64px;
  margin-right: -64px;
}

.zoekerproces h2 {
  font-size: 30px;
  margin-top: 0%;
  margin-bottom: 16px;
  padding-left: 0%;
  padding-left: var(--col3);
}

.zoekerproces h3 {
  font-size: 20px;
  color: var(--color-text1);
  margin-bottom: 16px;
  padding-left: 0%;
}

.zoekerproces img {
  width: 90%;
  height: auto;
}

.zoekerproces div:first-of-type img {
  width: 60%;
  height: auto;
}

.zoekerproces p {
  padding-left: 16px;
  border-left: 2px solid var(--color-text1);
}

.zoekerproces div {
  margin-bottom: 64px;
  padding-left: var(--col3);
  padding-right: var(--col3);
}

.zoekerproces div:nth-of-type(2) {
  background-color: var(--color-box1);
  padding-bottom: 24px;
  padding-top: 16px;
}

.zoekerproces div:nth-of-type(2) img {
  width: 90%;
  height: auto;
}

.zoekerh3 {
  margin-left: var(--col3);
}

/* Tablet / iPad: max-width 768px */
@media (max-width: 768px) {
  /* Header + nav */
  .aviaheader {
    padding: 16px 24px;
  }

  .avianav nav ul {
    gap: 20px;
    flex-wrap: wrap;
  }

  .avianav nav ul li a {
    font-size: 14px;
  }

  /* Main wrapper en sections flush */

  .glance,
  .zoekerproces,
  .publicfinaldesign,
  .publicvariaties,
  .publicproces,
  .aviareflection {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 16px !important; /* iets meer padding dan mobiel */
    padding-right: 16px !important;
    box-sizing: border-box;
  }

  /* Titel */

  /* Glance */
  .glance h2 {
    font-size: 28px;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .glance p {
    font-size: 16px;
    padding-left: 12px !important; /* lijntje naast tekst nog zichtbaar */
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .glance .info {
    flex-direction: column;
    gap: 8px;
  }

  /* Zoekproces / Publicproces */
  .zoekerproces h2,
  .publicproces h2,
  .publicprototypeh2 {
    font-size: 26px;
    padding-left: 0 !important;
  }

  .zoekerproces h3,
  .publicproces h3,
  .publicvariaties h3,
  .publicfinaldesign h3 {
    font-size: 18px;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  .zoekerproces p,
  .publicproces p,
  .publicvariaties p {
    font-size: 16px;
    line-height: 1.4;
    padding-left: 12px !important; /* lijntje zichtbaar */
    margin-left: 0 !important;
  }

  .zoekerproces img,
  .publicproces img,
  .publicfinaldesign img,
  .publicvariaties img {
    width: 100% !important;
    height: auto !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  /* iPad mockup */
  .ipad-mockup {
    width: 300px !important; /* iets groter dan mobiel */
    max-width: 90% !important;
    padding: 16px !important; /* iets meer ruimte rond video */
    border: 10px solid #333 !important; /* iets dikker frame */
    border-radius: 30px !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .ipad-mockup video {
    width: 100% !important;
    height: auto !important;
    border-radius: 20px !important;
  }

  /* Reflectie */
  .aviareflection p {
    font-size: 16px;
    line-height: 1.4;
    padding-left: 12px !important;
    padding-right: 0 !important;
  }
}

/* Mobiel: max-width 480px */
@media (max-width: 480px) {
  /* Header + nav */
  .aviaheader {
    padding: 8px 12px;
  }

  .avianav nav ul {
    gap: 12px;
    flex-wrap: wrap;
  }

  .avianav nav ul li a {
    font-size: 12px;
  }

  /* Main wrapper en sections flush */
  .glance,
  .zoekerproces,
  .publicfinaldesign,
  .aviareflection {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Titel */
  .vintageh1 {
    font-size: 16px;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Glance */
  .glance h2 {
    font-size: 22px;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .glance p {
    font-size: 14px;
    padding-left: 6px !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .glance .info {
    flex-direction: column;
    gap: 6px;
  }

  /* Zoekproces */
  .zoekerproces h2 {
    font-size: 22px;
    padding-left: 0 !important;
  }
  .zoekerproces div {
    padding: 0%;
  }
  .zoekerproces h3 {
    font-size: 16px;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  .zoekerproces p {
    font-size: 16px;
    line-height: 1.3;
    padding-left: 6px !important;
    margin-left: 0 !important;
  }

  .zoekerproces img {
    width: 100% !important;
    height: auto !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  /* iPad mockup */
  .ipad-mockup {
    width: 200px !important; /* dunner frame */
    max-width: 90% !important;
    padding: 10px !important; /* minder padding rond video */
    border: 8px solid #333 !important; /* dunner frame */
    border-radius: 20px !important; /* iets kleinere radius */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .ipad-mockup video {
    width: 100% !important;
    height: auto !important;
    border-radius: 14px !important;
  }

  /* Reflectie */
  .aviareflection p {
    font-size: 16px;
    line-height: 1.3;
    padding-left: 6px !important;
    padding-right: 0 !important;
  }
}