.wireframe-stage{position:relative;width:100%;aspect-ratio:1681/1050;overflow:hidden;border-radius:6px;background:#24333e}
.wireframe-stage>.preview-image-button{position:absolute;inset:0;width:100%;height:100%;display:block}
body.approved-case-template .wireframe-stage img.wireframe-layer{position:absolute;inset:0;width:100%;height:100%!important;max-width:100%;object-fit:contain;object-position:left top;border-radius:0}
.wireframe-stage>img{pointer-events:none}
.wireframe-dots{display:flex;justify-content:center;gap:4px;margin-top:12px}
.wireframe-dots button{display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:16px;background:transparent;cursor:pointer;padding:4px}
.wireframe-dots span{width:7px;height:7px;border:1px solid #7a9198;border-radius:10px;display:block}
.wireframe-dots [aria-pressed=true] span{width:25px;background:#347d83;border-color:#347d83}
.wireframe-dots button:hover{background:#347d8310}.wireframe-dots button:focus-visible{outline:2px solid #347d83;outline-offset:3px}

.citi-case .citi-navigation-diagram .citi-diagram-window{aspect-ratio:1384/1080}

.citi-case .citi-navigation-slideshow.wireframe-stage{aspect-ratio:792/612;background:#fff}
.citi-case .citi-recognition-copy{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:24px;align-items:start}
.citi-case .citi-recognition-award{display:block;width:150px;height:auto;margin-top:6px;mix-blend-mode:multiply}
.citi-case .citi-recognition-copy em{font-style:normal;color:#253137}
@media(max-width:750px){.citi-case .citi-recognition-copy{grid-template-columns:1fr}.citi-case .citi-recognition-award{grid-row:1}}

.citi-case .citi-story-stage.wireframe-stage{aspect-ratio:792/612;background:#fff}
.citi-case .citi-mobile-board{width:270px;max-width:100%;margin-inline:auto}
.citi-case .citi-mobile-board .device-phone{width:100%}
.citi-case .citi-mobile-board .wireframe-stage.device-phone-screen{aspect-ratio:638/1005;height:auto!important;overflow:hidden!important;background:#073249}
.citi-case .citi-mobile-board .phone-hover-cue{display:none!important}
.citi-case .citi-mobile-board figcaption{margin-bottom:12px}
@media(min-width:751px){.citi-case .citi-recognition-award{margin-top:var(--citi-award-offset,42px)}}

.citi-case .citi-mobile-board .device-phone{border-radius:12px!important}
.citi-case .citi-mobile-board .wireframe-stage.device-phone-screen{aspect-ratio:638/1134;border-radius:8px!important}

.citi-case .story-hero .citi-hero-layout .hero-desktop{position:relative;left:4%;top:24px;width:82%;margin:0;height:auto;aspect-ratio:1678/1050}
.citi-case .story-hero .citi-hero-layout .hero-mobile{position:absolute;left:auto;right:3%;top:76px;width:23%;margin:0;height:auto;aspect-ratio:var(--screen-ratio);border-radius:4px;box-shadow:0 8px 24px #0005}
.citi-case .story-hero .citi-hero-layout img{width:100%;height:auto;display:block}
@media(max-width:750px){.citi-case .story-hero .citi-hero-layout .hero-desktop{left:0;top:0;width:100%;margin:0}.citi-case .story-hero .citi-hero-layout .hero-mobile{position:relative;left:auto;right:auto;top:auto;width:72%;max-width:270px;margin:24px auto 0}}

.citi-case .story-hero .citi-hero-layout{height:auto!important;overflow:visible;padding-bottom:48px;transition:none}
@media(max-width:750px){.citi-case .story-hero .citi-hero-layout{padding-bottom:16px}.citi-case .story-hero .citi-hero-layout .hero-mobile{overflow:hidden;aspect-ratio:auto}}

/* Give every mobile slide the same quiet top inset while retaining the full screen. */
.citi-case .citi-mobile-board .wireframe-stage.device-phone-screen{aspect-ratio:638/1144;background:#1b1b1b}
body.approved-case-template .citi-mobile-board .wireframe-stage img.wireframe-layer{top:.874126%;height:99.125874%!important;object-position:center top}

.citi-case .story-hero .citi-hero-layout .hero-mobile{background:#fff}
.citi-case .story-hero .citi-hero-layout .hero-mobile img{height:auto;object-fit:contain;object-position:top}

.citi-case .story-hero .citi-hero-layout .hero-desktop{border:0;outline:0}

@media(max-width:750px){
 .citi-case .story-hero .citi-hero-layout{position:relative;padding:24px 16px 50px;overflow:hidden}
 .citi-case .story-hero .citi-hero-layout .hero-desktop{position:relative;width:88%;left:0;top:0}
 .citi-case .story-hero .citi-hero-layout .hero-mobile{display:block!important;position:absolute;width:30%;max-width:none;right:4%;left:auto;top:22%;margin:0;aspect-ratio:772/1400}
 .citi-case .citi-recognition-copy .citi-recognition-award{justify-self:center;margin-inline:auto}
}