/* Case-study variations of the established Palladio-inspired surfaces. */
.merchant-story-layout{padding-top:70px;gap:55px;grid-template-columns:31% 1fr;align-items:start}
.case-project-aside .eyebrow{font-size:10px;letter-spacing:1.6px;margin-bottom:14px}
.case-project-aside .case-client{font-family:'Instrument Serif',Georgia,serif;font-size:27px;margin-bottom:30px}
.case-project-aside .chips{margin-bottom:24px;gap:7px}
.case-tool-panel,.case-paper-block,.case-build-steps{background-color:#e8e3d5;background-image:var(--paper-material);background-size:var(--paper-material-scale);border-radius:24px}
.case-tool-panel{padding:22px 15px 15px;margin:28px 0 16px}
.case-tool-panel>.eyebrow{padding-inline:7px;margin-bottom:20px}
.case-tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.case-tool-tile{min-width:0;background-color:#faf6ed;background-image:var(--paper-material);border-radius:15px;min-height:115px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:14px 9px;transition:transform .55s var(--reference-ease),background-color .55s}
.case-tool-tile:first-child{grid-column:1/-1;min-height:120px}
.case-tool-tile img{width:100%;max-width:115px;height:45px;object-fit:contain;filter:sepia(.7) saturate(.42);opacity:.9;mix-blend-mode:multiply}
.case-tool-tile:first-child img{max-width:145px;height:55px}
.case-tool-tile span{font-size:11px;line-height:1.4;text-align:center;color:#5a6675}
.case-tool-tile:hover{transform:translateY(-3px);background-color:#f5efdf}
.case-tool-connections{display:flex;align-items:center;justify-content:center;gap:14px;border-top:1px dashed #c7c1b2;margin-top:17px;padding-top:17px}
.case-tool-connections>span{font-size:26px;color:#777f70}.case-tool-connections p{font-size:11px;line-height:1.6;margin:0}.case-tool-connections b{font-weight:500;color:var(--ink)}
.case-project-aside .case-privacy{font-size:11px;line-height:1.6;color:var(--muted)}
.merchant-story-layout article .eyebrow{font-size:10px;letter-spacing:1.7px;line-height:1.4;margin:0 0 22px}
.merchant-story-layout article .case-story-block{padding:35px;margin-bottom:25px}
.merchant-story-layout article h2{font-size:36px;line-height:1.15;margin-bottom:25px}
.merchant-story-layout article p{font-size:15px;line-height:1.85}
.merchant-story-layout article .case-navy-block{background:#29384d;color:#faf6ed;border-radius:24px}
.merchant-story-layout .case-navy-block .eyebrow{color:#d7d9cd}
.merchant-story-layout .case-navy-block p,.merchant-story-layout .case-navy-block li{color:#e6e8e7}
.case-before-after{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:45px!important}
.case-before-after>div{padding:27px 23px;border-radius:24px}
.merchant-story-layout .case-before-after h3{font-size:27px;line-height:1.18;margin-bottom:28px;letter-spacing:-.02em}
.case-before-after ul{padding:0;list-style:none}
.case-before-after li{font-size:13px;line-height:1.6;padding:12px 0;border-top:1px dashed #bdb8a9}
.case-before-after .case-navy-block li{border-color:#77808d77}
.case-build-section{margin-bottom:30px!important}
.case-build-section>.eyebrow,.case-build-section>h2{padding-inline:5px}
.case-build-steps{padding:9px}
.case-build-steps details:last-child{margin-bottom:0}
.case-build-steps summary{min-height:85px;padding:20px;gap:13px}
.case-build-steps summary>h3{font-size:24px;line-height:1.25;flex:1}
.case-build-steps summary>b{margin-left:auto}
.merchant-story-layout .case-build-steps .detail-body{padding:0 24px 25px}
.merchant-story-layout .case-build-steps .detail-body p+p{margin-top:18px}
.case-lesson h2{max-width:520px}
/* Keep the project tools alongside the story, bounded by the article and footer. */
@media(min-width:810px){
 .merchant-story-layout>aside{position:static;align-self:stretch;max-height:none;overflow:visible;padding-right:0}
 .case-sticky-tools{position:sticky;top:94px;overflow:visible}
}
@media(max-width:1000px){.merchant-story-layout{grid-template-columns:32% 1fr;gap:28px}.merchant-story-layout article .case-story-block{padding:27px}.case-before-after{grid-template-columns:1fr}.case-tool-grid{grid-template-columns:1fr}.case-tool-tile:first-child{grid-column:auto}.case-tool-tile{min-height:100px}}
@media(max-width:809px){.merchant-story-layout{grid-template-columns:1fr;padding-top:45px;gap:35px}.case-tool-grid{grid-template-columns:repeat(3,1fr)}.case-tool-tile:first-child{grid-column:auto;min-height:115px}.case-tool-panel{max-width:none}.case-tool-tile:first-child img{height:45px;max-width:115px}.case-before-after{grid-template-columns:1fr 1fr}.merchant-story-layout>aside{border-bottom:0;padding-bottom:0}.merchant-story-layout article h2{font-size:33px}}
@media(max-width:520px){.case-tool-grid{grid-template-columns:1fr 1fr}.case-tool-tile:first-child{grid-column:1/-1}.case-before-after{grid-template-columns:1fr}.merchant-story-layout article .case-story-block{padding:25px 22px}.case-build-steps summary{padding:18px 13px;gap:10px}.case-build-steps summary>h3{font-size:23px}.merchant-story-layout .case-build-steps .detail-body{padding-inline:18px}.merchant-story-layout article p{font-size:14px}.merchant-story-layout article h2{font-size:32px}}
@media(prefers-reduced-motion:reduce){.case-tool-tile{transition:none}.case-tool-tile:hover{transform:none}}
.motion-paused .case-tool-tile{transition:none}

@media(max-width:809px){.case-sticky-tools{position:static}}
/* Project-specific system tiles use the same paper material and spacing. */
.case-system-tile svg{width:38px;height:38px;color:#777f70;flex-shrink:0}
.case-system-tile b{font-size:13px;line-height:1.4;font-weight:500;color:var(--ink);text-align:center}
.case-system-tile{gap:10px;min-height:145px;padding:20px 12px}
.case-system-tile:first-child{min-height:145px}
.case-system-tile img,.case-system-tile:first-child img{width:auto;max-width:90px;max-height:46px;height:46px;object-fit:contain}