/* ============================================================
   DAN&ELATON — Responsive Styles
   ============================================================ */

/* ============================================================
   1280px — Large tablets / small desktops
   ============================================================ */

@media (max-width: 1280px) {
  .tech-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 3rem;
  }
}

/* ============================================================
   1024px — Tablets landscape
   ============================================================ */

@media (max-width: 1024px) {
  :root {
    --section-padding: 5.5rem 1.5rem;
  }

  /* Nav */
  .nav-links { display: none; }

  .hamburger {
    display: flex;
    z-index: 1001;
  }

  /* Hero */
  .hero-title {
    font-size: clamp(2.6rem, 7vw, 4rem);
  }

  .hero-rotating-line {
    font-size: clamp(2.2rem, 6vw, 3.5rem);
  }

  /* About */
  .about-grid {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  .about-text .section-title::after { width: 40%; }

  /* Services */
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Tech */
  .tech-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Contact */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }

  .footer-brand {
    grid-column: span 2;
    max-width: 100%;
  }
}

/* ============================================================
   768px — Tablets portrait / large mobile
   ============================================================ */

@media (max-width: 768px) {
  :root {
    --section-padding: 4.5rem 1.25rem;
  }

  /* Nav */
  .nav { padding: 1.25rem 1.5rem; }
  .nav.scrolled { padding: 0.875rem 1.5rem; }
  .nav-actions .btn { display: none; }

  /* Hero */
  .hero-eyebrow { letter-spacing: 0.2em; }

  .hero-ctas {
    flex-direction: column;
    align-items: center;
  }

  .hero-ctas .btn { width: 100%; max-width: 300px; justify-content: center; }

  /* Trusted By */
  .trusted-by { padding: 3rem 0; }

  /* About */
  .about-stats { grid-template-columns: 1fr 1fr; }

  /* Services */
  .services-grid { grid-template-columns: 1fr; }

  /* Experience */
  .experience-grid { grid-template-columns: 1fr; }

  /* Tech */
  .tech-grid { grid-template-columns: repeat(3, 1fr); }

  /* CTA */
  .cta-banner { padding: 5.5rem 1.5rem; }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .footer-brand {
    grid-column: auto;
    max-width: 100%;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }

  /* Form */
  .form-row {
    grid-template-columns: 1fr;
  }

  .contact-form-wrapper { padding: 2rem; }
}

/* ============================================================
   480px — Mobile
   ============================================================ */

@media (max-width: 480px) {
  :root {
    --section-padding: 4rem 1.25rem;
  }

  /* Hero */
  .hero-title {
    font-size: clamp(2.2rem, 9vw, 3rem);
  }

  .hero-rotating-line {
    font-size: clamp(1.9rem, 8vw, 2.6rem);
  }

  .hero-description { font-size: 0.95rem; }

  /* Stats */
  .about-stats { grid-template-columns: 1fr 1fr; }
  .stat-number { font-size: 2rem; }

  /* Tech */
  .tech-grid { grid-template-columns: repeat(2, 1fr); }

  /* Section titles */
  .section-title { font-size: clamp(1.7rem, 6vw, 2.2rem); }

  /* CTA Banner */
  .cta-banner-title { font-size: clamp(1.6rem, 6vw, 2rem); }

  /* Nav */
  .nav { padding: 1rem 1.25rem; }

  /* Mobile menu links */
  .mobile-menu a { font-size: 1.5rem; }
}

/* ============================================================
   375px — Small mobile
   ============================================================ */

@media (max-width: 375px) {
  .hero-eyebrow { display: none; }

  .about-stats { grid-template-columns: 1fr; }

  .tech-grid { grid-template-columns: repeat(2, 1fr); }

  .btn { padding: 0.75rem 1.5rem; font-size: 0.85rem; }

  .contact-form-wrapper { padding: 1.5rem; }
}

/* ============================================================
   New sections — HELIOS, Manifesto, Case Studies
   ============================================================ */

@media (max-width: 1024px) {
  .helios-body { grid-template-columns: 1fr; gap: 3rem; }
  .helios-capabilities { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .helios-capabilities { grid-template-columns: repeat(2, 1fr); }
  .manifesto-section { padding: 5rem 1.5rem; }
  .manifesto-quote { font-size: clamp(1rem, 4vw, 1.3rem); }
}

@media (max-width: 480px) {
  .helios-capabilities { grid-template-columns: 1fr 1fr; }
  .project-metrics { gap: 0.4rem; }
  .agent-card { padding: 1.25rem; }
}