/* Case studies showcase — Figma node 4020:493 (1440 x 1111)
   The inner frame is 1223 tall and the index column 920 inside an 848 card, so
   both are clipped by their parents — the section is a cropped view. */

.cases {
  position: relative;
  height: 1111px;
  overflow: hidden;
  background: var(--lime);
}

.cases__title {
  position: absolute; top: 96px; left: 72px; width: 1296px; margin: 0;
  font-size: 45px; font-weight: 500; line-height: 49.5px;
  color: #111827; /* not --obsidian: this block uses its own greys */
  transform: translateY(var(--figma-baseline-shift));
}

.cases__intro {
  position: absolute; top: 164px; left: 72px; width: 1296px; margin: 0;
  font-size: 18px; font-weight: 400; line-height: 27px; color: #697386;
  transform: translateY(var(--figma-baseline-shift));
}

.cases__card {
  position: absolute; top: 263px; left: 72px; width: 1296px; height: 848px;
  background: var(--off-white);
  overflow: hidden;
}

/* ---- Featured study (left column) ---- */
.feature { position: absolute; top: 0; left: 0; width: 663.5px; height: 848px; }

.marker { position: absolute; display: flex; align-items: center; height: 13px; }
.marker b {
  font-family: var(--font-inter); font-size: 11px; font-weight: 600; line-height: 13.3px;
  color: var(--obsidian);
}
.marker s { width: 22px; height: 2px; background: var(--obsidian); text-decoration: none; }
.marker span {
  font-family: var(--font-inter); font-size: 8px; font-weight: 400; line-height: 9.7px;
  color: var(--muted);
}

/* The index rows label in Helvetica Neue 10; only the feature marker and the
   last row use the Inter 8 style. */
.index__row .marker span {
  font-family: var(--font-sans); font-size: 10px; line-height: 12px;
}

.index__row--alt .marker span {
  font-family: var(--font-inter); font-size: 8px; line-height: 9.7px;
}

.feature__marker { top: 22px; left: 22px; width: 619.5px; }
.feature__marker s { margin: 0 10px 0 10px; }

.feature__thumb {
  position: absolute; top: 51px; left: 22px; width: 619.5px; height: 316px;
  border-radius: 8px; background: #d9d6d1; object-fit: cover;
}

.feature__quote {
  position: absolute; top: 305.595px; left: 420px;
  display: flex; align-items: center; gap: 10px;
  width: 214px; height: 54px; padding: 10px 12px;
  border-radius: 8px; background: var(--off-white);
}

/* Two character styles inside one Figma text node: bold 15/22.5 over
   regular 12/14.4 — the node's base 24px style applies to neither line. */
.feature__quote p {
  margin: 0; width: 146px; color: #000;
  transform: translateY(var(--figma-baseline-shift));
}

.feature__quote b { display: block; font-size: 15px; font-weight: 700; line-height: 22.5px; }
.feature__quote span { display: block; font-size: 12px; font-weight: 400; line-height: 14.4px; }

.feature__quote img { width: 34px; height: 34px; }

.feature__headline {
  position: absolute; top: 383px; left: 22px; width: 619.5px; margin: 0;
  font-size: 56px; font-weight: 500; line-height: 58.8px; color: var(--obsidian);
  transform: translateY(var(--figma-baseline-shift));
}

.feature__context {
  position: absolute; top: 517px; left: 22px; width: 619.5px; margin: 0;
  font-size: 18px; font-weight: 400; line-height: 27px; color: var(--muted);
  transform: translateY(var(--figma-baseline-shift));
}

.feature__outcome {
  position: absolute; top: 668px; left: 22px; width: 619.5px; margin: 0;
  font-family: var(--font-inter);
  font-size: 11px; font-weight: 700; line-height: 14.9px; color: var(--obsidian);
  transform: translateY(var(--figma-baseline-shift-inter));
}

.feature__cta {
  position: absolute; top: 699px; left: 22px;
  width: 241px; height: 43px; padding: 12px 24px; border-radius: 24px;
  justify-content: flex-start;
}

/* ---- Study index (right column) ---- */
/* 920px was the Figma frame, taller than the 848px card so the ninth row was
   half-cut at the bottom edge. With eight rows the list ends on a rule inside
   the card: 72px of filters plus 8 rows of 106. */
.index {
  position: absolute; top: 0; left: 663.5px; width: 625.5px; height: 920px;
  box-shadow: inset 2px 0 0 #b7bcb3;
}

.index__filters { position: absolute; top: 0; left: 0; width: 625.5px; height: 72px; }

.chip {
  position: absolute; top: 16.5px;
  display: flex; align-items: center; justify-content: center;
  height: 39px; border-radius: 100px; background: var(--white);
  font-size: 15px; font-weight: 400; line-height: 22.5px; color: #181d27;
}

.chip > span { transform: translateY(var(--figma-baseline-shift)); }
.chip--on { background: var(--lime); }
.chip--1 { left: 12px;  width: 49px; }
.chip--2 { left: 69px;  width: 109px; }
.chip--3 { left: 186px; width: 109px; }
.chip--4 { left: 303px; width: 114px; }

.index__search {
  position: absolute; top: 12px; left: 565.5px;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 100px; background: var(--white);
}
.index__search img { width: 24px; height: 24px; }

.index__row {
  position: absolute; left: 0; width: 625.5px; height: 106px;
  box-shadow: inset 0 2px 0 #b7bcb3;
}

.index__row .marker { top: 46.5px; left: 18px; width: 174px; }
.index__row .marker s { margin: 0 10px; }

/* Titles are centred in the row, so two- and three-line titles sit at
   different offsets (21px and 5px) — a fixed top would only fit one of them. */
.index__row h3 {
  position: absolute; top: 0; left: 210px; width: 355.5px; height: 106px; margin: 0;
  display: flex; align-items: center;
  font-size: 28px; font-weight: 700; line-height: 32.2px; color: var(--obsidian);
  transform: translateY(var(--figma-baseline-shift));
}

.index__row img { position: absolute; top: 41px; left: 585.5px; width: 24px; height: 24px; }

/* Scroll track of the index list, rendered as designed (static). */
.cases__track { position: absolute; top: 0; left: 1289px; width: 7px; height: 848px; background: var(--white); }
.cases__track i { position: absolute; top: 0; left: 0; width: 7px; height: 387px; background: var(--sky-blue); }