/* ============================================
   MOBILE PASS — applies across all pages.
   Breakpoints: 880 (tablet), 640 (phone), 420 (small phone)
   ============================================ */

/* --- Containers / page padding --- */
@media (max-width: 880px) {
  .container { padding: 0 var(--s-5); }
  section { padding: var(--s-7) 0; }
  section.tight { padding: var(--s-5) 0; }
  body { -webkit-text-size-adjust: 100%; }
}
@media (max-width: 640px) {
  .container { padding: 0 var(--s-4); }
  section { padding: var(--s-6) 0; }
}

/* --- Nav --- */
@media (max-width: 640px) {
  .nav {
    top: 14px;
    left: 50%;
    right: auto;
    max-width: calc(100vw - 24px);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a.nav-link {
    padding: 8px 12px;
    font-size: 10px;
    letter-spacing: 0.08em;
    flex-shrink: 0;
  }
}

/* --- Hero (index) --- */
@media (max-width: 880px) {
  .hero { min-height: auto; height: auto; padding: 140px 0 80px; }
  .hero-content { padding: 0 var(--s-5); }
  .hero-title { font-size: clamp(44px, 11vw, 84px); line-height: 0.95; }
  .hero-sub { font-size: 15px; max-width: 92%; }
  .hero-cta { gap: 10px; }
  .hero-cta .btn { padding: 11px 18px; font-size: 11px; }
  .hero-eyebrow { gap: 8px; }
  .hero-stats { display: none; }
}
@media (max-width: 480px) {
  .hero { padding: 120px 0 60px; }
  .hero-title { font-size: clamp(40px, 13vw, 64px); }
  .hero-eyebrow { font-size: 10px; }
  .status-pill, .chip {
    font-size: 10px;
    letter-spacing: 0.06em;
    padding: 5px 10px;
  }
}

/* --- Marquee --- */
@media (max-width: 640px) {
  .marquee { padding: var(--s-4) 0; }
  .marquee-track { gap: var(--s-5); font-size: clamp(22px, 6vw, 32px); }
}

/* --- About grid --- */
@media (max-width: 880px) {
  .about-grid { gap: var(--s-5); }
  .about-grid .lede { font-size: clamp(22px, 5vw, 32px); }
  .about-side .card { padding: var(--s-5); }
}

/* --- Stats / By the numbers --- */
@media (max-width: 880px) {
  .grid-3 .stat { padding: var(--s-4); }
  .stat .num { font-size: clamp(32px, 8vw, 44px); }
  .stat .label { font-size: 10px; line-height: 1.4; }
}
@media (max-width: 640px) {
  /* Two columns of small stats reads better than one giant column */
  .grid-3 { grid-template-columns: repeat(2, 1fr) !important; gap: var(--s-3); }
  .grid-3 .stat { padding: var(--s-3); }
  .stat .num { font-size: clamp(26px, 9vw, 38px); margin-bottom: 4px; }
  .stat .label { font-size: 9px; letter-spacing: 0.06em; }
}

/* --- Work / project cards --- */
@media (max-width: 880px) {
  .project-card .card-media { aspect-ratio: 16/9; margin: var(--s-3); }
  .project-card .card-body { padding: var(--s-2) var(--s-4) var(--s-4); gap: var(--s-3); }
  .project-card .card-title { font-size: clamp(20px, 5vw, 26px); }
  .project-card .card-desc { font-size: 13px; }
  .project-card .card-media .media-glyph { font-size: clamp(36px, 10vw, 56px); }
}

/* --- Approach / 3-up cards --- */
@media (max-width: 880px) {
  .approach .item { padding: var(--s-5); }
  .approach .item h3 { font-size: 20px; }
  .approach .item p { font-size: 14px; }
}

/* --- Contact block --- */
@media (max-width: 640px) {
  .contact-block { padding: var(--s-7) var(--s-3); }
  .contact-block .big { font-size: clamp(36px, 13vw, 64px); margin-bottom: var(--s-4); }
}

/* --- Footer --- */
@media (max-width: 640px) {
  .site-footer { padding: var(--s-6) 0 var(--s-5); margin-top: var(--s-7); }
  .site-footer .container {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .site-footer .t-mono { font-size: 10px; letter-spacing: 0.08em; }
}

/* --- Case-study hero & body --- */
@media (max-width: 880px) {
  .case-hero { padding-top: 110px; padding-bottom: var(--s-7); }
  .case-hero h1 { font-size: clamp(36px, 9vw, 64px) !important; }
  .case-hero .breadcrumb { font-size: 10px; gap: 6px; flex-wrap: wrap; }
  .case-hero-meta { gap: var(--s-4); margin-top: var(--s-5); padding-top: var(--s-4); }
  .case-hero-meta dd { font-size: 13px; }
  .case-section { padding: var(--s-6) 0; }
  .case-section h2 { font-size: clamp(24px, 6vw, 32px); margin-bottom: var(--s-4); }
  .case-section p { font-size: 16px; line-height: 1.65; }
  .numbered-list li { padding: var(--s-3) 0; gap: var(--s-3); }
}
@media (max-width: 480px) {
  .case-hero-meta { grid-template-columns: 1fr 1fr; }
}

/* --- Press cards --- */
@media (max-width: 880px) {
  .press-card { padding: var(--s-5) !important; gap: 10px; }
  .press-card h3 { font-size: clamp(18px, 5vw, 24px) !important; }
  .press-card .summary { font-size: 14px; }
  .press-section + .press-section { margin-top: var(--s-7); }
  .press-section-title h2 { font-size: clamp(22px, 5vw, 30px); }
  .press-section-title { flex-wrap: wrap; gap: 6px; }
  .press-section-title .count { font-size: 10px; }
}

/* --- List / index hero --- */
@media (max-width: 880px) {
  .list-hero { padding-top: 110px !important; }
  .list-hero h1 { font-size: clamp(40px, 11vw, 72px) !important; }
  .list-hero .lede { font-size: 16px !important; }
}

/* --- Resume MBA banner / timeline --- */
@media (max-width: 880px) {
  .mba-banner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--s-4) !important;
    padding: var(--s-5) !important;
  }
  .mba-banner .mba-progress { width: 100%; }
  .mba-banner .mba-progress-bar { width: 100% !important; }
  .mba-banner .mba-text h3 { font-size: clamp(20px, 5vw, 26px) !important; }
}

/* Resume timeline — tighten on mobile */
@media (max-width: 880px) {
  .tl-card { padding: var(--s-4) !important; }
  .tl-card h3 { font-size: clamp(18px, 5vw, 22px) !important; }
  .tl-card .tl-summary { font-size: 14px !important; }
  .tl-org { font-size: 13px !important; }
}

/* --- Section labels & headings --- */
@media (max-width: 640px) {
  .section-label { font-size: 10px; letter-spacing: 0.12em; }
  .section-label::before { width: 16px; }
  .next-link { padding: var(--s-5) var(--s-4); }
  .next-link .title { font-size: clamp(32px, 9vw, 56px); }
}

/* --- Buttons fit small viewports --- */
@media (max-width: 480px) {
  .btn { padding: 10px 16px; font-size: 11px; letter-spacing: 0.08em; }
}

/* --- Prevent horizontal scroll from any rogue element --- */
html, body { overflow-x: hidden; }