/* NO extra :root here. Use site tokens that already exist. */

.cta{ margin:3rem auto; max-width:1200px; padding:0 1rem; }
.cta--grid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }

.cta-card{
  background:var(--bg-card);
  border:1px solid var(--border-primary);
  border-radius:16px;
  padding:1.25rem;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  transition:transform .2s ease, box-shadow .2s ease;
}
.cta-card:hover{ transform:translateY(-2px); box-shadow:0 10px 32px rgba(0,0,0,.08); }

.cta-title{ margin:0 0 .75rem; font-size:1.25rem; color:var(--text-heading); }
.cta-subtext{ color:var(--text-secondary); font-size:.9rem; }

.cta-list{ list-style:none; padding:0; margin:0 0 1rem; }
.cta-list li{ margin:.35rem 0; }

.cta-map iframe{ border:0; border-radius:10px; width:100%; height:200px; }

.cta-social{ display:flex; flex-wrap:wrap; gap:.5rem; }
.cta-pill{
  display:inline-block;
  padding:.5rem .75rem;
  border:1px solid var(--border-primary);
  border-radius:999px;
  text-decoration:none;
  color:var(--text-primary);
  background:var(--bg-secondary);
}
.cta-pill:hover{
  border-color:var(--accent-primary);
  color:var(--text-light);
  background:var(--accent-primary);
}

.metrics{ display:grid; gap:.75rem; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); }
.metric{
  text-align:center;
  background:var(--bg-secondary);
  border-radius:10px;
  padding:.9rem;
}
.metric-num{ font-size:1.8rem; font-weight:800; color:var(--accent-primary); line-height:1; }
.metric-label{ font-size:.8rem; color:var(--text-secondary); margin-top:.25rem; }
.metrics-note{ margin-top:.75rem; font-size:.8rem; color:var(--text-secondary); }

/* Variants used by the hero partial */
.cta-btn.ghost {
  background: transparent;
  color: var(--accent-primary);
  border-color: var(--accent-primary);
  box-shadow: none;
}
.cta-btn.ghost:hover,
.cta-btn.ghost:focus {
  background: var(--accent-secondary);
  color: var(--text-light);
  border-color: var(--border-primary);
  box-shadow: 0 6px 12px var(--shadow-medium);
}

.cta-btn.secondary {
  background: var(--bg-card);
  color: var(--accent-secondary);
  border-color: var(--border-secondary);
  box-shadow: 0 4px 8px var(--shadow-light);
}
.cta-btn.secondary:hover,
.cta-btn.secondary:focus {
  background: var(--accent-light-gold);
  color: var(--text-light);
  border-color: var(--border-secondary);
  box-shadow: 0 6px 12px var(--shadow-medium);
}