/* ============================================
   FACULTY — Layout
   ============================================ */

/* ── Page wrapper ── */
.page-wrapper {
  width: 100%;
  overflow-x: hidden;
}

/* ── Content container ── */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--content-pad-h);
}

/* ── Two-column layout (How We Work / Contact) ── */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: center;
}

/* ── Section base ── */
.section {
  position: relative;
  width: 100%;
}

/* ── Full-bleed sections ── */
.section--fullbleed {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: var(--space-xl);
}

/* ── Hero ── */
#hero {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  padding-top: calc(var(--nav-height) + var(--space-lg));
}

@media (max-width: 768px) {
  #hero {
    height: 100svh;
    align-items: flex-start;
    padding-top: calc(var(--nav-height) + var(--space-md));
  }
}

.hero__bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: var(--z-base);
  /* PLACEHOLDER: swap src for real video */
}

.hero__bg-mobile {
  display: none;
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: var(--z-base);
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.2);
  z-index: var(--z-overlay);
}

.hero__content {
  position: relative;
  z-index: var(--z-content);
  padding: 0 var(--content-pad-h);
}

/* ── WE ARE section ── */
#we-are {
  background: var(--color-black);
  padding: var(--space-xxl) 0;
  min-height: 80vh;
  display: flex;
  align-items: center;
}

.we-are__inner {
  max-width: 700px;
}

.we-are__headline {
  margin-bottom: var(--space-md);
  line-height: 1.1;
}

/* ── Bucket sections (Documentary / Experiential / Studio) ── */
.section--bucket {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  padding: var(--space-xl) var(--content-pad-h);
  overflow: hidden;
}

.bucket__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: var(--z-base);
  /* Individual images set inline or via page-specific CSS */
}

/* Placeholder color fills — remove when real images are in */
/*#documentary .bucket__bg  { background-color: #CC00CC; }
#experiential .bucket__bg { background-color: #FF99DD; }
#studio .bucket__bg       { background-color: #FF00FF; }*/

.bucket__overlay {
  position: absolute;
  inset: 0;
  background: var(--color-overlay);
  z-index: var(--z-overlay);
}

.bucket__content {
  position: relative;
  z-index: var(--z-content);
  max-width: 560px;
}

.bucket__content .text-section-title {
  margin-bottom: var(--space-sm);
}

/* ── How We Work ── */
#how-we-work {
  background: var(--color-black);
  padding: var(--space-xl) 0;
}

/* ── Logo Marquee strip ── */
#logo-strip {
  background: #1a1a1a;
  padding: var(--space-md) 0;
  overflow: hidden;
}

/* ── Contact ── */
#contact {
  background: var(--color-black);
  padding: var(--space-xl) 0;
}

/* ── Mobile layout ── */
@media (max-width: 768px) {
  .two-col {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .section--fullbleed {
    min-height: 70vh;
  }

  .section--bucket {
    min-height: 70vh;
    padding: var(--space-lg) var(--space-md);
  }

  .container {
    padding: 0 var(--space-md);
  }

}