/* Scalient's four-card composition, adapted to the BearStack service path. */
.bs .bs-connect{padding:96px 16px 0;scroll-margin-top:32px}
.bs .bs-connect-canvas{background:#17130A;color:#F4F1E8;border-radius:32px;padding:64px 0;overflow:clip;--focus-ring:#F7B500}
.bs .bs-connect-head{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:end;gap:64px;margin-bottom:64px}
.bs .bs-connect-kicker{font:500 11px/16px 'IBM Plex Mono',monospace;letter-spacing:.08em;text-transform:uppercase;margin:0 0 24px;color:#F7B500}
.bs .bs-connect-title{font:500 clamp(40px,5vw,72px)/1.06 Chillax,Inter,sans-serif;letter-spacing:-.025em;max-width:720px;margin:0;text-wrap:balance}
.bs .bs-connect-intro{justify-self:end;max-width:32ch;display:flex;flex-direction:column;align-items:flex-start;gap:24px;margin:0}
.bs .bs-connect-intro p{font:400 16px/25.6px Inter,sans-serif;margin:0;color:color-mix(in srgb,#F4F1E8 78%,#17130A)}
.bs .bs-connect-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:0}
.bs .bs-connect-card{min-width:0;position:relative;margin:0}
.bs .bs-connect-card:has(.bs-connect-face:hover),.bs .bs-connect-card:focus-within{z-index:2}
.bs .bs-connect-face{height:100%;min-height:360px;box-sizing:border-box;border-radius:24px;background:color-mix(in srgb,#F4F1E8 5%,#17130A);padding:32px;display:flex;flex-direction:column;position:relative;isolation:isolate;overflow:clip;transform-origin:50% 50%}
.bs .bs-connect-face>*{margin:0}
.bs-connect-fill{position:absolute;inset:0;background:#F4F1E8;transform:scaleY(0);transform-origin:center bottom;z-index:-1;pointer-events:none}
.bs-connect-top{display:flex;align-items:center;justify-content:space-between}
.bs-connect-number{font:400 12px/18px 'IBM Plex Mono',monospace;color:#F7B500}
.bs-connect-icon-window{height:36px;width:36px;overflow:clip;pointer-events:none}
.bs-connect-icon-track{display:block;height:72px}
.bs-connect-icon-track svg{display:block;width:36px;height:36px;color:#F4F1E8}
.bs-connect-icon-track svg+svg{color:#17130A}
.bs .bs-connect-card-title{font:500 30px/1.2 Chillax,Inter,sans-serif;letter-spacing:-.025em;margin:28px 0 64px;color:#F4F1E8}
.bs .bs-connect-link{color:inherit;text-decoration:none;outline:none}
.bs-connect-link::after{content:'';position:absolute;inset:0;border-radius:24px}
.bs .bs-connect-card-copy{font:400 16px/24px Inter,sans-serif;color:color-mix(in srgb,#F4F1E8 72%,#17130A);margin-top:auto}
/* Focus is immediate. The whole card is one real link, with no hidden copy. */
.bs .bs-connect-link:focus-visible{outline:none}
.bs .bs-connect-face:has(.bs-connect-link:focus-visible){outline:2px solid #F7B500;outline-offset:4px;transform:none!important}
.bs-connect-face:has(.bs-connect-link:focus-visible) .bs-connect-fill{transform:scaleY(1)!important}
.bs .bs-connect-face:has(.bs-connect-link:focus-visible) .bs-connect-card-title,.bs .bs-connect-face:has(.bs-connect-link:focus-visible) .bs-connect-card-copy,.bs .bs-connect-face:has(.bs-connect-link:focus-visible) .bs-connect-number{color:#17130A!important}
.bs-connect-face:has(.bs-connect-link:focus-visible) .bs-connect-icon-track{transform:translateY(-50%)!important}
@media(hover:hover) and (pointer:fine){
 .bs-connect:not(.bs-connect-motion) .bs-connect-face:hover .bs-connect-fill{transform:scaleY(1)}
 .bs .bs-connect:not(.bs-connect-motion) .bs-connect-face:hover .bs-connect-card-title,.bs .bs-connect:not(.bs-connect-motion) .bs-connect-face:hover .bs-connect-card-copy,.bs .bs-connect:not(.bs-connect-motion) .bs-connect-face:hover .bs-connect-number{color:#17130A}
 .bs-connect:not(.bs-connect-motion) .bs-connect-face:hover .bs-connect-icon-track{transform:translateY(-50%)}
}
@media(max-width:1100px) and (min-width:961px){.bs .bs-connect-face{padding:24px}.bs .bs-connect-card-title{font-size:26px}}
@media(max-width:960px){
 .bs .bs-connect{padding:64px 16px 0}
 .bs .bs-connect-canvas{padding:48px 16px}
 .bs .bs-connect-head{grid-template-columns:1fr;gap:32px;margin-bottom:48px}
 .bs .bs-connect-title{font-size:40px;max-width:24ch}
 .bs .bs-connect-intro{justify-self:start;max-width:44ch}
 .bs .bs-connect-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
 .bs .bs-connect-face{padding:24px;min-height:320px}
 .bs .bs-connect-card-title{margin-bottom:48px}
}
@media(max-width:600px){
 .bs .bs-connect-title{font-size:36px;line-height:40px}
 .bs .bs-connect-grid{grid-template-columns:1fr;gap:16px}
 .bs .bs-connect-face{min-height:300px}
 .bs .bs-connect-card-title{font-size:30px;max-width:10ch;margin-bottom:40px}
}