.case-study {
  --case-inset: var(--s10);
  --case-space: 104px;
  --case-card-gap: var(--s4);
  --case-header-copy: 540px;
  --case-card-padding: var(--s8);
  --case-stack-top: 110px;
  --case-stack-bottom: var(--s6);
  --case-card-column-gap: var(--s12);
  --case-surface-grey: #f4f4f4;
  padding: 0 var(--case-inset) var(--case-space);
  background: var(--v-white);
  scroll-margin-top: var(--s6);
}

.case-study__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--case-header-copy));
  gap: var(--case-card-gap);
  align-items: start;
  margin-bottom: var(--s14);
}

.case-study__header h2 {
  max-width: 680px;
}

.case-study__header p {
  margin: 0;
  color: var(--v-muted);
  font-size: var(--lead);
  line-height: 1.4;
}

.case-stack {
  display: grid;
  gap: var(--case-card-gap);
  isolation: isolate;
}

@media (prefers-reduced-motion: no-preference) {
  .case-stack[data-stack-ready] > .case-card:not(:last-child) {
    position: sticky;
    top: min(var(--case-stack-top), calc(100svh - var(--case-card-height) - var(--case-stack-bottom)));
  }
}

.case-card {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--case-card-column-gap);
  align-items: center;
  min-width: 0;
  padding: var(--case-card-padding);
  color: var(--v-ink);
  background: var(--case-surface-grey);
}

.case-card:focus-within {
  z-index: 1;
}

.case-card--navy,
.case-card--blue {
  color: var(--v-white);
}

.case-card--navy {
  background: var(--v-navy);
}

.case-card--blue {
  background: var(--v-blue);
}

.case-card__summary,
.case-card__actions {
  display: grid;
  align-content: start;
}

.case-card__summary {
  gap: var(--s3);
}

.case-card__mark {
  display: flex;
  gap: var(--s2);
}

.case-card__mark span {
  flex: 0 0 auto;
  background: currentColor;
}

.case-card__mark span {
  width: 10px;
  height: 10px;
}

.case-card__label,
.study-dialog__eyebrow {
  margin: 0;
  font: 400 var(--meta)/1.5 'Chivo Mono', monospace;
  text-transform: uppercase;
}

.case-card__label {
  opacity: .72;
}

.case-card h3 {
  margin: 0;
  font-size: 28px;
  font-weight: var(--title-weight);
  line-height: 1.12;
  letter-spacing: -.02em;
}

.case-card p {
  margin: 0;
}

.case-card__summary > p:last-child,
.capability-list {
  font-size: var(--body);
  line-height: 1.5;
}

.case-card__summary > p:last-child {
  color: color-mix(in srgb, currentColor 78%, transparent);
}

.capability-list {
  display: grid;
  align-self: center;
  gap: var(--s3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.capability-list li {
  display: grid;
  grid-template-columns: var(--s6) minmax(0, 1fr);
  gap: var(--s3);
  align-items: start;
}

.capability-list svg {
  width: var(--s6);
  height: var(--s6);
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: square;
  stroke-linejoin: miter;
  opacity: .86;
}

.case-card__actions {
  align-self: center;
  gap: 10px;
}

.case-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--s2) var(--s4);
  border: 0;
  border-radius: 0;
  font-size: var(--action);
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
}

.case-action--primary {
  color: var(--v-white);
  background: var(--v-blue);
}

.case-card--blue .case-action--primary {
  color: var(--v-blue);
  background: var(--v-white);
}

.case-card--navy .case-action--primary {
  color: var(--v-navy);
  background: var(--v-white);
}

.case-action--secondary {
  color: var(--v-white);
  background: var(--v-navy);
}

.case-card--navy .case-action--secondary {
  color: var(--v-white);
  background: var(--v-blue);
}

.case-card--blue .case-action--secondary {
  color: var(--v-white);
  background: var(--v-navy);
}

.case-action:hover {
  text-decoration: underline;
}

.study-dialog {
  width: min(620px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  padding: 0;
  border: 0;
  color: var(--v-ink);
  background: transparent;
}

.study-dialog::backdrop {
  background: color-mix(in srgb, var(--v-navy) 46%, transparent);
}

.study-dialog__panel {
  display: grid;
  gap: var(--s4);
  padding: var(--s6);
  background: var(--v-white);
}

.study-dialog__header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--s4);
}

.study-dialog__eyebrow {
  color: var(--v-muted);
}

.study-dialog__close {
  min-height: 44px;
  border: 1px solid var(--v-ink);
  background: transparent;
  color: var(--v-ink);
  padding: var(--s2) var(--s4);
  font-size: var(--action);
}

.study-dialog__close:hover,
.study-dialog__link:hover {
  text-decoration: underline;
}

.study-dialog h3 {
  margin: 0;
  font-size: 28px;
  font-weight: var(--title-weight);
  line-height: 1.12;
  letter-spacing: -.02em;
}

.study-dialog p,
.study-dialog li {
  font-size: var(--body);
  line-height: 1.5;
}

.study-dialog p,
.study-dialog ul {
  margin: 0;
}

.study-dialog ul {
  display: grid;
  gap: var(--s2);
  padding-left: var(--s4);
}

.study-dialog__link {
  justify-self: start;
  min-height: 44px;
  padding: var(--s2) 0;
  color: var(--v-blue);
  font-size: var(--action);
}

.quote-banner {
  --quote-min-height: 440px;
  position: relative;
  isolation: isolate;
  min-height: var(--quote-min-height);
  display: grid;
  place-items: center;
  padding: 104px var(--s10);
  overflow: hidden;
  color: var(--v-white);
  background: var(--v-navy);
  scroll-margin-top: var(--s6);
}

.quote-banner img,
.quote-banner__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.quote-banner img {
  z-index: -2;
  object-fit: cover;
}

.quote-banner__overlay {
  z-index: -1;
  background: color-mix(in srgb, var(--v-navy) 78%, transparent);
}

.quote-banner__content {
  display: grid;
  gap: var(--s6);
  width: min(1190px, 100%);
  text-align: center;
}

.quote-banner__glyph {
  width: var(--s8);
  height: var(--s8);
  justify-self: center;
  color: color-mix(in srgb, var(--v-white) 78%, transparent);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.quote-banner h2 {
  margin: 0;
  max-width: 980px;
  justify-self: center;
  font-size: 36px;
  line-height: 1.3;
  letter-spacing: -.02em;
}

.quote-banner__attribution,
.quote-banner__credit {
  margin: 0 auto;
  max-width: 660px;
}

.quote-banner__attribution {
  font-size: var(--body);
  color: color-mix(in srgb, var(--v-white) 82%, transparent);
}

.quote-banner__credit {
  font-size: var(--meta);
  line-height: 1.5;
  color: color-mix(in srgb, var(--v-white) 72%, transparent);
}

.quote-banner__credit a {
  text-underline-offset: 3px;
}

@media (max-width: 1000px) {
  .case-study {
    --case-inset: var(--s4);
    --case-space: 64px;
    --case-card-padding: var(--s8);
  }

  .case-study__header,
  .case-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .case-study__header {
    gap: var(--s6);
  }

  .case-study__header p {
    font-size: var(--body);
  }

  .case-card {
    gap: var(--s6);
  }

  .quote-banner {
    --quote-min-height: 440px;
    padding: 64px var(--s4);
  }

  .quote-banner h2 {
    font-size: 28px;
  }
}