/* Pearl, soft rose and original brand artwork. No image color effects. */
.client-showcase {
  --client-gap: 20px;
  padding-block: 34px 20px;
  overflow: hidden;
  background: radial-gradient(ellipse at 18% 0%, #f4e6e0a6, transparent 58%), linear-gradient(115deg, #f8f5ee, #f4f0e9 55%, #f2eee7);
  border-bottom: 1px solid #e3d9cf;
  scroll-margin-top: 112px;
}
.client-showcase-header, .client-showcase-intro { display: flex; align-items: center; }
.client-showcase-header { justify-content: space-between; gap: 22px; margin-bottom: 15px; }
.client-showcase-intro { gap: 17px; }
.client-flower { flex: 0 0 40px; width: 40px; height: 40px; color: #a48c80; }
.client-showcase-heading { color: #645b50; font-size: clamp(17px, 1.4vw, 22px); font-weight: 400; letter-spacing: -.025em; line-height: 1.3; }
.client-showcase-heading em { margin-left: .15em; font-family: 'Instrument Serif', Georgia, serif; font-size: 1.5em; font-weight: 400; color: #96756c; }
.client-motion-toggle { flex: 0 0 38px; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid #bba59588; border-radius: 50%; color: #7d655a; background: #fffcf780; cursor: pointer; transition: background .2s, border-color .2s; }
.client-motion-toggle[hidden] { display: none; }
.client-motion-toggle:hover { background: #fffaf5; border-color: #ab8c7b; }
.client-motion-toggle svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.client-play-icon { display: none; }
.client-showcase[data-paused="true"] .client-pause-icon { display: none; }
.client-showcase[data-paused="true"] .client-play-icon { display: block; }
.client-logo-viewport { max-width: 1600px; margin-inline: auto; padding: 15px 0 20px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #cbb6a6 transparent; overscroll-behavior-x: contain; }
.client-showcase.is-ready .client-logo-viewport { overflow-x: hidden; mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); }
.client-logo-track { display: flex; width: max-content; }
.client-logo-list { display: flex; flex: 0 0 auto; gap: var(--client-gap); padding: 0 var(--client-gap) 0 0; margin: 0; list-style: none; }
.client-logo-list[aria-hidden="true"] { display: none; }
.client-showcase.is-ready .client-logo-list[aria-hidden="true"] { display: flex; }
.client-showcase.is-ready .client-logo-track { animation: client-drift 64s linear infinite; }
.client-showcase[data-paused="true"] .client-logo-track,
.client-showcase[data-offscreen="true"] .client-logo-track,
.client-logo-viewport:focus-within .client-logo-track { animation-play-state: paused; }
.client-logo-card { display: grid; place-items: center; flex: 0 0 clamp(204px, 17vw, 250px); width: clamp(204px, 17vw, 250px); height: 188px; overflow: hidden; border: 1px solid #dfd2c780; border-radius: 25px 25px 16px 16px; background: #fff; box-shadow: 0 3px 5px #8e6c5103, 0 12px 24px -19px #7d5f4a50; transition: border-color .3s, box-shadow .3s; }
.client-logo-card > a { display: grid; place-items: center; width: 100%; height: 100%; padding: 22px; color: inherit; cursor: pointer; }
.client-logo-card > a:focus-visible { outline: 3px solid #7b6558; outline-offset: -5px; border-radius: inherit; }
.client-logo-window { position: relative; display: block; width: 100%; height: 140px; overflow: hidden; border-radius: 13px; }
.client-logo-window img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Keep every portrait or wide mark completely inside its frame. */
.client-logo-card--souqdzayer .client-logo-window { background: #001614; }
.client-logo-card--souqdzayer img { object-fit: contain; }
.client-logo-card--sos .client-logo-window { background: #033044; }
.client-logo-card--finnelia img,
.client-logo-card--papillon img { object-fit: contain; }
.client-showcase-finish { display: flex; align-items: center; justify-content: center; gap: 12px; color: #ae9381; margin-top: 3px; }
.client-showcase-finish span { width: 64px; height: 1px; background: linear-gradient(to right, transparent, #bea89480); }
.client-showcase-finish span:last-child { transform: rotate(180deg); }
.client-showcase-finish svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: .75; }
.client-motion-toggle:focus-visible, .client-logo-viewport:focus-visible { outline: 2px solid #987467; outline-offset: 4px; }
@keyframes client-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (hover: hover) {
  .client-logo-card:hover, .client-logo-card:focus-within { border-color: #b9957c99; box-shadow: 0 10px 26px -16px #7d5f4a66; }
}
@media (max-width: 600px) {
  .client-showcase { --client-gap: 14px; padding-block: 25px 18px; scroll-margin-top: 92px; }
  .client-showcase-header { gap: 14px; margin-bottom: 9px; }
  .client-showcase-intro { gap: 10px; }
  .client-flower { width: 29px; height: 29px; flex-basis: 29px; }
  .client-showcase-heading { font-size: 16px; }
  .client-showcase-heading em { display: block; margin-left: 0; font-size: 1.4em; }
  .client-motion-toggle { flex-basis: 36px; width: 36px; height: 36px; }
  .client-logo-card { height: 168px; border-radius: 22px 22px 14px 14px; }
  .client-logo-card > a { padding: 16px; }
  .client-logo-window { height: 132px; }
  .client-showcase-finish { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .client-showcase.is-ready .client-logo-viewport { overflow-x: auto; mask-image: none; }
  .client-showcase.is-ready .client-logo-track { animation: none; width: 100%; }
  .client-showcase .client-logo-list { display: grid; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-inline: var(--pad); }
  .client-showcase.is-ready .client-logo-list[aria-hidden="true"] { display: none; }
  .client-logo-card { width: auto; min-width: 0; }
  .client-motion-toggle { display: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 600px) {
  .client-showcase .client-logo-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-logo-card { height: 150px; }
  .client-logo-card > a { padding: 10px; }
  .client-logo-window { height: 128px; }
}