/* Sustainability Page Body Padding */
body.sustainability-page {
  padding-top: 186px;
}

.frame {
  display: flex;
  flex-direction: column;
  max-width: 1370px;
  width: 100%;
  align-items: center;
  gap: 60px;
  padding: 0 24px 80px;
  position: relative;
  margin: 0 auto;
  margin-bottom: 40px;
}

.frame .div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.frame .frame-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.frame .div-2 {
  display: flex;
  align-items: flex-end;
  gap: 30px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.frame .img {
  position: relative;
  width: 554px;
  max-width: 554px;
  height: 570px;
  object-fit: cover;
}

.frame .div-3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  padding: 30px 0 0;
  position: relative;
  width: 736px;
  align-self: stretch;
}

.frame .div-wrapper {
  display: flex;
  flex-direction: column;
  max-width: 763px;
  width: 100%;
  align-items: center;
  gap: 98px;
  position: relative;
}

.frame .frame-wrapper-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.frame .we-want-to-build-a-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 53px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.frame .we-want-to-build-a {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--font-primary);
  font-weight: var(--font-semibold);
  color: transparent;
  font-size: 80px;
  letter-spacing: 0;
  line-height: normal;
}

.frame .text-wrapper {
  color: #010136;
}

.frame .span {
  color: #ed354f;
}

.frame .p {
  position: relative;
  align-self: stretch;
  font-family: var(--font-primary);
  font-weight: var(--font-medium);
  color: #000000;
  font-size: 24px;
  letter-spacing: 0;
  line-height: normal;
}

.frame .frame-wrapper-3 {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.frame .div-4 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
  position: relative;
  flex: 1;
}

.frame .frame-wrapper-4 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.frame .div-5 {
  display: flex;
  align-items: center;
  gap: 30px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.frame .div-6 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  width: 645px;
  flex: none;
}

.frame .div-5 > .div-4 {
  width: 645px;
  flex: none;
}

.frame .text-wrapper-2 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--font-primary);
  font-weight: var(--font-semibold);
  color: #000000;
  font-size: 48px;
  letter-spacing: 0;
  line-height: normal;
}

.frame .div-7 {
  position: relative;
  align-self: stretch;
  font-family: var(--font-primary);
  font-weight: var(--font-light);
  color: transparent;
  font-size: 24px;
  letter-spacing: 0;
  line-height: normal;
}

.frame .text-wrapper-3 {
  font-weight: var(--font-light);
  color: #000000;
  font-size: 24px;
}

.frame .text-wrapper-4 {
  font-family: var(--font-primary);
  font-weight: var(--font-semibold);
  color: var(--primary-red);
  display: inline-block;
  margin-top: 30px;
}

.frame .text-wrapper-5 {
  font-family: var(--font-primary);
  font-weight: var(--font-medium);
  color: #000000;
}

.frame .div-8 {
  position: relative;
  flex: 1;
  height: 497px;
  background-image: url(../../assets/images/sustainability/frame-1410080376.png);
  background-size: cover;
  background-position: center;
}

.frame .div-9 {
  position: relative;
  flex: 1;
  height: 497px;
  background-image: url(../../assets/images/sustainability/frame-1410080376-1.png);
  background-size: cover;
  background-position: center;
}

.frame .text-wrapper-6 {
  position: relative;
  align-self: stretch;
  font-family: var(--font-primary);
  font-weight: var(--font-semibold);
  color: var(--primary-red);
  font-size: 48px;
  letter-spacing: 0;
  line-height: normal;
}

.frame .text-wrapper-7 {
  font-family: var(--font-primary);
  font-weight: var(--font-semibold);
  color: var(--primary-red);
  display: inline-block;
  margin-top: 32px;
}

.frame .frame-wrapper-5 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.frame .div-10 {
  position: relative;
  flex: 1;
  height: 497px;
  background-image: url(../../assets/images/sustainability/frame-1410080376-2.svg);
  background-size: cover;
  background-position: center;
}

@media (max-width: 1440px) {
  .frame .we-want-to-build-a {
    font-size: 64px;
  }
}

@media (max-width: 1200px) {
  .frame .we-want-to-build-a {
    font-size: 60px;
  }

  .frame .p {
    font-size: 20px;
  }

  .frame .text-wrapper-2,
  .frame .text-wrapper-6 {
    font-size: 40px;
  }

  .frame .div-7 {
    font-size: 20px;
  }

  .frame .div-2 {
    flex-direction: column;
    align-items: flex-start;
  }

  .frame .img {
    width: 100%;
    max-width: 100%;
    height: 400px;
  }

  .frame .div-5 > .div-4,
  .frame .div-6 {
    width: 100%;
    max-width: 100%; /* Prevent overflow */
    min-width: 0; /* Allow flex shrinking */
  }

  .frame .div-5 {
    flex-direction: column;
    align-items: flex-start; /* Reset from center to avoid shift */
    width: 100%;
  }

  .frame .div-8,
  .frame .div-9,
  .frame .div-10 {
    height: auto;
    aspect-ratio: 4/3; /* Responsive scaling */
    flex: none; /* Prevent collapse in column flexbox */
    width: 100%;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .frame {
    padding: 0 24px;
    gap: 40px;
    margin-bottom: 50px;
  }

  .frame .div {
    gap: 30px;
  }

  .frame .we-want-to-build-a {
    font-size: 40px;
    font-weight: var(--font-semibold);
  }

  body.sustainability-page {
    padding-top: 85px;
  }

  .frame .p {
    font-size: 16px;
    font-weight: var(--font-medium);
  }

  /* Section Headers - Semibold 32 */
  .frame .text-wrapper-2,
  .frame .text-wrapper-6 {
    font-size: 32px;
    font-weight: var(--font-semibold);
  }

  /* Description - Light 16 */
  .frame .text-wrapper-3 {
    font-size: 16px;
    font-weight: var(--font-light);
  }

  /* Result - Semibold 16 */
  .frame .text-wrapper-4,
  .frame .text-wrapper-5,
  .frame .text-wrapper-7 {
    font-size: 16px;
    font-weight: var(--font-semibold);
  }

  .frame .div-2 {
    gap: 20px;
  }

  .frame .img {
    height: 300px;
    display: none; /* Hide hero image on mobile as requested */
  }

  .frame .div-3 {
    padding: 0;
    width: 100%;
    max-width: 353px; /* Responsive width matching spec */
    height: auto; /* Hug content */
    align-self: center; /* Center if container is wider */
  }

  .frame .div-4,
  .frame .div-4 > .div-2,
  .frame .div-6 {
    width: 100%;
    max-width: 100%;
    flex: none;
  }

  .frame .div-4 {
    gap: 30px;
  }

  .frame .div-5 {
    gap: 20px;
    width: 100%;
    max-width: 353px; /* Figma design width */
    align-self: center; /* Center within parent */
  }

  .frame .div-5 > .div-4 {
    order: -1; /* Move image to top */
  }

  .frame .div-8,
  .frame .div-9,
  .frame .div-10 {
    height: 300px;
    width: 100%; /* Ensure width is not 0 due to flex alignment */
  }
}