/* ============================================================
   Contact — editorial expression. Tokens/masthead/footer/.btn/
   .kicker come from home.css (enqueued alongside). ct-* namespace.
   ============================================================ */

:root { --accent-deep: #2F4A31; --line-2: #C7C0B0; }

.ct-hero { padding: 60px 0 30px; background: var(--paper); text-align: left; }
.ct-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 52px;
  line-height: 1.04;
  letter-spacing: -.022em;
  color: var(--ink);
  margin: 10px 0 18px;
}
.ct-sub {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 60ch;
  margin: 0 0 26px;
}
.ct-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.ct-band { padding: 30px 0 64px; background: var(--paper); }
.ct-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.ct-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 26px;
}
.ct-card .kicker { margin-bottom: 8px; }
.ct-card-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -.005em;
  color: var(--ink);
  margin: 0 0 10px;
}
.ct-card-text {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.58;
  color: var(--ink-2);
  margin: 0 0 18px;
}
.ct-email {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 2px;
  transition: color .2s cubic-bezier(.22,.61,.36,1);
}
.ct-email:hover { color: var(--accent-deep); }

@media (max-width: 620px) {
  .ct-grid { grid-template-columns: 1fr; }
  .ct-title { font-size: 38px; }
}