/* =========================================================
   BLACKBOX — Responsive overrides (load last on every page)
   ========================================================= */

@media (max-width: 980px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .two-col, .contact-grid, .projects-row, .projects-intro-row { grid-template-columns: 1fr; gap: 36px; }
  .projects-left { max-width: none; }
  .projects-heading { font-size: 48px; line-height: 1.15; }
  .project-feature-num { font-size: 5rem; line-height: 1; }
  .service-intro-row { grid-template-columns: 1fr; gap: 20px; }
  .service-carousel { padding: 0 46px; }
  .service-carousel .carousel-arrow { width: 42px; height: 42px; font-size: 1rem; }
  .mission-grid { grid-template-columns: 1fr; gap: 34px; }
  .mission-item { border-left: none; padding-left: 0; border-top: 1px solid var(--c-line); padding-top: 24px; }
  .mission-item:first-child { border-top: none; padding-top: 0; }
  .service-row .row-inner, .service-row.reverse .row-inner { grid-template-columns: 1fr; }
  .service-row .row-inner .service-copy, .service-row .row-inner .media { order: 0; }
  .service-detail-row { grid-template-columns: 1fr; gap: 30px; }
  .project-row, .project-row.reverse { grid-template-columns: 1fr; }
  .project-row.reverse .project-media, .project-row.reverse .project-copy { order: 0; }
  .clients-grid { grid-template-columns: repeat(3, 1fr); }
  .vision { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 760px) {
  .site-header {
    width: calc(100% - 32px);
    max-width: none;
    top: 14px;
    height: 66px;
    padding: 0 18px;
  }
  .site-header.is-solid { top: 0; }
  .hero {
    width: 100vw;
    max-width: 100vw;
  }
  .nav { position: fixed; top: 0; right: -100%; width: 80%; max-width: 340px; height: 100vh;
    background: var(--c-dark); flex-direction: column; padding: 100px 30px 30px; transition: right 0.3s ease; z-index: 99; }
  .nav.is-open { right: 0; }
  .nav-list { flex-direction: column; align-items: flex-start; gap: 22px; width: 100%; }
  .has-dropdown .dropdown { position: static; transform: none; opacity: 1; visibility: visible; display: none; margin-top: 10px; min-width: 100%; }
  .has-dropdown.is-open .dropdown { display: block; }
  .nav-toggle { display: flex; }
  .nav-cta { display: none; }
  .footer-top { grid-template-columns: 1fr; padding: 50px 24px; }
  .section { padding: 64px 0; }
  .contact-grid { padding: 50px 0; }
  .clients-grid { grid-template-columns: repeat(2, 1fr); }
  .journey-heading { font-size: 28px; }
  .journey-pin-wrapper { height: auto; }
  .journey-pin-inner { position: static; height: auto; overflow: visible; padding: 20px 0; }
  .journey-stage { grid-template-columns: 1fr; text-align: center; gap: 30px; }
  .journey-stage-left, .journey-stage-right { text-align: center; }
  .journey-stage-left p { margin-left: auto; margin-right: auto; }
  .journey-photo { margin: 0 auto; }
  .journey-line-col { display: none; }
  .journey-frame { margin: 0 auto; }
}

/* Use the collapsed navigation on small tablets and Android landscape screens
   as well as phones. */
@media (max-width: 900px) {
  .nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(80vw, 340px);
    max-width: 340px;
    height: 100vh;
    background: var(--c-dark);
    flex-direction: column;
    align-items: stretch;
    padding: 100px 30px 30px;
    transition: right 0.3s ease;
    z-index: 99;
  }
  .nav.is-open { right: 0; }
  .nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    width: 100%;
  }
  .nav-toggle { display: flex; }
  .nav-cta { display: none; }
}


/* =========================================================
   MOBILE FIXES — stop sideways scrolling & oversized text
   ========================================================= */

/* Huge decorative numbers/headings: scale with the screen instead of fixed px */
@media (max-width: 980px) {
  .vision-big { font-size: clamp(64px, 20vw, 130px); line-height: 0.9; }
  .project-index,
  .project-feature-num { font-size: clamp(64px, 20vw, 110px); line-height: 1; }
  .projects-heading { font-size: clamp(2.1rem, 9vw, 3rem); line-height: 1.15; }
  .service-hero-intro h2 { font-size: clamp(2rem, 8vw, 3rem); }
  .team-stat-num { font-size: clamp(3rem, 14vw, 5rem); line-height: 1; }
  .journey-heading { font-size: clamp(1.5rem, 6vw, 2.4rem); line-height: 1.35; }

  /* Slide-in reveals start 60px off-screen sideways -> that created the white
     area you could swipe into. Use a vertical reveal on small screens. */
  [data-reveal="left"],
  [data-reveal="right"] { transform: translateY(28px); }
  [data-reveal].is-visible { transform: none; }
}

@media (max-width: 760px) {
  /* Buttons were nowrap + side by side = wider than the phone */
  .btn { white-space: normal; text-align: center; padding: 14px 26px; }
  .services-cta { flex-direction: column; align-items: stretch; gap: 14px; padding: 56px 24px; }
  .services-cta .btn { width: 100%; }

  /* Keep long words/titles inside the screen */
  h1, h2, h3, h4, p, a, li { overflow-wrap: anywhere; }
  .vision-text { max-width: 100%; }
}