/* =====================================================
   RESPONSIVE LADDER
   Breakpoints (max-width):
     900 - tablet portrait + small laptops
     768 - large phones / tablets
     700 - timeline collapse
     600 - phones
     480 - small phones
     380 - extra-narrow / iPhone SE
   Each block is grouped by component for fast scanning.
   ===================================================== */


/* =====================================================
   <= 900px : Tablet portrait
   ===================================================== */
@media (max-width: 900px) {
  /* About */
  .about-grid { grid-template-columns: 1fr; }
  .about-visual {
    aspect-ratio: 3 / 4;
    min-height: 0;
    height: auto;
    max-width: 540px;
  }

  /* Section rhythm: tighten vertical air on tablets and below */
  section { padding: clamp(4rem, 8vw, 6rem) 0; }
}


/* =====================================================
   <= 880px : Mobile nav swap-in (matches JS breakpoint)
   ===================================================== */
@media (max-width: 880px) {
  .nav-links { display: none; }
  .nav-socials { display: none; }
  .nav-quick { display: inline-flex; }
  .nav-toggle { display: inline-flex; }
  .nav-logo .mmr-logo { height: 52px; }

  /* Mobile nav layout: switch to flex with space-between.
     With only three visible children of equal-sized side items,
     this is more reliable than grid for keeping the logo centered
     and side icons inside the viewport, regardless of any quirks in
     iOS Safari / Brave with grid + position:fixed. */
  nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .nav-quick,
  .nav-toggle {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
  }
  .nav-logo { flex: 0 0 auto; }
}


/* =====================================================
   <= 800px : Footer / Connect stacks
   ===================================================== */
@media (max-width: 800px) {
  .connect-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: start;
  }
}


/* =====================================================
   <= 768px : Larger phones / small tablets
   ===================================================== */
@media (max-width: 768px) {
  /* Hero: tighten the inner stack */
  .hero { height: auto; min-height: clamp(560px, 92vh, 800px); }
  .hero-inner {
    /* Longhand so .container horizontal padding is preserved. */
    padding-top: clamp(6rem, 14vh, 8rem);
    padding-bottom: clamp(1.25rem, 3vh, 2rem);
    row-gap: clamp(1rem, 2.5vh, 2rem);
  }
  .hero-headline { gap: clamp(0.85rem, 2vh, 1.5rem); }

  /* Hero video: small viewport scales the frame down, so let more of it
     come through and lighten the top-down overlay. Headline gets a soft
     shadow to preserve legibility against the brighter footage. */
  .hero-video {
    opacity: 0.55;
    filter: grayscale(0.1) brightness(0.95) contrast(1.05);
  }
  .hero::before {
    background:
      radial-gradient(ellipse at 75% 35%, rgba(31, 182, 255, 0.18) 0%, transparent 55%),
      radial-gradient(ellipse at 5% 90%, rgba(31, 182, 255, 0.10) 0%, transparent 50%),
      linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.70) 100%);
  }
  .hero h1 { text-shadow: 0 2px 14px rgba(0,0,0,0.45); }

  /* Timeline: pull prose closer to the rail */
  .timeline-track { padding-left: clamp(1.5rem, 4vw, 2.5rem); }

  /* Footer headline can shrink a touch */
  .connect-title { font-size: clamp(2.6rem, 12vw, 5rem); }
}


/* =====================================================
   <= 700px : Timeline milestone collapses to single column
   ===================================================== */
@media (max-width: 700px) {
  .milestone {
    grid-template-columns: 1fr;
    gap: 0.6rem;
    padding: 1.5rem 0 2rem;
  }

  /* Reposition the skewed dot so it aligns with the year label
     on a single-column milestone instead of the gutter between columns. */
  .milestone::before {
    top: 1.85rem;
    left: calc(clamp(0.4rem, 1.2vw, 1rem) - clamp(1.5rem, 4vw, 2.5rem));
  }

  .milestone-year {
    font-size: 1.55rem;
  }
  .milestone-year .span {
    margin-top: 0.35rem;
  }
}


/* =====================================================
   <= 600px : Phones
   ===================================================== */
@media (max-width: 600px) {
  /* ---- Hero ---- */
  /* Sized so "MICHAEL" fills ~70-75% of phone viewport width. */
  .hero h1 { font-size: clamp(2.75rem, 17vw, 5.75rem); }
  .hero-tag .mono { font-size: 0.65rem; letter-spacing: 0.16em; }

  .hero-ctas { gap: 0.6rem; }
  .hero-ctas .btn-line {
    flex: 1 1 auto;
    justify-content: center;
    padding: 0.85rem 0.75rem;
    letter-spacing: 0.16em;
    font-size: 0.68rem;
  }

  /* Compact 2x2 meta block instead of 4 stacked rows */
  .hero-meta {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem 1.25rem;
    padding-top: 1rem;
  }
  .hero-meta-item .value { font-size: 1.15rem; }
  .hero-meta-item .label { font-size: 0.62rem; letter-spacing: 0.18em; }

  /* ---- About ---- */
  .about-grid { gap: 2rem; }
  .about-copy h2 { font-size: clamp(2rem, 8vw, 2.6rem); }
  .driver-card { grid-template-columns: 1fr; padding: 1.25rem; gap: 1rem; }

  /* ---- Section title (Career, Partners) ---- */
  .section-title { font-size: clamp(2.2rem, 9vw, 3.5rem); margin-bottom: 2rem; }

  /* ---- Timeline ---- */
  .timeline-track { padding-left: 1.25rem; }
  .timeline::before { display: none; } /* kill big "CAREER" ghost to prevent any overflow */
  .milestone::before {
    left: calc(clamp(0.4rem, 1.2vw, 1rem) - 1.25rem);
    width: 10px;
    height: 10px;
  }
  .milestone-content p { font-size: 0.95rem; line-height: 1.65; }
  .milestone-content .achievements { gap: 0.4rem; margin-top: 0.85rem; }
  .milestone-content .achievements span { font-size: 0.6rem; padding: 0.3rem 0.55rem; }

  /* ---- Mantra ---- */
  .mantra-text { font-size: clamp(1.85rem, 8vw, 2.6rem); max-width: 16ch; }
  .mantra-attr { margin-top: 1.25rem; font-size: 0.65rem; }

  /* ---- Partners ---- */
  .partner-grid { grid-template-columns: 1fr; }
  .partner-cell--primary {
    aspect-ratio: 16 / 9;
    margin-top: 0;
    border-top: 1px solid rgba(31, 182, 255, 0.35);
  }
  .partner-cell { padding: 1.5rem; }
  .partner-cell--primary .partner-name { font-size: 1.6rem; }

  .partners-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
    margin-top: 2rem;
  }
  .partners-cta p { max-width: none; }
  .partners-cta .btn-line {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }

  /* ---- Global footer ---- */
  .connect-title { font-size: clamp(2.4rem, 13vw, 4rem); }
  .footer-ctas .btn-line {
    flex: 1 1 100%;
    justify-content: center;
  }
  .site-footer .bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 3rem;
  }
}


/* =====================================================
   <= 480px : Small phones
   ===================================================== */
@media (max-width: 480px) {
  .nav-logo .mmr-logo { height: 44px; }

  /* Hero CTAs stack on the smallest phones to keep tap targets large */
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn-line { width: 100%; }

  /* Section eyebrow scales down */
  .section-eyebrow .num { font-size: 0.62rem; }

  /* Footer socials list */
  .socials a { font-size: 1.15rem; }
  .socials a .handle { font-size: 0.62rem; }
}


/* =====================================================
   <= 380px : Extra-narrow / iPhone SE 1st gen
   ===================================================== */
@media (max-width: 380px) {
  .hero h1 { font-size: 17vw; }
  .hero-meta-item .value { font-size: 1rem; }
}