/* =========================================================================
   ep3-dir-closer — two-card "next steps" component for directory pages.
   Sits above the footer; thin cards that pose a question and route the
   visitor to a contact / form path. Mono eyebrow + serif title + body
   + arrow CTA. No image, lighter padding than the card grid above.

   Originally lived in ep3-initiatives.css. Promoted here once /affiliates
   added its own closer (Claude Design F·06 for /affiliates, F·07 for
   /initiatives). Copy belongs to the page; chrome belongs to this file.

   All tokens from webshield-navy.css.
   ========================================================================= */

.ep3-dir-closer {
  background: var(--ws-surface);
  border-top: 1px solid var(--ws-rule);
}
.ep3-dir-closer__wrap {
  max-width: 1200px; margin: 0 auto;
  padding: 48px 48px 72px;
}
.ep3-dir-closer__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.ep3-dir-closer-card {
  background: var(--ws-page);
  border: 1px solid var(--ws-rule);
  padding: 26px 28px 24px;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.ep3-dir-closer-card:hover {
  border-color: var(--ws-ink-faint);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(11, 31, 58, 0.06);
}
.ep3-dir-closer-card__eyebrow {
  font-family: var(--ws-font-mono);
  font-size: 11.5px; font-weight: 500;
  letter-spacing: var(--ws-tracking-mono);
  text-transform: uppercase;
  color: var(--ws-accent);
  margin: 0 0 12px;
}
.ep3-dir-closer-card__title {
  font-family: var(--ws-font-display);
  font-size: 20px; font-weight: 500;
  line-height: 1.25; letter-spacing: -0.01em;
  color: var(--ws-ink);
  margin: 0 0 10px;
}
.ep3-dir-closer-card__body {
  font-family: var(--ws-font-body);
  font-size: 14px; line-height: 1.55;
  color: var(--ws-ink-muted);
  margin: 0 0 18px;
}
.ep3-dir-closer-card__cta {
  margin-top: auto;
  font-family: var(--ws-font-mono);
  font-size: 11.5px; font-weight: 500;
  letter-spacing: var(--ws-tracking-mono);
  text-transform: uppercase;
  color: var(--ws-ink);
}

@media (max-width: 720px) {
  .ep3-dir-closer__wrap { padding: 36px 24px 56px; }
  .ep3-dir-closer__row { grid-template-columns: 1fr; gap: 16px; }
}