/* Shared framing for the eReq and Citi case studies. */
.story-hero .hero-desktop,.story-hero .hero-mobile{position:relative;inset:auto;width:92%;max-width:none;height:auto;aspect-ratio:var(--screen-ratio);margin:0 4%;overflow:hidden}
.story-hero .hero-desktop{margin-top:32px}.story-hero .hero-mobile{margin-top:24px}
.hero-credit{font-size:10px;line-height:1.6;color:#b8c7c2;margin:0;padding:12px 20px 18px}
.story-screen{margin:0;padding:24px;background:linear-gradient(130deg,#8999a4,#576d7b);border-radius:6px}
.story-screen figcaption{font-size:10px;letter-spacing:.04em;color:#eef2f5;margin-bottom:14px}
.story-screen img{display:block;width:100%;height:auto;border-radius:5px}
.grayscale-study img{filter:grayscale(1)}
.story-detail-stack{display:grid;gap:20px}
.story-mobile-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:24px;background:linear-gradient(130deg,#8999a4,#576d7b);border-radius:6px}
.story-mobile-pair .story-screen{padding:0;background:none;min-width:0}
.architecture-screen img{max-height:500px;object-fit:contain;background:white}
@media(max-width:750px){.story-hero .hero-desktop{margin-top:22px}.story-screen,.story-mobile-pair{padding:16px}.story-mobile-pair .story-screen{padding:0}.story-mobile-pair{gap:14px}.story-screen figcaption{font-size:9px}.hero-credit{font-size:9px}.architecture-screen img{max-height:430px}}

/* Show the complete original Citi diagrams without viewport crops. */
.citi-case .complete-diagram img{width:100%;height:auto;max-height:none;object-fit:contain}

/* Optional third full-width screen in the shared hero reveal. */
.story-hero .hero-third{position:relative;inset:auto;width:92%;height:auto;aspect-ratio:var(--screen-ratio);margin:24px 4% 0;overflow:hidden;border-radius:3px;box-shadow:0 24px 55px #18242e60}
.story-hero .hero-third img{width:100%;height:auto}

/* eReq: crop the original artwork to its phone silhouette, preserving screen pixels. */
.ereq-case .story-mobile-pair{padding:22px 24px 26px;gap:24px;background:linear-gradient(130deg,#cdd7da,#b8c6cc)}
.ereq-case .story-mobile-pair figcaption{color:#354d57}
.ereq-case .ereq-phone-crop{position:relative;aspect-ratio:840/1710;overflow:hidden;border-radius:13% / 6.4%;box-shadow:0 5px 15px rgba(24,39,46,.15)}
.ereq-case .story-mobile-pair .ereq-phone-crop img{position:absolute;width:161.7857%;max-width:none;height:auto;left:-30.9524%;top:-6.9006%;border-radius:0}
@media(max-width:750px){.ereq-case .story-mobile-pair{padding:20px;gap:18px}}
/* Enlarge Citi's diagram pages within their previews; trim only empty side margins. */
.citi-case .citi-taller-diagram .preview-image-button{overflow:hidden}
.citi-case .citi-taller-diagram .preview-image-button img{width:115%;max-width:none;margin-left:-7.5%;height:auto;max-height:none}

/* One shared board for the three story and video examples, with individual labels. */
.citi-stories-board{padding:24px;gap:26px;background:linear-gradient(130deg,#8999a4,#576d7b);border-radius:6px}
.citi-stories-board .story-screen{padding:0;background:none;border-radius:0}
@media(max-width:750px){.citi-stories-board{padding:16px;gap:22px}}

.citi-case .citi-diagram-window{overflow:hidden;border-radius:5px}
.citi-case .citi-diagram-window > img{width:115%;max-width:none;margin-left:-7.5%;height:auto;max-height:none}

.citi-case .citi-navigation-diagram .citi-diagram-window{aspect-ratio:320/207;background:#fff}
.citi-case .citi-navigation-diagram .citi-diagram-window > img{width:100%;height:100%;max-width:100%;max-height:none;margin:0;object-fit:contain}

.citi-case .award-emphasis{color:var(--teal-light,#579fa5)}