/*
 * Opening viewport refinement.
 *
 * This file deliberately layers on top of styles.css instead of changing it.
 * The approved editorial design remains intact and can be restored by removing
 * this stylesheet from index.html.
 *
 * The adjustment compresses only the hero's outer spacing. It does not alter
 * the typography, copy, internal alignment, product frame, or later sections.
 */

.hero {
  padding-top: clamp(4rem, 7vw, 7rem);
  padding-bottom: clamp(4.5rem, 7vw, 6.5rem);
}

@media (max-width: 980px) {
  .hero {
    padding-top: 4.75rem;
    padding-bottom: 5rem;
  }
}

@media (max-width: 680px) {
  .hero {
    padding-top: 3.5rem;
    padding-bottom: 4rem;
  }
}