/* Page 8 v12 candidate — explicit, visible case-study hero imagery. */
.cases-v3 .cases-hero::before {
  background:
    radial-gradient(circle at 82% 24%, rgba(52, 114, 205, .24), transparent 27%),
    linear-gradient(112deg, #040e27 0%, #071b43 58%, #0a3471 100%);
}

.case-hero-visual {
  position: relative;
  z-index: 1;
  align-self: center;
  height: 342px;
  margin: 0;
  overflow: hidden;
  color: #fff;
  background: #07152f;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 18px;
  box-shadow: 0 30px 72px rgba(0,0,0,.34);
}

.case-hero-visual-head {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  right: 0;
  height: 42px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: rgba(4,14,39,.90);
  border-bottom: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(9px);
}
.case-hero-visual-head span { color: var(--cyan); font-size: 7px; font-weight: 900; letter-spacing: .16em; }
.case-hero-visual-head b { color: rgba(255,255,255,.68); font-size: 7px; letter-spacing: .12em; }

.case-hero-mosaic {
  position: absolute;
  inset: 42px 0 58px;
  padding: 4px;
  display: grid;
  grid-template-columns: minmax(0,1.34fr) minmax(128px,.66fr);
  grid-template-rows: repeat(3,1fr);
  gap: 4px;
  background: #0d2247;
}
.case-hero-tile { position: relative; min-width: 0; overflow: hidden; background: #0c2a58; }
.case-hero-tile-primary { grid-row: 1 / -1; }
.case-hero-tile img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.88) contrast(1.04); transform: scale(1.01); }
.case-hero-tile-primary img { object-position: 68% center; }
.case-hero-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 36%, rgba(3,13,34,.82) 100%); }
.case-hero-tile-primary::after { background: linear-gradient(180deg, rgba(3,13,34,.02) 35%, rgba(3,13,34,.86) 100%); }
.case-hero-tile > span { position: absolute; z-index: 2; left: 11px; right: 8px; bottom: 9px; color: rgba(255,255,255,.92); font-size: 6px; line-height: 1.35; font-weight: 900; letter-spacing: .08em; }
.case-hero-tile > span b { margin-right: 5px; color: var(--cyan); font-size: 8px; }
.case-hero-tile-primary > span { left: 14px; bottom: 13px; font-size: 8px; }
.case-hero-tile-primary > span b { font-size: 11px; }

.case-hero-visual figcaption {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  height: 58px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: linear-gradient(105deg, #081a3c, #0e3476);
  border-top: 1px solid rgba(255,255,255,.13);
}
.case-hero-visual figcaption span { color: var(--cyan); font-size: 6px; font-weight: 900; letter-spacing: .14em; }
.case-hero-visual figcaption strong { max-width: 250px; font-size: 10px; line-height: 1.5; text-align: right; }

@media (max-width: 1100px) {
  .case-hero-visual { height: 320px; }
  .case-hero-mosaic { grid-template-columns: minmax(0,1.18fr) minmax(120px,.82fr); }
}

@media (max-width: 860px) {
  .cases-v3 .cases-hero,
  .cases-v3 .cases-hero .page-heading { min-height: 760px; }
  .cases-v3 .cases-hero .page-heading { padding-top: 60px; padding-bottom: 54px; }
  .case-hero-visual { width: min(100%, 640px); height: 300px; justify-self: start; }
}

@media (max-width: 600px) {
  .cases-v3 .cases-hero,
  .cases-v3 .cases-hero .page-heading { min-height: 720px; }
  .cases-v3 .cases-hero .page-heading { padding-top: 45px; padding-bottom: 42px; gap: 24px; }
  .case-hero-visual { height: 264px; border-radius: 13px; }
  .case-hero-visual-head { height: 36px; padding-inline: 11px; }
  .case-hero-visual-head span { font-size: 6px; }
  .case-hero-visual-head b { font-size: 6px; }
  .case-hero-mosaic { inset: 36px 0 48px; grid-template-columns: minmax(0,1.08fr) minmax(112px,.92fr); }
  .case-hero-visual figcaption { height: 48px; padding-inline: 11px; }
  .case-hero-visual figcaption span { display: none; }
  .case-hero-visual figcaption strong { max-width: none; font-size: 9px; text-align: left; }
  .case-hero-tile > span { left: 7px; bottom: 6px; font-size: 5px; }
  .case-hero-tile-primary > span { left: 9px; bottom: 9px; font-size: 7px; }
}

@media (max-width: 350px) {
  .cases-v3 .cases-hero,
  .cases-v3 .cases-hero .page-heading { min-height: 700px; }
  .case-hero-visual { height: 244px; }
  .case-hero-mosaic { grid-template-columns: minmax(0,1fr) minmax(98px,1fr); }
}