/* Shared phone and tablet adjustments. Keep the desktop composition unchanged. */
@media (min-width: 761px) and (max-width: 1100px) {
  .nav { padding-inline: 28px; gap: 20px; }
  .nav nav { gap: 15px; }
  .nav nav a { font-size: 10px; }
  .brand b { font-size: 18px; }
  .hero { grid-template-columns: 54% 46%; min-height: 620px; }
  .hero-copy { padding-left: 6vw; padding-right: 2vw; }
  .hero h1 { font-size: clamp(44px, 6vw, 64px); }
  .hero-intro { font-size: 15px; }
  .block, .ecosystem, .social { padding: 92px 5vw; }
  .block-title { grid-template-columns: .35fr 1fr .8fr; gap: 20px; }
  .block-title h2, .eco-head h2 { font-size: clamp(42px, 5vw, 58px); }
  .project-grid { gap: 14px; }
  .project-media { height: min(42vw, 380px); }
  .project.small .project-media { height: min(35vw, 320px); }
  .workflow { grid-template-columns: repeat(4, 1fr); }
  .workflow > div { min-height: 220px; padding: 20px 16px; }
  .workflow h3 { font-size: 25px; }
  .record { grid-template-columns: 38px 1.5fr .7fr .6fr 30px; }
  footer { padding-inline: 5vw; }
}

@media (max-width: 760px) {
  body { overflow-x: hidden; }
  .nav { position: absolute; }
  .brand b { font-size: 17px; }
  .hero-copy { padding-top: 104px; }
  .hero h1 { max-width: 8em; }
  .hero-intro { max-width: 34em; }
  .actions { flex-wrap: wrap; }
  .actions .pill { min-height: 44px; }
  .hero-art { pointer-events: none; }
  .block-title p, .eco-head p { max-width: none; }
  .project-info { gap: 12px; align-items: flex-start; }
  .project-info h3 { font-size: 21px; }
  .workflow { gap: 0; }
  .workflow > div { min-height: 190px; padding: 18px 14px; }
  .workflow h3 { font-size: 24px; }
  .workflow p { line-height: 1.55; }
  .search input { min-width: 0; width: 100%; }
  .statement p { max-width: 11em; }
  footer { gap: 26px; }
}

@media (max-width: 420px) {
  .brand span { margin-right: 8px; }
  .brand b { font-size: 15px; }
  .hero { min-height: 700px; }
  .hero-copy { padding-inline: 18px; }
  .hero h1 { font-size: 39px; }
  .hero-intro { font-size: 14px; }
  .block, .ecosystem, .social { padding-inline: 16px; }
  .project-media, .project.small .project-media { height: 270px; }
  .workflow { grid-template-columns: 1fr; }
  .workflow > div { min-height: auto; border-right: 0; border-bottom: 1px solid #9fb7b0; }
  .workflow > div:last-child { border-bottom: 0; }
  .social-feed article { min-width: 195px; }
}