@media (max-width: 1100px) {
  h1 {
    font-size: 3rem;
  }

  h2 {
    font-size: 2.2rem;
  }

  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .three-column {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-grid,
  .split-section,
  .impact-grid,
  .story-wrapper,
  .final-cta-box,
  .footer-grid,
  .about-hero-grid,
  .vm-grid,
  .why-grid,
  .programs-hero-grid,
  .commitment-grid,
  .contact-hero-grid,
  .contact-main-grid,
  .notes-grid,
  .stories-hero-grid,
  .featured-story-grid,
  .values-wrapper,
  .story-layout,
  .involved-hero-grid,
  .support-grid,
  .resources-hero-grid,
  .purpose-grid,
  .request-wrapper {
    grid-template-columns: 1fr;
  }

  .values-grid,
  .program-area-grid,
  .story-card-grid,
  .partner-grid,
  .resource-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .how-grid,
  .notes-points,
  .values-points,
  .support-points,
  .purpose-points {
    grid-template-columns: repeat(2, 1fr);
  }

  .final-cta-box {
    display: grid;
  }

  .request-wrapper {
    display: grid;
  }
}

@media (max-width: 860px) {
  .main-nav {
    position: absolute;
    top: 88px;
    left: 0;
    width: 100%;
    background-color: var(--color-surface);
    padding: 24px;
    border-bottom: 1px solid var(--color-border);
    display: none;
  }

  .main-nav.active {
    display: block;
  }

  .main-nav .nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .menu-toggle {
    display: flex;
  }

  .header-cta {
    display: none;
  }

  .hero-section,
  .about-hero,
  .programs-hero,
  .contact-hero,
  .stories-hero,
  .story-page-hero,
  .involved-hero,
  .resources-hero {
    padding-top: 50px;
  }

  .hero-visual,
  .about-hero-visual,
  .programs-hero-visual,
  .contact-hero-visual,
  .stories-hero-visual,
  .involved-hero-visual,
  .resources-hero-visual {
    min-height: 360px;
  }

  .section-spacing {
    padding: 80px 0;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  h1 {
    font-size: 2.3rem;
  }

  h2 {
    font-size: 1.8rem;
  }

  .hero-text,
  .about-hero-text,
  .programs-hero-text,
  .contact-hero-text,
  .stories-hero-text,
  .involved-hero-text,
  .resources-hero-text,
  p {
    font-size: 0.98rem;
  }

  .card-grid,
  .three-column,
  .impact-points,
  .values-grid,
  .why-points,
  .program-area-grid,
  .how-grid,
  .notes-points,
  .story-card-grid,
  .values-points,
  .partner-grid,
  .support-points,
  .resource-card-grid,
  .purpose-points {
    grid-template-columns: 1fr;
  }

  .hero-card-main,
  .main-about-card,
  .main-program-card,
  .main-contact-card,
  .main-stories-card,
  .main-involved-card,
  .main-resources-card {
    max-width: 100%;
    padding: 28px 22px;
  }

  .top-card,
  .mid-card,
  .bottom-card,
  .top-about-chip,
  .mid-about-chip,
  .bottom-about-chip,
  .top-program-chip,
  .mid-program-chip,
  .bottom-program-chip,
  .top-contact-chip,
  .mid-contact-chip,
  .bottom-contact-chip,
  .top-stories-chip,
  .mid-stories-chip,
  .bottom-stories-chip,
  .top-involved-chip,
  .mid-involved-chip,
  .bottom-involved-chip,
  .top-resources-chip,
  .mid-resources-chip,
  .bottom-resources-chip {
    position: static;
    margin-top: 14px;
  }

  .hero-visual,
  .about-hero-visual,
  .programs-hero-visual,
  .contact-hero-visual,
  .stories-hero-visual,
  .involved-hero-visual,
  .resources-hero-visual {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: 24px;
    min-height: 360px;
  }

  .contact-info-panel,
  .contact-form-panel {
    padding: 28px 22px;
  }

  .final-cta-box,
  .request-wrapper {
    padding: 40px 24px;
  }

  .story-hero-image {
    height: 300px;
  }

  .story-article {
    padding: 28px 22px;
  }

  .logo {
    width: 125px;
  }

  .footer-logo {
    width: 120px;
  }

  .section-spacing {
    padding: 70px 0;
  }
}