@media (max-width: 760px) {
      .shell { padding: 0 20px; }
      .nav { left: -20px; right: -20px; padding-left: 20px; padding-right: 20px; }
      .logo img { height: 70px; width: auto; }
      .about-hero { display: flex; flex-direction: column; gap: 0; padding: 8px 0 0; }
      .about-hero .about-art { order: -1; height: 220px; margin: 0 0 28px; }
      .about-hero > :first-child { padding-top: 0; }
      .about-hero .crumb { margin: 0 0 20px; font-size: 12px; }
      .about-hero h1 { font-size: 36px; line-height: 1.15; letter-spacing: -0.9px; }
      .about-hero p { margin-top: 16px; font-size: 16px; line-height: 26px; }
      .section { padding: 36px 20px; }
      .section h2 { font-size: 28px; line-height: 1.25; letter-spacing: -0.4px; }
      .proteins .split { display: flex; flex-direction: column; gap: 0; }
      .proteins .split > .reveal { display: contents; }
      .proteins .about-art { order: 1; height: 240px; margin: 0 0 28px; }
      .proteins h2 { order: 2; margin-bottom: 16px; }
      .proteins .split > .reveal:last-child p { order: 3; font-size: 16px; line-height: 26px; }
      .proteins .diagram-caption { order: 4; margin: 20px 0 0; text-align: left; font-size: 14px; line-height: 22px; }
      .chameleon .center-copy,
      .chameleon .center-copy p,
      .types .center-copy,
      .types .center-copy p { max-width: none; margin-left: auto; margin-right: auto; text-align: center; }
      .chameleon .center-copy p,
      .types .center-copy p { font-size: 16px; line-height: 26px; }
      .types { padding-top: 36px; padding-bottom: 8px; }
      .types .center-copy { margin-bottom: 24px; }
      .types .types-stack { min-height: 0; }
      .types .types-pin { position: static; min-height: 0; padding-top: 0; }
      .types .types-stack .types-grid { position: static; height: auto; display: flex; flex-direction: column; gap: 16px; }
      .types .types-stack .type-card { position: relative; left: auto; top: auto; transform: none; width: 100%; height: auto; box-shadow: none; }
      .type-card { height: auto; padding: 24px 22px; border-radius: 10px; }
      .type-card h3 { font-size: 18px; }
      .type-card p { font-size: 15px; line-height: 24px; }
      .rare { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
      .rare > .reveal:not(.stat-display) { display: contents; filter: none; transform: none; opacity: 1; }
      .rare h2 { order: 1; }
      .rare > .reveal:not(.stat-display) > p { order: 2; margin: 0; font-size: 16px; line-height: 26px; }
      .rare .stat-display {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        order: 3; width: 100%; max-width: 100%; margin: 48px 0 28px; padding: 0;
        position: static; text-align: center; overflow: visible;
      }
      .rare .stat-display .big,
      .rare .stat-display .stat-label { position: static; width: 100%; max-width: 100%; text-align: center; }
      .rare .stat-display .big {
        margin: 0; font-size: clamp(28px, 9.2vw, 40px); line-height: 1.15;
        letter-spacing: -0.6px; white-space: nowrap;
      }
      .rare .stat-display .stat-label { margin-top: 8px; font-size: 18px; line-height: 1.4; }
      .rare .btn { order: 4; width: 100%; max-width: none; height: 56px; margin-top: 0; padding: 0 22px; justify-content: space-between; }
      .newsletter { padding-block: 48px; }
      .newsletter h2 { font-size: 28px; }
      .newsletter-form { flex-direction: column; align-items: stretch; gap: 12px; }
      .newsletter input, .newsletter .btn { width: 100%; }
      .footer { padding-top: 36px; }
      .footer-social { display: none; }
      .footer .logo img { display: none; }
      .footer .logo-word { display: block; margin: 0 0 16px; font: 300 32px/1.15 Poppins, sans-serif; color: #3a3a3f; }
      .footer .logo-word span { color: #E6B24A; }
      .footer-grid { grid-template-columns: 1fr; gap: 0; }
      .footer-grid > div:first-child { margin-bottom: 28px; }
      .footer-grid > div:first-child p { margin: 0; max-width: 340px; font: 400 16px/26px Inter, sans-serif; }
      .footer-acc-label { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; padding: 18px 0; border-bottom: 1px solid #e6e6e0; cursor: pointer; pointer-events: auto; }
      .footer-acc-label h3 { margin: 0; font: 500 18px/1.2 Poppins, sans-serif; }
      .footer-acc-label::after { content: ''; width: 8px; height: 8px; border-right: 1.5px solid #3a3a3f; border-bottom: 1.5px solid #3a3a3f; transform: rotate(45deg) translateY(-3px); flex: 0 0 auto; }
      .footer-acc-input:checked + .footer-acc-label::after { transform: rotate(-135deg) translateY(-1px); }
      .footer-acc-panel { display: none; padding: 6px 0 8px; }
      .footer-acc-input:checked ~ .footer-acc-panel { display: block; }
      .footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 28px; border-bottom: 0; }
      .footer-bottom span:last-child { color: #3a3a3f; }
    }

@media (max-width: 760px) {
  .about-hero,
  .about-hero > .reveal,
  .about-hero .about-art,
  .proteins .split,
  .proteins .about-art,
  .proteins .split > .reveal,
  .proteins .split > .reveal > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .about-hero .about-art,
  .proteins .about-art {
    width: 100% !important;
    overflow: hidden;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
  .about-hero .about-art canvas,
  .proteins .about-art canvas {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .proteins .split > .reveal,
  .proteins .split > .reveal > *,
  .rare > .reveal,
  .rare > .reveal > * {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
  .types .types-stack {
    min-height: 0 !important;
    height: auto !important;
  }
  .types .types-pin,
  .types .types-stack .types-grid,
  .types .types-stack .type-card {
    position: static !important;
    top: auto !important;
    left: auto !important;
    height: auto !important;
    min-height: 0 !important;
    transform: none !important;
  }
  .types .types-stack .type-card {
    position: relative !important;
    width: 100% !important;
  }
}