/* ================================
   HAMBURGER BUTTON (hidden desktop)
   ================================ */

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  position: relative;
  z-index: 201;
  flex-shrink: 0;
}

.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: #fff;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ================================
   GLOBAL — prevent horizontal overflow
   ================================ */

html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ================================
   MOBILE BREAKPOINT
   ================================ */

@media (max-width: 768px) {

  /* ================================
     NAV
     ================================ */

  nav {
    padding: 1rem 1.5rem !important;
    align-items: center !important;
    overflow: visible;
  }

  .nav-toggle {
    display: flex;
    order: 1;
  }

  .nav-logo {
    top: 0 !important;
    order: 2;
  }

  .nav-logo img {
    height: 48px !important;
    max-width: none;
  }

  /* Nav links become full-screen overlay */
  .nav-links {
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(8, 8, 8, 0.98);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    display: none !important;
    z-index: 200;
    margin: 0;
    padding: 0;
    order: 3;
  }

  .nav-links.is-open {
    display: flex !important;
  }

  .nav-links a {
    font-size: 2rem !important;
    letter-spacing: 0.3em !important;
  }

  /* Hamburger → X */
  .nav-toggle.is-open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .nav-toggle.is-open span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle.is-open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* ================================
     HERO
     ================================ */

  .hero {
    padding: 2rem 1.5rem 3rem !important;
    min-height: auto !important;
  }

  .hero-main {
    margin-top: 8rem !important;
  }

  .hero-title {
    font-size: 16vw !important;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .hero-eyebrow {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.15em !important;
  }

  .hero-sub {
    flex-direction: column !important;
    gap: 7rem !important;
    margin-top: 4rem !important;
    align-items: flex-start !important;
  }

  .hero-tagline {
    font-size: 1.15rem !important;
    max-width: 100% !important;
  }

  .hero-stats {
    gap: 2rem !important;
  }

  .stat-num {
    font-size: 2rem !important;
  }

  .scroll-hint {
    display: none !important;
  }

  /* ================================
     DIVIDER
     ================================ */

  .divider {
    margin: 0 1.5rem !important;
  }

  /* ================================
     REEL
     ================================ */

  .reel-section {
    padding: 0 1.5rem !important;
  }

  /* ================================
     SECTION HEADERS
     ================================ */

  .section-header {
    padding: 3rem 1.5rem 1.5rem !important;
    flex-wrap: wrap;
    gap: 0.5rem !important;
  }

  /* ================================
     PROJECTS
     ================================ */

  .projects {
    padding: 0 1.5rem 3rem !important;
    display: flex !important;
    flex-direction: column !important;
    columns: unset !important;
  }

  /* Reorder top row: MK2 → The Bluff → Elvis */
  .projects .project-card:nth-child(1)  { order: -3; } /* MK2 */
  .projects .project-card:nth-child(7)  { order: -2; } /* The Bluff */
  .projects .project-card:nth-child(13) { order: -1; } /* Elvis */

  /* On touch devices, show title/type + links at bottom edge */
  .project-overlay {
    transform: translateY(18%) !important;
  }

  .project-links {
    max-height: none !important;
    opacity: 1 !important;
  }

  .project-desc {
    display: none !important;
  }

  .why-word {
    display: block !important;
  }

  /* ================================
     CREDENTIALS (4-block quadrant)
     ================================ */

  .credentials {
    grid-template-columns: 1fr !important;
    padding: 0 !important;
    gap: 1px !important;
  }

  .cred-block {
    padding: 2.5rem 1.5rem !important;
  }

  .cred-icon {
    font-size: 2.2rem !important;
  }

  .cred-img-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1.5rem !important;
  }

  .cred-img-row img {
    height: 80px !important;
    width: auto !important;
  }

  /* ================================
     FOOTER
     ================================ */

  footer {
    padding: 3rem 1.5rem !important;
  }

  /* ================================
     CONTACT PAGE
     ================================ */

  .contact-body {
    grid-template-columns: 1fr !important;
  }

  .contact-info {
    border-right: none !important;
    border-bottom: 1px solid #2a2a2a !important;
    padding: 3rem 1.5rem !important;
  }

  .contact-form-wrap {
    padding: 3rem 1.5rem !important;
  }

  .form-row {
    grid-template-columns: 1fr !important;
  }

  /* ================================
     ABOUT / LEADERSHIP PAGE
     ================================ */

  .profile {
    grid-template-columns: 1fr !important;
  }

  .profile-image-col {
    height: 55vh !important;
  }

  .profile-content {
    padding: 3rem 1.5rem !important;
  }

  .credits-grid {
    grid-template-columns: 1fr !important;
  }

  /* ================================
     PAGE HEADERS (about, contact, careers)
     ================================ */

  .page-header {
    padding: 7rem 1.5rem 3rem !important;
  }

  .page-header::before {
    display: none !important;
  }

}