/* 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.368rem;
  word-spacing: 0.368rem;
  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;
}
/* That padding exists to clear the filmstrip and monitor, which overhang the
   bottom of the hero into this zone. A hero with neither has nothing to clear,
   so the padding is just an empty cream band above the first line of copy. */
.cshero:not(:has(.cshero__strip)):not(:has(.cshero__monitor)) + .csbody {
  padding-top: 8rem;
}

.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;
}
/* Hand-drawn ring around "Hong Kong". Inline SVG, not an image: the original
   scribble.png was exported on an opaque #111 background, so on this cream
   section it painted a black block straight over the word it was circling. */
.csintro__scribble {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -2.4rem;
  width: 22.2rem;
  height: auto;
  max-width: none;
  pointer-events: none;
  overflow: visible;
}

.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; word-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.3rem;
  word-spacing: 0.3rem;
  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;
  word-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; }
/* Floating card that also opens the full cut in the lightbox. Keeps the
   card's own sizing — do not reuse .csreel here, that rule is 120rem wide. */
.csvideo__card--play { position: relative; cursor: pointer; }
.csvideo__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 8rem;
  height: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.2rem solid var(--cream);
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(0.4rem);
  transition: transform 0.25s, background 0.25s;
  pointer-events: none;
  z-index: 2;
}
.csvideo__play img { width: 2.4rem; }
.csvideo__card--play:hover .csvideo__play {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(0, 0, 0, 0.45);
}
.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;
  word-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; word-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: -0.595rem;
  word-spacing: 0.595rem;
  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;
  overflow: hidden;
}
/* the dark circle stays the fallback for testimonials with no headshot yet */
.cstestimonial__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.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.3rem;
  word-spacing: 0.3rem;
  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 ---------- */

/* The height is fixed on purpose: .carousel is 72rem for a 9:16 card but only
   46rem for a 16:9 one, so a section that hugged its content would reflow the
   page every time someone arrowed onto a landscape case. It is sized to the
   tall state, which is why a wide card leaves space underneath.
   The lead-in above the title is the part that was genuinely spare. Trimming
   padding-top has to come off the height by the same amount, or the space just
   moves to the bottom and the narrow carousel stops sitting flush. */
.csothers {
  position: relative;
  margin-top: 8rem;
  padding-top: 8.5rem;
  border-top: 0.1rem solid rgba(30, 29, 27, 0.3);
  height: 106rem;
}
.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.3rem;
  word-spacing: 0.3rem;
  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; word-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; }
  /* restate at the desktop rule's specificity so it does not win down here */
  .cshero:not(:has(.cshero__strip)):not(:has(.cshero__monitor)) + .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; word-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; word-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; word-spacing: 0.16rem; }
}

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

.cshero--simple .cshero__title { top: 30rem; }
/* The full-height dark band exists to hold the filmstrip. A hero that drops the
   strip has nothing below the title, so it collapses to fit the title instead
   of leaving half a screen of empty black. */
.cshero--simple:not(:has(.cshero__strip)) { height: 62rem; }
.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%; }
}

/* behind-the-scenes clip grid */
.csclips {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3rem;
  margin: 9rem auto 0;
  width: 144rem;
  max-width: 92%;
}
.csclip {
  width: 25.6rem;
  height: 45.5rem;
  border-radius: 1rem;
  overflow: hidden;
  background: #111;
}
.csclip video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 820px) {
  .csclips { gap: 1.6rem; margin-top: 5rem; }
  .csclip { width: 16rem; height: 28.4rem; }
}

/* 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; }
}
/* Poster + play button that opens the shared lightbox (window.openPlayer),
   the same square-bordered play control the home page uses. */
.csreel {
  position: relative;
  display: block;
  margin: 8rem auto 0;
  width: 120rem;
  max-width: 92%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
}
/* Vertical posters (9:16 reels) would be a huge upscale at the full width. */
.csreel--tall { width: 46rem; }
.csreel__poster {
  display: block;
  width: 100%;
  border-radius: 2rem;
}
.csreel__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 11rem;
  height: 11rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.2rem solid var(--cream);
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(0.4rem);
  transition: transform 0.25s, background 0.25s;
  pointer-events: none;
}
.csreel__play img { width: 3.2rem; }
.csreel:hover .csreel__play,
.csreel:focus-visible .csreel__play {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(0, 0, 0, 0.45);
}
.csreel__label {
  display: block;
  margin: 1.6rem 0 0;
  font-size: 1.4rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.4;
  color: rgba(17, 17, 17, 0.55);
}
@media (max-width: 820px) {
  .csreel { margin-top: 5rem; }
  .csreel__poster { border-radius: 1.2rem; }
  .csreel__play { width: 7rem; height: 7rem; }
  .csreel__play img { width: 2.2rem; }
}

/* Several 9:16 reels side by side. Each still opens the lightbox on click;
   the row just stops them stacking down the page one per screen. */
.csreels {
  margin: 8rem auto 0;
  width: 120rem;
  max-width: 92%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem;
}
.csreels .csreel { margin: 0; width: 34rem; }
.csreels .csreel__play { width: 8rem; height: 8rem; }
.csreels .csreel__play img { width: 2.4rem; }
.csreels .csreel__label { margin-top: 1.2rem; }
.csreelitem { display: flex; flex-direction: column; align-items: center; }
@media (max-width: 820px) {
  .csreels { margin-top: 5rem; gap: 2rem; }
  .csreels .csreel { width: 28rem; }
}

/* A row of social screenshots — tall, uneven heights, so align to the top
   and let them wrap to a stack on narrow screens. */
.csshots {
  margin: 8rem auto 0;
  width: 120rem;
  max-width: 92%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 3rem;
}
.csshot {
  display: block;
  width: 42rem;
  max-width: 100%;
  height: auto;
  border-radius: 1.4rem;
  border: 1px solid rgba(17, 17, 17, .12);
  box-shadow: 0 1.2rem 4rem rgba(17, 17, 17, .08);
  background: #fff;
}
@media (max-width: 820px) {
  .csshots { margin-top: 5rem; gap: 2rem; }
}

/* Screenshots (analytics, posts) sit on cream, so they need an edge and a
   size that isn't the full 120rem photo width. */
.csphoto--mid  { width: 78rem; }
.csphoto--tall { width: 46rem; }
.csphoto--shot {
  border: 1px solid rgba(17, 17, 17, .12);
  box-shadow: 0 1.2rem 4rem rgba(17, 17, 17, .08);
  background: #fff;
}

/* ---------- 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. */
/* Blocks with a floating video card must be at least as tall as the card,
   or it bleeds into the next section */
.csblock--1:has(.csvideo),
.csblock--3:has(.csvideo) { min-height: 64rem; }

.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;
}
/* The checklist has a fixed width and no auto margins, so once the text above
   it centres, the list stays pinned to the left of the block and reads as a
   different column. Match the text width and centre the block — but leave the
   items left-aligned, since centred ticked bullets look broken. */
.csblock--1:not(:has(.csvideo)) .cschecklist,
.csblock--3:not(:has(.csvideo)) .cschecklist {
  width: 84.4rem;
  margin-left: auto;
  margin-right: auto;
}

@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; }
  .cshero--simple:not(:has(.cshero__strip)) { height: 32rem; }

  /* long link pills (livestream/channel buttons) stay centered and wrap */
  .cssmallbtn {
    max-width: 88%;
    text-align: center;
    padding: 1rem 2.4rem;
    /* these are real content links (channel + episode); 1.1rem lands at 11px */
    font-size: 1.3rem;
  }
  /* caption above each results figure — 1rem is 10px on a phone */
  .cscard__from { font-size: 1.2rem; }
  .csblock--1:not(:has(.csvideo)) .csblock__text,
  .csblock--3:not(:has(.csvideo)) .csblock__text,
  .csblock--1:not(:has(.csvideo)) .cschecklist,
  .csblock--3:not(:has(.csvideo)) .cschecklist { width: auto; }
}

/* ---------- Flyover: monthly views chart ---------- */
/* One measure on one axis. The two purple steps split the before and after
   periods; validated against the cream surface for CVD separation and contrast.
   Bars are capped at 24px so the band's leftover reads as air, and only the two
   period averages carry labels: a number on all six bars goes unread. */

.fchart {
  width: 81.4rem;
  max-width: 100%;
  margin: 5.2rem auto 0;
}
.fchart__cap {
  font-family: 'Unbounded', sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.06rem;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
}
.fchart__legend {
  display: flex;
  justify-content: center;
  gap: 2.4rem;
  margin-top: 1.4rem;
}
.fchart__key {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 1.4rem;
  color: rgba(30, 29, 27, 0.72);
}
.fchart__sw { width: 1.2rem; height: 1.2rem; border-radius: 0.3rem; }
.fchart__sw--before { background: #8f6ae8; }
.fchart__sw--after  { background: #581ee1; }

.fchart__svg { display: block; width: 100%; height: auto; margin-top: 1.2rem; overflow: visible; }
/* Hairline, solid, one step off the surface: chrome must stay recessive. */
.fchart__axis { stroke: rgba(30, 29, 27, 0.28); stroke-width: 1; }
.fchart__ref  { stroke: #8f6ae8; stroke-width: 2; stroke-linecap: round; }
.fchart__ref--after { stroke: #581ee1; }
.fchart__reflab {
  font-family: 'Unbounded', sans-serif;
  font-weight: 600;
  font-size: 15px;
  fill: #8f6ae8;
}
.fchart__reflab--after { fill: #581ee1; }
.fchart__month {
  font-family: 'Unbounded', sans-serif;
  font-weight: 600;
  font-size: 15px;
  fill: rgba(30, 29, 27, 0.82);
  text-anchor: middle;
}
.fchart__eps {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  fill: rgba(30, 29, 27, 0.5);
  text-anchor: middle;
}
.fchart__bar path { transition: opacity 0.2s; }
.fchart__svg:hover .fchart__bar path { opacity: 0.45; }
.fchart__bar:hover path { opacity: 1; }

/* Table view: the same numbers, reachable by screen reader and by anyone who
   wants the exact figures rather than the shape. */
.fchart__table {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 820px) {
  .fchart { width: auto; margin: 3.6rem 0 0; }
  .fchart__cap { font-size: 1.3rem; }
  .fchart__legend { gap: 1.6rem; margin-top: 1rem; }
  .fchart__key { font-size: 1.2rem; }
  /* The reference labels collide with the bars once the chart is phone-width,
     so scale the SVG type up relative to the viewBox to keep it legible. */
  .fchart__reflab { font-size: 19px; }
  .fchart__month { font-size: 19px; }
  .fchart__eps { font-size: 16px; }
  .fchart__svg:hover .fchart__bar path { opacity: 1; }
}

/* ---------- Down To Health: library split ---------- */
/* Part-to-whole, so stacked. Deliberately a throughput claim and not a
   performance one: the two periods average a similar number of views per
   short, so the story is how much of the library we shipped, not a lift. */

.dchart, .ipipe {
  width: 81.4rem;
  max-width: 100%;
  margin: 5.2rem auto 0;
}
.dchart__cap, .ipipe__cap {
  font-family: 'Unbounded', sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.06rem;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
}
.dchart__legend { display: flex; justify-content: center; gap: 2.4rem; margin-top: 1.4rem; }
.dchart__key { display: inline-flex; align-items: center; gap: 0.7rem; font-size: 1.4rem; color: rgba(30,29,27,0.72); }
.dchart__sw { width: 1.2rem; height: 1.2rem; border-radius: 0.3rem; }
.dchart__sw--before { background: #8f6ae8; }
.dchart__sw--after  { background: #581ee1; }
.dchart__svg, .ipipe__svg { display: block; width: 100%; height: auto; margin-top: 1.4rem; overflow: visible; }
.dchart__row {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  fill: rgba(30,29,27,0.72);
  text-anchor: end;
}
.dchart__val {
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 15px;
  fill: #efefd1;
  text-anchor: middle;
}
.dchart__seg path { transition: opacity 0.2s; }
.dchart__svg:hover .dchart__seg path { opacity: 0.5; }
.dchart__seg:hover path { opacity: 1; }
.dchart__note {
  margin-top: 1.6rem;
  font-size: 1.4rem;
  line-height: 1.5;
  color: rgba(30,29,27,0.6);
  text-align: center;
}
.dchart__table {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Iris Finance: the pipeline ---------- */
/* A process case study, so the visual is a process, not a chart. Built in HTML
   rather than SVG specifically so it can reflow: at phone width the row becomes
   a stack instead of squeezing four boxes into 63px each and clipping the
   longest label. */

.ipipe__steps {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 1.8rem 0 0;
  padding: 0;
  list-style: none;
}
.ipipe__step {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.8rem 1rem;
  border: 0.15rem solid rgba(30, 29, 27, 0.28);
  border-radius: 1rem;
  text-align: center;
}
/* The connector is a gap plus a chevron, so nothing has to be positioned. */
.ipipe__step:not(:last-child) { margin-right: 3.2rem; position: relative; }
.ipipe__step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -2.1rem;
  width: 1rem;
  height: 1rem;
  border-top: 0.15rem solid rgba(30, 29, 27, 0.32);
  border-right: 0.15rem solid rgba(30, 29, 27, 0.32);
  transform: translateY(-50%) rotate(45deg);
}
.ipipe__num {
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--purple);
}
.ipipe__label {
  font-family: 'Unbounded', sans-serif;
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 1.25;
  color: var(--ink);
}
.ipipe__out {
  margin-top: 1.8rem;
  font-size: 1.5rem;
  color: rgba(30, 29, 27, 0.55);
  text-align: center;
}

@media (max-width: 820px) {
  .dchart, .ipipe { width: auto; margin: 3.6rem 0 0; }
  .dchart__cap, .ipipe__cap { font-size: 1.3rem; }
  .dchart__legend { gap: 1.4rem; margin-top: 1rem; }
  .dchart__key { font-size: 1.2rem; }
  .dchart__row { font-size: 19px; }
  .dchart__val { font-size: 19px; }
  .dchart__svg:hover .dchart__seg path { opacity: 1; }
  .ipipe__steps { flex-direction: column; }
  .ipipe__step { padding: 1.4rem 1.2rem; }
  .ipipe__step:not(:last-child) { margin-right: 0; margin-bottom: 2.8rem; }
  /* Chevron turns to point down the stack. */
  .ipipe__step:not(:last-child)::after {
    top: auto; bottom: -1.9rem; right: 50%;
    transform: translateX(50%) rotate(135deg);
  }
  .ipipe__label { font-size: 1.6rem; }
}