/* About page — mobile layout fixes (<=767px) */
@media (max-width: 767px) {
  /* Hero */
  .page-hero-green { height: auto; min-height: 420px; padding: 2.25rem 0; }
  .page-hero-green .container { padding-left: 1.25rem; padding-right: 1.25rem; }
  .page-hero-green h1 { font-size: 2.25rem; line-height: 1.15; margin-bottom: 1.25rem; }
  .page-hero-green p.text-xl { font-size: 1rem; line-height: 1.6; }
  .page-hero-green span.uppercase { margin-bottom: 0.75rem; font-size: 0.75rem; }

  /* All main sections — tighter horizontal + vertical padding */
  main > section { padding-left: 1.25rem; padding-right: 1.25rem; }
  main > section.py-24 { padding-top: 2.75rem; padding-bottom: 2.75rem; }
  main > section.py-32 { padding-top: 3rem; padding-bottom: 3rem; }

  /* Mission bento grid — cards */
  main section .grid.md\:grid-cols-12 { gap: 1.25rem; }
  main section .grid.md\:grid-cols-12 > .md\:col-span-8,
  main section .grid.md\:grid-cols-12 > .md\:col-span-4,
  main section .grid.md\:grid-cols-12 > .md\:col-span-5 {
    padding: 1.75rem;
    border-radius: 1.5rem;
  }
  main section .grid.md\:grid-cols-12 > .md\:col-span-5 { min-height: auto; }
  /* Image block — give it intrinsic mobile height (on desktop it stretches via grid) */
  main section .grid.md\:grid-cols-12 > .md\:col-span-7 {
    border-radius: 1.5rem;
    min-height: 240px;
  }
  main section .grid.md\:grid-cols-12 > .md\:col-span-7 > div.absolute { padding: 1.5rem; }
  main section .grid.md\:grid-cols-12 > .md\:col-span-7 h3 { font-size: 1.5rem; }

  /* Mission bento grid — typography */
  main section .grid.md\:grid-cols-12 h2 { font-size: 1.875rem; margin-bottom: 1rem; }
  main section .grid.md\:grid-cols-12 p.text-2xl { font-size: 1.125rem; line-height: 1.55; margin-bottom: 1.5rem; }
  main section .grid.md\:grid-cols-12 .text-5xl { font-size: 2.5rem; }
  main section .grid.md\:grid-cols-12 .mb-12 { margin-bottom: 1.5rem; }
  main section .grid.md\:grid-cols-12 .mb-8 { margin-bottom: 1.25rem; }
  main section .grid.md\:grid-cols-12 .mb-6 { margin-bottom: 0.875rem; }
  main section .grid.md\:grid-cols-12 .bg-secondary-container { padding: 0.4rem 0.75rem; font-size: 0.75rem; }
  main section .grid.md\:grid-cols-12 .material-symbols-outlined.text-5xl { font-size: 2.5rem; margin-bottom: 1rem; }

  /* Editorial team section */
  #editorial-core .mb-16 { margin-bottom: 2rem; }
  #editorial-core h2 { font-size: 1.875rem; margin-bottom: 0.75rem; }
  #editorial-core p.text-lg { font-size: 1rem; }
  #editorial-core .grid.md\:grid-cols-3 { gap: 2rem; }
  #editorial-core .aspect-\[4\/5\] { border-radius: 1.5rem; margin-bottom: 1.25rem; }
  #editorial-core h4.text-2xl { font-size: 1.25rem; }
  #editorial-core button { padding: 0.75rem 1.25rem; font-size: 0.875rem; align-self: flex-start; }
  #editorial-core .flex.md\:flex-row { gap: 1.25rem; }

  /* CTA section */
  main > section.py-32 > .max-w-5xl { padding: 2rem 1.5rem; border-radius: 1.5rem; }
  main > section.py-32 h2 { font-size: 1.625rem; margin-bottom: 1.25rem; line-height: 1.25; }
  main > section.py-32 p.text-xl { font-size: 1rem; margin-bottom: 1.75rem; }
  main > section.py-32 a { padding: 0.875rem 1.5rem; font-size: 1rem; }

  /* Footer — clear the fixed mobile bottom nav */
  footer { padding-bottom: 5rem; }
}