/* ============================================
   FACULTY — Responsive
   Breakpoints: mobile < 768 / tablet 768-1024 / desktop > 1024
   ============================================ */

/* ── Tablet ── */
@media (max-width: 1024px) {
  :root {
    --content-pad-h: var(--space-md);
    --space-xxl:     6rem;
  }

  .two-col {
    gap: var(--space-md);
  }

  .section--bucket {
    min-height: 80vh;
  }
}

/* ── Mobile ── */
@media (max-width: 768px) {
  :root {
    --content-pad-h: var(--space-sm);
    --nav-height:    60px;
  }

  /* Hero */
 #hero {
  height: 100svh;
  align-items: flex-start;
  padding-top: calc(var(--nav-height) + var(--space-md));
}
.hero__bg-video {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
}
.hero__bg-mobile { 
  display: block;
  background-image: url('../assets/video/bg-portrait.mp4');
}

  /* Two-col stacks */
  .two-col {
    grid-template-columns: 1fr;
  }

  /* How We Work — image on top, copy below */
  #how-we-work .two-col {
    grid-template-areas:
      "image"
      "copy";
  }

  #how-we-work .img-cycler {
    grid-area: image;
  }

  #how-we-work .how-we-work__copy {
    grid-area: copy;
  }

  /* Contact — image on top, copy below */
  #contact .two-col {
    grid-template-areas:
      "image"
      "copy";
  }

  #contact .contact__image {
    grid-area: image;
  }

  #contact .contact__copy {
    grid-area: copy;
  }

  /* Logo marquee — slow down slightly on mobile */
  .marquee__track {
    animation-duration: 70s;
  }

  /* Bucket sections */
  .section--bucket {
    min-height: 60vh;
    padding: var(--space-lg) var(--space-sm);
  }

  /* WE ARE section */
  #we-are {
    padding: var(--space-xl) 0;
    min-height: auto;
  }
}

/* ── Large desktop ── */
@media (min-width: 1600px) {
  :root {
    --content-pad-h: 6rem;
  }
}