/* Bencho's component tokens are mapped locally to the portfolio palette. */
.mb12-compare{--card:var(--preview);--fill-on:var(--text);--fill-slab:var(--preview);--font-ui:var(--font-sans);--ink:var(--text);--signal:var(--text);position:relative;width:100%;aspect-ratio:1440/900;overflow:hidden;touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none;background:var(--fill-on)}
.mb12-compare:focus-visible{outline:2px solid var(--signal);outline-offset:-3px}
.mb12-compare-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;display:block;-webkit-user-drag:none}
/* No drift: the two website viewports stay exactly in register. */
.mb12-compare-before{position:absolute;inset:0}
/* The line is drawn so it can bend along the same cut as the image. */
.mb12-compare-line{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;filter:drop-shadow(0 0 3px #0005)}
.mb12-compare-line path{fill:none;stroke:#fff;stroke-width:2}
.mb12-compare-grip{position:absolute;top:0;bottom:0;width:0;pointer-events:none}
.mb12-compare-grip>span{position:absolute;top:50%;left:50%;translate:-50% -50%;display:grid;place-items:center;width:40px;height:40px;background:var(--fill-slab);color:var(--fill-on);border-radius:50%;box-shadow:0 2px 12px #17181a40;transition:scale 220ms cubic-bezier(.24,1.34,.38,1)}
.mb12-compare:hover .mb12-compare-grip>span{scale:1.08}
.mb12-compare[data-held] .mb12-compare-grip>span{scale:.9}
.maybank-case-study h3.mb12-compare-title{font-size:14px;line-height:24px;margin:0 0 24px;font-weight:500}
.maybank-case-study .mb12-personas>div{display:flex;flex-direction:column;padding:16px 10px 0}
.maybank-case-study .mb12-personas p{font-size:12px;line-height:20px;margin:0 0 14px}
.maybank-case-study .mb12-personas h4{font-size:12px;line-height:19px;min-height:38px}
.mb12-personas .mb9-picture{margin-top:auto}
.mb12-journey-stage{--nadia-media-height:calc(260px * 894 / 444);display:grid;grid-template-columns:minmax(0,1fr) 260px minmax(0,1fr);gap:18px;align-items:center;min-height:560px}
.mb12-journey-stage{scroll-margin-top:24px}
.mb15-showcase-actions{display:flex;justify-content:flex-end;margin-top:8px}
.mb12-nadia-portrait{display:block;width:100%;height:auto;aspect-ratio:444/894;object-fit:cover;object-position:center top;border-radius:8px}
.mb12-journey-film{display:grid;align-items:center}
.mb12-journey-film .mb9-film video{display:block;width:100%;height:auto;object-fit:contain}
.maybank-case-study .mb12-journey-stage p{font-size:13px;line-height:23px;margin:0 0 20px;overflow-wrap:normal}
.maybank-case-study .mb13-nadia-name p{color:var(--text);font-weight:600;font-size:16px;line-height:27px}
.mb12-journey-left{text-align:right}
.mb12-journey-left,.mb12-journey-right{min-width:0}
.mb12-journey-film .mb9-gallery{margin:0;grid-template-columns:1fr}
.mb12-journey-film .mb9-film video{max-height:none}
.mb12-journey-footer{text-align:center;margin-top:28px}
.maybank-case-study .mb12-journey-footer>p{font-size:12px;line-height:22px;margin:0 0 12px;color:var(--text)}
.mb12-journey-footer>p>span{font-variant-numeric:tabular-nums;color:var(--muted)}
.mb12-journey-arrows{display:flex;justify-content:center;gap:12px}
.mb12-journey-arrows .mb4-button{border-radius:7px;min-width:100px}
.mb12-journey-arrows .mb4-button:disabled{opacity:.35}
.mb12-showcase-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:24px 0;flex-wrap:wrap}
.mb12-showcase-toolbar .mb4-tabs{margin:0}
.mb12-text-button{border:0;background:none;padding:10px 0;font-size:12px;line-height:24px;color:var(--muted);cursor:pointer;min-height:44px;text-decoration:underline;text-underline-offset:4px}
.mb12-live-stage,.mb12-evolution-stage,.mb12-color-stage{padding:28px 20px;background:#eeede9;border-radius:10px}
.mb12-iframe-viewport{width:100%;overflow:hidden;position:relative;background:#fff}
.mb12-iframe-viewport iframe{display:block;position:absolute;left:0;top:0;transform-origin:top left;border:0;max-width:none;background:#fff}
.mb12-iframe-loading{display:grid;place-items:center;position:absolute;inset:0;color:#444;font-size:12px}
.mb12-live-stage .mb11-device--mobile{width:280px}
.mb12-open-prototype{display:block;width:max-content;min-height:44px;padding:12px 0;margin-left:auto;font-size:12px}
.mb12-evolution-stage.is-mobile .mb12-evolution-film{max-width:250px;margin:auto}
.mb12-before-group{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.mb12-before-group>div:first-child{grid-column:1/-1}
.maybank-case-study .mb12-before-group h5{color:var(--text);font-size:12px;font-weight:500;line-height:20px;margin:0 0 12px}
.mb16-evolution-part{margin-top:28px}
.maybank-case-study .mb16-evolution-part>h4{margin:0 0 16px;color:var(--text);font-size:14px;font-weight:550;line-height:22px}
.mb12-before-group .mb9-picture{background:white;border-radius:0}
.mb12-before-group .mb9-picture img{border-radius:0;object-fit:contain}
.mb12-before-group>div:first-child .mb9-picture{max-width:420px;margin:auto}
.mb12-color-showcase>.mb4-tabs{justify-content:center;flex-wrap:wrap;gap:0;margin:24px 0}
.mb12-color-showcase>.mb4-tabs>button{flex:initial;font-size:11px;padding-inline:12px;min-height:44px}
.mb12-color-stage{display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:32px 24px}
.mb12-color-stage .mb4-screen{width:320px;margin:auto}
.mb12-color-stage .mb5-phone-shell>.mb4-screen-scroll{aspect-ratio:390/860;height:auto;scroll-behavior:auto;overscroll-behavior:contain}
.mb12-color-stage .mb4-scroll-hint{color:#555}
.mb12-color-stage .mb5-scroll-rail{right:-12px}
.mb12-live-search .mb11-device--desktop .mb11-device-viewport{border-radius:2px}
.mb12-fixed-status{position:absolute;z-index:2;top:8px;left:8px;right:8px;aspect-ratio:390/44;display:block;background-position:top;background-size:100% auto;background-repeat:no-repeat;border-radius:24px 24px 0 0;pointer-events:none}
.maybank-case-study .mb13-story-context{margin:0 0 36px}
.mb13-search-film>.mb4-tabs{margin:24px 0}
.mb13-search-stage{padding:28px 20px;background:#eeede9;border-radius:10px}
.mb13-search-stage.is-mobile>.mb9-film{width:290px;max-width:100%;margin:auto}
.mb13-search-stage .mb9-film video{max-height:none}
.mb13-search-stage .mb11-device--desktop .mb11-device-viewport{border-radius:2px}
.mb13-extended-preview{container-type:inline-size;background:#fff;color:#0f161e;font-family:Inter,sans-serif}
.mb13-extended-preview img{display:block;width:100%;height:auto}
.mb13-preview-hero{aspect-ratio:390/780;overflow:hidden}
.mb13-preview-related,.mb13-preview-help{padding:10cqw 6cqw}
.maybank-case-study .mb13-extended-preview h3{font-family:'Fira Sans',sans-serif;font-size:6.7cqw;line-height:1.2;font-weight:700;color:#0f161e;margin:0 0 6cqw}
.mb13-preview-related>div{display:grid;gap:4cqw}
.mb13-preview-related article{display:grid;grid-template-columns:22cqw 1fr;gap:4cqw;align-items:center;padding:4cqw;border:1px solid #e5e5e5;border-radius:3cqw}
.mb13-preview-related article>img{height:18cqw;object-fit:contain}
.maybank-case-study .mb13-extended-preview h4{font-family:'Fira Sans',sans-serif;font-size:4.5cqw;line-height:1.3;font-weight:700;color:#0f161e;margin:0 0 1.5cqw}
.maybank-case-study .mb13-extended-preview p{font-size:3.7cqw;line-height:1.5;font-weight:400;color:#464646;margin:0}
.mb13-preview-help{background:#f5f5f3}
.maybank-case-study .mb13-preview-help p{padding:4cqw 0;border-top:1px solid #dededb}
.mb13-preview-footer{display:grid;gap:8cqw;padding:10cqw 6cqw;background:#ffbc00;color:#0f161e}
.mb13-preview-footer strong{font-family:'Fira Sans',sans-serif;font-size:8cqw;line-height:1.15}
.mb13-preview-footer span{font-size:3.5cqw}
.maybank-case-study .mb13-closing p:last-child{margin-bottom:0}
@media(max-width:600px){
 .maybank-case-study .mb12-personas p{font-size:11px;line-height:19px}
 .mb12-journey-stage{grid-template-columns:minmax(0,1fr);grid-template-rows:var(--nadia-media-height) auto auto;gap:24px;align-content:start;min-height:calc(var(--nadia-media-height) + 384px)}
 .mb12-nadia-portrait{grid-row:1;width:260px;max-width:100%;justify-self:center;object-position:center 30%}
 .mb12-journey-film{grid-row:1;width:260px;max-width:100%;justify-self:center}
 .mb12-journey-left{text-align:left;grid-row:2}
 .mb12-journey-right{grid-row:3}
 .maybank-case-study .mb12-journey-stage p{font-size:14px;line-height:25px;margin-bottom:16px}
 .mb12-journey-stage .mb12-journey-left p:last-child,.mb12-journey-stage .mb12-journey-right p:last-child{margin-bottom:0}
 .mb12-before-group{grid-template-columns:1fr;gap:28px}
 .mb12-before-group>div:first-child{grid-column:auto}
 .mb12-live-stage,.mb12-evolution-stage{padding:20px 12px}
 .mb12-live-stage .mb11-device--mobile{width:264px}
 .mb12-showcase-toolbar .mb4-tabs>button{padding-inline:12px}
 .mb12-color-stage{padding:28px 20px}
 .mb12-color-stage .mb4-screen{width:300px;max-width:100%}
 .mb12-color-stage .mb5-phone-shell>.mb4-screen-scroll{overscroll-behavior-y:auto}
 .mb13-search-stage{padding:24px 12px}
}
@media(prefers-reduced-motion:reduce){.mb12-compare-grip>span{transition:none}}