/* ============================================
   MOBILE RESPONSIVE STYLES - MODERN DESIGN
   Optimized for mobile devices
   ============================================ */

@media (max-width: 768px) {
  /* Navigation */
  nav {
    padding: var(--spacing-sm);
  }

  /* Mobile Menu Button */
  #mobile-menu-btn {
    font-size: 1.5rem;
    padding: var(--spacing-xs);
  }

  /* Mobile Logo */
  .logo-mobile {
    max-height: 50px;
    width: auto;
  }

  /* Mobile Navigation Menu */
  #mobile-menu {
    background: rgba(10, 14, 39, 0.98);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* Mobile Navigation Links */
  .mobile-nav-link {
    padding: var(--spacing-md);
    font-size: 1rem;
  }

  /* Container Padding */
  .container {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
  }

  /* Typography Adjustments */
  h1 {
    font-size: 1.75rem;
    line-height: 1.3;
  }

  h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.25rem;
  }

  /* Hero Section */
  .hero-section-new {
    padding: var(--spacing-xl) 0;
  }

  .hero-heading-block {
    gap: var(--spacing-md);
  }

  .hero-accent-bars {
    flex-direction: row;
    gap: var(--spacing-xs);
  }

  .hero-accent-bars .accent-bar {
    width: 60px;
    height: 8px;
  }

  .hero-heading {
    font-size: 1.5rem;
    line-height: 1.3;
  }

  .hero-subtext {
    font-size: 16px;
  }

  .hero-buttons {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .hero-buttons .hero-cta-button {
    width: 100%;
    padding: 1rem 2rem;
  }

  /* Client Logos */
  .client-logos-section {
    padding: var(--spacing-md) var(--spacing-sm);
  }

  .client-logos-container {
    gap: var(--spacing-md);
    justify-content: center;
  }

  .client-logo {
    max-height: 40px;
  }

  /* Section Headings */
  .section-heading {
    font-size: 1.5rem;
  }

  .section-subtitle {
    font-size: 0.95rem;
  }

  /* Cards and Grids */
  .challenges-grid,
  .programs-grid,
  .benefits-table {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .challenge-column,
  .program-column,
  .benefit-column {
    padding: var(--spacing-md);
  }

  /* Methodology */
  .methodology-grid {
    grid-template-columns: 1fr;
  }

  .methodology-stage {
    padding: var(--spacing-md);
  }

  /* About Us */
  .about-intro-container,
  .about-focus-container,
  .about-connect-container {
    padding: var(--spacing-md);
  }

  .about-intro-text,
  .about-focus-text,
  .about-specialization-text {
    font-size: 1.125rem;
  }

  /* Contact Form */
  .contact-form-section,
  .contact-question-section,
  .contact-alternative-section {
    padding: var(--spacing-md);
  }

  .contact-form-grid {
    grid-template-columns: 1fr;
  }

  .contact-form-input,
  .contact-form-textarea {
    padding: 0.875rem;
    font-size: 1rem;
  }

  .contact-submit-btn {
    width: 100%;
    padding: 1rem 2rem;
  }

  /* Footer */
  .footer-container {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    padding: var(--spacing-lg) 0 var(--spacing-md);
    text-align: center;
  }

  .footer-brand {
    grid-column: 1;
  }

  .footer-bottom-content {
    flex-direction: column;
    text-align: center;
  }

  /* Buttons */
  .section-buttons,
  .philosophy-buttons {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .section-buttons .hero-cta-button,
  .philosophy-buttons .hero-cta-button {
    width: 100%;
  }

  /* Lead Program */
  .lead-learning-grid,
  .lead-design-grid {
    grid-template-columns: 1fr;
  }

  .lead-learning-item,
  .lead-design-item {
    padding: var(--spacing-md);
  }

  /* Design Philosophy crisp: stack on mobile */
  .philosophy-crisp .philosophy-block-crisp {
    flex-direction: column;
    padding: var(--spacing-md);
  }

  .philosophy-crisp .philosophy-block-crisp .accent-bar {
    width: 100%;
    height: 4px;
  }

  .philosophy-crisp .philosophy-title-crisp {
    font-size: 1.25rem;
  }

  /* Lead CTA box: stack text + buttons */
  .lead-cta-box {
    flex-direction: column;
    padding: var(--spacing-md);
  }

  .lead-cta-box .accent-bar {
    width: 100%;
    height: 4px;
  }

  .lead-cta-content {
    flex-direction: column;
    align-items: stretch;
  }

  .lead-cta-content .philosophy-buttons .hero-cta-button,
  .lead-cta-content .hero-cta-button {
    width: 100%;
  }

  /* Journeys programs: single column */
  .journeys-programs-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
  }

  .journeys-program-box {
    padding: var(--spacing-md);
  }

  /* Impact Section */
  .impact-section {
    flex-direction: column;
    padding: var(--spacing-md);
  }

  .impact-section .decorative-bar {
    width: 100%;
    height: 4px;
  }

  .impact-statement {
    font-size: 1rem;
  }

  .impact-statement-bold {
    font-size: 1.125rem;
  }

  .journey-cta-text {
    font-size: 1.125rem;
  }

  /* Story Sections */
  .story-challenge-container,
  .story-solution-container {
    padding: var(--spacing-md);
  }

  /* Testimonials */
  .testimonial-boxes-grid {
    grid-template-columns: 1fr;
  }

  .testimonial-box {
    padding: var(--spacing-md);
  }

  /* Videos */
  .videos-grid {
    grid-template-columns: 1fr;
  }

  /* Message Modal */
  .message-content {
    padding: var(--spacing-lg);
    width: 95%;
  }
}

@media (max-width: 480px) {
  /* Extra Small Devices */
  html, body {
    overflow-x: hidden;
  }

  .container {
    padding-left: var(--spacing-xs);
    padding-right: var(--spacing-xs);
    max-width: 100%;
  }

  h1 {
    font-size: 1.75rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.25rem;
  }

  .hero-heading {
    font-size: 1.75rem;
  }

  .hero-subtext {
    font-size: 16px;
  }

  .section-heading {
    font-size: 1.5rem;
  }

  .client-logo {
    max-height: 35px;
  }

  .challenge-column,
  .program-column,
  .benefit-column {
    padding: var(--spacing-sm);
  }

  .column-title,
  .program-title,
  .benefit-title {
    font-size: 1.25rem;
  }

  .contact-page-title {
    font-size: 1.75rem;
  }

  .contact-section-heading {
    font-size: 1.25rem;
  }

  .contact-form-label {
    font-size: 0.95rem;
  }

  .contact-form-input,
  .contact-form-textarea {
    padding: 0.75rem;
    font-size: 0.95rem;
  }

  .footer-logo {
    max-height: 60px;
  }

  .hero-accent-bars .accent-bar {
    width: 50px;
    height: 6px;
  }
  
  .heading-with-accent .accent-bar {
    width: 100%;
    height: 3px;
  }
}

/* Landscape Orientation */
@media (max-width: 768px) and (orientation: landscape) {
  .hero-section-new {
    padding: var(--spacing-lg) 0;
  }

  .hero-heading {
    font-size: 2rem;
  }

  .hero-subtext {
    font-size: 16px;
  }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
  .nav-link,
  .mobile-nav-link,
  button,
  .btn,
  .hero-cta-button {
    min-height: 44px;
    min-width: 44px;
  }
}