html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

@media (max-width: 980px) {
  body {
    -webkit-text-size-adjust: 100%;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  input,
  select,
  textarea,
  button {
    font-size: 16px;
  }

  header {
    background: rgba(247, 245, 239, 0.98);
  }

  .nav {
    width: calc(100% - 28px);
    gap: 10px;
    padding: 12px 0;
  }

  .logo {
    min-width: 0;
    font-size: 1rem;
  }

  .language-switch {
    margin-left: 0;
    padding: 5px 7px;
    font-size: 0.78rem;
  }

  .nav.nav-open nav ul {
    top: calc(100% + 8px);
    max-height: min(72vh, 520px);
    overflow-y: auto;
  }

  .live-strip {
    width: 100%;
    margin-bottom: 0;
    border-left: 0;
    border-right: 0;
  }

  .live-item {
    min-width: min(82vw, 360px);
    padding: 10px 16px;
  }

  section,
  footer,
  .hero,
  .methods-box,
  .contact-box,
  .wide-card,
  .mur-box,
  .box,
  .report-card {
    max-width: 100%;
  }

  section {
    width: calc(100% - 28px);
    padding: 34px 0;
  }

  section::before {
    letter-spacing: 6px;
    padding: 0 10px;
  }

  .hero {
    width: calc(100% - 28px);
    gap: 24px;
    padding: 34px 0;
  }

  h1,
  .hero h1,
  .section-head h2,
  .methods-box h2,
  .contact-box h2 {
    letter-spacing: 0;
  }

  h1,
  .hero h1 {
    font-size: 3.4rem;
    line-height: 1.02;
  }

  .lead {
    font-size: 1rem;
    line-height: 1.6;
  }

  .hero-actions,
  .donation-buttons,
  .mg-cookie-actions {
    align-items: stretch;
  }

  .hero-actions .btn,
  .donation-buttons a {
    width: 100%;
  }

  .profile-card,
  .card,
  .contact-box,
  .methods-box,
  .wide-card,
  .mur-box,
  .box,
  .report-card {
    border-radius: 18px;
    padding: 18px;
  }

  .card,
  .profile-card,
  .live-item,
  .publication-card,
  .communication-card,
  .service-card,
  .experience-card,
  .method-card,
  .research-card,
  .update-card {
    min-width: 0 !important;
  }

  .grid,
  .hero,
  .hero-grid,
  .communication-grid,
  .support-row,
  .report-dashboard,
  .interests-shell,
  .mission-grid,
  .services-grid,
  .simple-grid,
  .research-grid,
  .updates-grid,
  .profile-links,
  .donation-panel,
  .thanks-grid,
  .contact-box,
  .methods-box,
  .wide-card {
    grid-template-columns: 1fr !important;
  }

  .hero,
  .hero-grid,
  .support-row,
  .profile-links,
  .donation-panel,
  .thanks-grid {
    align-items: stretch;
  }

  .profile-link {
    align-items: flex-start;
  }

  .mur-box-top,
  .mur-bando-top {
    flex-direction: column;
  }

  .mur-badge {
    width: fit-content;
    white-space: normal;
  }

  .upload-dropzone {
    min-height: 150px;
    padding: 28px 16px;
  }

  .upload-icon {
    font-size: 2.2rem;
    line-height: 1;
  }

  .upload-main-text {
    font-size: 1rem;
  }

  .guardian-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .guardian-header,
  .guardian-row {
    min-width: 760px;
  }

  .guardian-row {
    padding: 16px;
  }

  .guardian-profile {
    align-items: center;
  }

  .report-title h2 {
    font-size: 1.6rem;
    line-height: 1.1;
  }

  .report-card,
  .report-section,
  .diagnostic-card,
  .formal-quality,
  .overall-evaluation,
  .corrective-actions,
  .donation-section,
  .code-box,
  .support-card {
    overflow-wrap: anywhere;
  }

  .report-section-title {
    align-items: flex-start;
  }

  pre,
  code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  .btn,
  button,
  input,
  select,
  textarea {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .nav {
    width: calc(100% - 22px);
  }

  .hero,
  section,
  footer {
    width: calc(100% - 22px);
  }

  .hero {
    padding-top: 26px;
  }

  h1,
  .hero h1 {
    font-size: 2.55rem;
  }

  .hero p,
  .lead,
  .section-head p {
    font-size: 0.98rem;
  }

  .eyebrow {
    font-size: 0.75rem;
  }

  .section-head {
    margin-bottom: 24px;
  }

  .section-head h2 {
    font-size: 2.35rem;
  }

  .card,
  .profile-card,
  .box,
  .report-card,
  .contact-box,
  .methods-box,
  .wide-card,
  .mur-box {
    padding: 16px;
  }

  .support-row {
    gap: 14px;
  }

  .guardian-row {
    gap: 12px;
  }

  .guardian-portrait img,
  .guardian-image {
    max-width: 88px;
  }

  .guardian-header,
  .guardian-row {
    min-width: 680px;
  }

  .language-switch {
    transform: scale(0.95);
    transform-origin: right center;
  }

  .mg-cookie-banner {
    left: 10px;
    right: 10px;
    bottom: 10px;
  }
}