/* ────────────────────────────────────────────────────────
   SHARED SOLUTION COMPONENTS
   Hero, portfolio group, card, and closing CTA. Loaded on
   the Solutions hub and on every solution detail page so the
   whole portfolio shares one visual source.
   ──────────────────────────────────────────────────────── */

.mbx-solution-hero__shell,
.mbx-solution-cta__shell,
.mbx-solution-group {
    margin: 0 auto;
    max-width: var(--mbx-shell-max);
    padding-left: var(--mbx-shell-pad);
    padding-right: var(--mbx-shell-pad);
}

/* ── HERO ────────────────────────────────────────────── */
.mbx-solution-hero {
    border-bottom: 1px solid var(--mbx-line);
    padding: 160px 0 72px;
}

.mbx-solution-hero__shell {
    align-items: center;
    display: grid;
    gap: 56px;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
}

.mbx-solution-hero--text-only .mbx-solution-hero__shell {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 900px) {
    .mbx-solution-hero {
        padding: 128px 0 56px;
    }

    .mbx-solution-hero__shell {
        gap: 36px;
        grid-template-columns: minmax(0, 1fr);
    }
}

.mbx-solution-hero__eyebrow {
    color: #a36309;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin: 0 0 16px;
    text-transform: uppercase;
}

.mbx-solution-hero__title {
    color: var(--mbx-ink);
    font-size: clamp(2.125rem, 3.6vw, 3.6rem);
    font-weight: 600;
    letter-spacing: -0.05em;
    line-height: 1.04;
    margin: 0;
    max-width: 17ch;
}

.mbx-solution-hero--text-only .mbx-solution-hero__title {
    max-width: 20ch;
}

.mbx-solution-hero__intro {
    color: var(--mbx-muted);
    font-size: 1rem;
    line-height: 1.72;
    margin: 24px 0 0;
    max-width: 62ch;
}

.mbx-solution-hero__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
    margin: 30px 0 0;
}

.mbx-solution-hero__cta {
    background: var(--mbx-ink);
    border-radius: 10px;
    color: #ffffff;
    display: inline-block;
    font-size: 0.9375rem;
    font-weight: 500;
    padding: 13px 26px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.mbx-solution-hero__alt {
    border-bottom: 1px solid var(--mbx-line);
    color: var(--mbx-muted);
    font-size: 0.9375rem;
    padding-bottom: 2px;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.mbx-solution-hero__alt:hover {
    border-bottom-color: #a36309;
    color: #a36309;
}

.mbx-solution-hero__alt:focus-visible {
    outline: 2px solid var(--mbx-orange);
    outline-offset: 3px;
}

.mbx-solution-hero__cta:hover {
    background: #1d2b41;
}

.mbx-solution-hero__cta:focus-visible {
    outline: 2px solid var(--mbx-orange);
    outline-offset: 3px;
}

/* Plain image. No gradient scrim, no floating status badge, no
   grayscale-to-colour hover; the photograph carries itself. */
.mbx-solution-hero__visual {
    margin: 0;
    overflow: hidden;
    border-radius: 14px;
}

.mbx-solution-hero__visual img {
    aspect-ratio: 4 / 3;
    display: block;
    height: auto;
    object-fit: cover;
    width: 100%;
}

/* The image is a play control on pages that open a video dialog. One flat
   triangle, no blurred glass disc and no pulsing ring. */
.mbx-solution-hero__play {
    background: none;
    border: 0;
    cursor: pointer;
    display: block;
    padding: 0;
    position: relative;
    width: 100%;
}

.mbx-solution-hero__play:focus-visible {
    outline: 2px solid var(--mbx-orange);
    outline-offset: 3px;
}

.mbx-solution-hero__play-icon {
    background: rgba(5, 11, 20, 0.72);
    border-radius: 50%;
    height: 64px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: background-color 0.2s ease;
    width: 64px;
}

.mbx-solution-hero__play-icon::after {
    border-bottom: 10px solid transparent;
    border-left: 17px solid #ffffff;
    border-top: 10px solid transparent;
    content: "";
    left: 52%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.mbx-solution-hero__play:hover .mbx-solution-hero__play-icon {
    background: rgba(5, 11, 20, 0.88);
}

/* ── CONTEXT ─────────────────────────────────────────
   Every paragraph here is targeted by its own class. A rule such as
   `.mbx-solution-context p` would outrank the single-class rules on the
   eyebrow and the point text and silently repaint them. */
.mbx-solution-context {
    border-bottom: 1px solid var(--mbx-line);
}

.mbx-solution-context__shell,
.mbx-solution-caps__shell {
    margin: 0 auto;
    max-width: var(--mbx-shell-max);
    padding: 88px var(--mbx-shell-pad);
}

@media (max-width: 760px) {
    .mbx-solution-context__shell,
    .mbx-solution-caps__shell {
        padding: 60px var(--mbx-shell-pad);
    }
}

.mbx-solution-context__eyebrow,
.mbx-solution-caps__eyebrow {
    color: #a36309;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin: 0 0 16px;
    text-transform: uppercase;
}

.mbx-solution-context__title {
    color: var(--mbx-ink);
    font-size: clamp(1.75rem, 2.8vw, 2.5rem);
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 1.14;
    margin: 0;
    max-width: 22ch;
}

.mbx-solution-context__intro {
    color: var(--mbx-muted);
    font-size: 1.0625rem;
    line-height: 1.75;
    margin: 22px 0 0;
    max-width: 66ch;
}

.mbx-solution-context__points {
    border-top: 1px solid var(--mbx-line);
    display: grid;
    gap: 0;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    list-style: none;
    margin: 44px 0 0;
    padding: 0;
}

.mbx-solution-context__point {
    border-bottom: 1px solid var(--mbx-line);
    padding: 22px 28px 22px 0;
}

@media (min-width: 761px) {
    .mbx-solution-context__point + .mbx-solution-context__point {
        border-left: 1px solid var(--mbx-line);
        padding-left: 28px;
    }
}

.mbx-solution-context__point-title {
    color: var(--mbx-ink);
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.mbx-solution-context__point-text {
    color: var(--mbx-muted);
    display: block;
    font-size: 0.875rem;
    line-height: 1.65;
    margin-top: 6px;
}

/* ── CAPABILITIES ────────────────────────────────────── */
.mbx-solution-caps {
    background: var(--mbx-sand);
    border-bottom: 1px solid var(--mbx-line);
}

/* A page may use this block twice. Two sand panels in a row merge into one
   long field, so the second one drops back to white and the pair alternates. */
.mbx-solution-caps + .mbx-solution-caps {
    background: #ffffff;
}

.mbx-solution-caps__head {
    max-width: 66ch;
}

.mbx-solution-caps__title {
    color: var(--mbx-ink);
    font-size: clamp(1.625rem, 2.4vw, 2.125rem);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1.16;
    margin: 0;
}

.mbx-solution-caps__intro {
    color: var(--mbx-muted);
    font-size: 1rem;
    line-height: 1.72;
    margin: 18px 0 0;
}

/* Explicit column counts, never auto-fit. auto-fit packs as many tracks as
   the minimum width allows, so a four-item grid asking for two columns was
   silently laid out as four narrow ones. */
.mbx-solution-caps__grid {
    display: grid;
    gap: 40px 44px;
    grid-template-columns: 1fr;
    margin-top: 48px;
}

@media (min-width: 640px) {
    .mbx-solution-caps__grid--2,
    .mbx-solution-caps__grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 980px) {
    .mbx-solution-caps__grid--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.mbx-solution-caps__item {
    border-top: 2px solid var(--mbx-ink);
    padding: 20px 0 0;
}

.mbx-solution-caps__item-title {
    color: var(--mbx-ink);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.3;
    margin: 0;
}

.mbx-solution-caps__item-text {
    color: var(--mbx-muted);
    font-size: 0.9375rem;
    line-height: 1.7;
    margin: 10px 0 0;
}

/* ── DETAIL BODY (admin-created solutions) ───────────── */
.mbx-solution-body__shell {
    color: var(--mbx-ink);
    margin: 0 auto;
    max-width: 760px;
    padding: 72px 24px;
}

.mbx-solution-body__shell > :first-child {
    margin-top: 0;
}

.mbx-solution-body__shell h2 {
    font-size: 1.625rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin: 44px 0 14px;
}

.mbx-solution-body__shell h3 {
    font-size: 1.1875rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 32px 0 10px;
}

.mbx-solution-body__shell p,
.mbx-solution-body__shell li {
    color: var(--mbx-muted);
    font-size: 1rem;
    line-height: 1.75;
}

.mbx-solution-body__shell p {
    margin: 0 0 16px;
}

.mbx-solution-body__shell ul,
.mbx-solution-body__shell ol {
    margin: 0 0 20px;
    padding-left: 22px;
}

.mbx-solution-body__shell li {
    margin-bottom: 8px;
}

.mbx-solution-body__shell img {
    border-radius: 12px;
    display: block;
    height: auto;
    max-width: 100%;
}

.mbx-solution-body__shell a {
    color: #9a5b00;
}

/* ── PORTFOLIO GROUP ─────────────────────────────────── */
.mbx-solution-group {
    margin-bottom: 72px;
}

.mbx-solution-group:last-child {
    margin-bottom: 0;
}

.mbx-solution-group__head {
    align-items: center;
    display: flex;
    gap: 18px;
    margin-bottom: 26px;
}

.mbx-solution-group__head h2 {
    color: var(--mbx-ink);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0;
    white-space: nowrap;
}

.mbx-solution-group__head span {
    background: var(--mbx-line);
    flex: 1;
    height: 1px;
}

/* ── CARD ────────────────────────────────────────────── */
.mbx-solution-card {
    border: 1px solid var(--mbx-line);
    border-radius: 12px;
    color: inherit;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-decoration: none;
    transition: border-color 0.2s ease;
}

.mbx-solution-card:hover {
    border-color: #b6bcc4;
}

.mbx-solution-card:focus-visible {
    outline: 2px solid var(--mbx-orange);
    outline-offset: 3px;
}

.mbx-solution-card__media {
    background: var(--mbx-sand);
    display: block;
}

.mbx-solution-card__media img {
    aspect-ratio: 16 / 9;
    display: block;
    height: auto;
    object-fit: cover;
    width: 100%;
}

.mbx-solution-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 22px;
}

.mbx-solution-card__tag {
    color: #a36309;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.mbx-solution-card__title {
    align-items: baseline;
    color: var(--mbx-ink);
    display: flex;
    flex-wrap: wrap;
    font-size: 1.0625rem;
    font-weight: 600;
    gap: 8px;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.mbx-solution-card__label {
    border: 1px solid var(--mbx-line);
    border-radius: 4px;
    color: var(--mbx-muted);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    text-transform: uppercase;
}

.mbx-solution-card__desc {
    color: var(--mbx-muted);
    flex: 1;
    font-size: 0.875rem;
    line-height: 1.68;
    margin-top: 10px;
}

.mbx-solution-card__action {
    color: var(--mbx-muted);
    font-size: 0.875rem;
    margin-top: 20px;
}

.mbx-solution-card:hover .mbx-solution-card__action {
    color: #a36309;
}

/* ── CLOSING CTA ─────────────────────────────────────── */
.mbx-solution-cta {
    background: #050b14;
    padding: 96px 0;
}

/* Centred, in one column.
   This was copy-left with the action pushed hard right. The copy column was
   1fr while its text stopped at about 58 characters, so roughly 700px of
   nothing opened up between the sentence that motivates the click and the
   thing you click. Giving the action column a fixed width only halved that;
   the dead space was inside the copy column, not between them.
   A closing band is also the one place on this site where centring reads as
   deliberate rather than inconsistent: it is the full stop on the page. */
.mbx-solution-cta__shell {
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    max-width: 64rem;
    text-align: center;
}

@media (max-width: 860px) {
    .mbx-solution-cta {
        padding: 72px 0;
    }

    .mbx-solution-cta__shell {
        gap: 28px;
        grid-template-columns: minmax(0, 1fr);
    }
}

.mbx-solution-cta h2 {
    color: #ffffff;
    font-size: clamp(1.75rem, 3vw, 2.6rem);
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 1.08;
    margin: 0;
    max-width: 20ch;
}

/* Target the description by class, never as `.mbx-solution-cta p`. The eyebrow
   and the note are paragraphs too, and a descendant selector outranks their
   single-class rules — which silently repainted both of them grey. */
.mbx-solution-cta__desc {
    color: #9aa4b1;
    font-size: 1rem;
    line-height: 1.72;
    margin: 20px 0 0;
    max-width: 58ch;
}


.mbx-solution-cta__actions {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (min-width: 861px) {
    .mbx-solution-cta__actions {
        align-items: flex-end;
    }
}

.mbx-solution-cta__copy h2 {
    margin-inline: auto;
    max-width: 26ch;
}

.mbx-solution-cta__desc {
    margin-inline: auto;
}

/* Buttons side by side under the copy, with the note on its own line. */
.mbx-solution-cta__actions {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px 22px;
    justify-content: center;
}

@media (max-width: 560px) {
    .mbx-solution-cta__actions {
        flex-direction: column;
    }
}

.mbx-solution-cta__link {
    background: #ffffff;
    border-radius: 10px;
    color: var(--mbx-ink);
    display: inline-block;
    font-size: 0.9375rem;
    font-weight: 500;
    padding: 13px 26px;
    text-decoration: none;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}

.mbx-solution-cta__link:hover {
    background: #e7eaee;
}

.mbx-solution-cta__link:focus-visible {
    outline: 2px solid var(--mbx-orange);
    outline-offset: 4px;
}

.mbx-solution-cta__alt {
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
    color: #c7ced6;
    font-size: 0.9375rem;
    padding-bottom: 2px;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.mbx-solution-cta__alt:hover {
    border-bottom-color: var(--mbx-orange);
    color: var(--mbx-orange);
}

.mbx-solution-cta__alt:focus-visible {
    outline: 2px solid var(--mbx-orange);
    outline-offset: 4px;
}

/* Its own line under the buttons. flex-basis alone was not enough: the
   34ch cap left it narrow enough to sit beside them, and text-align:right
   was a leftover from when this block was right-aligned. */
.mbx-solution-cta__note {
    color: #7e8996;
    flex-basis: 100%;
    font-size: 0.8125rem;
    line-height: 1.6;
    margin: 2px auto 0;
    max-width: 46ch;
    text-align: center;
}