body {
  margin: 0;
  /* Avoid forcing extra height beyond header padding; let main control height */
  background: radial-gradient(circle at top, #ffffff 0%, #f5f5f7 60%, #ebebef 100%);
  color: #1d1d1f;
}

.contact {
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem;
  /* With body as flex column, let this fill remaining height without calc */
  flex: 1 0 auto;
  min-height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

h1 { margin: 1.5rem 0 0.75rem; font-size: clamp(2rem, 5vw, 3rem); font-weight: 600; }

p { color: rgba(29,29,31,0.75); margin: 0 auto 1.25rem; }

.call {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  border: 1px solid rgba(29,29,31,0.15);
  background: #1d1d1f;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

.call:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(0,0,0,0.12); }

@media (prefers-color-scheme: dark) {
  body { background: linear-gradient(160deg, #1d1d1f 0%, #2b2b30 100%); color: #f5f5f7; }
  p { color: rgba(245, 245, 247, 0.8); }
  .call { background: #f5f5f7; color: #1d1d1f; }
}