/* Targeted mobile UI/UX refinements */
@media (max-width: 768px) {
  /* Portfolio hover section */
  .portfolio-hover-wrapper { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
  .portfolio-image-preview { height: 220px !important; order: -1 !important; border-radius: 12px !important; overflow: hidden !important; box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important; }
  .portfolio-image-container { border-radius: 12px !important; overflow: hidden !important; }
  .portfolio-preview-img { object-fit: cover !important; width: 100% !important; height: 100% !important; display: block !important; }
  .portfolio-list { gap: 0 !important; max-height: none !important; }
  .portfolio-item { padding: 0 !important; border-radius: 8px !important; }
  .portfolio-item-content { padding: 1rem 0 !important; }
  .portfolio-title { font-size: var(--type-md) !important; line-height: 1.3 !important; }
  .portfolio-item[aria-selected="true"] .portfolio-title { color: #DD0215 !important; }

  /* Global spacing tighten */
  .section { padding: 3.5rem 0 !important; }
  .hero { min-height: 75vh !important; padding-bottom: 2rem !important; }

  /* Services cards layout */
  .services-gradient-section .grid { gap: 1rem !important; }
  .service-card { min-height: auto !important; }

  /* Work page spacing */
  .work-project { padding: 2rem 0 !important; }
  .work-project-inner { gap: 1.5rem !important; }
  .work-project-content h3 { font-size: var(--type-lg) !important; }
  .work-image-container { height: 300px !important; }

  /* Start Project form tweaks */
  .start-project-hero { padding-top: 7rem !important; padding-bottom: 2.5rem !important; }
  .start-project-hero h1 { margin-bottom: 0.75rem !important; }
  .start-project-hero p { margin-bottom: 0 !important; }
  /* Remove mobile box styling for the form */
  .contact-form-section .project-form { border-radius: 0 !important; box-shadow: none !important; border: none !important; padding: 0 !important; }
  .contact-wrapper { gap: 1.5rem !important; }
  .contact-info-card { border-radius: 12px !important; }
  .contact-info-card h2 { margin-bottom: 0.5rem !important; }
  .contact-info-card p { margin-bottom: 1rem !important; }
  .contact-info, .contact-info-card { text-align: center !important; }
  .contact-item { justify-content: center !important; }
  .contact-item > div { text-align: center !important; }
  /* Remove bullet dots and center list items */
  .contact-info-card ul { list-style: none !important; padding-left: 0 !important; }
  .contact-info-card ul li { margin: 0.35rem 0 !important; }
  .project-form { gap: 1.25rem !important; }
  .project-form .grid { gap: 0.75rem !important; }
  .project-form .form-group { margin-bottom: 0.75rem !important; }
  .project-form .form-input, .project-form .form-textarea, .project-form select { padding: 12px 14px !important; }
  .project-form .form-textarea { min-height: 140px !important; }
  .budget-option .budget-label { padding: 8px 12px !important; border-radius: 9999px !important; }

  /* Shorter visual image break between hero and form */
  .about-image-section { height: 300px !important; min-height: 300px !important; }
  .web-design-development-image-section { height: 300px !important; min-height: 300px !important; }

  /* Tighter section intro for the form area */
  .contact-form-section .text-center { margin-bottom: 1.25rem !important; }
  .contact-form-section h2 { margin-bottom: 0.75rem !important; }
  .contact-form-section p { margin-bottom: 0 !important; }
}