/* CASCODE — mobile stability pass */
@media (max-width: 860px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip !important;
  }

  /* The header replaces the desktop side pagination on touch screens. */
  .cascode-pager,
  .cascode-hud,
  .cascode-frame {
    display: none !important;
  }

  .overlay,
  .section,
  .cascode-worlds,
  .cascode-company,
  .cascode-manifesto,
  #portfolio.work,
  #processo.process {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Hero: a complete first screen without desktop's prolonged sticky scroll. */
  #hero.section {
    min-height: 100svh !important;
    padding-inline: 20px !important;
  }

  #hero.section > div {
    position: relative !important;
    top: auto !important;
    min-height: 100svh !important;
    height: auto !important;
    padding: 104px 0 54px;
  }

  #hero .hero__title {
    max-width: 100%;
    font-size: clamp(52px, 16.5vw, 76px) !important;
    line-height: .88 !important;
    overflow-wrap: anywhere;
  }

  #hero .hero__sub {
    max-width: 31ch;
    font-size: 16px !important;
  }

  #hero .actions {
    width: 100%;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #hero .actions .btn {
    width: 100%;
    min-height: 50px;
    justify-content: center;
  }

  /* Keep the 3D passage cinematic, but remove the oversized blank travel. */
  .cascode-hero-tunnel-section {
    height: 125svh !important;
  }

  #servicos.services {
    margin-top: -22svh !important;
    padding: 88px 20px 92px !important;
  }

  #servicos > div {
    padding: 0 !important;
  }

  #servicos .card__desc,
  #servicos .card.is-active .card__desc {
    height: auto !important;
  }

  #servicos .card__meta,
  #servicos .card.is-active .card__meta {
    height: auto !important;
  }

  #servicos .showcase__frame {
    aspect-ratio: 4 / 3;
  }

  .cascode-worlds__tabs-wrap {
    scrollbar-width: none;
  }

  .cascode-worlds__tabs-wrap::-webkit-scrollbar {
    display: none;
  }

  /* Results strip: single-project-width cards, same drag behavior as desktop. */
  #portfolio.work {
    min-height: 0 !important;
    padding: 78px 0 64px !important;
  }

  /* Process uses native document flow on mobile to avoid overlapping steps. */
  #processo.process {
    min-height: 0 !important;
  }

  #processo .process__center {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 96px 20px 105px !important;
    overflow: hidden;
  }

  #processo .section-title {
    max-width: 9ch !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #processo .steps {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    min-height: 0 !important;
    padding-top: 22px !important;
  }

  #processo .steps::after {
    transform: scaleX(1) !important;
  }

  #processo .step {
    position: relative !important;
    inset: auto !important;
    min-height: 0 !important;
    padding: 22px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.1) !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  #processo .step::before {
    display: none !important;
  }

  #processo .step:last-child {
    border-bottom: 0 !important;
  }

  .cascode-process-word {
    right: -12vw;
    top: 46%;
    font-size: 72vw;
    opacity: .5;
    transform: translateY(-50%) !important;
  }

  .cascode-company,
  .cascode-worlds {
    overflow: hidden;
  }

  .cascode-manifesto {
    min-height: 155svh !important;
  }

  #contato.final {
    min-height: 100svh !important;
    padding: 96px 20px 80px !important;
  }

  #contato .final__title {
    max-width: 100%;
    font-size: clamp(46px, 14vw, 66px) !important;
    overflow-wrap: anywhere;
  }

  #contato .actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100%;
  }

  #contato .btn {
    width: 100%;
    justify-content: center;
  }

  .footer {
    width: 100%;
    padding-inline: 20px !important;
    text-align: center;
  }
}

@media (max-width: 420px) {
  #hero .hero__title {
    font-size: clamp(46px, 15.5vw, 64px) !important;
  }

  .cascode-work-intro__title {
    font-size: clamp(43px, 14vw, 60px) !important;
  }

  .cascode-work-film__copy {
    left: 20px !important;
    right: 20px !important;
    bottom: 28px !important;
  }

  .cascode-work-film__copy strong {
    font-size: clamp(32px, 10vw, 44px) !important;
  }
}