/* Original client logos, measured and presented on surfaces suited to their artwork. */
.brand-clients.client-showcase {
    --client-card-width: 208px;
    --client-gap: 14px;
    padding-block: 45px 50px;
    border: 0;
    background: #f5f6fb;
    color: #0d1020;
    overflow: hidden;
}
.client-showcase-header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 28px;
    margin-block-end: 27px;
}
.brand-clients .client-showcase-eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 10px;
    color: #595578;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.client-showcase-eyebrow > span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #8b7bed;
    box-shadow: 0 0 0 4px rgba(154, 140, 255, .12);
}
.brand-clients .client-showcase-heading h2 {
    margin: 0;
    color: #0d1020;
    font-size: clamp(25px, 2.9vw, 36px);
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -.035em;
}
.client-showcase-tools {
    display: flex;
    align-items: center;
    gap: 22px;
}
.brand-clients .client-showcase-intro {
    max-width: 265px;
    margin: 0;
    color: #666b7d;
    font-size: 12px;
    line-height: 1.7;
}
.client-motion-toggle {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 9px 13px;
    border: 1px solid #dcdde8;
    border-radius: 100px;
    background: transparent;
    color: #54546c;
    font: inherit;
    font-size: 11px;
    line-height: 1.5;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}
.client-motion-toggle[hidden] { display: none; }
.client-motion-toggle:hover { border-color: #9a8cff; background: #ece9ff; }
.client-motion-toggle:focus-visible,
.client-logo-card:focus-visible {
    outline: 3px solid #7866d8;
    outline-offset: 4px;
}
.client-logo-card:focus-visible { outline-offset: -4px; }
.client-motion-icon {
    display: inline-block;
    width: 9px;
    height: 11px;
    border-inline: 3px solid currentColor;
}
.client-motion-toggle[aria-pressed="true"] .client-motion-icon {
    width: 0;
    height: 0;
    border: 0;
    border-block: 6px solid transparent;
    border-inline-start: 9px solid currentColor;
}
.client-showcase-window {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: 40px;
}
.client-logo-lane { direction: ltr; }
.client-logo-lane + .client-logo-lane { margin-block-start: var(--client-gap); }
.client-logo-set {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--client-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}
.client-logo-set--duplicate { display: none; }
.client-logo-item { min-width: 0; margin: 0; padding: 0; }
.brand-clients .client-logo-card {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-width: 0;
    width: 100%;
    height: 139px;
    padding: 19px 18px 15px;
    border: 1px solid #e4e6ef;
    border-radius: 16px;
    background: #fff;
    color: #666b7d;
    text-decoration: none;
    box-shadow: 0 2px 0 rgba(13, 16, 32, .025);
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.client-logo-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 75px;
}
.brand-clients .client-logo-stage img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 68px;
    object-fit: contain;
    opacity: 1;
    filter: none;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.brand-clients .client-logo-card--wide .client-logo-stage img { max-width: min(100%, 160px); max-height: 59px; }
.brand-clients .client-logo-card--nasboard .client-logo-stage img { max-width: min(100%, 126px); max-height: 70px; }
.brand-clients .client-logo-card--annajah .client-logo-stage img { max-width: min(100%, 122px); max-height: 73px; }
.brand-clients .client-logo-card--dubai .client-logo-stage img { max-width: min(100%, 145px); max-height: 72px; }
.brand-clients .client-logo-card--emblem .client-logo-stage img { max-width: min(100%, 130px); max-height: 76px; }
.brand-clients .client-logo-card--portal .client-logo-stage img { max-width: min(100%, 157px); max-height: 69px; }
.brand-clients .client-logo-card--mmb .client-logo-stage img { max-width: min(100%, 119px); max-height: 60px; }
.brand-clients .client-logo-card--temujin .client-logo-stage img { max-width: 70px; max-height: 53px; }
.brand-clients .client-logo-card--uniserv .client-logo-stage img { max-width: min(100%, 145px); max-height: 65px; }
.brand-clients .client-logo-card--crest .client-logo-stage img { max-width: 70px; max-height: 80px; }
.brand-clients .client-logo-card--dark {
    border-color: #262b40;
    background: #171c30;
    color: #c8ccdf;
}
.client-logo-caption {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .04em;
    white-space: nowrap;
}
.client-project-hint { color: #8171ca; font-size: 12px; transition: transform .25s ease; }
.client-logo-card--dark .client-project-hint { color: #b8aaff; }
.brand-clients a.client-logo-card:hover {
    border-color: #aca0ee;
    background: #fdfcff;
    box-shadow: inset 0 0 0 1px #aca0ee, 0 8px 20px rgba(65, 50, 100, .05);
}
.brand-clients a.client-logo-card--dark:hover { border-color: #9a8cff; background: #20263e; }
.brand-clients a.client-logo-card:hover .client-logo-stage img { transform: scale(1.035); }
.brand-clients a.client-logo-card:hover .client-project-hint { transform: translate(2px, -2px); }
html[dir="rtl"] .client-showcase-heading h2 { letter-spacing: 0; line-height: 1.55; }
html[dir="rtl"] .brand-clients .client-showcase-eyebrow { letter-spacing: 0; }
html[dir="rtl"] .client-logo-caption { direction: ltr; }
@media (prefers-reduced-motion: no-preference) {
    .client-showcase.is-motion-ready .client-showcase-window {
        position: relative;
        max-width: none;
        padding-inline: 0;
        overflow: hidden;
    }
    .client-showcase.is-motion-ready .client-showcase-window::before,
    .client-showcase.is-motion-ready .client-showcase-window::after {
        content: "";
        position: absolute;
        z-index: 1;
        inset-block: 0;
        width: clamp(22px, 4vw, 85px);
        pointer-events: none;
    }
    .client-showcase.is-motion-ready .client-showcase-window::before { left: 0; background: linear-gradient(90deg, #f5f6fb, transparent); }
    .client-showcase.is-motion-ready .client-showcase-window::after { right: 0; background: linear-gradient(-90deg, #f5f6fb, transparent); }
    .client-showcase.is-motion-ready .client-logo-track {
        display: flex;
        width: max-content;
        direction: ltr;
        animation: client-logo-drift 48s linear infinite;
    }
    .client-showcase.is-motion-ready .client-logo-lane--reverse .client-logo-track {
        animation-duration: 54s;
        animation-direction: reverse;
    }
    .client-showcase.is-motion-ready .client-logo-set {
        display: flex;
        flex: none;
        padding-inline-end: var(--client-gap);
    }
    .client-showcase.is-motion-ready .client-logo-item { flex: none; width: var(--client-card-width); }
    .client-showcase.is-motion-ready:is(.is-paused, :hover, :focus-within) .client-logo-track { animation-play-state: paused; }
    .client-showcase.is-motion-ready .client-logo-lane:focus-within {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
        scrollbar-color: #b4a9e7 transparent;
    }
    .client-showcase.is-motion-ready .client-logo-lane:focus-within .client-logo-track { animation: none; transform: none; }
    @keyframes client-logo-drift { to { transform: translateX(-50%); } }
}
@media (max-width: 1100px) {
    .client-logo-set { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .client-showcase-tools { gap: 14px; }
    .brand-clients .client-showcase-intro { max-width: 210px; }
}
@media (max-width: 760px) {
    .brand-clients.client-showcase { --client-card-width: 169px; --client-gap: 10px; padding-block: 34px 38px; }
    .client-showcase-header { gap: 15px; margin-block-end: 22px; align-items: center; }
    .client-showcase-tools { align-items: end; }
    .brand-clients .client-showcase-intro { display: none; }
    .brand-clients .client-showcase-eyebrow { font-size: 9px; letter-spacing: .06em; }
    .brand-clients .client-showcase-heading h2 { font-size: 26px; }
    .client-motion-toggle { padding: 8px 11px; min-height: 39px; font-size: 10px; }
    .client-showcase-window { padding-inline: 20px; }
    .client-logo-set { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .brand-clients .client-logo-card { height: 132px; border-radius: 13px; padding: 17px 14px 13px; gap: 10px; }
    .brand-clients .client-logo-stage img { max-height: 66px; }
    .client-logo-caption { font-size: 9px; }
}
@media (max-width: 480px) {
    .client-logo-set { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .client-showcase-header { flex-wrap: wrap; }
    .client-showcase-tools { margin-inline-start: auto; }
    html[dir="rtl"] .brand-clients .client-showcase-heading h2 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .client-motion-toggle { display: none; }
    .brand-clients .client-logo-card,
    .brand-clients .client-logo-stage img,
    .client-project-hint { transition: none; }
}