/* Compact portfolio introduction. Same type and controls as the rest of BxM. */
.bxm-work-intro{padding-block:24px 42px}
.bxm-work-intro>.bxm-work-breadcrumb{margin-bottom:24px}
.bxm-work-intro__layout{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);align-items:center;gap:6%}
.bxm-work-intro__copy{max-width:740px;min-width:0}
.bxm-work-intro h1{font:300 clamp(40px,3.7vw,68px)/1.09 var(--bxm-font-family);letter-spacing:-.045em;margin:0 0 22px}
.bxm-work-intro h1 span{color:var(--work-blue)}
.bxm-work-intro__lead{font-size:clamp(18px,1.25vw,23px);line-height:1.65;color:var(--work-ink);margin:0 0 14px;max-width:51ch}
.bxm-work-intro__support{font-size:var(--bxm-type-body);line-height:1.65;color:var(--work-muted);margin:0 0 24px;max-width:52ch}
.bxm-work-intro__actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 25px}
.bxm-work-intro__actions .bxm-work-text-link{margin:0}
.bxm-work-showcase{width:100%;max-width:640px;justify-self:center;min-width:0}
.bxm-work-showcase__stage{position:relative;background:var(--work-soft);border:1px solid var(--work-line);border-radius:16px;box-shadow:0 14px 35px #17355612;overflow:hidden}
.bxm-work-showcase__project{display:block;color:var(--work-ink)}
.bxm-work-showcase__bar{height:30px;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0 16px;color:var(--work-muted);background:var(--work-soft);font-size:14px;border-bottom:1px solid var(--work-line)}
.bxm-work-showcase__bar>span:first-child{display:flex;gap:5px}.bxm-work-showcase__bar i{display:block;width:5px;height:5px;border-radius:50%;background:var(--work-muted);opacity:.5}
.bxm-work-showcase__viewport{display:block;aspect-ratio:16/9;overflow:hidden;background:#fff}
.bxm-work-showcase__viewport img{width:100%;height:100%;object-fit:cover;object-position:top;transition:opacity .2s}
.bxm-work-showcase__caption{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:14px 18px;border-top:1px solid var(--work-line);background:var(--work-bg);font-size:16px}
.bxm-work-showcase__caption strong{font-weight:600}.bxm-work-showcase__caption>span{display:flex;align-items:center;gap:12px;color:var(--work-blue);font-size:14px}.bxm-work-showcase__caption svg{width:20px;height:20px;transition:transform .2s}.bxm-work-showcase__project:hover .bxm-work-showcase__caption svg{transform:translateX(4px)}
.bxm-work-showcase__choices{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;padding-top:16px}
.bxm-work-showcase__choices button{font:400 16px var(--bxm-font-family);display:inline-flex;gap:10px;align-items:center;min-height:44px;padding:8px 16px;cursor:pointer;border-radius:99px;border:1px solid var(--work-line);background:transparent;color:var(--work-muted)}
.bxm-work-showcase__choices button>span{font-size:14px;color:var(--work-blue)}
.bxm-work-showcase__choices button[aria-pressed="true"]{color:var(--work-ink);border-color:var(--work-blue);background:var(--work-soft)}
.bxm-work-showcase__project:not([hidden]){animation:bxm-work-preview-reveal .25s ease-out}
@keyframes bxm-work-preview-reveal{from{opacity:.35}to{opacity:1}}
@media(max-width:1100px){.bxm-work-intro__layout{gap:4%}.bxm-work-intro h1{font-size:clamp(38px,4vw,46px)}.bxm-work-intro__actions{gap:8px 18px}.bxm-work-intro__actions .bxm-v55-button{padding-inline:18px}.bxm-work-showcase__caption{padding:12px}}
@media(max-width:700px){.bxm-work-intro{padding-block:20px 32px}.bxm-work-intro>.bxm-work-breadcrumb{margin-bottom:22px}.bxm-work-intro__layout{grid-template-columns:1fr;gap:28px}.bxm-work-intro h1{font-size:clamp(38px,8.4vw,55px);margin-bottom:18px}.bxm-work-intro__lead{font-size:18px}.bxm-work-intro__support{font-size:16px;margin-bottom:18px}.bxm-work-intro .bxm-work-eyebrow{font-size:14px;letter-spacing:.07em}.bxm-work-showcase{max-width:520px}.bxm-work-showcase__caption{font-size:16px}.bxm-work-showcase__caption>span{gap:5px}.bxm-work-showcase__choices{gap:8px;padding-top:12px}.bxm-work-showcase__choices button{font-size:14px;padding-inline:14px}}
@media(prefers-reduced-motion:reduce){.bxm-work-showcase__project{animation:none!important}.bxm-work-showcase__caption svg{transition:none}}

/* Reuse the company page's lightweight computer scene in the portfolio hero. */
.bxm-work-computer{--about-bg:#fff;--about-muted:#657381;--about-line:#d7e2ef;--about-blue:#286bd2;--about-ink:#25313b;min-width:0;width:100%;background:transparent}
.bxm-work-computer figure.bxm-strengths-showcase{width:100%;margin:0}
.bxm-work-computer .bxm-strengths-showcase__stage{aspect-ratio:1.1}
.bxm-work-computer .bxm-strengths-showcase__hint{font-size:13px}
.bxm-work-computer .bxm-strengths-showcase__project{font-size:15px}
[data-bxm-theme="dark"] .bxm-work-computer{--about-bg:#162335;--about-muted:#bdcbdc;--about-line:#31445e;--about-ink:#edf4ff}
@media(max-width:700px){.bxm-work-computer{max-width:560px;margin-inline:auto}.bxm-work-computer .bxm-strengths-showcase__stage{aspect-ratio:1.04}}

/* Align the introduction with the showcase and give the companion its own space. */
.bxm-work-intro__layout{align-items:start}
.bxm-work-intro__copy{padding-top:20px}
.bxm-work-intro__guide{display:grid;grid-template-columns:88px minmax(0,1fr);gap:18px;align-items:center;border-top:1px solid var(--work-line);margin-top:28px;padding-top:23px}
.bxm-work-intro__guide [data-guide-dock-slot]{width:88px;height:100px;display:grid;place-items:center;color:var(--work-blue);font-size:18px;font-weight:600}
.bxm-work-intro__guide[data-active="true"] [data-guide-dock-slot]>span,.bxm-work-intro__guide[data-arriving="true"] [data-guide-dock-slot]>span{visibility:hidden}
.bxm-work-intro__guide .bxm-work-eyebrow{font-size:12px;letter-spacing:.09em;margin:0 0 8px}
.bxm-work-intro__guide h2{font-size:21px;line-height:1.25;margin:0 0 8px;font-weight:600;letter-spacing:-.02em}
.bxm-work-intro__guide [data-chapter-message]{font-size:16px;line-height:1.55;color:var(--work-muted);margin:0;min-height:5em}
.bxm-work-intro__guide button{display:inline-flex;align-items:center;gap:12px;background:none;border:0;padding:10px 0 0;font:600 15px var(--bxm-font-family);color:var(--work-blue);cursor:pointer;min-height:44px}
.bxm-work-intro__guide button span{transition:transform .2s}.bxm-work-intro__guide button:hover span{transform:translateX(5px)}
@media(max-width:1100px){.bxm-work-intro__copy{padding-top:8px}.bxm-work-intro__guide{grid-template-columns:72px minmax(0,1fr);gap:12px}.bxm-work-intro__guide [data-guide-dock-slot]{width:72px;height:88px}}
@media(max-width:700px){.bxm-work-intro__copy{padding-top:0}.bxm-work-intro__guide{margin-top:22px;padding-top:20px}.bxm-work-intro__guide [data-chapter-message]{min-height:0}.bxm-work-intro__guide h2{font-size:20px}}
@media(prefers-reduced-motion:reduce){.bxm-work-intro__guide button span{transition:none}}
