/* Portrait: a neutral rounded card instead of the former arch silhouette. */
.portrait {
  isolation: isolate;
}

.portrait::after {
  content: "";
  position: absolute;
  right: -16px;
  bottom: -16px;
  width: 52%;
  height: 38%;
  border-radius: 26px;
  background: var(--lime);
  transform: rotate(3deg);
  z-index: -1;
}

.portrait img {
  border-radius: 30px;
  box-shadow: 0 20px 45px #07101f20;
}

/* AI case study: align content and keep the flow compact. */
.case-ai {
  display: block;
}

.case-ai > .case-number {
  margin-bottom: 14px;
}

.case-ai > .case-copy,
.case-ai > .pipeline {
  margin-left: 162px;
}

.case-ai > .case-copy {
  max-width: 920px;
}

.pipeline {
  display: flex;
  grid-column: auto;
  gap: 26px;
  margin-top: 42px;
}

.pipeline i {
  display: none;
}

.pipeline span {
  position: relative;
  flex: 1;
  max-width: 150px;
  min-width: 95px;
  padding: 14px 12px;
}

.pipeline span:not(:last-child)::after {
  content: "→";
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  width: 18px;
  transform: translateY(-50%);
  color: var(--lime);
  font: 14px "DM Mono", monospace;
}

@media (max-width: 900px) {
  .case-ai > .case-copy,
  .case-ai > .pipeline {
    margin-left: 0;
  }
}

@media (max-width: 600px) {
  .portrait::after {
    right: -10px;
    bottom: -10px;
  }

  .pipeline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .pipeline span {
    max-width: none;
    min-width: 0;
  }

  .pipeline span:not(:last-child)::after {
    display: none;
  }
}