.case-flip{perspective:1200px;min-width:0}.case-flip-inner{display:grid;transform-style:preserve-3d;transition:transform .55s ease}.case-flip.is-flipped .case-flip-inner{transform:rotateY(180deg)}.case-face{grid-area:1/1;backface-visibility:hidden;background:#fff;border:1px solid #dce6ec;border-radius:16px;overflow:hidden}.case-front{display:flex;flex-direction:column}.case-front img{width:100%;height:210px;object-fit:cover;display:block;background:#edf4f6}.case-front-copy{padding:24px}.case-face h3{font-size:1.15rem;line-height:1.4;margin:10px 0 18px}.case-face button{background:transparent;color:#155e75;border:1px solid #d5e4e9;border-radius:8px;padding:10px 14px;cursor:pointer;font:inherit;font-size:.85rem}.case-face button:focus-visible{outline:3px solid #155e75;outline-offset:3px}.case-back{transform:rotateY(180deg);padding:24px}.case-back dl{margin:0 0 18px}.case-back dl>div{margin-bottom:14px}.case-back dt{font-size:.75rem;font-weight:700;text-transform:uppercase;color:#103d56}.case-back dd{margin:6px 0 0;font-size:.85rem;line-height:1.6;color:#617587}.case-back .experience-result{background:#edf5f6;padding:12px;border-radius:8px}@media(max-width:600px){.case-front img{height:190px}.case-front-copy,.case-back{padding:20px}}@media(prefers-reduced-motion:reduce){.case-flip-inner{transition:none}}

/* Flat resting faces avoid disappearing compositor layers and keep images sharp. */
.case-flip{perspective:none}
.case-flip .case-flip-inner,.case-flip.is-flipped .case-flip-inner{transform:none;transform-style:flat;transition:none}
.case-flip .case-face{backface-visibility:visible;transform:none}
.case-flip:not(.is-flipped) .case-back,.case-flip.is-flipped .case-front{visibility:hidden;pointer-events:none}
.case-flip:not(.is-flipped) .case-front,.case-flip.is-flipped .case-back{visibility:visible;z-index:1;animation:case-reveal .3s ease-out}
@keyframes case-reveal{from{opacity:.4;transform:scaleX(.92)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.case-flip .case-face{animation:none}}
html body.home-compact .case-front img{height:auto;aspect-ratio:16/9;object-fit:contain;object-position:center;background:#eef5f7;filter:none;opacity:1;transform:none;image-rendering:auto}.case-flip .case-flip-inner{position:relative}

/* On phones the open experience uses the page scroll, with space between cards. */
@media(max-width:600px){
  html body.home-compact .experience-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
  html body.home-compact .case-flip,
  html body.home-compact .case-flip-inner{height:auto}
  html body.home-compact .case-flip.is-flipped .case-front{display:none}
  html body.home-compact .case-flip .case-back{position:static;max-height:none;overflow:visible}
  html body.home-compact .case-flip:not(.is-flipped) .case-back{display:none}
}