#social-hero {
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 40px 20px;
  position: relative;
}

#social-hero .container {
  width: 100%;
  color: #fff;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

#social-hero h1 { margin-bottom: 20px; }
#social-hero p { max-width: 640px; margin-bottom: 30px; }

@media (max-width: 768px) {
  #social-hero { min-height: 100svh; min-height: 100vh; padding: 60px 20px; }
  #social-hero h1 { font-size: clamp(32px, 5vw, 48px); margin-bottom: 16px; }
  #social-hero p { font-size: 16px; line-height: 1.5; margin-bottom: 24px; }
}

@media (max-width: 520px) {
  #social-hero { padding: 40px 16px; }
  #social-hero h1 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 12px; }
  #social-hero p { font-size: 14px; margin-bottom: 20px; }
  .btn { width: 100%; }
}

.section-spacer { height: 56px; }

#about .social-about-title { color: #5c3d8f; }

#social-projects .campaign-card::after {
  background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.45) 48%, rgba(0,0,0,.14) 100%);
}
#social-projects .campaign-card--text { background: #fff; color: #0e141b; border-color: rgba(0,0,0,.12); cursor: default; }
#social-projects .campaign-card--text::after { opacity: 0; }
#social-projects .campaign-copy { position: relative; z-index: 2; width: min(86%, 340px); display: grid; place-items: center; gap: 10px; margin: 0 auto; text-align: center; }
#social-projects .campaign-note { color: #3d2660; font-size: clamp(13px, 1.05vw, 16px); line-height: 1.45; }
#social-projects .campaign-card--text .campaign-label { color: #0e141b; }

@media (max-width: 768px) { .section-spacer { height: 36px; } }