/* SECTION SETUP */
.founders-section {
  background-color: #000;
  position: relative;
  width: 100%;
  padding: 0;
  overflow: hidden;
  text-align: center;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Keeps image touching bottom */
}

/* RED SPLIT BAR (Layer 2) */
.red-split-bar {
      position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 35%;
    background-color: #EE2E3C;
    /* transform: translateY(-50%); */
    z-index: 1;
}

/* WATERMARK (Layer 1) */
.founders-bg-text {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18vw;
  font-family: "Sedgwick Ave Display", cursive;
  color: #EE2E3C;
  z-index: 5;
  -webkit-text-stroke: 4px #000;
  letter-spacing: -5px;
  pointer-events: none;
  white-space: nowrap;
}

/* CONTENT CONTAINER (Layer 3) */
.founders-container {
  position: relative;
  z-index: 10;
  width: 100%;
  padding: 10px 40px 30px 40px;
  height: 100%;
}

.founders-header h3 {
  font-family: 'Courier Prime', monospace;
  font-size: 48px;
  margin-top: 10px;
  text-transform: uppercase;
}

.founders-header p {
  font-family: 'Courier Prime', monospace;
  letter-spacing: 4px;
  margin-bottom: 80px;
}

/* IMAGE HOVER LOGIC */
.founders-image-wrapper {
  position: absolute;
  display: inline-block;
  width: 60%;
  left: 50%;
  transform: translateX(-50%);
  /* max-width: 850px; */
  line-height: 0;
  bottom: 0;
}

.founders-img {
  width: 80%;
  height: auto;
  filter: grayscale(100%);
  /* Force base to grayscale */
}

#founderhover {
  position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    filter: grayscale(0%);
    transition: opacity 0.5s ease;
    opacity: 0;
}

.founders-image-wrapper:hover #founderhover {
  opacity: 1;
}

/* GRAFFITI NAMES */
.caption-left,
.caption-right {
  position: absolute;
  bottom: 15%;
  font-family: "Sedgwick Ave Display", cursive;
  font-size: clamp(40px, 8vw, 80px);
  /* Fluid typography */
  color: #fff;
  z-index: 15;
  transition: 0.3s ease;
}

.caption-left {
  left: 0;
  transform: rotate(-5deg);
}

.caption-right {
  right: 0;
  transform: rotate(5deg);
}

/* --- RESPONSIVE ADJUSTMENTS --- */

@media (max-width: 1200px) {

  .founders-section {
    height: 60vh;
    padding-top: 40px;
  }

  /* Tablet */
  .red-split-bar {
    height: 50%;
    bottom: -20%;
  }

  .founders-bg-text {
    font-size: 20vw;
    top: 45%;
  }

  .caption-left {
    left: 2%;
  }

  .caption-right {
    right: 2%;
  }
}

@media (max-width: 576px) {

  /* Mobile */
  .founders-section {
    height: 50vh;
    padding-top: 40px;
  }

  .founders-bg-text {
    font-size: 20vw;
    top: 55%;
  }

  .red-split-bar {
    height: 40%;
    bottom: 0;
  }

  .founders-header h3 {
    font-size: 32px;

  }

  .founders-header {
    margin-bottom: 10px;
  }


  .caption-left,
  .caption-right {
    bottom: 20px;
    font-size: 45px;
  }

  .founders-image-wrapper {
    width: 90%;
  }
}