@media (max-width: 900px) {
  :root { --orilla: 24px; }
  .site-bar__nav { display: none; }
  .menu-button { display: block; }
  .mobile-talk { position: fixed; left: 16px; right: 16px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 80; display: flex; min-height: 54px; align-items: center; justify-content: space-between; padding: 0 20px; background: var(--ambar); color: var(--noche); font-weight: 800; text-decoration: none; }
  .scene-name { min-height: 100svh; padding-top: 100px; }
  .scene-name h1 { top: 23%; font-size: clamp(4rem, 17.5vw, 6.5rem); }
  .scene-name__axis { display: none; }.scene-name__orb--desktop { display: none; }.scene-name__orb--mobile { display: block; width: 75vw; height: 75vw; left: 13vw; top: 15%; }
  .scene-name__promise { left: var(--orilla); right: var(--orilla); bottom: 20%; max-width: 25ch; white-space: normal; font-size: 16px; }.scene-name__place { top: auto; right: auto; left: var(--orilla); bottom: 11%; }.scroll-cue { display: none; }
  .scene-turn { min-height: 100svh; padding-block: 110px 95px; }.scene-turn__copy { gap: 90px; }.strike-line, .turn-answer { font-size: clamp(2.2rem, 10.8vw, 4rem); }.strike-line { margin-left: 0; }.turn-answer { margin-right: 0; max-width: 11ch; }.turn-sheet { width: 65vw; left: 23%; top: 26%; }
  .scene-method { min-height: 100svh; padding-block: 100px 90px; }.scene-heading { display: block; }.scene-heading .text-link { margin-top: 20px; }.system-stage { height: 510px; min-height: 0; margin-top: 38px; }.system-node { display: block; }.system-node p { margin-top: 11px; font-size: 11px; }.system-node strong { font-size: 13px; }.system-node--search { top: 1%; left: 7%; right: auto; }.system-node--choose { top: 22%; left: auto; right: 2%; }.system-node--record { left: 7%; bottom: 3%; }.system-node--reply { right: 2%; bottom: 0; }.draw-search { width: 58px; height: 58px; }.draw-search::after { width: 25px; right: -18px; bottom: -5px; }.draw-button { width: 108px; height: 47px; }.draw-record { width: 70px; height: 88px; }.draw-record::after { left: 50px; }.draw-record i:nth-child(2) { top: 67px; }.draw-reply { width: 86px; height: 63px; }.lead-chip { width: 54px; height: 54px; }
  .scene-barbea { min-height: 0; display: block; padding-block: 100px 95px; }.barbea-copy h2 { max-width: 12ch; }.barbea-lead { font-size: 16px; }.phone-wrap { margin-top: 48px; }.phone { width: min(100%, 390px); min-width: 0; margin-inline: auto; }.barbea-video { width: 100%; margin-top: 42px; }.barbea-links { margin-top: 24px; }
  .scene-work { min-height: 0; padding-block: 100px 110px; }.work-intro { grid-template-columns: 72px 1fr; align-items: start; }.work-intro img { width: 68px; }.work-intro > .text-link { grid-column: 2; justify-self: start; }.work-grid { grid-template-columns: 1fr; gap: 64px; margin-top: 64px; }.browser-shot { aspect-ratio: 16 / 10; }.mobile-shot { width: min(76%,280px); aspect-ratio: 9 / 14; }.work-card--pina { min-height: 240px; }.work-all { margin-top: 60px; }
  .scene-final { min-height: 0; display: block; }.about-panel { display: flex; min-height: 100svh; flex-direction: column-reverse; align-items: flex-start; justify-content: center; padding-block: 100px; }.about-panel img { width: 58%; margin-left: auto; }.about-panel h2 { max-width: 12ch; }.close-panel { display: block; min-height: 85svh; padding-block: 110px; }.close-panel .primary-cta { margin-top: 48px; }.contact-channels { margin-top: 70px; flex-direction: column; gap: 2px; }
  .data-grid { grid-template-columns: 1fr; }.data-grid > div { min-height: 180px; }.site-footer { grid-template-columns: 1fr; padding-bottom: 115px; }.next-work { min-height: 150px; }.process-step { grid-template-columns: 1fr; min-height: 0; gap: 25px; }.process-object { justify-self: start; }.portfolio-grid { grid-template-columns: 1fr; }.portfolio-item { min-height: 420px; }.case-media { grid-template-columns: 1fr; }.device-mobile { max-width: 260px; }.barbea-case { grid-template-columns: 1fr; }.barbea-case .phone-wrap { position: static; }.about-story { grid-template-columns: 1fr; }.about-story img { position: static; width: 65%; margin-left: auto; }.page-actions { align-items: stretch; flex-direction: column; }.page-actions .text-link { align-self: flex-start; }
}

@media (max-width: 420px) {
  :root { --orilla: 22px; }
  .scene-name h1 { font-size: 17.5vw; }
  .scene-name__promise { left: var(--orilla); }
  .scene h2, .page-shell h1, .page-section h2 { font-size: clamp(2.2rem, 10.7vw, 3.2rem); }
  .phone { min-height: 570px; border-width: 7px; border-radius: 40px; }.phone-ready .phone { height: 570px; }
  .phone-screen { padding-inline: 21px; }.phone-screen h3 { font-size: 29px; }.number-grid > span { min-height: 98px; }
  .work-intro { gap: 20px; }.work-card h3 { font-size: 2.1rem; }.mobile-shot { width: min(78%,280px); }
  .about-panel p { font-size: 16px; }.close-panel h2 { font-size: 11vw; }
  .contact-channels a, .footer-channels a { overflow-wrap: anywhere; }
  .portfolio-item { min-height: 380px; padding: 25px; }.portfolio-preview { height: 190px; }
}

@media (min-width: 901px) and (max-height: 760px) {
  .scene-name h1 { top: 22%; font-size: 9.4vw; }
  .phone-ready .phone { height: 560px; min-height: 540px; }.phone-screen { padding-top: 26px; }.notice-card { margin-top: 50px; }
  .scene-barbea { min-height: 140svh; padding-block: 8vh; }.barbea-video { width: 390px; }
}