/* ==========================================================================
   Content Forge — About page (shares scale system + shared components
   from styles.css; 1rem = 10px of the 1920 design)
   ========================================================================== */

/* ---------- hero: red TV wall ---------- */

.ahero {
  position: relative;
  height: 158.9rem;
  z-index: 1;
}
.ahero__photo {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: none;
  height: 158.9rem;
  object-fit: cover;
  object-position: top center;
}
.ahero__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: #fff;
  white-space: nowrap;
}
.ahero__front {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: none;
  height: 158.9rem;
  object-fit: cover;
  object-position: top center;
  z-index: 2;
  pointer-events: none;
}
.ahero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 24rem;
  background: linear-gradient(to bottom, rgba(17, 17, 17, 0), #111);
  z-index: 3;
  pointer-events: none;
}
.ahero__title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 25.4rem;
  width: 124rem;
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 10rem;
  line-height: 0.9;
  letter-spacing: -0.6rem;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
}

/* ---------- trusted marquee ---------- */

.atrusted {
  position: relative;
  padding-top: 4.9rem;
  z-index: 1;
}
.marquee {
  margin-top: 2.4rem;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  overflow: hidden;
  border-block: 0.1rem solid rgba(255, 255, 255, 0.13);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 40s linear infinite;
}
.marquee__cell {
  width: 22.6rem;
  height: 19.5rem;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  border-right: 0.1rem solid rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(0.5rem);
}
.marquee__cell--full img { width: 100%; height: 100%; object-fit: cover; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- our story ---------- */

.story {
  position: relative;
  height: 96rem;
  z-index: 1;
}
.story__eyebrow { position: absolute; left: 24rem; top: 18.2rem; }
.story__title {
  position: absolute;
  left: 24rem;
  top: 23.8rem;
  width: 70.7rem;
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 6rem;
  line-height: 1;
  letter-spacing: -0.36rem;
  text-transform: uppercase;
  color: var(--cream);
}
.story__body {
  position: absolute;
  left: 24rem;
  top: 56.8rem;
  width: 70.5rem;
  font-size: 1.8rem;
  line-height: 1.4;
  color: var(--cream);
}
.story__body p + p { margin-top: 2.5rem; }
.story__cube {
  position: absolute;
  left: calc(50% + 6.1rem);
  top: 16.4rem;
  width: 65.9rem;
  height: 59.5rem;
  object-fit: contain;
  pointer-events: none;
}

/* ---------- video wall ---------- */

.wall {
  position: relative;
  height: 147.9rem;
  z-index: 1;
  overflow: hidden;
}
.wall__cards {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 416.8rem;
  height: 134.2rem;
}
.wall__cards .wallcard {
  position: absolute;
  width: 33.8rem;
  height: 60.1rem;
  border-radius: 1rem;
  overflow: hidden;
  background: #1a1a1a;
}
.wall__cards .wallcard video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wall__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(17, 17, 17, 0) 30%, #111 62%);
  pointer-events: none;
}
.wall__content { position: absolute; inset: 0; }
.wall__eyebrow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 85.4rem;
}
.wall__title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 91.5rem;
  width: 106.1rem;
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 6rem;
  line-height: 1;
  letter-spacing: -0.36rem;
  text-transform: uppercase;
  text-align: center;
  color: var(--cream);
}
.wall__body {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 106.5rem;
  width: 70.5rem;
  font-size: 1.8rem;
  line-height: 1.4;
  text-align: center;
  color: var(--cream);
}
.wall__dog { left: calc(91.67% - 23.2rem); top: 108.9rem; width: 9.6rem; height: 9.6rem; transform: rotate(-20.13deg); }
.wall__camera { left: calc(8.33% + 27.2rem); top: 107.2rem; width: 9.7rem; height: 9.7rem; transform: rotate(-21.74deg); }
.wall__clapper { left: calc(50% + 8.6rem); top: 129.3rem; width: 9.6rem; height: 9.6rem; transform: rotate(18.46deg); z-index: 3; }

.wall__stats {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 121.1rem;
  width: 144rem;
  display: flex;
  gap: 2rem;
}
.wstat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.45rem;
  text-transform: uppercase;
  color: var(--cream);
}
.wstat__num {
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 6rem;
  line-height: 1;
  letter-spacing: -0.36rem;
  white-space: nowrap;
}
.wstat__label {
  font-size: 1.4rem;
  letter-spacing: 0.14rem;
  line-height: 1.4;
  text-align: center;
}

/* ---------- capabilities (cream) ---------- */

.caps {
  height: 124.3rem;
  color: var(--ink);
}
.caps__eyebrow {
  padding-top: 15rem;
  text-align: center;
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
}
.caps__title {
  margin: 2.1rem auto 0;
  width: 106.1rem;
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 6rem;
  line-height: 1;
  letter-spacing: -0.36rem;
  text-transform: uppercase;
  text-align: center;
}
.caps__grid {
  margin: 6.4rem auto 0;
  width: 180.3rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem 3.1rem;
}
.cap {
  position: relative;
  height: 33.4rem;
  border: 0.1rem solid var(--ink);
  padding: 3rem;
}
.cap__num {
  font-family: 'Unbounded', sans-serif;
  font-size: 1.4rem;
  text-transform: uppercase;
}
.cap__name {
  margin-top: 1.4rem;
  font-family: 'Unbounded', sans-serif;
  font-weight: 400;
  font-size: 3.2rem;
  line-height: 1.1;
  width: 36.8rem;
  max-width: 100%;
}
.cap__desc {
  position: absolute;
  left: 2.2rem;
  right: 3rem;
  bottom: 3rem;
  font-size: 1.6rem;
  line-height: 1.4;
}

/* ---------- ready (purple CTA + big TV) ---------- */

.ready {
  height: 143.3rem;
  z-index: 2;
}
.ready__title {
  position: relative;
  padding-top: 27.1rem;
  margin: 0 auto;
  width: 145rem;
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 12rem;
  line-height: 0.9;
  letter-spacing: -0.72rem;
  text-transform: uppercase;
  text-align: center;
  color: var(--cream);
  z-index: 1;
}
.ready__cta {
  position: relative;
  width: 20.2rem;
  margin: 5.5rem auto 0;
  z-index: 2;
}
.ready__tv {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 83.3rem;
  width: 82.9rem;
  height: 82.4rem;
  z-index: 1;
}
.ready__tv-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ready__tv-video {
  position: absolute;
  left: 14.7%;
  top: 11.3%;
  width: 69.9%;
  height: 53%;
  object-fit: cover;
  border-radius: 0.8rem;
}

/* ---------- behind the work / culture ---------- */

.culture {
  height: 138.3rem;
  overflow: hidden;
  z-index: 1;
}
.culture__eyebrow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 54.9rem;
  white-space: nowrap;
}
.culture__title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 61rem;
  width: 106.1rem;
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 6rem;
  line-height: 1;
  letter-spacing: -0.36rem;
  text-transform: uppercase;
  text-align: center;
  color: var(--cream);
}
.culture__body {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 82.8rem;
  width: 62.5rem;
  font-size: 1.8rem;
  line-height: 1.4;
  text-align: center;
  color: var(--cream);
}

.polaroid {
  position: absolute;
  background: #fff;
  box-shadow: 0 0 0 0.1rem rgba(0, 0, 0, 0.2), 0 0.2rem 0.6rem rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.polaroid img { width: 100%; height: 100%; object-fit: cover; }
.polaroid--plain { background: none; box-shadow: none; }
.polaroid__crop { object-position: top; }

.culture__p1 { left: 15.2rem; top: 77.4rem; width: 25.8rem; height: 34.4rem; transform: rotate(-19.19deg); }
.culture__p2 { left: calc(100% - 13.4rem); top: 54.1rem; width: 20.3rem; height: 27.1rem; transform: rotate(-35.45deg); }
.culture__p3 { left: calc(83.33% - 13.1rem); top: 83.4rem; width: 18.3rem; height: 26.3rem; transform: rotate(17.73deg); }
.culture__p4 { left: -15.6rem; top: 50.6rem; width: 22.4rem; height: 32.1rem; transform: rotate(27.47deg); }
.culture__p5 { left: calc(33.33% + 19rem); top: 93.3rem; width: 20.6rem; height: 27.5rem; transform: rotate(10.25deg); }
.culture__p6 { left: calc(75% - 9.7rem); top: 35rem; width: 22rem; height: 29.3rem; transform: rotate(-21.46deg); }
.culture__p7 { left: 34.7rem; top: 37.9rem; width: 19.5rem; height: 26rem; transform: rotate(7.8deg); }

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 820px) {
  /* hero */
  .ahero { height: 43rem; }
  .ahero__photo, .ahero__front { height: 43rem; }
  .ahero::after { height: 10rem; }
  .ahero__eyebrow { top: 11rem; font-size: 1.4rem; letter-spacing: 0.14rem; }
  .ahero__title { top: 14.2rem; width: 92%; font-size: 3rem; letter-spacing: -0.15rem; }

  /* marquee */
  .atrusted { padding-top: 3rem; }
  .marquee { margin-top: 1.6rem; }
  .marquee__cell { width: 9.4rem; height: 10rem; }
  .marquee__cell img { max-width: 62%; }
  .marquee__cell--full img { max-width: none; }

  /* story */
  .story { height: auto; padding: 5rem 2rem 3rem; }
  .story__eyebrow, .story__title, .story__body { position: static; width: auto; }
  .story__eyebrow { font-size: 1.4rem; }
  .story__title { margin-top: 1.6rem; font-size: 3.4rem; letter-spacing: -0.17rem; }
  .story__body { margin-top: 2.6rem; font-size: 1.6rem; }
  .story__cube { position: static; display: block; margin: 2rem auto 0; width: 30rem; height: 27rem; }

  /* video wall */
  .wall { height: 134rem; }
  .wall__cards { transform: translateX(-50%) scale(0.281); transform-origin: top center; }
  .wall__fade { background: linear-gradient(to bottom, rgba(17, 17, 17, 0) 6%, #111 28%); }
  .wall__eyebrow { top: 36rem; font-size: 1.4rem; }
  .wall__title { top: 40.6rem; width: 92%; font-size: 3.4rem; letter-spacing: -0.17rem; }
  .wall__body { top: 56.4rem; width: 88%; font-size: 1.6rem; }
  .wall__stats {
    top: 71rem;
    left: 2rem;
    right: 2rem;
    width: auto;
    transform: none;
    flex-direction: column;
    gap: 3.6rem;
  }
  .wstat__num { font-size: 3.4rem; letter-spacing: -0.17rem; }
  .wstat__label { font-size: 1.3rem; }
  .wall__camera { left: 1.6rem; top: 70.4rem; width: 6.6rem; height: 6.6rem; display: block; }
  .wall__clapper { left: auto; right: 2.6rem; top: 94.6rem; width: 6.2rem; height: 6.2rem; display: block; }
  .wall__dog { left: calc(50% + 4.2rem); top: 120.6rem; width: 6.4rem; height: 6.4rem; display: block; }

  /* capabilities */
  .caps { height: auto; padding-bottom: 6rem; }
  .caps__eyebrow { padding-top: 8rem; font-size: 1.4rem; }
  .caps__title { width: 92%; font-size: 3.4rem; letter-spacing: -0.17rem; }
  .caps__grid { width: auto; margin: 4rem 2rem 0; grid-template-columns: 1fr; gap: 2rem; }
  .cap { height: auto; min-height: 24rem; padding: 2.4rem; }
  .cap__name { font-size: 2.6rem; width: auto; }
  .cap__desc { position: static; margin-top: 4rem; font-size: 1.5rem; }

  /* ready */
  .ready { height: auto; padding-bottom: 8rem; }
  .ready__title { padding-top: 12rem; width: 94%; font-size: 4.2rem; letter-spacing: -0.25rem; }
  .ready__cta { margin-top: 3rem; }
  .ready__tv { position: relative; left: auto; transform: none; top: auto; margin: 5rem auto 0; width: 32rem; height: 31.8rem; }

  /* culture */
  .culture { height: auto; padding: 8rem 2rem 56rem; }
  .culture__eyebrow, .culture__title, .culture__body { position: static; transform: none; width: auto; text-align: center; }
  .culture__eyebrow { font-size: 1.4rem; }
  .culture__title { margin-top: 1.6rem; font-size: 3.4rem; letter-spacing: -0.17rem; }
  .culture__body { margin: 2.4rem auto 0; max-width: 33rem; font-size: 1.6rem; }
  .culture__p1 { left: 1rem; top: auto; bottom: 27rem; width: 16rem; height: 21.4rem; }
  .culture__p2 { left: auto; right: -4rem; top: auto; bottom: 36rem; width: 13rem; height: 17.4rem; }
  .culture__p3 { left: auto; right: 2rem; top: auto; bottom: 7rem; width: 12rem; height: 17.2rem; }
  .culture__p4 { display: none; }
  .culture__p5 { left: 31%; top: auto; bottom: 2rem; width: 13rem; height: 17.4rem; }
  .culture__p6 { display: none; }
  .culture__p7 { left: 2rem; top: auto; bottom: 3rem; width: 12rem; height: 16rem; }
}