body {
  margin: 0;
  padding: 0;
  background-color: #e6e6e5;
  max-width: 4000px;
  margin: 0 auto;
  font-family: San, sans-serif;
  cursor: none;
  transition: background-color 0.6s ease, color 0.6s ease;
}

body.dark-mode {
  background-color: #000;
  color: #fafafa;
}

#mode-toggle-dark {
  background: none;
  border: none;
  font-family: inherit;
  font-size: inherit;
  text-transform: uppercase;
  cursor: none;
  color: black;
  text-align: right;
}

body.dark-mode #mode-toggle-dark {
  color: #fff;
}

body.dark-mode a,
body.dark-mode h1,
body.dark-mode p,
body.dark-mode button {
  color: #fafafa;
}

/* -------- CURSOR ----------- */
/* --------------------------- */
.custom-cursor {
  position: fixed;
  width: 13px;
  height: 13px;
  background-color: blue;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1);
  z-index: 1000;
  transition: transform 0.3s ease;
}
/* -------- CURSOR ----------- */
/* --------------------------- */

/* .position {
  left: 0;
  right: 0;
  position: fixed;
  bottom: 15px;
  margin-bottom: 0.8em;
  font-family: San, sans-serif;
  font-size: 0.8rem;
  line-height: 1.2;
  z-index: 90;
} */

/*  ------------ NAV ------------ */
/* ------------------------------ */
.nav-container {
  position: fixed;
  top: 1rem;
  left: 0;
  right: 0;
  margin-bottom: 0.8em;
  font-family: San, sans-serif;
  font-size: 0.8rem;
  line-height: 1.2;
  z-index: 90;
  align-items: baseline;
}

.logo {
  grid-column: span 9;
}
#logo-animation {
  align-self: flex-start;
  width: 160px;
}
#logo-animation svg {
  transition: filter 0.5s ease;
}

.nav-container a {
  font-family: San, sans-serif;
  font-size: 0.8rem;
  text-decoration: none;
  color: #000;
  transition: 0.3s ease;
  text-transform: uppercase;
  align-content: center;
  text-align: right;
  cursor: none;
}
.nav-container a:hover {
  color: blue;
}

/*  ------------ END NAV ------------ */
/* ------------------------------ */

#office {
  margin: 13em 0 7em 0;
}
video {
  grid-column: 3 / 11;
  width: 100%;
  height: auto;
  margin-bottom: 2em;
}
#office div:last-child {
  align-items: baseline;
}

#approach video {
  display: block;
  grid-column: 5 / span 6;
  width: 100%;
  margin-bottom: 2em;
  margin-top: -1em;
}
.approach-img2 {
  display: block;
  grid-column: 4 / span 6;
  width: 100%;
  margin-bottom: 2em;
}
#approach p:last-of-type {
  margin-bottom: 5em;
}

#bio img {
  display: block;
  grid-column: 3 / span 3;
  width: 100%;
}
.about-p {
  grid-column: 3 / span 8;
  font-size: 20px;
  line-height: 1.37;
  font-family: San, sans-serif;
}

h4 {
  font-family: Sa2, sans-serif;
  text-transform: uppercase;
  text-decoration: underline;
  font-size: 0.8rem;
  grid-column: span 2;
}

.sticky {
  top: 1.1em;
  position: sticky;
  z-index: 10;
}
.sticky h4 {
  grid-column: 3 / span 2;
}

#bio {
  margin-bottom: 10em;
}

#bio div:first-of-type {
  /* Your styles here */
  margin-bottom: 2em;
}
.contact {
  display: grid;
  grid-template-columns: 1fr 13fr;
  gap: 10px;
  font-size: 0.8rem;
}
.info {
  grid-column: span 5;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* pushes top and bottom content apart */
  height: 100%;
}

@media (max-width: 600px) {
  .custom-cursor {
    display: none;
  }

  .logo {
    grid-column: span 2;
  }
  #logo-animation {
    align-self: stretch;
    width: 175px;
  }

  .approach-img2 {
    display: block;
    grid-column: 1 / span 5;
    width: 100%;
    margin-bottom: 2em;
  }
  h4 {
    grid-column: span 3;
    margin-bottom: 1em;
  }
  #approach {
    display: flex;
    flex-direction: column;
  }

  /* Target the video block (second in HTML) */
  #approach .approach-block:nth-child(2) {
    order: -1; /* Moves it to the top */
  }

  #bio img {
    display: block;
    grid-column: 1 / span 3;
  }
  .about-p {
    grid-column: 1 / span 5;
    font-size: 20px;
    font-family: San, sans-serif;
  }

  .sticky {
    top: 1.1em;
    position: static;
    z-index: 10;
  }

  .sticky h4 {
    grid-column: 1 / span 2;
    margin-bottom: 2em;
  }

  video {
    grid-column: 1 / -1;
  }

  #approach video {
    grid-column: 1 / -1;
  }
}