/* Content Forge — Individual Project / case study page */

/* ---------- dark hero with monitor + filmstrip ---------- */

.cshero {
  height: 96.1rem;
}
.cshero__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;
}
.cshero__title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 25.9rem;
  width: 110rem;
  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;
}
.cshero__strip {
  position: absolute;
  top: 66.9rem;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 37rem;
  overflow: hidden;
  z-index: 1;
}
.cshero__strip .stripcard {
  position: absolute;
  width: 17.1rem;
  height: 30.3rem;
  border-radius: 1rem;
  overflow: hidden;
  background: #191919;
}
.cshero__strip .stripcard video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}
.cshero__monitor {
  position: absolute;
  left: 54.6rem;
  top: 42.4rem;
  width: 82.9rem;
  height: 82.4rem;
  z-index: 2;
}

/* ---------- cream body ---------- */

.csbody {
  /* override the homepage-specific fixed .zone--cream height */
  height: auto;
  color: var(--ink);
  /* top padding (not csintro margin) so the gap can't margin-collapse out of
     the cream zone and show the dark page background */
  padding-top: 36.5rem;
  padding-bottom: 2rem;
}

.csintro {
  margin: 0 auto 0;
  width: 84rem;
  font-family: 'Unbounded', sans-serif;
  font-weight: 400;
  font-size: 2.6rem;
  line-height: 1.4;
  text-align: center;
}
.csintro__hk {
  position: relative;
  white-space: nowrap;
}
.csintro__scribble {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -2.4rem;
  width: 22.2rem;
  max-width: none;
}

.csp {
  margin: 2.6rem auto 0;
  width: 84.4rem;
  font-size: 1.6rem;
  line-height: 1.4;
}
.csp--center { text-align: center; }
.csp--bold { font-weight: 700; }

.csmetrics {
  margin: 5rem auto 0;
  width: 79rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.csmetric {
  width: 27.2rem;
  height: 17.7rem;
  border-radius: 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: #fff;
  font-family: 'Unbounded', sans-serif;
  text-transform: uppercase;
  text-align: center;
}
.csmetric__num { font-weight: 700; font-size: 5.2rem; letter-spacing: -0.3rem; line-height: 1; }
.csmetric__label { font-weight: 400; font-size: 1.5rem; letter-spacing: 0.15rem; width: 20rem; }
.csmetric--red { background: var(--red); transform: rotate(-3deg); margin-top: 2.3rem; z-index: 1; }
.csmetric--black { background: var(--ink); transform: rotate(2deg); z-index: 2; }
.csmetric--purple { background: var(--purple); transform: rotate(4deg); margin-top: 2.3rem; z-index: 1; }

.csdivider {
  position: relative;
  margin: 8rem auto 0;
  width: 144rem;
  border-top: 0.1rem solid rgba(30, 29, 27, 0.3);
}
.csdivider__icon {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  width: 4.4rem;
  height: 3.2rem;
  background: var(--cream);
  border: 0.1rem solid var(--ink);
  border-radius: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--ink);
}

.cswhy {
  margin: 7rem auto 0;
  width: 84.4rem;
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 6rem;
  line-height: 1;
  letter-spacing: -0.36rem;
  text-transform: uppercase;
  text-align: center;
}

/* ---------- numbered blocks ---------- */

.csblock { position: relative; }
.cschip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: var(--lime);
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--ink);
}
.csblock__head {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.csblock__head--center { justify-content: center; }
.csblock__title {
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 1;
  letter-spacing: -0.1rem;
  text-transform: uppercase;
}
.csblock__text p { margin-top: 1.6rem; font-size: 1.6rem; line-height: 1.4; }
.csblock__text--center { text-align: center; }

.csblock--1 {
  margin: 15rem auto 0;
  width: 144rem;
}
.csblock--1 .csblock__text { width: 81.4rem; margin-top: 2rem; }
.cschecklist {
  margin-top: 2.2rem;
  width: 81.4rem;
  list-style: none;
}
.cschecklist li {
  position: relative;
  padding-left: 3.4rem;
  margin-top: 1rem;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.55;
}
.cschecklist li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  width: 2.4rem;
  height: 2.4rem;
  background: var(--ink);
  color: var(--lime);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

/* floating video card w/ badges */
.csvideo {
  position: absolute;
  width: 33.9rem;
  height: 60.3rem;
}
.csvideo--1 { right: 21rem; top: 0; }
.csvideo--2 { right: 21rem; top: -1rem; }
.csvideo__card {
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  overflow: hidden;
  background: #111;
}
.csvideo__card video { width: 100%; height: 100%; object-fit: cover; }
.csvideo__b1 { left: -8rem; top: 2rem; transform: rotate(-10.64deg); }
.csvideo__b2 { right: -7rem; top: 8rem; transform: rotate(15.14deg); }
.csvideo__b3 { left: -6rem; bottom: 4rem; transform: rotate(-17.15deg); }

.csblock--2 {
  margin: 12rem auto 0;
  width: 84.4rem;
}
.csblock--2 .csblock__text { margin-top: 2rem; }

.csplan {
  margin: 4rem auto 0;
  width: 84.4rem;
  height: 34.1rem;
  background: #3a3a38;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Unbounded', sans-serif;
  font-size: 1.8rem;
  letter-spacing: 0.18rem;
  text-transform: uppercase;
  color: rgba(239, 239, 209, 0.25);
}

.csgallery {
  position: relative;
  margin: 1.8rem auto 0;
  width: 84.4rem;
  height: 47.8rem;
  display: flex;
  justify-content: center;
  gap: 1.8rem;
  overflow: hidden;
}
.csgallery__photo {
  width: 26.9rem;
  height: 47.8rem;
  object-fit: cover;
  border-radius: 1rem;
  flex: none;
}
.csgallery__edge {
  position: absolute;
  top: 0;
  width: 10.6rem;
  height: 47.8rem;
  object-fit: cover;
  border-radius: 1rem;
  opacity: 0.5;
}
.csgallery__edge--l { left: -10.6rem; }
.csgallery__edge--r { right: -10.6rem; }

.csgallery__nav {
  margin: 1.8rem auto 0;
  width: 84.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.csnav {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.csnav img { width: 1.3rem; transform: rotate(-90deg); }
.csnav--next img { transform: rotate(90deg); }
.csdots { display: flex; gap: 0.8rem; }
.csdots span { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: rgba(30, 29, 27, 0.3); }
.csdots span.is-on { background: var(--ink); }

.cssmallbtn {
  display: table;
  margin: 3rem auto 0;
  padding: 0.8rem 2rem;
  background: var(--ink);
  color: var(--cream);
  border-radius: 9rem;
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.11rem;
  text-transform: uppercase;
}
.cssmallbtn:hover { background: #000; }
.cssmallbtn--inline { display: inline-block; margin: 2rem 0 0; background: var(--lime); color: var(--ink); }
.cssmallbtn--inline:hover { background: #9be32c; }

.csblock--3 {
  margin: 13rem auto 0;
  width: 144rem;
  padding-top: 8rem;
  border-top: 0.1rem solid rgba(30, 29, 27, 0.3);
}
.csblock--3 .csblock__text { width: 81.4rem; margin-top: 2rem; }
.csblock__text--after { margin-top: 1rem; }

/* ---------- results ---------- */

.csresults {
  margin: 10rem auto 0;
  width: 170rem;
  padding-top: 8rem;
  border-top: 0.1rem solid rgba(30, 29, 27, 0.3);
}
.csresults__title {
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 4.4rem;
  line-height: 1;
  letter-spacing: -0.2rem;
  text-transform: uppercase;
}
.csresults__row {
  margin-top: 5rem;
  display: flex;
  justify-content: center;
  gap: 5rem;
}
.csplatform { width: 47rem; }
.csplatform__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 3.2rem;
  text-transform: uppercase;
}
.csplatform__head img { width: 6.4rem; height: 6.4rem; }
.csplatform__cards {
  margin-top: 2.4rem;
  position: relative;
  height: 22.5rem;
}
.cscard {
  position: absolute;
  width: 23.5rem;
  border-radius: 1.4rem;
  padding: 2.4rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  font-family: 'Unbounded', sans-serif;
  text-transform: uppercase;
  text-align: center;
}
.cscard--red { left: 0; top: 3rem; background: var(--red); transform: rotate(-6deg); z-index: 1; height: 17.3rem; }
.cscard--dark { right: 0; top: 0; background: var(--ink); transform: rotate(4deg); z-index: 2; min-height: 19.3rem; }
.cscard__up {
  padding: 0.4rem 1rem;
  border: 0.1rem solid currentColor;
  border-radius: 9rem;
  font-size: 1.2rem;
  font-weight: 700;
}
.cscard__up--lime { color: var(--lime); }
.cscard__from { font-size: 1rem; opacity: 0.8; }
.cscard__num { font-weight: 700; font-size: 4rem; letter-spacing: -0.2rem; line-height: 1; }
.cscard__what { font-size: 1.2rem; letter-spacing: 0.1rem; }

/* ---------- testimonial ---------- */

.cstestimonial {
  position: relative;
  margin-top: 12rem;
  height: 50rem;
}
.cstestimonial__eyebrow {
  text-align: center;
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
}
.cstestimonial__ghost {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 18rem;
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 17rem;
  line-height: 0.9;
  letter-spacing: -1rem;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 0.1rem rgba(30, 29, 27, 0.18);
  z-index: 0;
}
.cstestimonial__card {
  position: relative;
  margin: 6rem auto 0;
  width: 57.4rem;
  min-height: 37.9rem;
  background: var(--lime);
  border-radius: 2rem;
  padding: 5rem;
  text-align: center;
  z-index: 1;
}
.cstestimonial__quote {
  font-family: 'Unbounded', sans-serif;
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1.3;
  color: var(--ink);
}
.cstestimonial__avatar {
  margin: 3rem auto 0;
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  background: #111;
}
.cstestimonial__name {
  margin-top: 1.4rem;
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.16rem;
  text-transform: uppercase;
  color: var(--ink);
}
.cstestimonial__role {
  margin-top: 0.4rem;
  font-family: 'Unbounded', sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.12rem;
  text-transform: uppercase;
  color: var(--ink);
}

/* ---------- creators ---------- */

.cscreators {
  margin: 8rem auto 0;
  width: 144rem;
  padding-top: 9rem;
  border-top: 0.1rem solid rgba(30, 29, 27, 0.3);
}
.cscreators__title {
  text-align: center;
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 6rem;
  letter-spacing: -0.36rem;
  text-transform: uppercase;
}
.cscreators__row {
  margin: 6rem auto 0;
  width: 88.4rem;
  display: flex;
  gap: 3.2rem;
}
.cscreator { width: 42.6rem; }
.cscreator__photo {
  width: 42.6rem;
  height: 50rem;
  object-fit: cover;
  border-radius: 1rem;
}
.cscreator__name {
  margin-top: 2rem;
  font-family: 'Unbounded', sans-serif;
  font-weight: 400;
  font-size: 2.4rem;
}
.cscreator__bio { margin-top: 2rem; font-size: 1.6rem; line-height: 1.4; }
.cscreator__socials { margin-top: 2.2rem; display: flex; gap: 1rem; }
.cscreator__socials img { width: 3.2rem; height: 3.2rem; }

/* ---------- other case studies ---------- */

.csothers {
  position: relative;
  margin-top: 12rem;
  padding-top: 12.7rem;
  border-top: 0.1rem solid rgba(30, 29, 27, 0.3);
  height: 110.2rem;
}
.csothers__title {
  margin: 0 auto 4rem;
  width: 84.5rem;
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 6rem;
  line-height: 1;
  letter-spacing: -0.36rem;
  text-transform: uppercase;
  text-align: center;
}
.csothers .tabs { position: relative; }
.csothers .carousel { margin-top: 3.6rem; }

/* ---------- mobile ---------- */

@media (max-width: 820px) {
  .cshero { height: 76rem; overflow: hidden; }
  .cshero__eyebrow { top: 13.2rem; font-size: 1.4rem; letter-spacing: 0.14rem; }
  .cshero__title { top: 16.6rem; width: 92%; font-size: 3.4rem; letter-spacing: -0.17rem; }
  .cshero__strip { top: 26rem; height: 21rem; transform: translateX(-50%) scale(0.55); transform-origin: top center; }
  .cshero__monitor { left: 50%; transform: translateX(-50%); top: 24rem; width: 50rem; height: 49.7rem; }

  .csbody { padding-top: 4rem; }
  .csintro { margin-top: 0; width: 92%; font-size: 1.9rem; }
  .csintro__scribble { width: 16rem; bottom: -1.8rem; }
  .csp { width: 88%; font-size: 1.5rem; }
  .csmetrics {
    width: auto;
    margin: 4rem 2rem 0;
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
  }
  .csmetric { width: 26rem; height: 16rem; }
  .csmetric--red, .csmetric--black, .csmetric--purple { margin-top: 0; }
  .csdivider { width: 88%; margin-top: 6rem; }
  .cswhy { width: 92%; font-size: 3.2rem; letter-spacing: -0.16rem; margin-top: 5rem; }

  .csblock--1, .csblock--2, .csblock--3 { width: auto; margin: 8rem 2rem 0; padding-top: 0; border-top: none; }
  .csblock__title { font-size: 2.4rem; }
  .csblock--1 .csblock__text, .csblock--3 .csblock__text, .cschecklist { width: auto; }
  .csblock__text p { font-size: 1.5rem; }
  .csvideo { position: relative; right: auto; top: auto; margin: 5rem auto 0; width: 28rem; height: 50rem; }
  .csvideo__b1 { left: -1.6rem; top: 1.6rem; }
  .csvideo__b2 { right: -1.6rem; top: 7rem; }
  .csvideo__b3 { left: -1.2rem; bottom: 3.4rem; }

  .csplan { width: auto; height: 17rem; font-size: 1.3rem; }
  .csgallery { width: auto; height: 30rem; gap: 1rem; }
  .csgallery__photo { width: 16.8rem; height: 30rem; }
  .csgallery__edge { display: none; }
  .csgallery__nav { width: auto; }

  .csresults { width: auto; margin: 8rem 2rem 0; padding-top: 6rem; }
  .csresults__title { font-size: 3.2rem; }
  .csresults__row { flex-direction: column; align-items: center; gap: 6rem; }
  .csplatform { width: 100%; max-width: 32rem; }
  .csplatform__head { font-size: 2.4rem; }
  .csplatform__head img { width: 4.6rem; height: 4.6rem; }
  .csplatform__cards { height: 36rem; margin-top: 2rem; }
  .cscard { left: 50%; width: 27rem; }
  .cscard--red { top: 0; transform: translateX(-50%) rotate(-3deg); height: auto; z-index: 1; }
  .cscard--dark { top: 17rem; right: auto; transform: translateX(-50%) rotate(2deg); width: 28rem; z-index: 2; }
  .cscard__num { font-size: 3.6rem; }

  .cstestimonial { height: auto; margin-top: 8rem; padding-bottom: 4rem; }
  .cstestimonial__eyebrow { font-size: 1.4rem; }
  .cstestimonial__ghost { display: none; }
  .cstestimonial__card { width: 92%; margin-top: 3rem; padding: 3.4rem 2.4rem; }
  .cstestimonial__quote { font-size: 1.9rem; }

  .cscreators { width: auto; margin: 6rem 2rem 0; padding-top: 6rem; }
  .cscreators__title { font-size: 3.4rem; letter-spacing: -0.17rem; }
  .cscreators__row { width: auto; margin-top: 4rem; flex-direction: column; gap: 5rem; }
  .cscreator, .cscreator__photo { width: 100%; }
  .cscreator__photo { height: 39rem; }

  .csothers { height: auto; padding: 8rem 0 4rem; margin-top: 8rem; }
  .csothers__title { width: 92%; font-size: 3.2rem; letter-spacing: -0.16rem; }
}

/* ---------- generated case study pages (bullet-style results) ---------- */

.cshero--simple .cshero__title { top: 30rem; }
.csresgroups {
  margin: 5rem auto 0;
  width: 144rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 5rem;
  flex-wrap: wrap;
}
.csresgroup {
  width: 44rem;
  background: #fff;
  border: 0.1rem solid rgba(30, 29, 27, 0.2);
  border-radius: 2rem;
  padding: 3.4rem 3.6rem 4rem;
}
.csresgroup h4 {
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  text-transform: uppercase;
  letter-spacing: -0.05rem;
}
.csresgroup .cschecklist { width: auto; margin-top: 1.6rem; }
.cswhy--sub {
  margin: 2.6rem auto 0;
  width: 84.4rem;
  font-size: 1.6rem;
  line-height: 1.4;
  text-align: center;
}

@media (max-width: 820px) {
  .csresgroups { width: auto; margin: 4rem 2rem 0; gap: 2rem; }
  .csresgroup { width: 100%; padding: 2.6rem 2.4rem 3rem; }
  .csresgroup h4 { font-size: 2rem; }
  .cswhy--sub { width: 92%; }
}

/* full-width case study photo */
.csphoto {
  display: block;
  margin: 8rem auto 0;
  width: 120rem;
  max-width: 92%;
  border-radius: 2rem;
}
@media (max-width: 820px) {
  .csphoto { margin-top: 5rem; border-radius: 1.2rem; }
}

/* ---------- generated case pages: layout fixes ---------- */

/* Blocks 01/03 were designed with a video on the right; when a page has no
   video card, center the text instead of leaving the right half empty. */
.csblock--1:not(:has(.csvideo)) .csblock__head,
.csblock--3:not(:has(.csvideo)) .csblock__head { justify-content: center; }
.csblock--1:not(:has(.csvideo)) .csblock__text,
.csblock--3:not(:has(.csvideo)) .csblock__text {
  width: 84.4rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

@media (max-width: 820px) {
  /* simple hero (no monitor): the desktop title offset outranked the mobile
     rule, pushing the title into the filmstrip */
  .cshero--simple { height: 54rem; }
  .cshero--simple .cshero__title { top: 16.6rem; }
  .cshero--simple .cshero__strip { top: 29rem; }

  /* long link pills (livestream/channel buttons) stay centered and wrap */
  .cssmallbtn {
    max-width: 88%;
    text-align: center;
    padding: 1rem 2.4rem;
  }
  .csblock--1:not(:has(.csvideo)) .csblock__text,
  .csblock--3:not(:has(.csvideo)) .csblock__text { width: auto; }
}