.cases-section{background:#090b10;color:#f5f7fc;padding:82px 6.2% 80px;scroll-margin-top:0}
.cases-header{position:static;inset:auto;padding:0;display:flex;justify-content:space-between;align-items:end;gap:50px;margin-bottom:35px}
.cases-header h2{font:300 clamp(36px,4.2vw,58px)/1.1 Inter,sans-serif;letter-spacing:-.05em;margin:0}
.cases-header .closing-tag{margin-bottom:18px}
.cases-header>p{font:350 14px/1.7 Inter,sans-serif;color:#a4b1c8;max-width:340px;margin:0 0 5px}
.cases-stage{display:grid;gap:24px}
.case-card{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:25px;min-width:0;min-height:440px;padding:36px 30px 30px 76px;border:1px solid #303b50;border-radius:24px;overflow:hidden;background:#182232}
.case-card-1{background:#204ed2;border-color:#567beb}
.case-card-2{background:#e7f0fc;color:#172d51;border-color:#d0e0f5}
.case-rail{position:absolute;top:36px;left:20px;font:350 15px/1 Inter,sans-serif;letter-spacing:-.04em;opacity:.7}
.case-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding-right:10px}
.case-kind{font:350 14px/1.5 Inter,sans-serif;color:#bbc9e2;margin:0 0 23px}.case-kind span{opacity:.75}
.case-card h3{font:350 42px/1 Inter,sans-serif;letter-spacing:-.05em;margin:0 0 19px}
.case-card h3>span{display:block;font-size:clamp(22px,2.25vw,30px);font-weight:300;line-height:1.2;letter-spacing:-.04em;margin-top:16px}
.case-description{font:350 14px/1.7 Inter,sans-serif;max-width:350px;color:#bcc9df;margin:0 0 20px}
.case-outcome{font:350 14px/1.6 Inter,sans-serif;margin:auto 0 24px;max-width:330px}.case-outcome>span{display:block;font-size:14px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:5px;opacity:.6}
html[data-design="contrast"] .cases-section .secondary{color:#f1f5ff;border-color:#b5ccff88;font-size:14px;height:46px;background:transparent}
html[data-design="contrast"] .cases-section .secondary:is(:hover,:focus-visible){background:#ffffff12;border-color:#fff}
.case-card-1 .case-description,.case-card-1 .case-kind{color:#e2ebff}
.case-card-2 .case-description,.case-card-2 .case-kind{color:#526785}
html[data-design="contrast"] .case-card-2 .secondary{color:#244fcb;border-color:#7595d2}
html[data-design="contrast"] .case-card-2 .secondary:is(:hover,:focus-visible){background:#fff8;border-color:#2458f5}
.case-visual{display:flex;align-items:center;min-width:0;border-radius:16px;overflow:hidden;background:radial-gradient(ellipse at 50% 100%,#4a83c9,#243754 75%);padding:30px 20px}
.case-card-1 .case-visual{background:linear-gradient(145deg,#dfefff,#93b8eb)}.case-card-2 .case-visual{background:linear-gradient(145deg,#c1d6f0,#f9fcff)}
.mason-browser,.mason-store,.mason-system{width:100%;border:1px solid #ffffff7a;border-radius:12px;background:#f2f6fb;color:#13294b;box-shadow:0 20px 35px -15px #07162d70;overflow:hidden;transform:rotate(-3deg)}
.mason-browser-bar{display:flex;align-items:center;gap:4px;padding:10px;border-bottom:1px solid #dee6f2}.mason-browser-bar i{height:4px;width:4px;border-radius:50%;background:#a8b6ce}.mason-browser-bar>span{margin:auto;font-size:14px;color:#8191aa}
.mason-web{position:relative;padding:20px 18px;background:linear-gradient(145deg,#f9fcff,#c8def8)}.mason-web>b{display:block;font-size:38px;letter-spacing:-.07em;font-weight:400}.mason-web>b>span{display:block;font-size:14px;font-weight:350;letter-spacing:0;margin-top:6px}
.mason-sculpture{height:140px;background:url('assets/service-glass-balanced-atlas.png') right center/300% 100% no-repeat;border-radius:9px;margin:15px 0}
.mason-web-bottom{display:flex;justify-content:space-between;gap:10px;font-size:14px;line-height:1.6}.mason-demo-pill{align-self:center;border-radius:20px;background:#183bb1;color:#fff;padding:7px 10px}
.mason-store{padding:19px;transform:rotate(3deg)}.mason-store-top,.mason-system-top{display:flex;justify-content:space-between;font-size:18px;letter-spacing:-.04em}.mason-store-top span,.mason-system-top span{font-size:14px;letter-spacing:0;align-self:center;color:#687b99}
.mason-product{margin-top:14px;background:#e6effb;border-radius:9px;padding:10px;font-size:14px}.mason-product-art{height:90px;background:url('assets/service-glass-balanced-atlas.png') center/300% 100% no-repeat;margin-bottom:8px}
.mason-chat{background:white;border:1px solid #d9e3f3;border-radius:10px;padding:12px;margin:12px 0 0 13%;font-size:14px;line-height:1.6}.mason-chat-label{font-size:14px;color:#2458f5}.mason-chat p{margin:9px 0}.mason-chat>div{background:#e9f0ff;padding:8px;border-radius:8px;margin-left:12px}
.mason-system{padding:22px;transform:rotate(-2deg);background:#fbfdff}.mason-flow{padding:23px 8px 14px}.mason-flow>div{padding:12px 10px;border:1px solid #dbe5f4;border-radius:10px;font-size:14px;background:#fff}.mason-flow>div>span{float:left;display:grid;place-items:center;width:30px;height:30px;margin-right:10px;background:#edf3fe;border-radius:8px;font-size:14px;color:#2458f5}.mason-flow small{display:block;font-size:14px;color:#8492a6;margin-top:4px}.mason-flow>i{display:block;text-align:center;font-style:normal;color:#a7bad7;padding:6px}.mason-flow>.mason-flow-ai{background:#2458f5;color:white;border-color:#2458f5}.mason-flow-ai small{color:#d3e1ff}.mason-system-note{display:block;text-align:center;font-size:14px;color:#7486a2}
.cases-nav{display:none;justify-content:space-between;align-items:center;margin-top:20px;color:#8192ae;font:350 14px/1.4 Inter,sans-serif}.cases-nav>div{display:flex;gap:8px}.cases-nav button{width:44px;height:40px;border-radius:20px;border:1px solid #35425a;color:#9db0d0;background:transparent;font:350 14px Inter,sans-serif;cursor:pointer}.cases-nav button[aria-pressed=true]{background:#2458f5;border-color:#2458f5;color:#fff}.cases-nav button:hover{border-color:#9dbbfb;color:#fff}.cases-nav button:focus-visible{outline:2px solid #9dbbfb;outline-offset:3px}
@media(prefers-reduced-motion:no-preference){
.cases-section.is-stacking{padding:0 6.2%;height:290svh}
.is-stacking .cases-sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:35px 0;box-sizing:border-box}
.is-stacking .cases-stage{position:relative;display:block;height:clamp(440px,53svh,540px);overflow:hidden;border-radius:24px}
.is-stacking .case-card{position:absolute;inset:0;width:100%;min-height:0;height:100%;box-sizing:border-box;will-change:transform}
.is-stacking .case-card-1{left:56px;width:calc(100% - 56px)}
.is-stacking .case-card-2{left:112px;width:calc(100% - 112px)}
.is-stacking .cases-nav{display:flex}
}
.case-dialog{position:fixed;inset:0;width:min(580px,calc(100% - 36px));max-height:85svh;box-sizing:border-box;border:1px solid #40577e;border-radius:24px;background:#111c2c;color:#f1f6ff;padding:38px;font-family:Inter,sans-serif;overflow:auto}
.case-dialog::backdrop{background:#030712bb;backdrop-filter:blur(8px)}.case-dialog-close{position:absolute;right:14px;top:12px;width:38px;height:38px;border:1px solid #61779b;border-radius:50%;background:transparent;color:#fff;font:300 25px Inter,sans-serif;cursor:pointer}.case-dialog-close:hover{background:#ffffff14}.case-dialog h2{font-size:30px;font-weight:350;letter-spacing:-.04em;margin:20px 0 30px}.case-dialog dt{font-size:14px;text-transform:uppercase;letter-spacing:.1em;color:#89afff;margin:23px 0 8px}.case-dialog dd{margin:0;font-size:15px;line-height:1.7;font-weight:350}.case-demo-note{font-size:14px;line-height:1.7;color:#a6b6cf;margin:25px 0 0}
@media(max-width:1000px){.cases-section{padding:65px 6%}.cases-header{align-items:start;gap:25px}.case-card{padding:30px 24px 26px 56px;gap:20px}.case-rail{left:16px;top:32px}.case-visual{padding:20px 12px}}
@media(max-width:650px){.cases-header{display:block}.cases-header h2{font-size:38px}.cases-header>p{margin-top:22px;font-size:14px}.case-card{grid-template-columns:1fr;padding:25px 22px;gap:26px;border-radius:20px}.case-rail{left:auto;right:22px;top:26px;font-size:14px}.case-kind{padding-right:28px;font-size:14px}.case-card h3{font-size:38px}.case-card h3>span{font-size:28px}.case-description{font-size:14px}.case-outcome{font-size:14px;margin-top:2px}.case-copy{padding:0}.case-visual{min-height:320px;padding:25px;max-height:none}.mason-browser,.mason-store,.mason-system{max-width:330px;margin:auto}.case-dialog{padding:32px 24px}.case-dialog h2{font-size:27px}}
@media(prefers-reduced-motion:no-preference){.cases-section:not(.is-stacking) .case-card.case-ready{opacity:0;translate:0 18px;transition:opacity .7s,translate .85s cubic-bezier(.22,1,.36,1)}.cases-section:not(.is-stacking) .case-card.case-ready.case-entered{opacity:1;translate:0 0}}

/* Real projects: factual outcomes in place of illustrative demo storefronts. */
.case-card h3{font-size:clamp(25px,2.5vw,34px);line-height:1.13}
.case-card h3>span{font-size:clamp(22px,2.2vw,30px);margin-top:18px}
.case-copy>.cta{margin-top:auto;flex-shrink:0}
.case-kind{margin-bottom:18px}
.case-visual.case-results{display:flex;flex-direction:column;justify-content:center;align-items:stretch;padding:32px;color:#f5f8ff;background:radial-gradient(ellipse at 90% 95%,#387bea80,transparent 70%),#172b48}
.case-card-1 .case-results{background:radial-gradient(ellipse at 90% 95%,#a4caff,transparent 75%),#edf5ff;color:#163365}
.case-card-2 .case-results{background:radial-gradient(ellipse at 90% 95%,#bdd9ff,transparent 75%),#f9fcff;color:#163365}
.case-results-label{font:350 14px/1.5 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;opacity:.65;margin:0 0 25px}
.case-metric{font:300 clamp(62px,7vw,100px)/1 Inter,sans-serif;letter-spacing:-.065em;margin:0 0 12px}
.case-metric-caption{font:350 14px/1.5 Inter,sans-serif;margin:0 0 34px;opacity:.8}
.case-result-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;border-top:1px solid #8ca9d14d;padding-top:22px}
.case-result-pair strong{display:block;font:350 clamp(23px,2.4vw,32px)/1.2 Inter,sans-serif;letter-spacing:-.04em;white-space:nowrap}
.case-result-pair span{display:block;font:350 14px/1.5 Inter,sans-serif;margin-top:8px;opacity:.7}
@media(max-width:650px){.case-card h3{font-size:28px}.case-card h3>span{font-size:26px}.case-visual.case-results{min-height:290px;padding:25px}.case-metric{font-size:76px}.case-result-pair{gap:12px}.case-result-pair strong{font-size:26px}.case-description{margin-bottom:24px}}

/* Expanded project stories. */
.case-dialog{width:min(900px,calc(100% - 40px));max-width:900px;max-height:90svh;padding:48px;overscroll-behavior:contain;scrollbar-color:#536c95 #111c2c}
.case-dialog-close{position:sticky;top:0;float:right;z-index:2;margin:-28px -28px 0 12px;background:#111c2c}
.case-detail-client{font:350 14px/1.6 Inter,sans-serif;color:#afc4e6;margin:22px 0 10px}
.case-dialog h2{font-size:clamp(28px,3.4vw,42px);line-height:1.15;max-width:720px;margin:0 0 24px;font-weight:300}
.case-dialog h2:focus{outline:none}
.case-detail-summary{font-size:17px;line-height:1.7;font-weight:350;color:#c4d0e2;margin:0 0 28px}
.case-detail-meta{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:0 0 24px}
.case-detail-meta dt{margin:0 0 7px}.case-detail-meta dd{font-size:14px}
.case-detail-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 30px;padding:0}
.case-detail-tags li{font-size:14px;line-height:1.5;padding:6px 11px;border:1px solid #354d73;border-radius:999px;color:#c0d5f6}
.case-detail-metrics{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:22px;background:linear-gradient(130deg,#203a66,#183054);border:1px solid #395780;border-radius:16px;padding:26px;margin:0 0 36px}
.case-detail-metrics>div{display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
.case-detail-metrics dt{font-size:14px;line-height:1.6;text-transform:none;letter-spacing:0;color:#c0d0e9;margin:10px 0 0}
.case-detail-metrics dd{order:-1;font-size:clamp(22px,2.5vw,30px);font-weight:300;line-height:1.25;letter-spacing:-.04em}
.case-detail-section{padding:28px 0;border-top:1px solid #a2b7d326}
.case-detail-section h3{font-size:22px;font-weight:350;letter-spacing:-.03em;margin:0 0 16px}
.case-detail-section>p{font-size:15px;line-height:1.8;font-weight:350;color:#c4d0e2;margin:0}
.case-detail-scope{display:grid;grid-template-columns:1fr 1fr;gap:12px 30px;padding-left:18px;margin:0;color:#c4d0e2;font-size:14px;font-weight:350;line-height:1.7}
.case-detail-steps{margin:0;padding-left:24px;font-size:15px;font-weight:350;line-height:1.8;color:#c4d0e2}
.case-detail-steps li{padding-left:8px;margin-bottom:16px}.case-detail-steps li:last-child{margin-bottom:0}.case-detail-steps li::marker{color:#8db4ff;font-weight:400}
.case-detail-section .case-draft-label,.case-draft-label{display:block;font-size:14px;line-height:1.5;color:#b9c6da;margin:0 0 12px;font-weight:350}
.case-testimonial-placeholder{border:1px dashed #526786;border-radius:16px;padding:24px;margin-top:12px}
.case-testimonial-placeholder .case-testimonial-author{font-size:14px;color:#8ea2c2;margin-top:14px}
.case-testimonial-placeholder .case-draft-label{margin:12px 0 0;color:#8ea2c2}
@media(max-width:650px){.case-dialog{width:calc(100% - 24px);padding:30px 22px;max-height:92svh}.case-dialog-close{margin:-16px -8px 0 12px}.case-detail-summary{font-size:15px}.case-detail-meta{grid-template-columns:1fr;gap:18px}.case-detail-metrics{grid-template-columns:1fr;padding:22px;gap:20px}.case-detail-metrics>div+div{border-top:1px solid #bdd3f52b;padding-top:20px}.case-detail-metrics dd{font-size:30px}.case-detail-scope{grid-template-columns:1fr}.case-detail-section{padding:24px 0}.case-testimonial-placeholder{padding:20px}.case-detail-section h3{font-size:21px}}

/* Preserve horizontal stacking in narrow and short preview windows too. */
@media(prefers-reduced-motion:no-preference){
 .is-stacking .cases-sticky{height:max(720px,100svh);top:min(0px,calc(100svh - 720px));padding:24px 0}
 .is-stacking .cases-stage{flex-shrink:0;height:clamp(440px,53svh,540px)}
 .is-stacking .cases-header{margin-bottom:24px;gap:24px}
 .is-stacking .cases-header h2{font-size:clamp(32px,3.6vw,48px)}
 .is-stacking .cases-header .closing-tag{margin-bottom:12px}
}
@media(max-width:1000px) and (prefers-reduced-motion:no-preference){
 .cases-section.is-stacking{padding:0 4%}
 .is-stacking .case-card{padding:26px 22px 24px 46px;gap:18px}
 .is-stacking .case-card-1{left:22px;width:calc(100% - 22px)}
 .is-stacking .case-card-2{left:44px;width:calc(100% - 44px)}
 .is-stacking .case-rail{left:10px;right:auto;top:28px;font-size:14px}
 .is-stacking .case-card h3{font-size:25px}
 .is-stacking .case-card h3>span{font-size:23px}
 .is-stacking .case-visual.case-results{padding:22px}
}
@media(max-width:650px) and (prefers-reduced-motion:no-preference){
 .is-stacking .cases-sticky{height:max(720px,100svh);padding:18px 0}
 .is-stacking .cases-header{margin-bottom:18px}
 .is-stacking .cases-header h2{font-size:30px;line-height:1.08}
 .is-stacking .cases-header h2 br{display:none}
 .is-stacking .cases-header>p{margin:12px 0 0;font-size:14px;line-height:1.5;max-width:310px}
 .is-stacking .cases-header .closing-tag{margin-bottom:10px}
 .is-stacking .cases-stage{height:480px;border-radius:20px}
 .is-stacking .case-card{padding:24px 18px 18px 34px;grid-template-columns:1fr;grid-template-rows:1fr 132px;gap:16px}
 .is-stacking .case-card-1{left:14px;width:calc(100% - 14px)}
 .is-stacking .case-card-2{left:28px;width:calc(100% - 28px)}
 .is-stacking .case-rail{left:8px;top:26px;font-size:14px}
 .is-stacking .case-kind{font-size:14px;padding:0;margin-bottom:12px}
 .is-stacking .case-card h3{font-size:23px;margin-bottom:12px}
 .is-stacking .case-card h3>span{font-size:22px;margin-top:12px}
 .is-stacking .case-description{font-size:14px;line-height:1.6;margin-bottom:16px}
 html[data-design="contrast"] .is-stacking .case-copy>.secondary{height:40px;font-size:14px;padding-inline:18px}
 .is-stacking .case-visual.case-results{min-height:0;padding:15px;display:grid;grid-template-columns:.9fr 1.1fr;column-gap:12px;row-gap:4px;align-content:center;overflow:visible}
 .is-stacking .case-results-label{grid-column:1/-1;font-size:14px;margin:0 0 5px}
 .is-stacking .case-metric{font-size:40px;margin:0;align-self:end}
 .is-stacking .case-metric-caption{font-size:14px;line-height:1.4;margin:0;grid-column:1;grid-row:3}
 .is-stacking .case-result-pair{grid-column:2;grid-row:2/4;grid-template-columns:1fr;border-top:0;border-left:1px solid #8ca9d14d;padding:0 0 0 12px;gap:8px}
 .is-stacking .case-result-pair strong{font-size:18px}
 .is-stacking .case-result-pair span{font-size:14px;margin-top:2px}
 .is-stacking .cases-nav{margin-top:14px}
 .is-stacking .cases-nav>span{font-size:14px;max-width:135px}
 .is-stacking .cases-nav button{width:36px;height:36px}
}
@media(max-width:360px) and (prefers-reduced-motion:no-preference){
 .is-stacking .cases-stage{height:510px}
 .is-stacking .cases-sticky{height:max(760px,100svh);top:min(0px,calc(100svh - 760px))}
 .is-stacking .case-card{padding-right:14px;grid-template-rows:1fr 132px}
 .is-stacking .case-card h3{font-size:21px}
 .is-stacking .case-card h3>span{font-size:20px}
 .is-stacking .case-metric{font-size:32px}
 .is-stacking .case-result-pair strong{font-size:16px}
}

.cases-nav button:first-child{display:inline-block}