@media (max-width: 768px) {
  /* Navigation */
  .nav-logo {
    height: 36px;
  }
  
  .nav-menu {
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    background: var(--color-bg-dark);
    flex-direction: column;
    padding: 30px;
    gap: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }
  
  .nav-menu.active {
    display: flex;
  }
  
  .nav-toggle {
    display: flex;
  }
  
  /* Hero */
  .hero {
    padding: 140px 0 0;
    min-height: auto;
  }
  
  .hero .container {
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 0;
  }
  
  .hero-title {
    font-size: 48px;
    margin-bottom: 0;
    line-height: 1.15;
  }
  
  .hero-title br::before {
    content: ' ';
  }
  
  .hero-title br {
    display: none;
  }
  
  .hero-subtitle {
    font-size: 14px;
    margin-top: 60px;
    padding-bottom: 100px;
    line-height: 1.8;
  }
  
  .hero-subtitle br {
    display: none;
  }
  
  .philosophy-title {
    padding: 140px 0 0;
  }
  
  .philosophy-title .container {
    padding-left: 30px;
    padding-right: 30px;
  }
  
  .philosophy-title .hero-title {
    margin-bottom: 0;
  }
  
  .philosophy-bg {
    min-height: 50vh;
    padding: 60px 0 100px;
  }
  
  .philosophy-bg .container {
    padding-left: 30px;
    padding-right: 30px;
  }
  
  .philosophy-bg .hero-subtitle {
    margin-top: 0;
    padding-bottom: 0;
  }
  
  /* Video Section */
  .video-player {
    height: 40vh;
    min-height: 300px;
  }
  
  .play-button {
    padding: 12px 28px;
  }
  
  .play-text {
    font-size: 10px;
  }
  
  /* Expertise Grid */
  .expertise-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  /* Works Grid */
  .works-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  /* Section Titles */
  .section-title {
    font-size: 36px;
  }
  
  .cta h2 {
    font-size: 36px;
  }
  
  /* Spacing adjustments */
  .intro {
    padding: 80px 0;
  }
  
  .expertise {
    padding: 80px 0;
  }
  
  .works {
    padding: 80px 0;
  }
  
  .cta {
    padding: 100px 0;
  }
  
  /* Container padding */
  .container {
    padding: 0 30px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* Hero */
  .hero-title {
    font-size: 64px;
  }
  
  /* Expertise Grid */
  .expertise-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
  
  /* Works Grid */
  .works-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 35px;
  }
}