/* Responsive overrides for index.css */
@media (max-width: 768px) {
  /* Hero section */
  .hero-section {
    min-height: 100vh; /* Fill screen exactly on mobile */
    height: 100vh;
    padding-top: 70px; /* Account for header */
  }

  .hero-content {
    padding: 0 20px;
    margin-top: -10vh; /* Visual center adjustment */
    text-align: center;
  }

  .hero-label {
    margin: 0 auto 24px auto;
  }

  .hero-subtitle {
    margin: 0 auto 32px auto;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 16px;
  }

  /* About section */
  .about-grid {
    gap: 32px;
  }

  .about-image {
    width: 100%;
    max-width: 400px;
  }

  .about-text {
    text-align: center;
  }

  .about-text .about-role {
    margin-bottom: 16px;
  }

  .about-text blockquote {
    text-align: left;
    margin: 24px -20px; /* Bleed out on mobile */
    border-radius: 0;
    padding: 20px;
  }

  /* Service card */
  .service-card {
    padding: 24px;
    border-radius: var(--radius-md);
  }

  .service-tags {
    gap: 8px;
  }

  .service-tag {
    font-size: 0.8rem;
    padding: 6px 12px;
  }

  /* Known From Carousel */
  .logos {
    padding: 10px 0;
  }

  .logos-slide img {
    height: 60px; /* Smaller logos on mobile */
    margin: 0 12px;
  }

  .logos::before,
  .logos::after {
    width: 30px;
  }

  /* CTA Section */
  .cta-actions {
    flex-direction: column;
    width: 100%;
  }
  
  .cta-channels {
    gap: 20px;
    flex-direction: column;
  }
}