/* ==========================================================================
   THE BENCH — the named people, which the audit found on ten of the twelve
   Egyptian firms mapped and which was Haq's single biggest deficit.

   The avatars are drawn monograms, not photographs. A stock face on a
   lawyer's biography is a lie about a person, and this is a test build that
   will be filled with real people later, so the placeholder has to look like
   a placeholder rather than like somebody.
   ========================================================================== */

.bench {
  position: relative;
  z-index: 2;
  background: var(--haq-ground, #061019);
  color: #f4efe4;
  padding-block: clamp(56px, 9vh, 100px);
  padding-inline: clamp(20px, 4vw, 48px);
}
.bench-in { max-width: 1080px; margin-inline: auto; }

.bench-head small {
  display: block;
  font-family: Manrope, system-ui, sans-serif;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--record-amber, #f49f2e);
}
[dir="rtl"] .bench-head small { letter-spacing: 0; }
.bench-head h2 {
  margin: 14px 0 0;
  font-family: "Instrument Serif", Newsreader, Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.1rem, 4.8vw, 3.5rem);
  line-height: 1.04;
  max-width: 20ch;
  text-wrap: balance;
}
.bench-head > p {
  margin: clamp(14px, 2.4vh, 20px) 0 0;
  max-width: 46ch;
  line-height: 1.6;
  color: rgba(244,239,228,.75);
}

.bench-grid {
  display: grid;
  gap: clamp(16px, 2.6vw, 26px);
  margin-top: clamp(30px, 5vh, 52px);
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .bench-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .bench-grid { grid-template-columns: repeat(3, 1fr); } }

.bench-card {
  padding: clamp(20px, 3vw, 26px);
  border: 1px solid rgba(244,239,228,.14);
  border-radius: 4px;
  background: linear-gradient(160deg, rgba(244,239,228,.045), transparent 60%);
}
.bench-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(244,159,46,.55);
  font-family: "Instrument Serif", Newsreader, Georgia, serif;
  font-size: 1.15rem;
  letter-spacing: .04em;
  color: var(--record-amber, #f49f2e);
}
.bench-card h3 {
  margin: 18px 0 0;
  font-family: "Instrument Serif", Newsreader, Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.25rem, 3.4vw, 1.5rem);
  line-height: 1.15;
  color: #f4efe4;
}
.bench-area {
  margin: 7px 0 0;
  font-family: Manrope, system-ui, sans-serif;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(244,239,228,.55);
}
[dir="rtl"] .bench-area { letter-spacing: 0; }
.bench-card > p:last-child {
  margin: 14px 0 0;
  font-size: .92rem;
  line-height: 1.6;
  color: rgba(244,239,228,.76);
}

/* Entrance, gated, so a blocked script ships the bench whole. */
@media (prefers-reduced-motion: no-preference) {
  html.bench-js .bench-head > *,
  html.bench-js .bench-card { opacity: 0; translate: 0 16px; }
  html.bench-js .bench.in .bench-head > *,
  html.bench-js .bench.in .bench-card {
    opacity: 1;
    translate: 0 0;
    transition: opacity .55s ease, translate .6s cubic-bezier(.25, .8, .25, 1);
  }
  html.bench-js .bench.in .bench-card:nth-child(1) { transition-delay: .06s; }
  html.bench-js .bench.in .bench-card:nth-child(2) { transition-delay: .13s; }
  html.bench-js .bench.in .bench-card:nth-child(3) { transition-delay: .20s; }
  html.bench-js .bench.in .bench-card:nth-child(4) { transition-delay: .27s; }
  html.bench-js .bench.in .bench-card:nth-child(5) { transition-delay: .34s; }
}