/* Extracted from assets/modal.css — INDEX SHELL (hero/tagline/about-mobile) — 10B cleanup */

/* Single-line scaling for the top slogan on very small screens */
.tagline {
  white-space: nowrap;
  /* never wrap */
}

@media (max-width: 420px) {
  .tagline {
    font-size: clamp(12px, 4.2vw, 18px);
    /* scale down only on tiny widths */
    letter-spacing: 0.02em;
    /* a touch tighter so it fits */
  }
}

@media (max-width: 360px) {
  .tagline {
    font-size: clamp(15px, 4.8vw, 20px);
  }
}

/* Optional: button visuals (keep your existing styles if you have them) */
.menu-btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 8px;
}

.menu-btn .menu-icon {
  display: inline-block;
  width: 24px;
  height: 2px;
  background: #eaeaea;
  position: relative;
}

.menu-btn .menu-icon::before,
.menu-btn .menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #eaeaea;
}

.menu-btn .menu-icon::before {
  top: -7px;
}

.menu-btn .menu-icon::after {
  top: 7px;
}

/* Mobile About image: default hidden */
.about-mobile {
  display: none;
}

.about-mobile img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
}

/* Phone breakpoint: hide carousel, show static image */
@media (max-width: 768px) {
  #hero .carousel.hero {
    display: none !important;
  }

  #hero .about-mobile {
    display: block !important;
    margin: 0 auto;
  }
}