/* Content Forge — Projects page */

/* ---------- dark hero ---------- */

.phero {
  height: 51.1rem;
}
.phero__eyebrow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 19.9rem;
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 2.2rem;
  letter-spacing: 0.22rem;
  text-transform: uppercase;
  color: var(--cream);
  white-space: nowrap;
  z-index: 1;
}
.phero__title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 25.9rem;
  width: 124rem;
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 9.2rem;
  line-height: 0.9;
  letter-spacing: -0.55rem;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  z-index: 1;
}

/* ---------- cream work zone ---------- */

.pwork {
  height: auto;
  color: var(--ink);
  padding-bottom: 10rem;
}
.pwork__heading {
  margin: 12.7rem auto 0;
  width: 70rem;
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 6rem;
  line-height: 1;
  letter-spacing: -0.36rem;
  text-transform: uppercase;
  text-align: center;
}
.pwork__sub {
  margin: 2.3rem auto 0;
  width: 62.5rem;
  font-size: 2rem;
  line-height: 1.4;
  text-align: center;
}

.pcard-stats { display: none; }

/* staggered 5-col grid */
.pgrid {
  position: relative;
  margin: 6rem auto 0;
  width: 180rem;
  min-height: calc(var(--rows, 4) * 63.7rem + 5.2rem);
}
.pcard__logo--text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 3rem;
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 2.6rem;
  letter-spacing: -0.1rem;
  color: #fff;
  white-space: nowrap;
  transition: bottom 0.3s ease;
}
.pcard:hover .pcard__logo--text { bottom: 10rem; }
.pcard {
  position: absolute;
  display: block;
  width: 33.9rem;
  height: 60.3rem;
  border-radius: 1rem;
  overflow: hidden;
  background: #1a1a1a;
  cursor: pointer;
}
.pcard video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pcard__dim {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0.8;
  transition: opacity 0.35s;
}
.pcard__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 17.2rem;
  opacity: 0.6;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000);
}
.pcard__logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 3rem;
  width: 19.1rem;
  transition: bottom 0.35s;
}
.pcard__cta {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(9rem);
  bottom: 2.9rem;
  width: 28.2rem;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8.63rem;
  background: var(--lime);
  color: #000;
  font-family: 'Unbounded', sans-serif;
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: 0.08rem;
  text-transform: uppercase;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.pcard:hover .pcard__dim { opacity: 0.15; }
.pcard:hover .pcard__cta { transform: translateX(-50%) translateY(0); }
.pcard:hover .pcard__logo { bottom: 10rem; }

@media (max-width: 820px) {
  .phero { height: 34rem; }
  .phero__eyebrow { top: 13.2rem; font-size: 1.4rem; letter-spacing: 0.14rem; }
  .phero__title { top: 16.6rem; width: 92%; font-size: 3.4rem; letter-spacing: -0.17rem; }

  .pwork { min-height: 0; }
  .pwork__heading { margin-top: 4.6rem; width: 92%; font-size: 3.4rem; letter-spacing: -0.17rem; }
  .pwork__sub { width: 88%; font-size: 1.6rem; }

  .pgrid {
    position: static;
    width: auto;
    min-height: 0;
    margin: 3.4rem 2rem 0;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
  }
  .pcard { position: relative !important; left: 0 !important; top: 0 !important; width: 100%; height: 59.6rem; }
  .pcard__dim { opacity: 0.25; }
  .pcard__logo { bottom: 9.6rem; width: 16rem; }
  .pcard__cta { transform: translateX(-50%) translateY(0); width: 28rem; height: 4.4rem; font-size: 1.4rem; }

  .pcard-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 0.8rem 0 2.4rem;
    color: var(--ink);
  }
  .pcard-stats > div { display: flex; flex-direction: column; gap: 0.4rem; }
  .pcard-stats img { width: 1.8rem; height: 1.8rem; filter: brightness(0); }
  .pcard-stats .n {
    font-family: 'Unbounded', sans-serif;
    font-weight: 700;
    font-size: 2.4rem;
    letter-spacing: -0.12rem;
  }
  .pcard-stats .l {
    font-family: 'Unbounded', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
  }
}