/* ══════════════════════════
   CLIENTS / WORK PAGE
   ✓ Row layout: logo + body + CTA always visible
   ✓ No hover-only CTAs
   ✓ 15px body copy, weight 400, soft color
   ✓ Mobile: stacked, full-width
══════════════════════════ */

.clients-intro { max-width: 660px; }

.clients-grid {
  display: flex; flex-direction: column;
  gap: 1px; background: var(--border); margin-top: 48px;
}

/* ── CLIENT ROW ── */
.client-row {
  background: var(--bg);
  display: grid;
  grid-template-columns: 200px 1fr 180px;
  align-items: stretch;
  transition: background 0.2s;
  text-decoration: none;
  gap: 0;
}
.client-row:hover { background: var(--surface); }

/* Logo column */
.client-row-logo {
  display: flex; align-items: center; justify-content: center;
  padding: 40px 28px;
  border-right: 1px solid var(--border);
  background: var(--surface);
  transition: background 0.2s;
}
.client-row:hover .client-row-logo { background: var(--surface2); }
.client-row-logo img { max-width: 110px; max-height: 48px; width: auto; height: auto; object-fit: contain; }

/* Body column */
.client-row-body {
  padding: 36px 44px;
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
}
.client-row-sector {
  font-family: var(--f-cond); font-size: 9px; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase; color: var(--muted);
}
.client-row-name {
  font-family: var(--f-display); font-size: 34px;
  letter-spacing: 2px; line-height: 1; margin-bottom: 2px;
}
.client-row-tagline {
  font-family: var(--f-serif); font-size: 15px;
  font-style: italic; color: var(--soft);
}
.client-row-desc {
  /* ✓ 15px, 400, soft (7.4:1) */
  font-size: 15px; font-weight: 400; color: var(--soft); line-height: 1.75;
  max-width: 540px; margin-top: 2px;
}

/* Status — always visible, no hover required */
.client-row-status {
  display: flex; align-items: center; gap: 10px; margin-top: 4px; flex-wrap: wrap;
}
.crs-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.crs-pulse { animation: crsPulse 2.5s infinite; }
@keyframes crsPulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
.crs-text {
  font-family: var(--f-cond); font-size: 9px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; color: var(--muted);
}
.crs-sep { color: var(--border2); font-size: 10px; }

/* CTA column — always visible */
.client-row-cta {
  display: flex; align-items: center; justify-content: center;
  padding: 36px 24px;
  border-left: 1px solid var(--border);
}
.client-cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-cond); font-size: 11px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--soft); border: 1px solid var(--border2);
  padding: 12px 18px; min-height: 44px; white-space: nowrap;
  transition: color 0.2s, border-color 0.2s; text-decoration: none;
}
.client-row:hover .client-cta-btn { color: var(--text); border-color: var(--soft); }

/* ── VALIDATION BANNER ── */
.validation-banner {
  background: var(--surface); border: 1px solid var(--border2);
  padding: 28px 36px; display: flex; gap: 20px; align-items: flex-start; margin-top: 40px;
}
.vb-icon {
  font-family: var(--f-display); font-size: 28px; color: var(--gold);
  flex-shrink: 0; line-height: 1; margin-top: 2px;
}
.vb-title {
  font-family: var(--f-serif); font-size: 17px; color: var(--ivory);
  margin-bottom: 8px; line-height: 1.35;
}
.vb-body { font-size: 15px; font-weight: 400; color: var(--soft); line-height: 1.8; }

/* ── VERIFY SECTION ── */
.verify-section { background: var(--surface); border-top: 1px solid var(--border); }

/* ══════ RESPONSIVE ══════ */
@media (max-width: 960px) {
  .client-row { grid-template-columns: 160px 1fr 160px; }
  .client-row-body { padding: 28px 28px; }
}
@media (max-width: 768px) {
  .client-row { grid-template-columns: 1fr; }
  .client-row-logo {
    border-right: none; border-bottom: 1px solid var(--border);
    padding: 28px 24px; justify-content: flex-start;
  }
  .client-row-body { padding: 24px 24px; }
  .client-row-cta {
    border-left: none; border-top: 1px solid var(--border);
    padding: 20px 24px; justify-content: flex-start;
  }
  .client-cta-btn { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
  .client-row-body { padding: 20px; }
  .client-row-name { font-size: 28px; }
  .validation-banner { flex-direction: column; gap: 12px; padding: 24px 20px; }
}