/* ============================================================================
 * Hero logo — used by the front-page placeholder above the H1.
 * Lightweight, responsive, scales down on small screens while preserving ratio.
 * ========================================================================== */

.hero-logo {
  display: block;
  width: 180px;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  margin-bottom: var(--wb-space-5); /* 24px — matches token system */
}

@media (max-width: 640px) {
  .hero-logo {
    width: 140px;
    margin-bottom: var(--wb-space-4); /* 16px on small screens */
  }
}