/* ═══════════════════════════════════════════
   THE RECIPROCAL — About us
   ═══════════════════════════════════════════ */

/* ── Hero ── */
/* Photo and overlay: base.css (.rc-photo-section) */
.ab-hero {
  padding: 104px 0 112px;
  /* Only behind the text column, transparent beyond it */
  --photo-overlay: linear-gradient(90deg, rgba(15, 58, 47, .65) 0%, rgba(15, 58, 47, .65) calc(50% + 180px), rgba(15, 58, 47, 0) calc(50% + 480px));
}
@media (max-width: 900px) {
  .ab-hero { --photo-overlay: linear-gradient(180deg, rgba(15, 58, 47, .65) 0%, rgba(15, 58, 47, .65) 85%, rgba(15, 58, 47, 0) 100%); }
}
.ab-hero h1 { font-size: clamp(2.6rem, 6.5vw, 4.4rem); line-height: 1.04; margin-bottom: 24px; }

/* ── Body text ── */
.ab-body { font-weight: 300; font-size: 1.15rem; line-height: 1.75; margin-bottom: 20px; }
.ab-body--light { color: var(--on-green); }

.ab-mission {
  margin-top: 40px; padding: 28px 0; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold);
  font-family: var(--font-display); font-style: italic; font-size: clamp(1.5rem, 3.4vw, 2rem);
  line-height: 1.3; color: var(--green); text-align: center;
}

/* ── What we provide ── */
.ab-provides { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.ab-provides li {
  position: relative; padding: 18px 0 18px 28px; border-bottom: 1px solid var(--line);
  font-weight: 300; line-height: 1.5;
}
.ab-provides li::before {
  content: ''; position: absolute; left: 0; top: 1.55em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--gold);
}

/* ── Team ── */
.ab-team { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.ab-team__photo img { width: 100%; height: auto; border-radius: 4px; }
.ab-bio { padding: 4px 0 24px; }
.ab-bio + .ab-bio { padding-top: 24px; border-top: 1px solid var(--line); }
.ab-bio h3 { font-size: 1.9rem; }
.ab-bio__role {
  margin: 4px 0 12px; font-weight: 600; font-size: .8rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--gold-dark);
}
.ab-bio p { font-weight: 300; line-height: 1.7; }
.ab-bio p a { color: var(--green); font-weight: 400; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.ab-bio p a:hover { color: var(--gold-dark); }

/* ── Contact ── */
.ab-contact-btn { margin-top: 32px; }

@media (max-width: 760px) {
  .ab-provides { grid-template-columns: 1fr; }
  .ab-team { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .ab-hero { padding: 64px 0 80px; }
}