/* Section 05: original brand marks in four continuous, reversible logo rows. */
.clients-media {
  padding: 112px 0 108px;
  overflow: hidden;
  background: #080808;
  color: #f5f5f5;
}

.clients-media > .container { text-align: left; }

.clients-media-header {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: end;
  gap: 56px;
  margin-bottom: 88px;
}

.clients-media-header > * { min-width: 0; }

.clients-media .eyebrow {
  display: block;
  width: auto;
  margin: 0 0 25px;
  padding: 0;
  border-radius: 0;
  background: none;
  color: #a8a8a8;
  font: 600 11px/1.5 Arial, sans-serif;
  letter-spacing: .16em;
}

.clients-media-header .display-title {
  margin: 0;
  color: #f5f5f5;
  font-size: clamp(38px, 4vw, 58px);
  font-weight: 800;
  line-height: 1.32;
  letter-spacing: -.055em;
}

.clients-media-header .section-lead {
  justify-self: end;
  max-width: 440px;
  margin: 0 0 4px;
  color: #d4d4d4;
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.85;
  letter-spacing: -.025em;
}

.clients-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 46px;
}

.clients-intro > * { min-width: 0; }

.clients-kicker {
  margin: 0 0 12px;
  color: #a8a8a8;
  font: 600 11px/1.5 Arial, sans-serif;
  letter-spacing: .15em;
}

.clients-subtitle {
  margin: 0;
  color: #f5f5f5;
  font-size: clamp(26px, 2.5vw, 36px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.055em;
}

.client-marquee {
  display: grid;
  gap: 28px;
  min-width: 0;
}

.client-marquee-viewport {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.client-marquee.is-ready .client-marquee-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 34px, #000 calc(100% - 34px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 34px, #000 calc(100% - 34px), transparent);
}

.client-marquee-track {
  display: flex;
  width: max-content;
  min-width: 100%;
  gap: 0;
}

.client-logo-group {
  display: flex;
  flex: none;
  align-items: center;
  gap: 32px;
  width: max-content;
  margin: 0;
  padding: 0 32px 0 0;
  list-style: none;
}

.client-logo-item {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 192px;
  min-width: 0;
  height: 112px;
  margin: 0;
  padding: 0;
}

.client-logo-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 18px 10px;
  border-radius: 5px;
  background: transparent;
  color: #f5f5f5;
  text-decoration: none;
}

.client-logo-image img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 58px;
  aspect-ratio: var(--client-logo-ratio, auto);
  object-fit: contain;
  object-position: center;
}

/* Keep brand colors on the section's original dark background. */
.client-logo-image img { filter: none; mix-blend-mode: normal; }

/* Reverse only monochrome dark marks; multicolor artwork stays in full color. */
.client-logo-item[data-client="iback-clinic"] img,
.client-logo-item[data-client="yjlaw"] img,
.client-logo-item[data-client="mipretty"] img,
.client-logo-item[data-client="judy-and-paul"] img,
.client-logo-item[data-client="purcell"] img,
.client-logo-item[data-client="6a"] img,
.client-logo-item[data-client="product-pr"] img,
.client-logo-item[data-client="thebest-financial-services"] img { filter: invert(1); }

/* Lift dark lettering without inverting the colored portions of raster logos. */
.client-logo-item[data-client="metlife"] img,
.client-logo-item[data-client="kiwoom-asset-planner"] img,
.client-logo-item[data-client="razkids"] img,
.client-logo-item[data-client="stella-and-chewys"] img,
.client-logo-item[data-client="moun"] img,
.client-logo-item[data-client="ocraw"] img { filter: url('#logo-dark-ink'); }

/* Remove opaque white canvases before lifting their dark lettering. */
.client-logo-item[data-client="knjlaw"] img,
.client-logo-item[data-client="yachamfood"] img { filter: url('#logo-white-canvas'); }

.client-logo-item[data-client="heungkuk-life"] img { filter: url('#logo-heungkuk'); }
.client-logo-item[data-client="kb-direct"] img { filter: url('#logo-kb-direct'); }
.client-logo-item[data-client="live-dental-hospital"] img { filter: brightness(0) invert(.96); }

/* These single-color marks retain their original green and navy hues. */
.client-logo-item[data-client="smallbatch"] img,
.client-logo-item[data-client="sono-imready"] img { filter: brightness(3.1); }

/* The official Youngjin asset includes substantial transparent vertical space. */
.client-logo-item[data-client="yjlaw"] img { max-height: 98px; }

.client-marquee.is-ready .client-marquee-track--left {
  animation: clients-roll-left var(--clients-duration, 48s) linear infinite;
}

.client-marquee.is-ready .client-marquee-track--right {
  animation: clients-roll-right var(--clients-duration, 52s) linear infinite;
}

.client-marquee-viewport:focus-visible {
  outline: 3px solid #f5f5f5;
  outline-offset: -4px;
}

@keyframes clients-roll-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes clients-roll-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

@media (max-width: 1100px) {
  .clients-media-header { gap: 32px; margin-bottom: 72px; }
  .client-logo-item { width: 180px; }
  .client-logo-group { gap: 26px; padding-right: 26px; }
}

@media (max-width: 900px) {
  .clients-media-header { grid-template-columns: 1fr; gap: 27px; margin-bottom: 60px; }
  .clients-media-header .section-lead { justify-self: start; max-width: none; margin: 0; font-size: 15px; }
  .clients-intro { align-items: start; flex-direction: column; gap: 22px; margin-bottom: 31px; }
}

@media (max-width: 760px) {
  .clients-media { padding: 76px 0 72px; }
  .clients-media > .container { width: calc(100% - 40px); }
  .clients-media-header { margin-bottom: 52px; }
  .clients-media .eyebrow { margin-bottom: 22px; font-size: 10px; letter-spacing: .13em; }
  .clients-media-header .display-title { font-size: clamp(31px, 8.2vw, 45px); line-height: 1.37; }
  .clients-media-header .section-lead { font-size: 13px; line-height: 1.9; }
  .clients-kicker { margin-bottom: 9px; font-size: 10px; }
  .clients-subtitle { font-size: 27px; }
  .client-marquee { gap: 18px; }
  .client-marquee.is-ready .client-marquee-viewport {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  }
  .client-logo-group { gap: 22px; padding-right: 22px; }
  .client-logo-item { width: 150px; height: 90px; }
  .client-logo-image { padding: 17px 8px; }
  .client-logo-image img { max-height: 50px; }
}

@media (prefers-reduced-motion: reduce) {
  .client-marquee.is-ready .client-marquee-track { animation: none; transform: none; }
  .client-marquee.is-ready .client-marquee-viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .client-logo-group--copy { display: none; }
}