/* Basis — the sample pages' hero (/conversations, /emotional): title,
   subtitle and a Reach out pill on the left, the overview's three figures
   stacked on the right (static — never computed). Named apart from
   .viz-hero / .viz-title because /audio's app.js rewrites those from the
   audio site's admin-editable copy.
   The figures sit on SOLID cards (owner, 2026-09-02: white on translucent
   glass was hard to read, "even though they're pretty important for us"). */
.em-hero {
  padding: 136px 0 96px; position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(250px, 0.65fr);
  gap: 40px 72px; align-items: center;
}
.em-title {
  font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 5.6vw, 64px);
  line-height: 1.03; letter-spacing: -0.018em; margin: 0 0 24px; color: #fff;
  text-shadow: 0 2px 18px rgba(20, 60, 90, 0.22);
}
.em-hero-main .lede { margin-bottom: 26px; }
/* The pill on the sky: white on glass, ink on hover (the nav's own flip). */
.em-reach {
  padding: 10px 20px; font-size: 14px;
  background: rgba(255, 255, 255, 0.16); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.em-reach:hover { background: #fff; color: var(--ink); }
:root[data-theme="dark"] .em-reach:hover { color: #06131c; }
.em-stats { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.em-stats > div {
  display: flex; flex-direction: column; gap: 4px; padding: 18px 22px;
  background: var(--card); border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 16px; box-shadow: 0 14px 40px rgba(20, 60, 90, 0.18);
}
.em-stats dd {
  margin: 0; font-family: var(--serif); font-size: 40px; font-weight: 400; line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(160deg, var(--ink) 0%, var(--accent) 130%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.em-stats dt {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
:root[data-theme="dark"] .em-stats > div { border-color: var(--rule); }
/* The foot's two doors: the popup, or the mail client. */
.contact-line .em-reach-foot { background: var(--ink); color: var(--on-ink); border: 0; }
.contact-line .em-reach-foot:hover { background: var(--accent); color: #fff; }
.contact-line .contact-or { color: var(--muted); font-size: 15px; }
@media (max-width: 900px) {
  .em-hero { grid-template-columns: 1fr; gap: 36px; }
  .em-stats { flex-direction: row; flex-wrap: wrap; }
  .em-stats > div { flex: 1 1 160px; }
}
@media (max-width: 760px) {
  .em-hero { padding: 104px 0 80px; }
}