.case-gallery {
  --case-width: min(46vw, 630px);
  --case-gap: 30px;
  --gallery-base: #090d16;
  --gallery-surface: #111722;
  --gallery-line: rgba(173, 190, 215, .22);
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - 108px);
  padding: 70px 0 58px;
  overflow: hidden;
  /* Static, off-centre light pools give depth without competing with moving cards. */
  background:
    radial-gradient(ellipse at 12% 45%, rgba(40, 91, 150, .2), transparent 54%),
    radial-gradient(ellipse at 88% 52%, rgba(157, 71, 151, .34), transparent 64%),
    radial-gradient(ellipse at 65% 94%, rgba(116, 63, 147, .18), transparent 52%),
    radial-gradient(ellipse at 50% 55%, rgba(94, 113, 150, .07), transparent 66%),
    var(--gallery-base);
  color: #f4f8ff;
}
.cases-heading, .cases-toolbar, .cases-bottom { width: min(1240px, calc(100% - 80px)); margin-inline: auto; }
.cases-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; }
.case-gallery .section-eyebrow { color: #8fbdf7; margin-bottom: 12px; }
.cases-heading h2 { margin: 0; font-size: clamp(27px, 2.7vw, 38px); font-weight: 600; line-height: 1.3; letter-spacing: -.035em; }
.case-gallery button { cursor: pointer; }
.cases-all { flex-shrink: 0; display: flex; gap: 36px; align-items: center; min-height: 44px; padding: 8px 0; border: 0; border-bottom: 1px solid #6685ad; color: #e6eeff; background: transparent; font-size: 13px; text-decoration: none; }
.cases-all:hover { color: #8ccaff; border-color: #8ccaff; }
.cases-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 26px; }
.cases-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.cases-filters button { min-height: 44px; padding: 10px 18px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #acbdd4; font-size: 13px; transition: background 180ms, color 180ms; }
.cases-filters button:hover { color: #fff; background: #152c49; }
.cases-filters button[aria-pressed="true"] { color: #e7f4ff; border-color: #3f7fc7; background: #15395d; }
.cases-disclaimer { margin: 0; font-size: 12px; color: #a5b5cd; }
.case-track { display: flex; align-items: start; gap: var(--case-gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 48px max(0px, calc((100% - var(--case-width)) / 2)) 42px; touch-action: pan-x pan-y; cursor: grab; }
.case-track::-webkit-scrollbar { display: none; }
.case-track.is-looping { scroll-snap-type: none; scroll-behavior: auto; }
.case-track:focus-visible { outline-offset: -6px; }
.case-track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.case-card { flex: 0 0 var(--case-width); min-width: 0; scroll-snap-align: center; scroll-snap-stop: always; z-index: 0; }
.case-card:has(.case-open:hover), .case-card:has(.case-open:focus-visible) { z-index: 2; }
.case-card > .case-open { transform: perspective(1600px) translateY(var(--curve-y, 0px)) rotateY(var(--curve-angle, 0deg)) scale(var(--curve-scale, 1)); transform-origin: center; }
.case-open { display: block; width: 100%; padding: 0; border: 0; border-radius: 6px; color: inherit; background: transparent; text-align: left; text-decoration: none; cursor: grab !important; -webkit-user-drag: none; }
.is-dragging .case-open { cursor: grabbing !important; }
.case-surface { display: block; border: 1px solid var(--gallery-line); border-radius: 8px; background: var(--gallery-surface); box-shadow: 0 14px 28px #00000055, 0 2px 5px #00000040; transform: translateY(0) scale(1); transform-origin: center; transition: transform 320ms cubic-bezier(.2,.65,.3,1), box-shadow 320ms ease, border-color 220ms ease; }
.case-media { display: block; position: relative; overflow: hidden; aspect-ratio: 16 / 10; border: 0; border-radius: 7px 7px 0 0; background: #10243b; }
.case-media img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.case-media::after { position: absolute; inset: 0; content: ''; pointer-events: none; background: linear-gradient(180deg, #0411243b, transparent 28%, transparent 60%, #04112465); }
.case-badge { position: absolute; z-index: 1; left: 16px; top: 16px; padding: 5px 10px; border: 1px solid #99b7d644; border-radius: 4px; background: #071426d9; color: #dce8f7; font-size: 11px; }
.case-view { position: absolute; z-index: 1; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 30px; padding: 11px 16px; border-radius: 4px; color: #122b49; background: #f0f7ff; font-size: 13px; opacity: 0; transform: translateY(5px); transition: opacity 220ms, transform 220ms; }
.case-open:focus-visible { outline: none; }
.case-open:focus-visible .case-surface { transform: translateY(-10px) scale(1.035); border-color: #8caace; box-shadow: 0 25px 42px #00000080, 0 0 24px #3188e31a; outline: 2px solid var(--focus); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .case-open:hover .case-surface { transform: translateY(-10px) scale(1.035); border-color: #8caace; box-shadow: 0 25px 42px #00000080, 0 0 24px #3188e31a; }
}
.is-dragging .case-open .case-surface { transform: translateY(0) scale(1); box-shadow: 0 14px 28px #00000055, 0 2px 5px #00000040; }
.case-open:hover .case-view, .case-open:focus-visible .case-view { opacity: 1; transform: translateY(0); }
.case-caption { display: grid; grid-template-columns: 1fr auto; gap: 6px 15px; padding: 18px 20px 20px; }
.case-title { font-size: 22px; font-weight: 550; letter-spacing: -.02em; }
.case-location { align-self: center; font-size: 12px; color: #b7c7dc; }
.case-location i { margin-inline: 7px; color: #5c7696; font-style: normal; }
.case-scope { grid-column: 1 / -1; font-size: 12px; color: #9aafcb; }
.cases-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 16px; border-top: 1px solid var(--gallery-line); }
#cases-instructions { margin: 0; font-size: 13px; color: #cedbed; }
#cases-instructions > span { display: block; margin-top: 4px; color: #94a8c4; font-size: 11px; }
.cases-controls { display: flex; align-items: center; gap: 24px; }
.cases-controls button { width: 46px; height: 46px; padding: 0; border: 1px solid #56718f; border-radius: 50%; background: transparent; color: #edf6ff; font-size: 22px; transition: background 180ms, border-color 180ms; }
.cases-controls button:not(:disabled):hover { background: #173b63; border-color: #92bdf6; }
.cases-controls button:disabled { opacity: .35; cursor: default; }
#case-counter { min-width: 60px; text-align: center; font-size: 13px; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
#case-counter span { margin-left: 6px; color: #97acc8; }
.cases-empty { min-height: 420px; width: min(1240px, calc(100% - 80px)); margin: 34px auto 22px; padding: 80px 24px; text-align: center; border: 1px solid #2a4260; background: linear-gradient(135deg, #0f2540, #0b172b); border-radius: 8px; }
.cases-empty > span { font-size: 12px; color: #84aedb; letter-spacing: .18em; }
.cases-empty h3 { margin: 20px 0 10px; font-size: 26px; font-weight: 500; }
.cases-empty p { font-size: 14px; color: #a7bad3; }
.cases-empty button { margin-top: 20px; min-height: 44px; border: 0; border-bottom: 1px solid #7099c7; background: transparent; color: #cbe5ff; }
.case-track[hidden], .cases-empty[hidden] { display: none; }
.cases-no-script { padding: 20px; text-align: center; }
@media (max-width: 1100px) { .case-gallery { --case-width: 57vw; } .case-caption { grid-template-columns: 1fr; } .case-title { font-size: 20px; } }
@media (max-width: 700px) {
  .case-gallery { --case-width: 82vw; --case-gap: 16px; padding: 48px 0 40px; min-height: auto; }
  .cases-heading, .cases-toolbar, .cases-bottom { width: calc(100% - 40px); }
  .cases-heading { align-items: start; gap: 16px; }
  .cases-heading h2 { font-size: 27px; max-width: 10em; }
  .cases-all { gap: 10px; font-size: 12px; margin-top: 26px; }
  .cases-toolbar { display: block; margin-top: 22px; }
  .cases-filters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .cases-filters button { padding: 9px 4px; font-size: 12px; }
  .cases-disclaimer { margin-top: 13px; font-size: 11px; }
  .case-track { padding: 25px 20px 24px; scroll-padding-inline: 20px; }
  .case-card { scroll-snap-align: start; }
  .case-card > .case-open { transform: none !important; }
  .case-media { aspect-ratio: 4 / 3; }
  .case-badge { top: 10px; left: 10px; font-size: 10px; }
  .case-view { opacity: 1; transform: none; right: 10px; bottom: 10px; font-size: 11px; gap: 20px; padding: 8px 10px; }
  .case-caption { padding: 14px 14px 16px; }
  .case-open .case-surface { transform: none !important; }
  .case-title { font-size: 20px; }
  .case-location, .case-scope { font-size: 11px; }
  .cases-controls { gap: 10px; }
  .cases-controls button { width: 44px; height: 44px; }
  #case-counter { min-width: 48px; font-size: 11px; }
  #cases-instructions { max-width: 140px; font-size: 12px; }
  #cases-instructions > span { font-size: 10px; }
  .cases-empty { width: calc(100% - 40px); padding: 60px 22px; min-height: 360px; }
}
@media (prefers-reduced-motion: reduce) { .case-card > .case-open, .case-open .case-surface { transform: none !important; } }