@charset "utf-8";
/* CSS Document */
/* Default: desktop version */
.video-desktop {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: -1;
}

#bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobile stacked content is hidden by default */
.mobile-stack {
  display: none;
  flex-direction: column;
  align-items: center;
  margin-top: 60px; /* below header */
}

.mobile-stack video,
.mobile-stack img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* MOBILE: show stacked version, hide desktop video */
/* MOBILE STACKED VIDEOS & OVERLAP */
@media (max-width: 768px) {

  /* hide desktop background video (if present) */
  .video-desktop { display: none !important; }

  /* show mobile stack (make sure this container exists) */
  .mobile-stack {
    display: block;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: visible; /* allow overlap to show */
  }

  /* Top video — touches top of viewport */
  #bg-video-mobile1 {
    display: block;
    width: 100%;
    height: auto;           /* let height be natural */
    object-fit: cover;      /* fills its box nicely */
    margin: 0;
    position: relative;     /* normal flow */
    z-index: 1;
  }

  /* Second video — overlaps the first */
  #bg-video-mobile2 {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    position: relative;     /* keep in flow but allow offset */
    margin-top: -410px;      /* <-- ADJUST this to control overlap amount */
    z-index: 2;             /* sits above the first */
  }

  /* Optional: small spacing after the overlap so following content isn't on top */
  .mobile-stack + * {
    margin-top: 20px;
  }
}