/* Static case-study cards, using the existing brand type and palette. */
.WorkList { padding: 48px 40px 100px; }
.WorkList__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 36px;
}
.WorkList__heading h2 { margin: 0; font-size: clamp(36px, 4vw, 56px); font-weight: 400; line-height: 1.1; }
.WorkList__heading > a { color: inherit; font-size: 20px; text-decoration: underline; text-underline-offset: .2em; }
.WorkList__heading > a:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
.WorkList__items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.WorkList__item { min-width: 0; margin: 0; padding: 0; }
.WorkList__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--cw-mint, #ceffd6);
  background: var(--cw-blue, #4b37ff);
  border-radius: 24px;
  overflow: hidden;
  text-decoration: none;
}
.WorkList__visual {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 1 / 1.08;
  min-height: 340px;
  isolation: isolate;
}
.WorkList__image { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.WorkList__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.WorkList__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(75,55,255,.12) 15%, rgba(75,55,255,.88) 60%, rgba(75,55,255,.98) 100%);
}
.WorkList__copy { width: 100%; padding: 28px; }
.WorkList__name {
  margin: 0;
  color: inherit;
  font-family: inherit;
  font-size: clamp(36px, 3.6vw, 56px);
  font-weight: 400;
  line-height: 1.05;
  overflow-wrap: anywhere;
}
.WorkList__summary {
  margin: 16px 0 0;
  max-width: 28ch;
  font-size: 20px;
  line-height: 1.35;
  color: inherit;
}
.WorkList__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  flex: 1;
  padding: 18px 24px;
  background: var(--cw-mint, #ceffd6);
  color: var(--cw-ink, #171717);
  font-size: 16px;
  line-height: 1.3;
}
.WorkList__tags span + span::before { content: "·"; margin-right: 12px; }
.WorkList__link:hover .WorkList__name,
.WorkList__link:focus-visible .WorkList__name {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .15em;
}
.WorkList__link:focus-visible { outline: 3px solid var(--cw-mint, #ceffd6); outline-offset: 6px; }
@media (max-width: 1033px) {
  .WorkList__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .WorkList__name { font-size: 40px; }
}
@media (max-width: 600px) {
  .WorkList { padding: 32px 20px 64px; }
  .WorkList__items { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .WorkList__visual { min-height: 320px; }
  .WorkList__copy { padding: 24px; }
}