/* Full-colour cover artwork, shared by the three case-study pages. */
.case-page--fintellect { --cover-backdrop: #5e4ac6; }
.project-case--branchline { --cover-backdrop: #557792; }
.project-case--hypershadow { --cover-backdrop: #4fd74c; }

.case-page .case-hero__media--hologram {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cover-backdrop);
}
.case-page .case-hero__media--hologram::after { content: none; }
.case-page .case-hero__media--hologram img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 1;
  filter: none;
  transform: none;
}
.case-page .case-hero__media--square img {
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: center 65%;
}
.case-page .case-hero:has(.case-hero__media--square) { min-height: 0; }
.case-page .case-hero__media--square { aspect-ratio: 1; }
/* One shared desktop header: give the cover room without pushing the facts away. */
@media (min-width: 768px) {
  .case-page .case-hero:has(.case-hero__media--square) {
    height: clamp(490px, calc(100svh - 190px), 620px);
    min-height: 0;
  }
  .case-page .case-hero .case-hero__copy { min-height: 0; }
  .case-page .case-hero .case-hero__media--square {
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
  }
}
.case-page .more-case img,
.case-page .more-case:hover img {
  aspect-ratio: 16 / 9;
  object-fit: contain;
  filter: none;
  transform: none;
}

/* Cover images stay unobstructed; project names live in the linked text. */
.project-art { position: relative; isolation: isolate; }

/* Related cases use the same transparent object renders as the main gallery. */
.case-page .more-case { isolation: isolate; background: #000; }
.case-page .more-case--fintellect { --related-light: 94 74 198; }
.case-page .more-case--branchline { --related-light: 85 119 146; }
.case-page .more-case--hypershadow { --related-light: 47 119 89; }
.case-page .more-case::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 50% 58%, rgb(var(--related-light) / .32), transparent 76%); opacity: 0; transition: opacity .4s ease; }
.case-page .more-case:is(:hover,:focus-visible)::before { opacity: 1; }
.case-page .more-case__media { position: relative; width: 100%; aspect-ratio: 8 / 5; max-height: 380px; }
.case-page .more-case__media img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; filter: none; transform: none; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.case-page .more-case:is(:hover,:focus-visible) .more-case__media img { transform: translateY(-4px) scale(1.035); }
.case-page .more-case__copy { padding-top: 24px; }
.case-page .more-case__copy strong { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: clamp(23px,2.3vw,30px); line-height: 1.15; letter-spacing: -.025em; }
.case-page .more-case__arrow { color: #737378; font-size: 22px; transition: transform .3s, color .3s; }
.case-page .more-case:is(:hover,:focus-visible) .more-case__arrow { color: #fff; transform: translate(2px,-2px); }
.case-page .more-case:focus-visible { outline: 1px solid #ddd; outline-offset: -1px; }
@media(max-width:767px) {
  .case-page .more-cases__grid { grid-template-columns: 1fr; grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; }
  .case-page .more-case__media { aspect-ratio: 4 / 3; max-height: 320px; }
}
@media(prefers-reduced-motion:reduce) {
  .case-page .more-case::before,.case-page .more-case__media img,.case-page .more-case__arrow { transition: none; }
  .case-page .more-case:is(:hover,:focus-visible) .more-case__media img,.case-page .more-case:is(:hover,:focus-visible) .more-case__arrow { transform: none; }
}
.case-page .more-case__media{position:relative;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.case-page .more-case__media>iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;pointer-events:none;opacity:0;transition:opacity .35s}
.case-page .more-case__media.is-live>iframe{opacity:1}
.case-page .more-case__media.is-live>img{opacity:0}
.case-page .more-case.is-active .more-case__media{transform:translateY(-4px) scale(1.035)}
.case-page .more-case.is-active .more-case__media>img{transform:none}
.case-page .more-case.is-active::before{opacity:1}
@media(prefers-reduced-motion:reduce){.case-page .more-case.is-active .more-case__media{transform:none;transition:none}}