@charset "UTF-8";
.case-study {
  --width-narrow: 68.75rem;
  --border-radius: 0.625rem;
  --vertical-spacing: 5rem;
}
@media (width > 43.75rem) {
  .case-study {
    --vertical-spacing: 6.25rem;
  }
}

.case-study__main {
  display: contents;
}

.case-study__top {
  margin-block: var(--vertical-spacing);
  max-width: var(--width-narrow);
  margin-inline: auto;
}

.case-study__primary {
  display: grid;
  gap: 1.25rem;
}
@media (width > 81.25rem) {
  .case-study__primary {
    grid-template-columns: 3fr 1fr;
  }
}
.case-study__primary video {
  --video-player-border-radius: var(--border-radius);
}

.case-study__meta {
  background: var(--color--green);
  color: white;
  border-radius: var(--border-radius);
}

.case-study__meta-inner {
  display: grid;
  gap: 1.25rem;
  padding: 1.25rem;
}
@media (width > 43.75rem) {
  .case-study__meta-inner {
    grid-template-columns: 1fr 1fr;
    padding: 2.5rem;
  }
}
@media (width > 81.25rem) {
  .case-study__meta-inner {
    grid-template-columns: 1fr;
  }
}
.case-study__meta-inner .heading-small-caps {
  opacity: 0.8;
  margin-bottom: 0.25rem;
}

.case-study__service-list {
  grid-column: 1/-1;
}

.case-study__service-list-items {
  column-width: 15.625rem;
  column-gap: 1.25rem;
}
.case-study__service-list-items li {
  margin-bottom: 0.5rem;
}
.case-study__service-list-items li::marker {
  content: "— ";
  color: color-mix(in oklch, currentColor 50%, transparent);
}

.case-study__text-section {
  max-width: var(--width-narrow);
  margin-inline: auto;
}

.case-study__quote-section,
.case-study__text-section {
  padding-block: var(--vertical-spacing);
}

.case-study__byline {
  width: 75%;
  font-size: 1.875rem;
  font-style: italic;
}

.case-study__quote-section {
  margin-block: var(--vertical-spacing);
  background: var(--color--gray-0);
  color: white;
  width: 100cqw;
  margin-inline-start: calc(-50cqw + 50%);
}

.case-study__quote-section-inner {
  max-width: var(--width-narrow);
  margin-inline: auto;
}

.case-study__quote-quote {
  font-size: 1.875rem;
}
@media (width > 37.5rem) {
  .case-study__quote-quote {
    font-size: 2.5rem;
  }
}
.case-study__quote-quote:has(+ .case-study__quote-citation) {
  margin-bottom: 1.25rem;
}