/* FULLSCREEN HERO ONLY */
html, body {
  height: 100%;
  margin: 0;
}

/* Desktop/tablet default */
.hero {
  background: url("hero-bg.png") no-repeat center center;
  background-size: cover;

  /* Mobile-safe viewport heights */
  min-height: 100vh;     /* fallback */
  height: 100svh;        /* small viewport height (iOS/Android address bar aware) */
}

/* If browser supports dynamic viewport units, use them */
@supports (height: 100dvh) {
  .hero { height: 100dvh; }
}

/* Phones & tall/narrow screens: use portrait image and keep top content visible */
@media (max-width: 768px), (max-aspect-ratio: 3/4) {
  .hero {
    background-image: url("hero-bg-mobile.png");
    background-position: center top;
  }
}

/* OPTIONAL: hide footer on mobile so hero truly fills the screen */
@media (max-width: 768px) {
  .footer { display: none; }
}

/* Footer (keep if you want it on desktop) */
.footer {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  color: #fff;
  padding: 14px 20px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 14px;
}
.footer a { color: #fff; text-decoration: none; }
.footer a:hover { text-decoration: underline; }