/* =============================================================================
   hero.css — Full-screen hero section (image fills entire viewport)
   ============================================================================= */

.hero-section {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  padding: 0;
  padding-top: calc(1.25rem + 72px + 1rem); /* floating squircle: top offset + header height + gap */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #00c5ff;
  box-sizing: border-box;
}

.hero-picture {
  width: 100%;
  height: 100%;
  display: contents;
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Mobile Screens */
@media (max-width: 600px) {
  .hero-section {
    padding-top: calc(0.75rem + 60px + 0.75rem); /* mobile squircle: top offset + header height + gap */
  }
}