.case-study {
  background: var(--color-text-light);
  padding-block: clamp(50px, 5.5vw, 90px);
  padding-inline: 20px;
}

.case-study__inner {
  max-width: var(--content-width);
  margin-inline: auto;
  background: var(--color-accent-tint);
  border-radius: 28px;
  padding: clamp(28px, 3.5vw, 56px) clamp(24px, 4vw, 64px);
  display: flex;
  flex-direction: column;
  gap: clamp(44px, 5.2vw, 68px);
}

.case-study__text {
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 2.6vw, 34px);
}

.case-study__heading {
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 3.1vw, 40px);
}

.btn--case {
  align-self: flex-start;
  background: var(--color-accent);
  color: var(--color-text-light);
  height: clamp(32px, 2.8vw, 36px);
  padding-inline: clamp(20px, 2.2vw, 28px);
  gap: clamp(12px, 1.6vw, 20px);
  font-family: var(--font-main);
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
}

.btn--case img {
  width: 19px;
  height: auto;
  transition: transform 0.25s ease;
}

.btn--case:hover img {
  transform: translateX(4px);
}

.case-study__preview {
  width: 80%;
  margin-inline: auto;
  padding-block: 12px;
}

@media (max-width: 600px) {
  /* On mobile the 80% width leaves visible side gaps against the full-
     width text above it - widening to match brings the image's own
     edges flush with the text column instead of looking narrower. */
  .case-study__preview {
    width: 100%;
  }
}

.case-study__preview img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  /* An offset shadow with a touch of blur - still reads as a distinct
     dropped shape (not a soft ambient glow), but no longer a hard-edged
     duplicate floating apart from the image. A small soft shadow
     underneath adds a hint of lift. */
  box-shadow:
    12px 12px 32px rgba(72, 64, 64, 0.22),
    0 4px 12px rgba(72, 64, 64, 0.1);
  transition: transform 0.3s ease;
}

.case-study__preview img:hover {
  transform: scale(1.04);
}