.home .site {
  background: #F7CD1A;
}

.hero {
	width: 100vw
	margin-left: calc(50% - 50vw);
  height: 220vh;
  position: relative;
	background: #F7CD1A;
}

.wordmark {
  position: sticky;
  top: 50%;
  transform: translateY(-50%);

  display: flex;
  align-items: center;
  justify-content: center;
}

/* CRITICAL: prevent stacking bug */
.wordmark span,
.logo {
  display: block;
}

/* LOGO */
.logo {
  width: 600px;
  height: 600px;

  background-image: url('https://malso.org/wp-content/uploads/2026/03/IMG_1981-scaled.jpeg');
  background-size: cover;
  background-position: center;

  transform-origin: center;
  transition: transform 0.2s ease, width 0.2s ease;

  /* TEMP fallback so you SEE something */
  background-color: black;

  -webkit-mask-image: url('https://malso.org/wp-content/uploads/2026/04/Logo-malso-web1.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  mask-image: url('https://malso.org/wp-content/uploads/2026/04/malso-weblogo2.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

/* TEXT */
.left, .right {
  font-size: 200px;
  opacity: 0;
  letter-spacing: 20px;
  color: black;
  white-space: nowrap;
	
	display: flex;
	align-items: center
	line-height: 1;
}

.right {
  position: relative;
  top: 12px;
}

/* MOBILE FIX */
@media (max-width: 768px) {
  .logo {
    width: 260px;
  }

	@media (max-width: 768px) {
  .right {
    top: px;
  }
}
	
  .left, .right {
    font-size: 70px;
    letter-spacing: 5px;
  }

  .hero {
    height: 180vh;
  }
}