/* ============================================
   HOME PAGE
   ============================================ */

/* ---- Shared section media (img + video) ---- */

.section-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* ---- Hero ---- */

.section-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* Full-screen wordmark — fixed, fades on scroll */
.section-hero__wordmark {
  position: fixed;
  top: 0;
  /* mirror nav padding exactly — change this one value and nav stays in sync */
  left: 80px;
  right: 80px;
  height: 100vh;
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 10;
  will-change: opacity;
}

.section-hero__wordmark img {
  width: 100%;
  height: auto;
}

/* ---- Split sections — 100vh ---- */

.section-split {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100vh;
  overflow: hidden;
}

.section-split__col {
  position: relative;
  overflow: hidden;
  height: 100%;
}

/* No zoom on hover — static */
.section-split__col img,
.section-split__col video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* ---- Full-width section — 100vh ---- */

.section-full {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.section-full img,
.section-full video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 599px) {
  .section-hero {
    height: 70vh;
  }

  .section-split {
    grid-template-columns: 1fr 1fr;
    height: 40vh;
  }

  .section-split__col {
    position: relative;
  }

  /* Left col: anchor to right (inner) edge, right col: anchor to left (inner) edge */
  .section-split__col:first-child img,
  .section-split__col:first-child video {
    object-position: right center;
  }

  .section-split__col:last-child img,
  .section-split__col:last-child video {
    object-position: left center;
  }

  .section-full {
    height: 70vh;
  }

  .section-hero__wordmark {
    height: 70vh;
    left: 24px;
    right: 24px;
  }
}

/* ============================================
   TABLET — 768px to 1024px
   ============================================ */

@media (min-width: 600px) and (max-width: 1024px) {

  .section-hero {
    height: 60vh;
  }

  /* Split: side by side, 60vh total */
  .section-split {
    height: 60vh;
    grid-template-columns: 1fr 1fr;
  }

  .section-full {
    height: 60vh;
  }

  /* Wordmark: centered within 60vh hero, aligned with nav */
  .section-hero__wordmark {
    height: 60vh;
    left: 60px;
    right: 60px;
  }

}

/* Nav black on hero pages */
.nav--black .nav__logo img { filter: none; }
.nav--black .nav__links a { color: #000; }
.nav--black .nav__hamburger span { background: #000; }