/* FRONT should mirror CONTACT exactly */
.footer-inner { 
    background: transparent!important;
}

/* Base (desktop first) */
.front-hero {
  min-height: 100svh;
  padding-bottom: var(--footer-h-mobile);
  display: flex;
  align-items: center;
  justify-content: center;

  background-image: var(--front-bg);
  background-repeat: no-repeat;
  background-size: cover; /* safe default */
  background-position: var(--front-bg-x, 50%) var(--front-bg-y, 50%);
}

.site-footer.is-front {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
}

@media (min-width: 900px) {
  .front-hero { padding-bottom: var(--footer-h-desktop); }
}

/* Mobile */
@media (max-width: 899px) {
  html, body { 
    height: 100%; 
    overflow: hidden; 
    background-color: rgb(198, 218, 229)!important;
  }

  .front-hero {
    height: calc(100dvh - var(--footer-h-mobile));
    padding-bottom: 0;
    overflow: clip;

    /* Fill height to avoid top/bottom whitespace, then position */
    background-size: auto 108%;          /* height = 110% of hero */
    background-position: 50% 100%;       /* tweak these */
  }
}

/* Very short screens */
@media (max-width: 899px) and (max-height: 700px) {
  .front-hero {
    height: calc(100dvh - var(--footer-h-mobile));
    /* keep same sizing logic */
    background-size: auto 108%;
    background-position: 50% 100%;
  }
}