/* Clients hero with icon cloud (matches portfolio header) */
.clients-hero {
  padding: clamp(4rem, 8vw, 7rem) clamp(1rem, 4vw, 3rem) clamp(3rem, 5vw, 5rem);
  max-width: 1480px; margin: 0 auto; position: relative;
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.clients-hero__inner { position: relative; z-index: 2; text-align: left; }
:root[lang="ar"] .clients-hero__inner { text-align: right; }
.clients-hero .cap-overview__kicker { display: inline-block; margin-bottom: 1rem; }
.clients-hero__title {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.05;
  color: #0F0D0B; margin: 0 0 1.25rem 0; max-width: 600px;
}
:root[lang="ar"] .clients-hero__title { font-family: "TarjamaFontV1", system-ui, sans-serif; }
.clients-hero__title .red { color: #FF243C; }
.clients-hero__lede { font-size: 1.1rem; line-height: 1.55; color: rgba(15, 13, 11, 0.62); max-width: 520px; margin: 0; }

/* ── EXACT portfolio cap-hero__visual + cap-hero__cloud CSS ── */
.cap-hero__visual{position:relative;width:100%;aspect-ratio:5/4;border-radius:var(--radius-xl,16px);border:1px solid rgba(245,242,234,0.08);background:linear-gradient(165deg,#1F1B17 0%,#15120F 50%,#0A0908 100%);box-shadow:0 32px 80px rgba(0,0,0,0.55), inset 0 1px 0 rgba(245,242,234,0.04);overflow:hidden;display:flex;align-items:center;justify-content:center}
.cap-hero__visual::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,36,60,0.5),transparent)}
.cap-hero__visual--cloud{background:transparent;border:none;box-shadow:none;aspect-ratio:1/1;max-width:560px;width:100%;justify-self:end;align-self:center;cursor:grab}
.cap-hero__visual--cloud::before{display:none}
.cap-hero__visual--cloud.is-dragging{cursor:grabbing}
.cap-hero__cloud{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;user-select:none;-webkit-user-select:none}
:root[lang="ar"] .cap-hero__visual--cloud { justify-self: start; }

@media (max-width: 900px) {
  .clients-hero { grid-template-columns: 1fr; gap: 1.5rem; }
  .clients-hero__inner { text-align: left; }
  :root[lang="ar"] .clients-hero__inner { text-align: right; }
  .cap-hero__visual--cloud { justify-self: center !important; max-width: 440px; margin: 1rem auto 0; }
}

/* ── Clients list ── */
.clients-list-wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 3rem) clamp(4rem, 8vw, 7rem); }
.clients-list-head { text-align: center; margin-bottom: clamp(2rem, 3vw, 3rem); }
.clients-list-head .cap-overview__kicker { display: inline-block; margin-bottom: 0.5rem; }
.clients-list-head h2 { font-family: "Space Grotesk", system-ui, sans-serif; font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 600; letter-spacing: -0.02em; color: #0F0D0B; margin: 0; }
:root[lang="ar"] .clients-list-head h2 { font-family: "TarjamaFontV1", system-ui, sans-serif; }
.clients-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem 1.5rem; border-top: 1px solid rgba(15, 13, 11, 0.08); border-bottom: 1px solid rgba(15, 13, 11, 0.08); padding: 1.5rem 0; }
@media (max-width: 900px) { .clients-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .clients-grid { grid-template-columns: 1fr; } }
.clients-grid__item { padding: 0.75rem 0; font-size: 0.95rem; color: rgba(15, 13, 11, 0.82); line-height: 1.4; border-bottom: 1px solid rgba(15, 13, 11, 0.05); transition: color 0.2s, padding-left 0.2s; position: relative; }
:root[lang="ar"] .clients-grid__item:hover { padding-left: 0; padding-right: 0.5rem; }
.clients-grid__item:hover { color: #FF243C; padding-left: 0.5rem; }
.clients-grid__item::before { content: ''; position: absolute; left: 0; top: 50%; width: 0; height: 2px; background: #FF243C; transition: width 0.25s ease; transform: translateY(-50%); }
:root[lang="ar"] .clients-grid__item::before { left: auto; right: 0; }
.clients-grid__item:hover::before { width: 0.35rem; }
.clients-footnote { text-align: center; margin-top: 1.5rem; font-size: 0.85rem; color: rgba(15, 13, 11, 0.5); font-style: italic; }