/* ================================================================= */
/*  CLIENTS PAGE                                                       */
/* ================================================================= */

.cl-highlight { color: var(--pepla-green); }


/* ── Hero ──────────────────────────────────────────────────────────── */
.cl-hero {
  max-width: 1280px; margin: 0 auto; padding: 50px; text-align: center;
  opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease;
}
.cl-hero.animate-in { opacity: 1; transform: translateY(0); }
.cl-hero__title { font-size: 2.2rem; font-weight: 700; color: #222; margin-bottom: 16px; }
.cl-hero__subtitle { font-size: 1.1rem; line-height: 1.7; color: #555; max-width: 700px; margin: 0 auto; }

/* ── Client Grid ───────────────────────────────────────────────────── */
.cl-grid-section {
  max-width: 1280px; margin: 0 auto; padding: 50px;
}

.cl-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.cl-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px 20px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cl-card.animate-in { opacity: 1; transform: translateY(0); }

.cl-card:nth-child(1)  { transition-delay: 0s; }
.cl-card:nth-child(2)  { transition-delay: 0.05s; }
.cl-card:nth-child(3)  { transition-delay: 0.1s; }
.cl-card:nth-child(4)  { transition-delay: 0.15s; }
.cl-card:nth-child(5)  { transition-delay: 0.2s; }
.cl-card:nth-child(6)  { transition-delay: 0.25s; }
.cl-card:nth-child(7)  { transition-delay: 0.3s; }
.cl-card:nth-child(8)  { transition-delay: 0.35s; }
.cl-card:nth-child(9)  { transition-delay: 0.4s; }
.cl-card:nth-child(10) { transition-delay: 0.45s; }
.cl-card:nth-child(11) { transition-delay: 0.5s; }
.cl-card:nth-child(12) { transition-delay: 0.55s; }

.cl-card:hover { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12); }

.cl-card__logo {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.cl-card__logo img {
  max-height: 70px;
  max-width: 140px;
  object-fit: contain;
}

.cl-card__logo--dark-blue {
  background: #002246;
  border-radius: 12px;
  padding: 10px;
}

.cl-card__logo--black {
  background: #000;
  border-radius: 12px;
  padding: 10px;
}

.cl-card__logo--dark {
  background: #2a2a2a;
  border-radius: 12px;
  padding: 10px;
}

.cl-card h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 8px;
}

.cl-card p {
  font-size: 0.8rem;
  line-height: 1.5;
  color: #555;
}

/* ── Case Studies ──────────────────────────────────────────────────── */
.cl-cases {
  max-width: 1280px; margin: 0 auto; padding: 50px;
  opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease;
}
.cl-cases.animate-in { opacity: 1; transform: translateY(0); }

.cl-cases__heading {
  font-size: 2rem; font-weight: 700; color: #222; margin-bottom: 40px;
}

.cl-cases__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cl-case {
  display: flex;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
  overflow: hidden;
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.2s ease;
}

.cl-case.animate-in { opacity: 1; transform: translateX(0); }
.cl-case:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); }

.cl-case__accent {
  width: 6px;
  flex-shrink: 0;
}

.cl-case__content {
  padding: 28px 32px;
}

.cl-case__content h4 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 12px;
}

.cl-case__content p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #555;
  margin-bottom: 16px;
}

.cl-case__tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cl-tag {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cl-tag--green  { background: rgba(43, 174, 74, 0.12); color: var(--pepla-green); }
.cl-tag--orange { background: rgba(231, 76, 60, 0.12); color: var(--pepla-orange); }
.cl-tag--blue   { background: rgba(41, 171, 226, 0.12); color: var(--pepla-blue); }
.cl-tag--teal   { background: rgba(26, 188, 156, 0.12); color: var(--pepla-teal); }
.cl-tag--purple { background: rgba(142, 68, 173, 0.12); color: var(--pepla-purple); }
.cl-tag--coral  { background: rgba(230, 126, 34, 0.12); color: var(--pepla-coral); }

.cl-case__dl {
  margin-top: 16px;
  display: inline-block;
}

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .cl-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .cl-hero, .cl-grid-section, .cl-cases { padding: 50px 20px; }
  .cl-grid { grid-template-columns: 1fr; }
  .cl-case { flex-direction: column; }
  .cl-case__accent { width: 100%; height: 6px; }
}