/* Case studies wear the client's colours instead of X Gravity violet: the same melt and drifting glows
   as the home page, in four colours set per page on <body> (--cb-deep, --cb-mid, --cb-g1, --cb-g2). */
.case-page .case-head {
  isolation: isolate;
  background: linear-gradient(180deg,
    var(--cb-deep) 0%,
    color-mix(in oklab, var(--cb-mid) 55%, var(--cb-deep)) 34%,
    var(--cb-mid) 60%,
    color-mix(in oklab, var(--cb-mid) 35%, #fff) 82%,
    var(--paper) 100%);
}
.case-page .case-head > .wrap { position: relative; z-index: 1; }
.case-page .case-head::before, .case-page .foot::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 38% 28% at var(--g1x, 20%) var(--g1y, 68%), color-mix(in srgb, var(--cb-g1) calc(var(--g1a, .5) * 100%), transparent), transparent 70%),
    radial-gradient(ellipse 36% 26% at var(--g2x, 78%) var(--g2y, 68%), color-mix(in srgb, var(--cb-g2) calc(var(--g2a, .44) * 100%), transparent), transparent 70%),
    radial-gradient(ellipse 20% 16% at var(--g3x, 52%) var(--g3y, 78%), color-mix(in srgb, var(--cb-g1) 18%, transparent), transparent 70%);
  animation: glowDrift 30s ease-in-out infinite alternate;
}
/* Header: glows only in the melt, never behind the nav or the title. */
.case-page .case-head::before {
  -webkit-mask-image: linear-gradient(180deg, transparent 36%, #000 54%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 36%, #000 54%, #000 86%, transparent 100%);
}
.case-page .foot {
  background: linear-gradient(180deg,
    var(--paper) 0%,
    color-mix(in oklab, var(--cb-mid) 14%, #fff) 12%,
    color-mix(in oklab, var(--cb-mid) 40%, #fff) 26%,
    var(--cb-mid) 46%,
    color-mix(in oklab, var(--cb-mid) 45%, var(--cb-deep)) 70%,
    var(--cb-deep) 100%);
}
@media (prefers-reduced-motion: reduce) { .case-page .case-head::before, .case-page .foot::before { animation: none; } }

/* Simple figures: one image centred on a quiet panel, with plenty of room around it. */
.case-page .case-cover-img { display: block; width: 100%; height: auto; border-radius: 8px; }
.case-page .case-fig { margin: 8px 0 40px; padding: clamp(28px, 7vw, 104px); background: color-mix(in oklab, var(--cb-mid) 6%, #eef0ef); border-radius: 8px; display: flex; justify-content: center; align-items: center; gap: clamp(16px, 4vw, 56px); }
.case-page .case-fig img { display: block; max-width: 100%; height: auto; border-radius: 10px; box-shadow: 0 24px 60px rgba(12, 17, 15, .16), 0 2px 6px rgba(12, 17, 15, .08); }
.case-page .case-fig-wide img { box-shadow: none; border-radius: 4px; }
.case-page .case-fig-phones img { width: calc((100% - 2 * clamp(16px, 4vw, 56px)) / 3); max-width: 300px; border-radius: 22px; }
.case-page .case-fig-pair { background: #f2f4ef; }
.case-page .case-fig-pair img { width: auto; max-height: 720px; min-width: 0; }
.case-page .case-fig-pair img:first-child { max-width: 58%; }
.case-page .case-fig-pair .pair-phone { max-width: 30%; box-shadow: none; mix-blend-mode: darken; }
.case-page .case-fig-photos { padding: 0; background: none; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.case-page .case-fig-photos img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; box-shadow: none; }
.case-page .case-fig-brand { padding: 0; background: none; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.case-page .brand-tile { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 8px; padding: 12%; }
.case-page .brand-tile svg { width: 100%; height: auto; max-width: 420px; }
.case-page .brand-dark { background: #2d2e2c; }
.case-page .brand-light { background: #fff; box-shadow: inset 0 0 0 1px var(--rule); }
@media (max-width: 760px) {
  .case-page .case-fig-phones { flex-wrap: nowrap; }
  .case-page .case-fig-phones img { border-radius: 12px; }
  .case-page .case-fig-pair { flex-direction: column; }
  .case-page .case-fig-pair img:first-child, .case-page .case-fig-pair .pair-phone { max-width: 100%; }
  .case-page .case-fig-pair .pair-phone { max-width: 70%; }
  .case-page .case-fig-brand, .case-page .case-fig-photos { grid-template-columns: 1fr; }
}

/* Accent text takes the client's main colour too (every --cb-mid reads at 4.5:1 or better on the page). */
.case-page .case-stats strong, .case-page .case-next a:hover { color: var(--cb-mid); }
.case-page main :focus-visible { outline-color: var(--cb-mid); }