/* A full-width change of pace, with the content aligned to the page grid. */
.agents {
  --agent-bg: #e7e9df;
  --agent-text: #262923;
  --agent-muted: #5e6256;
  --agent-accent: #8b4a2d;
  margin-top: 80px;
  padding: 80px 34px 72px;
  background: var(--agent-bg);
  color: var(--agent-text);
  border: 0;
  box-shadow: 0 0 0 100vmax var(--agent-bg);
  clip-path: inset(0 -100vmax);
}
.agents-intro { display: block; padding-bottom: 48px; }
.agents h2 { font-size: clamp(2.75rem, 4.5vw, 4.5rem); color: var(--agent-text); line-height: 1.08; letter-spacing: -.035em; }
.agents-intro p { margin-top: 28px; max-width: 60ch; color: var(--agent-muted); font-size: 1.125rem; line-height: 1.6; }
.agent-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 56px; }
.agents .agent-row { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 28px 0 0; border-top: 1px solid #c7cbbd; }
.agents .agent-name { gap: 16px; align-items: baseline; }
.agents .agent-index { color: var(--agent-accent); font-size: .875rem; line-height: 1.5; }
.agents .agent-name h3 { color: var(--agent-text); font-size: 2rem; line-height: 1.2; }
.agents .agent-row p { max-width: 52ch; color: var(--agent-muted); font-size: 1.0625rem; line-height: 1.65; }
.agents .agent-row a { color: var(--agent-accent); margin-top: 14px; text-decoration-thickness: 1px; }
.agents .agent-row a:hover { color: var(--agent-text); }
.agents a:focus-visible { outline-color: var(--agent-accent); }
@media (max-width: 760px) {
  .agents { margin-top: 56px; padding: 52px 0 48px; }
  .agents h2 { font-size: 2.75rem; }
  .agents-intro { padding-bottom: 32px; }
  .agents-intro p { margin-top: 24px; font-size: 1.0625rem; }
  .agent-list { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .agents .agent-row { padding-top: 24px; gap: 14px; }
  .agents .agent-name h3 { font-size: 1.75rem; }
}