/* Circular real-project showcase adapted to the shared JB visual system. */
.calm-home .stair-showcase{padding:22px 0 52px;background:#fff}
.ss-panel{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:26px 46px;padding:46px;background:#1b2023;border:1px solid #30383b;border-radius:22px;color:#fff;overflow:hidden}
.ss-copy{align-self:center;min-width:0}
.calm-home .ss-intro .eyebrow{color:#ff8b48;font-size:11px;font-weight:650;letter-spacing:.12em;margin:0 0 18px}
.calm-home .ss-intro h2{font-size:35px;line-height:1.17;letter-spacing:-.035em;color:#fff;max-width:600px}
.ss-stories{margin-top:25px;min-height:145px}
.ss-story[hidden],.ss-card[hidden]{display:none!important}
.calm-home .ss-story h3{font-size:23px;line-height:1.3;color:#fff;letter-spacing:-.02em;margin:0}
.ss-story h3 a:hover{text-decoration:underline;text-underline-offset:5px}
.calm-home .ss-story p{font-size:15px;line-height:1.85;color:#d2d9dc;max-width:490px;margin-top:14px}
.ss-controls{display:flex;align-items:center;gap:12px;margin-top:22px;max-width:350px}
.ss-controls[hidden]{display:none}
.ss-steps{display:flex;gap:8px;min-width:0;flex:1}
.ss-steps button,.ss-pause{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;min-width:0;height:38px;padding:0;border:1px solid #6a7477;border-radius:50%;background:transparent;color:#fff;font-size:13px;font-weight:650;line-height:1}
.ss-steps button{flex:1;max-width:38px}
.ss-steps button[aria-pressed="true"]{background:#f76b20;border-color:#f76b20;color:#17191a}
.ss-steps button:hover,.ss-pause:hover{border-color:#ff934e}
.ss-pause{width:39px;height:39px;border-radius:10px}
.ss-pause svg{width:17px;height:17px}
.ss-pause:disabled{opacity:.5;cursor:default}
.ss-panel :is(a,button):focus-visible{outline:2px solid #ff9857;outline-offset:5px}
.ss-copy .ss-service{margin-top:29px;border-radius:7px;font-size:13px;min-height:48px;padding:12px 20px}
.ss-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:center;align-items:center;gap:32px 18px;min-height:450px;min-width:0}
.ss-card{margin:0;min-width:0;width:100%;justify-self:center;transition:opacity .25s ease,transform .25s ease}
.ss-card a{display:flex;flex-direction:column;align-items:center;gap:13px;min-width:0;color:#fff}
.ss-circle{display:block;width:min(100%,175px);aspect-ratio:1;border-radius:50%;overflow:hidden;border:2px solid #ffffff22;transition:width .28s ease,border-color .25s ease,box-shadow .25s ease}
.ss-circle img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.ss-card[data-slot="0"] .ss-circle{width:min(100%,220px)}
.ss-card[data-slot="1"] .ss-circle{width:min(88%,155px)}
.ss-card[data-slot="2"] .ss-circle{width:min(84%,155px)}
.ss-card[data-slot="3"] .ss-circle{width:min(100%,185px)}
.ss-card[data-active="true"] .ss-circle{border-color:#ff7e35;box-shadow:0 0 0 2px #ff7e3510}
.ss-card .ss-caption{font-size:12px;font-weight:650;line-height:1.5;text-align:center;color:#fff}
.calm-home .ss-note{grid-column:2;margin:0;color:#cbd4d8;font-size:11px;line-height:1.8;align-self:end}
.ss-panel .ss-status{margin:0}
.ss-ready .ss-story:not([hidden]){animation:ss-story-enter .28s ease both}
@keyframes ss-story-enter{from{opacity:.35;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(hover:hover) and (pointer:fine){.ss-card a:hover img{transform:scale(1.04)}.ss-card a:hover .ss-circle{border-color:#ff9857}}
@media(max-width:1050px){.ss-panel{gap:24px 30px;padding:34px}.calm-home .ss-intro h2{font-size:30px}.calm-home .ss-story h3{font-size:21px}.calm-home .ss-story p{font-size:14px}.ss-stories{min-height:165px}.ss-gallery{min-height:390px;gap:25px 14px}.ss-card .ss-caption{font-size:11px}.ss-steps{gap:6px}}
@media(max-width:760px){
 .calm-home .stair-showcase{padding:12px 0 38px}
 .ss-panel{grid-template-columns:1fr;padding:28px 24px;gap:25px;border-radius:17px}
 .ss-copy{display:contents}
 .ss-intro{order:0}
 .calm-home .ss-intro h2{font-size:30px;line-height:1.2;max-width:580px}
 .ss-gallery{order:1;min-height:0;gap:24px 18px;max-width:480px;width:100%;justify-self:center}
 .ss-card[data-slot="0"] .ss-circle{width:min(100%,180px)}
 .ss-card[data-slot="1"] .ss-circle,.ss-card[data-slot="2"] .ss-circle{width:min(88%,145px)}
 .ss-card[data-slot="3"] .ss-circle{width:min(100%,165px)}
 .ss-stories{order:2;min-height:160px;margin-top:0}
 .calm-home .ss-story h3{font-size:22px}
 .calm-home .ss-story p{font-size:14px;line-height:1.8;margin-top:12px}
 .ss-controls{order:3;margin:0;width:100%;max-width:350px;gap:10px}
 .ss-copy .ss-service{order:4;margin-top:0;justify-self:start}
 .calm-home .ss-note{order:5;grid-column:1;font-size:10px;margin:0}
 .ss-card a{gap:10px}
 .ss-card .ss-caption{font-size:11px}
}
@media(max-width:380px){.ss-panel{padding:24px 19px;gap:22px}.calm-home .ss-intro h2{font-size:27px}.ss-steps{gap:5px}.ss-steps button{height:34px;font-size:12px}.ss-pause{width:34px;height:34px}.ss-controls{gap:8px}.ss-stories{min-height:160px}.ss-card .ss-caption{font-size:10px}}
@media(prefers-reduced-motion:reduce){.ss-card,.ss-circle,.ss-circle img{transition:none!important}.ss-ready .ss-story:not([hidden]){animation:none!important}.ss-card a:hover img{transform:none}}
.motion-paused .ss-ready .ss-story,.motion-paused .ss-card,.motion-paused .ss-circle,.motion-paused .ss-circle img{animation:none!important;transition:none!important}
@media print{.ss-controls{display:none!important}.ss-panel{background:#fff;color:#111}.ss-gallery{display:grid}.ss-card{display:block!important}.ss-panel h2,.ss-panel h3,.ss-panel p,.ss-card .ss-caption{color:#111!important}}