/* Mobile responsive overrides */
@media (max-width: 480px) {
  /* Reduce page wrapper padding */
  .page-wrap {
    padding-top: 80px;
    padding-bottom: 40px;
    padding-left: var(--page-side);
    padding-right: var(--page-side);
  }
  /* Hero adjustments */
  .hero {
    padding-top: 100px;
  }
  .hero-name-line .mono-regular,
  .hero-name-line .mono-medium {
    font-size: 17px;
  }
  .hero-name-line {
    gap: 8px;
  }
  /* Project layout */
  .project-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .project-images {
    display: block;
  }
  .project-images img {
    width: 100%;
    height: auto;
  }
  .project-title-row {
    font-size: 15px;
  }
  .btn-primary,
  .btn-case-study {
    font-size: 14px;
  }
  /* Workspace size adjustments */
  .workspace-frame {
    height: 580px !important; /* Fixed height to prevent collapse on mobile */
  }
  .workspace-window {
    width: 100% !important;
    max-width: 300px !important; /* Max width for mobile screen fitting */
    height: 460px !important;   /* Vertically longer */
  }
  /* macOS-style dock adjustments on mobile */
  .workspace-dock {
    gap: 8px !important;
    padding: 6px 10px !important;
    bottom: 8px !important;
  }
  .dock-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
  }
}