/* ============================================================
   PBOS Site — Mobile + Wide-Desktop hardening
   Compatible 320px → 1440px+
   ============================================================ */

/* ── Universal box hygiene ── */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}
*, *::before, *::after { box-sizing: border-box; }

img, video, svg { max-width: 100%; height: auto; }

/* Long words / urls never blow out columns */
p, h1, h2, h3, h4, h5, h6, li, a, span, em, strong, blockquote {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ── 1440px+ Comfortable wide ── */
@media (min-width: 1441px) {
  .container { max-width: 1280px !important; margin-left: auto !important; margin-right: auto !important; }
  nav { max-width: 1392px; margin-left: auto; margin-right: auto; }
  .hero, .marquee-bar, .timeline-section, .portrait-section,
  .cta-section, .card-section, .why-section, .stage-section,
  .problem-section, .who-section, .testimonials-section,
  .story-section, .mission-section, .values-section,
  .offer-section, .founder-section, .roles-section,
  .perks-section, .investment-section, footer {
    max-width: 1392px; margin-left: auto !important; margin-right: auto !important;
  }
}

/* ── ≤ 1024px: hide desktop nav bits ── */
@media (max-width: 1024px) {
  .nav-links, .nav-question { display: none !important; }
  .nav-hamburger { display: flex !important; }
}

/* ── ≤ 880px: timeline + portrait collapse ── */
@media (max-width: 880px) {
  /* Origin timeline cluster fallbacks */
  .timeline-image-stack .timeline-image-row {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .timeline-image-cluster { grid-template-columns: 1fr 1fr !important; }
}

/* ── ≤ 600px: timeline image stacks become single column ── */
@media (max-width: 600px) {
  .timeline-image-stack .timeline-image-row {
    grid-template-columns: 1fr 1fr !important;
  }
  .timeline-image-stack .timeline-image-row .timeline-image {
    aspect-ratio: 4/5 !important;
  }
  .timeline-image-cluster {
    grid-template-columns: 1fr !important;
  }
  .timeline-image-cluster .timeline-image:first-child,
  .timeline-image-cluster .timeline-image {
    grid-column: auto !important;
    aspect-ratio: 4/5 !important;
  }
}

/* ── ≤ 480px: tighten paddings / type ── */
@media (max-width: 480px) {
  nav { padding: 0 12px !important; height: 56px !important; }
  .nav-left img { width: 32px !important; height: 32px !important; }
  .nav-cta { font-size: 12px !important; padding: 8px 14px !important; }
  .nav-question { display: none !important; }
  .nav-links { display: none !important; }

  /* Body padding + readable type */
  .container { padding-left: 16px !important; padding-right: 16px !important; }
  h1, .hero-headline { font-size: clamp(26px, 8.5vw, 40px) !important; line-height: 1.1 !important; }
  h2 { font-size: clamp(22px, 6.5vw, 32px) !important; line-height: 1.15 !important; }
  h3 { font-size: clamp(18px, 5vw, 24px) !important; }

  /* Hero on origin / about */
  .hero { padding: 56px 20px 40px !important; margin: 72px 12px 12px !important; }

  /* Timeline tight */
  .timeline-chapter { padding: 0 16px !important; margin-bottom: 48px !important; }
  .timeline-chapter-num { font-size: 38px !important; }
  .timeline-headline { font-size: 20px !important; }
  .timeline-body { font-size: 14px !important; line-height: 1.7 !important; }
  .timeline-pull { font-size: 15px !important; }
  .timeline-end-headline { font-size: clamp(26px, 7vw, 36px) !important; }

  /* Marquee less screamy */
  .marquee-inner { font-size: 11px !important; gap: 36px !important; letter-spacing: 2px !important; }
  .marquee-inner span { gap: 36px !important; }

  /* Grids collapse */
  .culture-grid, .perks-grid, .values-grid,
  .offer-steps, .roles-grid, .stage-grid,
  .why-grid, .problem-grid, .programs-grid,
  .footer-links { grid-template-columns: 1fr !important; }

  /* Footer wraps cleanly */
  footer { padding: 28px 20px !important; flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
  .footer-links { gap: 14px !important; flex-wrap: wrap !important; }

  /* CTA breathing */
  .cta-section { padding: 56px 20px !important; }
  .btn-primary { font-size: 13px !important; padding: 14px 26px !important; letter-spacing: 0.5px !important; }
}

/* ── ≤ 360px: extra tight (small Androids) ── */
@media (max-width: 360px) {
  nav { padding: 0 10px !important; }
  .nav-cta { font-size: 11px !important; padding: 7px 12px !important; }
  .container { padding-left: 14px !important; padding-right: 14px !important; }
  h1, .hero-headline { font-size: clamp(22px, 8vw, 32px) !important; }
  .timeline-chapter { padding: 0 12px !important; }
  .timeline-chapter-num { font-size: 32px !important; }
}

/* ── ≤ 320px: minimum spec ── */
@media (max-width: 320px) {
  nav { padding: 0 8px !important; }
  .nav-cta { font-size: 11px !important; padding: 6px 10px !important; letter-spacing: 0 !important; }
  .container { padding-left: 12px !important; padding-right: 12px !important; }
  .hero { padding: 48px 14px 32px !important; margin: 64px 8px 8px !important; }
  .marquee-bar, .timeline-section, .portrait-section,
  .cta-section, footer { margin-left: 8px !important; margin-right: 8px !important; }
  .timeline-chapter { padding: 0 10px !important; }
  .timeline-headline { font-size: 18px !important; }
  .timeline-body { font-size: 13px !important; }
  .btn-primary { font-size: 12px !important; padding: 12px 22px !important; }
  .timeline-image-stack .timeline-image-row {
    grid-template-columns: 1fr !important;
  }
}